/* ===== admin.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g900:#1a3a0a;--g800:#2d5c14;--g700:#3d7a1c;--g600:#4e9a24;
  --g500:#6abf35;--g400:#8CC63F;--g300:#a8d960;--g200:#d4f0a0;
  --g100:#E8F5D9;--g50:#f7fdf0;--amber:#FF9800;--amber-light:#fff3df;
  --red:#EF4444;--red-light:#FEE2E2;--blue:#2563EB;--blue-light:#DBEAFE;
  --text:#1a1a1a;--text2:#555;--text3:#999;--border:#e8e8e8;--white:#fff;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:9px;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#f5f5f0;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
button{border:0}
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;font-family:'Playfair Display',serif;box-shadow:0 2px 8px rgba(78,154,36,.35)}
.logo-text{font-size:20px;font-weight:700;color:var(--g800);letter-spacing:-.3px}.logo-text span{color:var(--g500)}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);transition:.2s}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--g700)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--g100);border:1px solid var(--g300);color:var(--g800);font-size:12px;font-weight:800;white-space:nowrap}
.btn-login,.btn-primary{padding:10px 18px;border-radius:var(--radius-sm);background:var(--g700);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover,.btn-primary:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,122,28,.25)}
.btn-outline{padding:10px 16px;border-radius:var(--radius-sm);background:white;border:1.5px solid var(--border);color:var(--text2);font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-outline:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#d97706}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-blue{background:var(--blue);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px}
.page-hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500));color:white}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.10),transparent 32%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 36%)}
.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:42px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;min-width:150px}
.hero-pill strong{display:block;font-size:22px;color:var(--g300)}.hero-pill span{font-size:12px;color:rgba(255,255,255,.75)}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:800;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--text3)}.small{font-size:12px}.price{color:var(--amber);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--g100);color:var(--g700);font-size:12px;font-weight:800}
.badge-warn{background:#fffbeb;color:#92400e}.badge-red{background:var(--red-light);color:#b91c1c}.badge-blue{background:var(--blue-light);color:#1e40af}
.table-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid #f1f1f1;text-align:left;font-size:14px}th{background:var(--g50);color:var(--g800);font-weight:800}tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}.icon-box{width:48px;height:48px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field label{font-size:13px;font-weight:800;color:var(--text2)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--g50);outline:none;font-size:14px;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--g400);background:white;box-shadow:0 0 0 4px var(--g100)}
.footer{background:var(--g900);color:rgba(255,255,255,.75);padding:40px 24px;margin-top:40px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
.hidden-by-role{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);background:var(--g800);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:.28s;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.hero-inner{align-items:flex-start;flex-direction:column}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-right .nav-link{display:none}.container{padding:22px 16px}nav{padding:0 16px}.card:hover{transform:none}.role-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:600px){.logo-text{font-size:18px}.btn-login{padding:9px 12px}.hero-inner{padding:30px 16px}.hero-actions{width:100%}.hero-pill{flex:1}.actions{flex-direction:column}.actions button,.actions a{width:100%}.role-badge{display:none}}


.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.tab{padding:11px 16px;border:1.5px solid var(--border);border-radius:12px;background:white;font-weight:800;color:var(--text2);cursor:pointer;transition:.2s}.tab:hover,.tab.active{background:var(--g700);border-color:var(--g700);color:white}.tab-panel{display:none}.tab-panel.active{display:block}.table-tile{background:var(--g50);border:1.5px solid var(--g200);border-radius:14px;padding:18px;text-align:center}.table-tile.busy{background:#fffbeb;border-color:#fcd34d}.table-tile strong{font-size:24px;color:var(--g800);display:block;margin-bottom:4px}

/* ===== create-dish.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g900:#1a3a0a;--g800:#2d5c14;--g700:#3d7a1c;--g600:#4e9a24;
  --g500:#6abf35;--g400:#8CC63F;--g300:#a8d960;--g200:#d4f0a0;
  --g100:#E8F5D9;--g50:#f7fdf0;--amber:#FF9800;--amber-light:#fff3df;
  --red:#EF4444;--red-light:#FEE2E2;--blue:#2563EB;--blue-light:#DBEAFE;
  --text:#1a1a1a;--text2:#555;--text3:#999;--border:#e8e8e8;--white:#fff;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:9px;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#f5f5f0;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
button{border:0}
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;font-family:'Playfair Display',serif;box-shadow:0 2px 8px rgba(78,154,36,.35)}
.logo-text{font-size:20px;font-weight:700;color:var(--g800);letter-spacing:-.3px}.logo-text span{color:var(--g500)}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);transition:.2s}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--g700)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--g100);border:1px solid var(--g300);color:var(--g800);font-size:12px;font-weight:800;white-space:nowrap}
.btn-login,.btn-primary{padding:10px 18px;border-radius:var(--radius-sm);background:var(--g700);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover,.btn-primary:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,122,28,.25)}
.btn-outline{padding:10px 16px;border-radius:var(--radius-sm);background:white;border:1.5px solid var(--border);color:var(--text2);font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-outline:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#d97706}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-blue{background:var(--blue);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px}
.page-hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500));color:white}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.10),transparent 32%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 36%)}
.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:42px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;min-width:150px}
.hero-pill strong{display:block;font-size:22px;color:var(--g300)}.hero-pill span{font-size:12px;color:rgba(255,255,255,.75)}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:800;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--text3)}.small{font-size:12px}.price{color:var(--amber);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--g100);color:var(--g700);font-size:12px;font-weight:800}
.badge-warn{background:#fffbeb;color:#92400e}.badge-red{background:var(--red-light);color:#b91c1c}.badge-blue{background:var(--blue-light);color:#1e40af}
.table-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid #f1f1f1;text-align:left;font-size:14px}th{background:var(--g50);color:var(--g800);font-weight:800}tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}.icon-box{width:48px;height:48px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field label{font-size:13px;font-weight:800;color:var(--text2)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--g50);outline:none;font-size:14px;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--g400);background:white;box-shadow:0 0 0 4px var(--g100)}
.footer{background:var(--g900);color:rgba(255,255,255,.75);padding:40px 24px;margin-top:40px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
.hidden-by-role{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);background:var(--g800);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:.28s;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.hero-inner{align-items:flex-start;flex-direction:column}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-right .nav-link{display:none}.container{padding:22px 16px}nav{padding:0 16px}.card:hover{transform:none}.role-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:600px){.logo-text{font-size:18px}.btn-login{padding:9px 12px}.hero-inner{padding:30px 16px}.hero-actions{width:100%}.hero-pill{flex:1}.actions{flex-direction:column}.actions button,.actions a{width:100%}.role-badge{display:none}}


.preview{background:linear-gradient(135deg,var(--g100),var(--g50));border:1.5px dashed var(--g300);border-radius:18px;min-height:230px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--g800);gap:10px}.preview span{font-size:70px}.form-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ===== index.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g900:#1a3a0a;--g800:#2d5c14;--g700:#3d7a1c;--g600:#4e9a24;
  --g500:#6abf35;--g400:#8CC63F;--g300:#a8d960;--g200:#d4f0a0;
  --g100:#E8F5D9;--g50:#f7fdf0;--amber:#FF9800;--amber-light:#fff3df;
  --red:#EF4444;--red-light:#FEE2E2;--blue:#2563EB;--blue-light:#DBEAFE;
  --text:#1a1a1a;--text2:#555;--text3:#999;--border:#e8e8e8;--white:#fff;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:9px;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#f5f5f0;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
button{border:0}
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;font-family:'Playfair Display',serif;box-shadow:0 2px 8px rgba(78,154,36,.35)}
.logo-text{font-size:20px;font-weight:700;color:var(--g800);letter-spacing:-.3px}.logo-text span{color:var(--g500)}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);transition:.2s}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--g700)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--g100);border:1px solid var(--g300);color:var(--g800);font-size:12px;font-weight:800;white-space:nowrap}
.btn-login,.btn-primary{padding:10px 18px;border-radius:var(--radius-sm);background:var(--g700);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover,.btn-primary:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,122,28,.25)}
.btn-outline{padding:10px 16px;border-radius:var(--radius-sm);background:white;border:1.5px solid var(--border);color:var(--text2);font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-outline:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#d97706}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-blue{background:var(--blue);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px}
.page-hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500));color:white}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.10),transparent 32%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 36%)}
.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:42px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;min-width:150px}
.hero-pill strong{display:block;font-size:22px;color:var(--g300)}.hero-pill span{font-size:12px;color:rgba(255,255,255,.75)}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:800;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--text3)}.small{font-size:12px}.price{color:var(--amber);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--g100);color:var(--g700);font-size:12px;font-weight:800}
.badge-warn{background:#fffbeb;color:#92400e}.badge-red{background:var(--red-light);color:#b91c1c}.badge-blue{background:var(--blue-light);color:#1e40af}
.table-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid #f1f1f1;text-align:left;font-size:14px}th{background:var(--g50);color:var(--g800);font-weight:800}tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}.icon-box{width:48px;height:48px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field label{font-size:13px;font-weight:800;color:var(--text2)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--g50);outline:none;font-size:14px;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--g400);background:white;box-shadow:0 0 0 4px var(--g100)}
.footer{background:var(--g900);color:rgba(255,255,255,.75);padding:40px 24px;margin-top:40px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
.hidden-by-role{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);background:var(--g800);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:.28s;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.hero-inner{align-items:flex-start;flex-direction:column}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-right .nav-link{display:none}.container{padding:22px 16px}nav{padding:0 16px}.card:hover{transform:none}.role-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:600px){.logo-text{font-size:18px}.btn-login{padding:9px 12px}.hero-inner{padding:30px 16px}.hero-actions{width:100%}.hero-pill{flex:1}.actions{flex-direction:column}.actions button,.actions a{width:100%}.role-badge{display:none}}


.hero-home{min-height:78vh;border-radius:0;background:linear-gradient(160deg,var(--g900) 0%,var(--g700) 55%,var(--g500) 100%);display:flex;align-items:center;color:white;position:relative;overflow:hidden}.hero-home::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.10),transparent 35%),radial-gradient(circle at 10% 80%,rgba(255,255,255,.08),transparent 35%)}.home-inner{position:relative;max-width:1280px;margin:0 auto;padding:60px 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}.home-title{font-family:'Playfair Display',serif;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.06;margin-bottom:20px}.home-title span{color:var(--g300)}.home-sub{font-size:16px;line-height:1.75;color:rgba(255,255,255,.82);max-width:580px;margin-bottom:28px}.home-card{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);border-radius:24px;padding:26px;box-shadow:var(--shadow-lg)}.preview-item{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;margin-bottom:10px}.preview-emoji{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:24px}.preview-name{font-weight:800}.preview-price{color:var(--g300);font-size:13px;font-weight:800}.section{padding:68px 24px}.section .container{padding:0}.section-title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3vw,2.7rem);color:var(--g800);margin-bottom:12px}.dish-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:28px}.dish-card{background:white;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);transition:.22s}.dish-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.dish-img{height:150px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:58px}.dish-info{padding:16px}.dish-info h3{font-size:16px;margin-bottom:6px}.table-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:28px}.table-tile{text-align:center;padding:18px;border-radius:16px;background:var(--g50);border:1.5px solid var(--g200)}.table-tile.busy{background:#fffbeb;border-color:#fcd34d}.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:28px}.step-card{background:white;border:1px solid var(--g200);border-radius:18px;padding:24px;text-align:center}.step-no{width:50px;height:50px;border-radius:16px;background:var(--g100);color:var(--g700);font-family:'Playfair Display',serif;font-size:24px;font-weight:900;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}@media(max-width:900px){.home-inner{grid-template-columns:1fr}.hero-home{min-height:auto}}

/* ===== invoice.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g900:#1a3a0a;--g800:#2d5c14;--g700:#3d7a1c;--g600:#4e9a24;
  --g500:#6abf35;--g400:#8CC63F;--g300:#a8d960;--g200:#d4f0a0;
  --g100:#E8F5D9;--g50:#f7fdf0;--amber:#FF9800;--amber-light:#fff3df;
  --red:#EF4444;--red-light:#FEE2E2;--blue:#2563EB;--blue-light:#DBEAFE;
  --text:#1a1a1a;--text2:#555;--text3:#999;--border:#e8e8e8;--white:#fff;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:9px;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#f5f5f0;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
button{border:0}
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;font-family:'Playfair Display',serif;box-shadow:0 2px 8px rgba(78,154,36,.35)}
.logo-text{font-size:20px;font-weight:700;color:var(--g800);letter-spacing:-.3px}.logo-text span{color:var(--g500)}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);transition:.2s}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--g700)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--g100);border:1px solid var(--g300);color:var(--g800);font-size:12px;font-weight:800;white-space:nowrap}
.btn-login,.btn-primary{padding:10px 18px;border-radius:var(--radius-sm);background:var(--g700);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover,.btn-primary:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,122,28,.25)}
.btn-outline{padding:10px 16px;border-radius:var(--radius-sm);background:white;border:1.5px solid var(--border);color:var(--text2);font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-outline:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#d97706}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-blue{background:var(--blue);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px}
.page-hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500));color:white}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.10),transparent 32%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 36%)}
.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:42px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;min-width:150px}
.hero-pill strong{display:block;font-size:22px;color:var(--g300)}.hero-pill span{font-size:12px;color:rgba(255,255,255,.75)}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:800;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--text3)}.small{font-size:12px}.price{color:var(--amber);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--g100);color:var(--g700);font-size:12px;font-weight:800}
.badge-warn{background:#fffbeb;color:#92400e}.badge-red{background:var(--red-light);color:#b91c1c}.badge-blue{background:var(--blue-light);color:#1e40af}
.table-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid #f1f1f1;text-align:left;font-size:14px}th{background:var(--g50);color:var(--g800);font-weight:800}tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}.icon-box{width:48px;height:48px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field label{font-size:13px;font-weight:800;color:var(--text2)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--g50);outline:none;font-size:14px;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--g400);background:white;box-shadow:0 0 0 4px var(--g100)}
.footer{background:var(--g900);color:rgba(255,255,255,.75);padding:40px 24px;margin-top:40px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
.hidden-by-role{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);background:var(--g800);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:.28s;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.hero-inner{align-items:flex-start;flex-direction:column}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-right .nav-link{display:none}.container{padding:22px 16px}nav{padding:0 16px}.card:hover{transform:none}.role-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:600px){.logo-text{font-size:18px}.btn-login{padding:9px 12px}.hero-inner{padding:30px 16px}.hero-actions{width:100%}.hero-pill{flex:1}.actions{flex-direction:column}.actions button,.actions a{width:100%}.role-badge{display:none}}


.invoice{max-width:900px;margin:0 auto}.invoice-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:2px dashed var(--border);padding-bottom:20px;margin-bottom:20px}.invoice-no{font-size:13px;color:var(--text3);font-weight:700}.invoice-title{font-family:'Playfair Display',serif;font-size:34px;color:var(--g800);font-weight:900}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}.info-box{background:var(--g50);border:1px solid var(--g200);border-radius:14px;padding:14px}.info-box span{font-size:12px;color:var(--text3);font-weight:700}.info-box strong{display:block;margin-top:5px;color:var(--g800)}.total-box{display:flex;justify-content:flex-end;margin-top:20px}.total-inner{width:320px;background:var(--g50);border-radius:16px;padding:18px}.sum-line{display:flex;justify-content:space-between;margin-bottom:10px;color:var(--text2)}.sum-line.total{border-top:1px solid var(--border);padding-top:12px;font-size:22px;color:var(--text);font-weight:900}@media(max-width:700px){.invoice-head,.info-grid{grid-template-columns:1fr;display:grid}.total-inner{width:100%}}

/* ===== kitchen.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g900:#1a3a0a;--g800:#2d5c14;--g700:#3d7a1c;--g600:#4e9a24;
  --g500:#6abf35;--g400:#8CC63F;--g300:#a8d960;--g200:#d4f0a0;
  --g100:#E8F5D9;--g50:#f7fdf0;--amber:#FF9800;--amber-light:#fff3df;
  --red:#EF4444;--red-light:#FEE2E2;--blue:#2563EB;--blue-light:#DBEAFE;
  --text:#1a1a1a;--text2:#555;--text3:#999;--border:#e8e8e8;--white:#fff;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:9px;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#f5f5f0;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
button{border:0}
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;font-family:'Playfair Display',serif;box-shadow:0 2px 8px rgba(78,154,36,.35)}
.logo-text{font-size:20px;font-weight:700;color:var(--g800);letter-spacing:-.3px}.logo-text span{color:var(--g500)}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);transition:.2s}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--g700)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--g100);border:1px solid var(--g300);color:var(--g800);font-size:12px;font-weight:800;white-space:nowrap}
.btn-login,.btn-primary{padding:10px 18px;border-radius:var(--radius-sm);background:var(--g700);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover,.btn-primary:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,122,28,.25)}
.btn-outline{padding:10px 16px;border-radius:var(--radius-sm);background:white;border:1.5px solid var(--border);color:var(--text2);font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-outline:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#d97706}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-blue{background:var(--blue);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px}
.page-hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500));color:white}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.10),transparent 32%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 36%)}
.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:42px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;min-width:150px}
.hero-pill strong{display:block;font-size:22px;color:var(--g300)}.hero-pill span{font-size:12px;color:rgba(255,255,255,.75)}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:800;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--text3)}.small{font-size:12px}.price{color:var(--amber);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--g100);color:var(--g700);font-size:12px;font-weight:800}
.badge-warn{background:#fffbeb;color:#92400e}.badge-red{background:var(--red-light);color:#b91c1c}.badge-blue{background:var(--blue-light);color:#1e40af}
.table-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid #f1f1f1;text-align:left;font-size:14px}th{background:var(--g50);color:var(--g800);font-weight:800}tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}.icon-box{width:48px;height:48px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field label{font-size:13px;font-weight:800;color:var(--text2)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--g50);outline:none;font-size:14px;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--g400);background:white;box-shadow:0 0 0 4px var(--g100)}
.footer{background:var(--g900);color:rgba(255,255,255,.75);padding:40px 24px;margin-top:40px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
.hidden-by-role{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);background:var(--g800);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:.28s;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.hero-inner{align-items:flex-start;flex-direction:column}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-right .nav-link{display:none}.container{padding:22px 16px}nav{padding:0 16px}.card:hover{transform:none}.role-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:600px){.logo-text{font-size:18px}.btn-login{padding:9px 12px}.hero-inner{padding:30px 16px}.hero-actions{width:100%}.hero-pill{flex:1}.actions{flex-direction:column}.actions button,.actions a{width:100%}.role-badge{display:none}}


.kitchen-board{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.ticket{position:relative;overflow:hidden}.ticket::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--amber)}.ticket.done::before{background:var(--g400)}.ticket-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.ticket-title{font-size:23px;font-weight:900;color:var(--g800)}.dish-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #f1f1f1}.dish-row:last-child{border-bottom:0}.dish-name{font-weight:700}.note{background:var(--amber-light);color:#92400e;border-radius:12px;padding:10px 12px;font-size:13px;margin-top:12px}.done-row{opacity:.45;text-decoration:line-through}@media(max-width:1000px){.kitchen-board{grid-template-columns:1fr}}

/* ===== logout.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g900:#1a3a0a;--g800:#2d5c14;--g700:#3d7a1c;--g600:#4e9a24;
  --g500:#6abf35;--g400:#8CC63F;--g300:#a8d960;--g200:#d4f0a0;
  --g100:#E8F5D9;--g50:#f7fdf0;--amber:#FF9800;--amber-light:#fff3df;
  --red:#EF4444;--red-light:#FEE2E2;--blue:#2563EB;--blue-light:#DBEAFE;
  --text:#1a1a1a;--text2:#555;--text3:#999;--border:#e8e8e8;--white:#fff;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:9px;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#f5f5f0;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
button{border:0}
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;font-family:'Playfair Display',serif;box-shadow:0 2px 8px rgba(78,154,36,.35)}
.logo-text{font-size:20px;font-weight:700;color:var(--g800);letter-spacing:-.3px}.logo-text span{color:var(--g500)}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);transition:.2s}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--g700)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--g100);border:1px solid var(--g300);color:var(--g800);font-size:12px;font-weight:800;white-space:nowrap}
.btn-login,.btn-primary{padding:10px 18px;border-radius:var(--radius-sm);background:var(--g700);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover,.btn-primary:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,122,28,.25)}
.btn-outline{padding:10px 16px;border-radius:var(--radius-sm);background:white;border:1.5px solid var(--border);color:var(--text2);font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-outline:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#d97706}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-blue{background:var(--blue);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px}
.page-hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500));color:white}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.10),transparent 32%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 36%)}
.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:42px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;min-width:150px}
.hero-pill strong{display:block;font-size:22px;color:var(--g300)}.hero-pill span{font-size:12px;color:rgba(255,255,255,.75)}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:800;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--text3)}.small{font-size:12px}.price{color:var(--amber);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--g100);color:var(--g700);font-size:12px;font-weight:800}
.badge-warn{background:#fffbeb;color:#92400e}.badge-red{background:var(--red-light);color:#b91c1c}.badge-blue{background:var(--blue-light);color:#1e40af}
.table-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid #f1f1f1;text-align:left;font-size:14px}th{background:var(--g50);color:var(--g800);font-weight:800}tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}.icon-box{width:48px;height:48px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field label{font-size:13px;font-weight:800;color:var(--text2)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--g50);outline:none;font-size:14px;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--g400);background:white;box-shadow:0 0 0 4px var(--g100)}
.footer{background:var(--g900);color:rgba(255,255,255,.75);padding:40px 24px;margin-top:40px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
.hidden-by-role{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);background:var(--g800);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:.28s;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.hero-inner{align-items:flex-start;flex-direction:column}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-right .nav-link{display:none}.container{padding:22px 16px}nav{padding:0 16px}.card:hover{transform:none}.role-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:600px){.logo-text{font-size:18px}.btn-login{padding:9px 12px}.hero-inner{padding:30px 16px}.hero-actions{width:100%}.hero-pill{flex:1}.actions{flex-direction:column}.actions button,.actions a{width:100%}.role-badge{display:none}}

.auth-wrap{min-height:calc(100vh - 68px);display:flex;align-items:center;justify-content:center;padding:36px 16px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500))}.auth-card{width:100%;max-width:450px;background:rgba(255,255,255,.96);border-radius:24px;padding:34px;box-shadow:var(--shadow-lg)}.auth-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;margin:0 auto 16px}.auth-card h1{text-align:center;font-family:'Playfair Display',serif;font-size:34px;color:var(--g800);margin-bottom:8px}.auth-card p{text-align:center;color:var(--text2);line-height:1.6;margin-bottom:24px}.account-list{background:var(--g50);border:1px solid var(--g200);border-radius:14px;padding:12px;margin-bottom:18px}.account-list p{text-align:left;margin:4px 0;font-size:12px}

/* ===== menu-management.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g900:#1a3a0a;--g800:#2d5c14;--g700:#3d7a1c;--g600:#4e9a24;
  --g500:#6abf35;--g400:#8CC63F;--g300:#a8d960;--g200:#d4f0a0;
  --g100:#E8F5D9;--g50:#f7fdf0;--amber:#FF9800;--amber-light:#fff3df;
  --red:#EF4444;--red-light:#FEE2E2;--blue:#2563EB;--blue-light:#DBEAFE;
  --text:#1a1a1a;--text2:#555;--text3:#999;--border:#e8e8e8;--white:#fff;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:9px;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#f5f5f0;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
button{border:0}
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;font-family:'Playfair Display',serif;box-shadow:0 2px 8px rgba(78,154,36,.35)}
.logo-text{font-size:20px;font-weight:700;color:var(--g800);letter-spacing:-.3px}.logo-text span{color:var(--g500)}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);transition:.2s}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--g700)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--g100);border:1px solid var(--g300);color:var(--g800);font-size:12px;font-weight:800;white-space:nowrap}
.btn-login,.btn-primary{padding:10px 18px;border-radius:var(--radius-sm);background:var(--g700);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover,.btn-primary:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,122,28,.25)}
.btn-outline{padding:10px 16px;border-radius:var(--radius-sm);background:white;border:1.5px solid var(--border);color:var(--text2);font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-outline:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#d97706}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-blue{background:var(--blue);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px}
.page-hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500));color:white}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.10),transparent 32%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 36%)}
.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:42px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;min-width:150px}
.hero-pill strong{display:block;font-size:22px;color:var(--g300)}.hero-pill span{font-size:12px;color:rgba(255,255,255,.75)}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:800;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--text3)}.small{font-size:12px}.price{color:var(--amber);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--g100);color:var(--g700);font-size:12px;font-weight:800}
.badge-warn{background:#fffbeb;color:#92400e}.badge-red{background:var(--red-light);color:#b91c1c}.badge-blue{background:var(--blue-light);color:#1e40af}
.table-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid #f1f1f1;text-align:left;font-size:14px}th{background:var(--g50);color:var(--g800);font-weight:800}tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}.icon-box{width:48px;height:48px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field label{font-size:13px;font-weight:800;color:var(--text2)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--g50);outline:none;font-size:14px;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--g400);background:white;box-shadow:0 0 0 4px var(--g100)}
.footer{background:var(--g900);color:rgba(255,255,255,.75);padding:40px 24px;margin-top:40px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
.hidden-by-role{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);background:var(--g800);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:.28s;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.hero-inner{align-items:flex-start;flex-direction:column}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-right .nav-link{display:none}.container{padding:22px 16px}nav{padding:0 16px}.card:hover{transform:none}.role-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:600px){.logo-text{font-size:18px}.btn-login{padding:9px 12px}.hero-inner{padding:30px 16px}.hero-actions{width:100%}.hero-pill{flex:1}.actions{flex-direction:column}.actions button,.actions a{width:100%}.role-badge{display:none}}


.food-img{width:70px;height:70px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:34px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}.search{min-width:260px;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;background:white;outline:none}.search:focus{border-color:var(--g400)}

/* ===== order.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g900:#1a3a0a;--g800:#2d5c14;--g700:#3d7a1c;--g600:#4e9a24;
  --g500:#6abf35;--g400:#8CC63F;--g300:#a8d960;--g200:#d4f0a0;
  --g100:#E8F5D9;--g50:#f7fdf0;--amber:#FF9800;--amber-light:#fff3df;
  --red:#EF4444;--red-light:#FEE2E2;--blue:#2563EB;--blue-light:#DBEAFE;
  --text:#1a1a1a;--text2:#555;--text3:#999;--border:#e8e8e8;--white:#fff;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:9px;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#f5f5f0;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
button{border:0}
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;font-family:'Playfair Display',serif;box-shadow:0 2px 8px rgba(78,154,36,.35)}
.logo-text{font-size:20px;font-weight:700;color:var(--g800);letter-spacing:-.3px}.logo-text span{color:var(--g500)}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);transition:.2s}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--g700)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--g100);border:1px solid var(--g300);color:var(--g800);font-size:12px;font-weight:800;white-space:nowrap}
.btn-login,.btn-primary{padding:10px 18px;border-radius:var(--radius-sm);background:var(--g700);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover,.btn-primary:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,122,28,.25)}
.btn-outline{padding:10px 16px;border-radius:var(--radius-sm);background:white;border:1.5px solid var(--border);color:var(--text2);font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-outline:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#d97706}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-blue{background:var(--blue);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px}
.page-hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500));color:white}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.10),transparent 32%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 36%)}
.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:42px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;min-width:150px}
.hero-pill strong{display:block;font-size:22px;color:var(--g300)}.hero-pill span{font-size:12px;color:rgba(255,255,255,.75)}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:800;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--text3)}.small{font-size:12px}.price{color:var(--amber);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--g100);color:var(--g700);font-size:12px;font-weight:800}
.badge-warn{background:#fffbeb;color:#92400e}.badge-red{background:var(--red-light);color:#b91c1c}.badge-blue{background:var(--blue-light);color:#1e40af}
.table-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid #f1f1f1;text-align:left;font-size:14px}th{background:var(--g50);color:var(--g800);font-weight:800}tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}.icon-box{width:48px;height:48px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field label{font-size:13px;font-weight:800;color:var(--text2)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--g50);outline:none;font-size:14px;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--g400);background:white;box-shadow:0 0 0 4px var(--g100)}
.footer{background:var(--g900);color:rgba(255,255,255,.75);padding:40px 24px;margin-top:40px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
.hidden-by-role{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);background:var(--g800);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:.28s;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.hero-inner{align-items:flex-start;flex-direction:column}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-right .nav-link{display:none}.container{padding:22px 16px}nav{padding:0 16px}.card:hover{transform:none}.role-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:600px){.logo-text{font-size:18px}.btn-login{padding:9px 12px}.hero-inner{padding:30px 16px}.hero-actions{width:100%}.hero-pill{flex:1}.actions{flex-direction:column}.actions button,.actions a{width:100%}.role-badge{display:none}}



/* Sửa layout order: không cho card/nút Thêm bị tràn khỏi khung */
.order-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:20px;
  align-items:start;
}
.menu-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}
.menu-card{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:14px;
  align-items:flex-start;
  overflow:hidden;
  padding:16px;
}
.menu-card h3{
  font-size:18px;
  line-height:1.25;
  margin-bottom:4px;
  word-break:break-word;
}
.menu-card .muted{
  font-size:13px;
  line-height:1.45;
}
.food-emoji{
  width:64px;
  height:64px;
  border-radius:16px;
  background:var(--g100);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:31px;
  flex-shrink:0;
}
.dish-bottom{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.dish-bottom .btn-primary{
  padding:9px 14px;
  font-size:13px;
  min-width:74px;
  white-space:nowrap;
}
.cart{
  position:sticky;
  top:88px;
  align-self:start;
  max-width:100%;
}
.cart-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid #f1f1f1;
}
.qty{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.qty button{
  width:26px;
  height:26px;
  border-radius:8px;
  background:var(--g100);
  color:var(--g700);
  font-weight:900;
  cursor:pointer;
}
.cart-total{
  display:flex;
  justify-content:space-between;
  margin-top:14px;
  padding-top:14px;
  border-top:2px solid var(--border);
  font-size:19px;
  font-weight:900;
}
.searchbar{
  display:flex;
  gap:10px;
  margin-bottom:18px;
}
.searchbar input{
  flex:1;
  min-width:0;
  padding:13px;
  border:1.5px solid var(--border);
  border-radius:12px;
}
.cat-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.cat-row button{
  padding:8px 14px;
  border-radius:999px;
  background:white;
  border:1.5px solid var(--border);
  cursor:pointer;
  font-weight:800;
  font-size:14px;
}
.cat-row button.active,.cat-row button:hover{
  background:var(--g700);
  border-color:var(--g700);
  color:white;
}
@media(max-width:1100px){
  .order-layout{grid-template-columns:1fr}
  .cart{position:static}
}
@media(max-width:600px){
  .menu-list{grid-template-columns:1fr}
  .menu-card{grid-template-columns:62px minmax(0,1fr);padding:14px}
  .food-emoji{width:56px;height:56px;font-size:27px}
  .menu-card h3{font-size:16px}
  .dish-bottom .btn-primary{width:auto}
}

/* ===== qr-generator.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g900:#1a3a0a;--g800:#2d5c14;--g700:#3d7a1c;--g600:#4e9a24;
  --g500:#6abf35;--g400:#8CC63F;--g300:#a8d960;--g200:#d4f0a0;
  --g100:#E8F5D9;--g50:#f7fdf0;--amber:#FF9800;--amber-light:#fff3df;
  --red:#EF4444;--red-light:#FEE2E2;--blue:#2563EB;--blue-light:#DBEAFE;
  --text:#1a1a1a;--text2:#555;--text3:#999;--border:#e8e8e8;--white:#fff;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:9px;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#f5f5f0;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
button{border:0}
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;font-family:'Playfair Display',serif;box-shadow:0 2px 8px rgba(78,154,36,.35)}
.logo-text{font-size:20px;font-weight:700;color:var(--g800);letter-spacing:-.3px}.logo-text span{color:var(--g500)}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);transition:.2s}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--g700)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--g100);border:1px solid var(--g300);color:var(--g800);font-size:12px;font-weight:800;white-space:nowrap}
.btn-login,.btn-primary{padding:10px 18px;border-radius:var(--radius-sm);background:var(--g700);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover,.btn-primary:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,122,28,.25)}
.btn-outline{padding:10px 16px;border-radius:var(--radius-sm);background:white;border:1.5px solid var(--border);color:var(--text2);font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-outline:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#d97706}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-blue{background:var(--blue);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px}
.page-hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500));color:white}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.10),transparent 32%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 36%)}
.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:42px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;min-width:150px}
.hero-pill strong{display:block;font-size:22px;color:var(--g300)}.hero-pill span{font-size:12px;color:rgba(255,255,255,.75)}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:800;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--text3)}.small{font-size:12px}.price{color:var(--amber);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--g100);color:var(--g700);font-size:12px;font-weight:800}
.badge-warn{background:#fffbeb;color:#92400e}.badge-red{background:var(--red-light);color:#b91c1c}.badge-blue{background:var(--blue-light);color:#1e40af}
.table-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid #f1f1f1;text-align:left;font-size:14px}th{background:var(--g50);color:var(--g800);font-weight:800}tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}.icon-box{width:48px;height:48px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field label{font-size:13px;font-weight:800;color:var(--text2)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--g50);outline:none;font-size:14px;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--g400);background:white;box-shadow:0 0 0 4px var(--g100)}
.footer{background:var(--g900);color:rgba(255,255,255,.75);padding:40px 24px;margin-top:40px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
.hidden-by-role{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);background:var(--g800);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:.28s;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.hero-inner{align-items:flex-start;flex-direction:column}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-right .nav-link{display:none}.container{padding:22px 16px}nav{padding:0 16px}.card:hover{transform:none}.role-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:600px){.logo-text{font-size:18px}.btn-login{padding:9px 12px}.hero-inner{padding:30px 16px}.hero-actions{width:100%}.hero-pill{flex:1}.actions{flex-direction:column}.actions button,.actions a{width:100%}.role-badge{display:none}}


.qr-layout{display:grid;grid-template-columns:380px 1fr;gap:22px;align-items:start}.qr-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.qr-card{text-align:center}.qr-card img{width:150px;height:150px;border:8px solid var(--g100);border-radius:18px;background:white}.qr-actions{display:flex;gap:8px;margin-top:12px;justify-content:center}.qr-empty{padding:28px;text-align:center;color:var(--text3)}@media(max-width:900px){.qr-layout{grid-template-columns:1fr}}

/* ===== revenue.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g900:#1a3a0a;--g800:#2d5c14;--g700:#3d7a1c;--g600:#4e9a24;
  --g500:#6abf35;--g400:#8CC63F;--g300:#a8d960;--g200:#d4f0a0;
  --g100:#E8F5D9;--g50:#f7fdf0;--amber:#FF9800;--amber-light:#fff3df;
  --red:#EF4444;--red-light:#FEE2E2;--blue:#2563EB;--blue-light:#DBEAFE;
  --text:#1a1a1a;--text2:#555;--text3:#999;--border:#e8e8e8;--white:#fff;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:9px;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#f5f5f0;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
button{border:0}
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;font-family:'Playfair Display',serif;box-shadow:0 2px 8px rgba(78,154,36,.35)}
.logo-text{font-size:20px;font-weight:700;color:var(--g800);letter-spacing:-.3px}.logo-text span{color:var(--g500)}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);transition:.2s}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--g700)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--g100);border:1px solid var(--g300);color:var(--g800);font-size:12px;font-weight:800;white-space:nowrap}
.btn-login,.btn-primary{padding:10px 18px;border-radius:var(--radius-sm);background:var(--g700);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover,.btn-primary:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,122,28,.25)}
.btn-outline{padding:10px 16px;border-radius:var(--radius-sm);background:white;border:1.5px solid var(--border);color:var(--text2);font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-outline:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#d97706}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-blue{background:var(--blue);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px}
.page-hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500));color:white}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.10),transparent 32%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 36%)}
.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:42px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;min-width:150px}
.hero-pill strong{display:block;font-size:22px;color:var(--g300)}.hero-pill span{font-size:12px;color:rgba(255,255,255,.75)}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:800;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--text3)}.small{font-size:12px}.price{color:var(--amber);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--g100);color:var(--g700);font-size:12px;font-weight:800}
.badge-warn{background:#fffbeb;color:#92400e}.badge-red{background:var(--red-light);color:#b91c1c}.badge-blue{background:var(--blue-light);color:#1e40af}
.table-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid #f1f1f1;text-align:left;font-size:14px}th{background:var(--g50);color:var(--g800);font-weight:800}tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}.icon-box{width:48px;height:48px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field label{font-size:13px;font-weight:800;color:var(--text2)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--g50);outline:none;font-size:14px;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--g400);background:white;box-shadow:0 0 0 4px var(--g100)}
.footer{background:var(--g900);color:rgba(255,255,255,.75);padding:40px 24px;margin-top:40px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
.hidden-by-role{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);background:var(--g800);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:.28s;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.hero-inner{align-items:flex-start;flex-direction:column}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-right .nav-link{display:none}.container{padding:22px 16px}nav{padding:0 16px}.card:hover{transform:none}.role-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:600px){.logo-text{font-size:18px}.btn-login{padding:9px 12px}.hero-inner{padding:30px 16px}.hero-actions{width:100%}.hero-pill{flex:1}.actions{flex-direction:column}.actions button,.actions a{width:100%}.role-badge{display:none}}


.stats-card{position:relative;overflow:hidden}.stats-card::after{content:"";position:absolute;right:-36px;bottom:-36px;width:110px;height:110px;border-radius:50%;background:var(--g100)}.stats-card strong{font-size:30px;color:var(--amber);display:block}.revenue-layout{display:grid;grid-template-columns:420px 1fr;gap:22px;align-items:start}.chart-panel{background:white;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-sm);padding:22px;min-height:420px}.chart-wrap{height:320px;display:flex;align-items:center;justify-content:center}.filter-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}.filter-row select{padding:10px 14px;border:1.5px solid var(--border);border-radius:12px;background:white;font-weight:700}@media(max-width:1000px){.revenue-layout{grid-template-columns:1fr}.chart-wrap{height:260px}}

/* ===== staff.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g900:#1a3a0a;--g800:#2d5c14;--g700:#3d7a1c;--g600:#4e9a24;
  --g500:#6abf35;--g400:#8CC63F;--g300:#a8d960;--g200:#d4f0a0;
  --g100:#E8F5D9;--g50:#f7fdf0;--amber:#FF9800;--amber-light:#fff3df;
  --red:#EF4444;--red-light:#FEE2E2;--blue:#2563EB;--blue-light:#DBEAFE;
  --text:#1a1a1a;--text2:#555;--text3:#999;--border:#e8e8e8;--white:#fff;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:9px;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#f5f5f0;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
button{border:0}
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--g700),var(--g400));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;font-family:'Playfair Display',serif;box-shadow:0 2px 8px rgba(78,154,36,.35)}
.logo-text{font-size:20px;font-weight:700;color:var(--g800);letter-spacing:-.3px}.logo-text span{color:var(--g500)}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);transition:.2s}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--g700)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--g100);border:1px solid var(--g300);color:var(--g800);font-size:12px;font-weight:800;white-space:nowrap}
.btn-login,.btn-primary{padding:10px 18px;border-radius:var(--radius-sm);background:var(--g700);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover,.btn-primary:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,122,28,.25)}
.btn-outline{padding:10px 16px;border-radius:var(--radius-sm);background:white;border:1.5px solid var(--border);color:var(--text2);font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-outline:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#d97706}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-blue{background:var(--blue);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px}
.page-hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(145deg,var(--g900),var(--g700) 58%,var(--g500));color:white}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,rgba(255,255,255,.10),transparent 32%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 36%)}
.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:42px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.hero-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;min-width:150px}
.hero-pill strong{display:block;font-size:22px;color:var(--g300)}.hero-pill span{font-size:12px;color:rgba(255,255,255,.75)}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:800;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--text3)}.small{font-size:12px}.price{color:var(--amber);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--g100);color:var(--g700);font-size:12px;font-weight:800}
.badge-warn{background:#fffbeb;color:#92400e}.badge-red{background:var(--red-light);color:#b91c1c}.badge-blue{background:var(--blue-light);color:#1e40af}
.table-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid #f1f1f1;text-align:left;font-size:14px}th{background:var(--g50);color:var(--g800);font-weight:800}tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}.icon-box{width:48px;height:48px;border-radius:14px;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field label{font-size:13px;font-weight:800;color:var(--text2)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--g50);outline:none;font-size:14px;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--g400);background:white;box-shadow:0 0 0 4px var(--g100)}
.footer{background:var(--g900);color:rgba(255,255,255,.75);padding:40px 24px;margin-top:40px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
.hidden-by-role{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);background:var(--g800);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:.28s;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.hero-inner{align-items:flex-start;flex-direction:column}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-right .nav-link{display:none}.container{padding:22px 16px}nav{padding:0 16px}.card:hover{transform:none}.role-badge{max-width:190px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:600px){.logo-text{font-size:18px}.btn-login{padding:9px 12px}.hero-inner{padding:30px 16px}.hero-actions{width:100%}.hero-pill{flex:1}.actions{flex-direction:column}.actions button,.actions a{width:100%}.role-badge{display:none}}


.filter-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.filter-btn{background:white;border:1.5px solid var(--border);border-radius:16px;padding:18px;text-align:left;cursor:pointer;transition:.2s;box-shadow:var(--shadow-sm)}.filter-btn:hover,.filter-btn.active{border-color:var(--g400);background:var(--g50);transform:translateY(-2px)}.filter-btn strong{display:block;font-size:24px;color:var(--g800)}.filter-btn span{font-size:13px;color:var(--text3);font-weight:700}.orders{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}.order-card{display:flex;flex-direction:column;gap:14px}.order-head{display:flex;justify-content:space-between;gap:12px}.table-name{font-size:24px;font-weight:900;color:var(--g800)}.order-items{background:var(--g50);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:9px}.order-line{display:flex;justify-content:space-between;gap:10px}.summary-row{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:12px;font-weight:900}.empty-state{text-align:center;padding:40px;color:var(--text3)}@media(max-width:800px){.filter-tabs{grid-template-columns:1fr 1fr}}@media(max-width:520px){.filter-tabs{grid-template-columns:1fr}}

.order-history{border-top:1px solid var(--border);margin-top:18px;padding-top:16px}.history-item{border:1px solid var(--border);border-radius:12px;background:var(--g50);padding:12px;margin-top:10px}.history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.history-head span{font-size:12px;color:var(--text3);font-weight:700}.qr-link{word-break:break-all;line-height:1.45}.kitchen-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}.ticket{display:flex;flex-direction:column;gap:12px}.ticket-head{display:flex;justify-content:space-between;gap:12px}.ticket-title{font-size:22px;font-weight:900;color:var(--g800)}.dish-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--g50);border-radius:12px;padding:12px}.dish-name{font-weight:700}.done-row{opacity:.55}.done-row .dish-name{text-decoration:line-through}.ticket.done{border-color:var(--g300);background:var(--g50)}
.table-status-select,.table-seats-input{margin-top:6px;width:100%;padding:9px 10px;border:1.5px solid var(--border);border-radius:10px;background:white;font-weight:700;color:var(--text2)}.table-control-label{display:block;text-align:left;margin-top:10px}
.revenue-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.revenue-summary div{background:var(--g50);border:1px solid var(--border);border-radius:12px;padding:12px}.revenue-summary span{display:block;font-size:12px;color:var(--text3);font-weight:800;margin-bottom:4px}.revenue-summary strong{color:var(--g800);font-size:14px}.revenue-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.revenue-controls input,.revenue-controls select{padding:10px 12px;border:1.5px solid var(--border);border-radius:12px;background:white;font-weight:700;color:var(--text2)}@media(max-width:700px){.revenue-summary{grid-template-columns:1fr}.revenue-controls{width:100%}.revenue-controls input,.revenue-controls select,.revenue-controls button{width:100%}}

.image-picker input[type="file"] {
  margin-top: 10px;
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--g300);
  border-radius: 12px;
  background: #f8fff2;
}

.preview span img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(36, 82, 23, .18);
}
.preview span {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.preview-emoji img,
.dish-img img,
.food-img img,
.food-emoji img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.dish-img img {
  border-radius: 0;
}

.checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--g800);
}

.checkline input {
  width: 18px;
  height: 18px;
}
.order-confirm {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .48);
}

.order-confirm.show {
  display: flex;
}

.order-confirm-box {
  width: min(560px, 100%);
  border-radius: 18px;
  background: #fffef9;
  border: 1px solid var(--g200);
  box-shadow: 0 24px 70px rgba(15, 43, 9, .28);
  padding: 26px;
  color: var(--g900);
}

.order-confirm-box h2 {
  margin: 0 0 14px;
  color: var(--g800);
  font-size: 24px;
}

.order-confirm-body {
  line-height: 1.7;
}

.order-confirm-list {
  margin: 14px 0;
  display: grid;
  gap: 8px;
}

.order-confirm-total {
  margin-top: 12px;
  color: var(--g800);
}

.order-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.hero-photo-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: .34;
}

.hero-photo-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 73, 14, .92), rgba(33, 104, 20, .78), rgba(84, 184, 42, .66));
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translateX(28px) scale(1.04);
  transition: opacity .8s ease, transform .8s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: translateX(0) scale(1.02);
}

.hero-slide.leaving {
  opacity: 0;
  transform: translateX(-42px) scale(1.02);
}

.hero-home .home-inner {
  z-index: 1;
}

.food-img {
  overflow: hidden;
  flex-shrink: 0;
}

.food-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.food-emoji.image-missing,
.preview-emoji.image-missing,
.dish-img.image-missing,
.food-img.image-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.food-emoji.image-missing::before,
.preview-emoji.image-missing::before,
.dish-img.image-missing::before,
.food-img.image-missing::before {
  content: "🍽️";
  font-size: 34px;
  line-height: 1;
}