:root{--deep:#062d31;--deep2:#0a4244;--paper:#f3e7d3;--surface:#fffaf2;--ink:#173d3b;--muted:#6f7e77;--gold:#d9a441;--line:rgba(23,61,59,.13);--shadow:0 24px 70px rgba(22,49,46,.12);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:linear-gradient(180deg,#f8f0e4,#ead5b7);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.order-header{position:sticky;z-index:20;top:0;height:78px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 max(20px,calc((100vw - 1440px)/2));background:rgba(248,240,228,.90);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.order-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.order-brand img{width:48px;height:48px;border-radius:15px}.order-brand div{display:grid;gap:2px}.order-brand strong{letter-spacing:.12em}.order-brand span{font-size:9px;letter-spacing:.2em;color:#17887f;font-weight:800}.back-site{color:inherit;text-decoration:none;padding:10px 13px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.48);font-weight:700;font-size:12px}
.order-layout{width:min(1440px,calc(100% - 32px));margin:28px auto 70px;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:20px;align-items:start}.order-main{min-width:0}.order-intro{padding:32px;border-radius:28px;background:linear-gradient(135deg,var(--deep),var(--deep2));color:#fff;box-shadow:var(--shadow)}.order-intro p{margin:0;color:#6fe0d5;font-size:10px;font-weight:800;letter-spacing:.22em}.order-intro h1{margin:12px 0 12px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.04em}.order-intro h1 em{color:#f2c36b;font-weight:500}.order-intro>span{display:block;max-width:720px;color:rgba(255,255,255,.75);line-height:1.7}
.mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.mode-tab{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:15px;border:1px solid var(--line);border-radius:20px;background:rgba(255,250,242,.75);color:var(--ink);text-align:left;transition:.25s var(--ease)}.mode-tab b{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:#e9ddc9;color:#8d672d}.mode-tab span{display:grid;gap:3px;font-weight:800}.mode-tab small{color:var(--muted);font-weight:500}.mode-tab.active{background:#fff;border-color:rgba(18,137,126,.35);box-shadow:0 13px 35px rgba(22,49,46,.08);transform:translateY(-2px)}.mode-tab.active b{background:#0c8178;color:#fff}
.customer-panel,.menu-section,.cart-panel{border:1px solid var(--line);background:rgba(255,250,242,.92);box-shadow:var(--shadow)}.customer-panel{padding:20px;border-radius:24px;margin-bottom:16px}.customer-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.customer-fields .full,.note-field.full{grid-column:1/-1}label{display:grid;gap:7px}label>span{font-size:11px;font-weight:800;color:#60736d}input,select,textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:#0d8b81;box-shadow:0 0 0 4px rgba(13,139,129,.10)}textarea{resize:vertical}.note-field{margin-top:13px}
.menu-section{padding:20px;border-radius:24px}.menu-toolbar{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:15px}.menu-toolbar h2{margin:0;font-size:24px}.menu-toolbar p{margin:5px 0 0;color:var(--muted);font-size:11px}.menu-tools{display:flex;gap:9px}.menu-tools input{min-width:250px}.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.menu-card{display:grid;align-content:space-between;gap:12px;min-height:150px;padding:15px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:.22s var(--ease)}.menu-card:hover{transform:translateY(-2px);border-color:rgba(13,139,129,.35);box-shadow:0 14px 30px rgba(22,49,46,.07)}.menu-card small{color:#16877e;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.menu-card h3{margin:0;font-size:14px;line-height:1.45}.menu-card p{margin:0;color:var(--muted);font-size:10px;line-height:1.5}.menu-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.menu-price{font-weight:850;font-size:13px}.add-item{border:0;border-radius:11px;background:#0c8178;color:#fff;padding:9px 12px;font-weight:800}
.cart-panel{position:sticky;top:98px;border-radius:25px;padding:19px}.cart-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:13px}.cart-head small{color:#16877e;font-weight:800;letter-spacing:.13em}.cart-head h2{margin:4px 0 0}.cart-head>span{min-width:38px;height:38px;padding:0 8px;display:grid;place-items:center;border-radius:13px;background:#0c8178;color:#fff;font-weight:900}.cart-items{display:grid;gap:9px;max-height:48vh;overflow:auto;padding:13px 0}.cart-empty{padding:35px 12px;text-align:center;color:var(--muted);font-size:12px}.cart-item{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px;border-radius:15px;background:#f5ead9}.cart-item strong{font-size:12px;line-height:1.4}.cart-item small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.qty{display:flex;align-items:center;gap:7px}.qty button{width:28px;height:28px;border:1px solid var(--line);border-radius:9px;background:#fff}.qty b{min-width:20px;text-align:center}.cart-summary{padding:13px 0;border-top:1px solid var(--line)}.cart-summary>div{display:flex;justify-content:space-between;gap:12px}.cart-summary p{margin:8px 0 0;color:var(--muted);font-size:10px;line-height:1.55}.backend-warning{margin:10px 0;padding:11px;border-radius:12px;background:#fff2df;color:#895812;font-size:11px;line-height:1.5}.submit-order{width:100%;min-height:50px;border:0;border-radius:15px;background:linear-gradient(135deg,#0b766f,#0aa296);color:#fff;font-weight:850;box-shadow:0 13px 30px rgba(10,130,120,.22)}.submit-order:disabled{opacity:.5;cursor:not-allowed}.submit-status{min-height:22px;margin-top:10px;font-size:11px}.submit-status.error{color:#b6414d}.submit-status.success{color:#087455}
.success-modal{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:18px}.success-backdrop{position:absolute;inset:0;background:rgba(3,24,27,.68);backdrop-filter:blur(9px)}.success-card{position:relative;width:min(460px,100%);display:grid;justify-items:center;text-align:center;padding:32px;border-radius:28px;background:#fffaf2;box-shadow:0 30px 100px rgba(0,0,0,.3);animation:pop .35s var(--ease)}.success-card>span{width:70px;height:70px;display:grid;place-items:center;border-radius:50%;background:#0c9a72;color:#fff;font-size:30px}.success-card p{margin:17px 0 5px;color:#13847b;font-size:10px;font-weight:850;letter-spacing:.18em}.success-card h2{margin:0}.success-card strong{margin-top:13px;padding:9px 13px;border-radius:12px;background:#f1e5d2}.success-card small{margin-top:12px;color:var(--muted);line-height:1.6}.success-card button{margin-top:19px;border:0;border-radius:13px;background:#123f42;color:#fff;padding:11px 24px;font-weight:800}@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:1100px){.order-layout{grid-template-columns:1fr}.cart-panel{position:static}.menu-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.order-header{height:68px;padding:0 12px}.order-brand img{width:42px;height:42px}.order-brand span{display:none}.back-site{font-size:10px}.order-layout{width:calc(100% - 20px);margin:14px auto 45px}.order-intro{padding:22px;border-radius:22px}.order-intro h1{font-size:39px}.mode-tabs{grid-template-columns:1fr}.customer-fields{grid-template-columns:1fr}.menu-toolbar{align-items:stretch;flex-direction:column}.menu-tools{display:grid}.menu-tools input{min-width:0}.menu-grid{grid-template-columns:1fr 1fr;gap:8px}.menu-card{min-height:142px;padding:12px}.menu-card h3{font-size:12px}.menu-card-foot{align-items:flex-end;flex-direction:column}.add-item{width:100%}.cart-panel{border-radius:20px}}
@media(max-width:420px){.menu-grid{grid-template-columns:1fr}.mode-tab{grid-template-columns:42px 1fr}.order-intro h1{font-size:35px}}


/* V20.1 - Tông màu nút gửi đơn cao cấp hơn */
.submit-order{
  position:relative;
  overflow:hidden;
  min-height:58px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,225,164,.24)!important;
  background:linear-gradient(135deg,#075f5a 0%,#0a8f84 58%,#10aa9c 100%)!important;
  color:#fff!important;
  font-size:16px!important;
  letter-spacing:-.01em;
  box-shadow:0 16px 34px rgba(8,116,107,.28),inset 0 1px 0 rgba(255,255,255,.20)!important;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),filter .24s var(--ease)!important;
}
.submit-order::before{
  content:"";
  position:absolute;
  inset:0 auto 0 -45%;
  width:36%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  transition:left .55s var(--ease);
}
.submit-order:not(:disabled):hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 20px 42px rgba(8,116,107,.34),inset 0 1px 0 rgba(255,255,255,.22)!important}
.submit-order:not(:disabled):hover::before{left:118%}
.submit-order:not(:disabled):active{transform:translateY(0) scale(.988)}
.submit-order:disabled{
  opacity:1!important;
  cursor:not-allowed;
  background:linear-gradient(135deg,#d8cdbb,#c9baa4)!important;
  color:#675f55!important;
  border-color:rgba(93,80,61,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42)!important;
}
.submit-order[data-state="empty"]{
  background:linear-gradient(135deg,#d9cfbf,#cbbda9)!important;
}
.backend-warning{
  border:1px solid rgba(196,129,34,.20)!important;
  background:linear-gradient(135deg,#fff6e8,#fbe8c8)!important;
  color:#80500d!important;
  box-shadow:0 10px 24px rgba(157,100,18,.06);
}


/* V20.2 - chỉ giao món tận nơi tại Huế */
.delivery-badge{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:22px 0;
  padding:18px 20px;
  border-radius:22px;
  color:#fff;
  background:linear-gradient(135deg,#0a706b,#0a9587);
  box-shadow:0 18px 36px rgba(8,112,105,.18);
}
.delivery-badge b{font-size:13px;letter-spacing:.16em}
.delivery-badge span{font-size:13px;line-height:1.55;text-align:right;color:rgba(255,255,255,.86)}
@media(max-width:700px){
  .delivery-badge{align-items:flex-start;flex-direction:column;gap:7px;padding:16px;border-radius:18px}
  .delivery-badge span{text-align:left;font-size:12px}
}


/* V20.3 - Gửi đơn qua email hoặc Zalo, không dùng Supabase */
.send-note{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:10px 0 12px;
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(13,129,120,.14);
  background:linear-gradient(135deg,#eef9f6,#f7f0e4);
}
.send-note>span{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(135deg,#0b766f,#0aa296);
}
.send-note div{display:grid;gap:3px}
.send-note strong{font-size:12px}
.send-note small{color:var(--muted);font-size:10px;line-height:1.5}
.submit-options{display:grid;grid-template-columns:1fr;gap:10px}
.submit-zalo{
  background:linear-gradient(135deg,#087bc1 0%,#0796da 58%,#20ace5 100%)!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:0 16px 34px rgba(4,132,195,.24),inset 0 1px 0 rgba(255,255,255,.20)!important;
}
.submit-zalo:not(:disabled):hover{
  box-shadow:0 20px 42px rgba(4,132,195,.30),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.submit-options .submit-order:disabled{
  background:linear-gradient(135deg,#d9cfbf,#cbbda9)!important;
  color:#675f55!important;
}
@media(min-width:1101px){
  .submit-options{grid-template-columns:1fr 1fr}
  .submit-options .submit-order{font-size:13px!important;padding-inline:10px}
}


/* V20.5 - Tối ưu tương tác mượt cho Order */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none}
button,.add-item,.qty button,.submit-order,.back-site{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
button{
  transform:translateZ(0);
  backface-visibility:hidden;
}
button.is-pressing:not(:disabled){
  transform:translate3d(0,1px,0) scale(.965)!important;
}
.menu-card{
  contain:layout paint style;
  content-visibility:auto;
  contain-intrinsic-size:150px;
  transform:translateZ(0);
}
.add-item,.qty button{
  transition:transform .16s var(--ease),background-color .18s ease,color .18s ease,box-shadow .18s ease!important;
}
.add-item:active,.qty button:active{transform:scale(.94)}
.add-item.is-added{
  background:#d9a441!important;
  color:#153b3a!important;
  box-shadow:0 8px 18px rgba(217,164,65,.24);
}
.qty button.is-tapped{animation:qtyTap .32s var(--ease)}
@keyframes qtyTap{
  0%{transform:scale(.92)}
  55%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
.cart-head>span.is-pulsing{animation:cartPulse .34s var(--ease)}
@keyframes cartPulse{
  0%{transform:scale(.86)}
  55%{transform:scale(1.14)}
  100%{transform:scale(1)}
}
.cart-item{
  transform:translateZ(0);
  transition:background-color .22s ease,box-shadow .22s ease,transform .22s var(--ease);
}
.cart-item.is-updated{animation:cartItemUpdate .38s var(--ease)}
@keyframes cartItemUpdate{
  0%{opacity:.72;transform:translate3d(8px,0,0) scale(.985);background:#f1dcae}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);background:#f5ead9}
}
.cart-items{
  scrollbar-width:thin;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.order-header,.cart-panel,.menu-section,.customer-panel{
  transform:translateZ(0);
}
.success-modal:not(.hidden) .success-backdrop{animation:fadeBackdrop .24s ease both}
.success-modal:not(.hidden) .success-card{animation:successPop .34s var(--ease) both}
@keyframes fadeBackdrop{from{opacity:0}to{opacity:1}}
@keyframes successPop{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.97)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@media (hover:hover) and (pointer:fine){
  .add-item:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(12,129,120,.18)}
  .qty button:hover{background:#edf8f6;border-color:rgba(13,139,129,.28)}
}
@media(max-width:700px){
  .order-header{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(248,240,228,.98)!important;
  }
  .customer-panel,.menu-section,.cart-panel{
    box-shadow:0 12px 30px rgba(22,49,46,.08)!important;
  }
  .menu-card{
    transition:transform .14s ease,border-color .14s ease,background-color .14s ease!important;
    box-shadow:none!important;
  }
  .menu-card:hover{transform:none!important;box-shadow:none!important}
  .submit-order{
    box-shadow:0 10px 24px rgba(8,116,107,.20),inset 0 1px 0 rgba(255,255,255,.18)!important;
  }
  .submit-order::before{display:none!important}
  .success-backdrop{
    backdrop-filter:blur(4px)!important;
    -webkit-backdrop-filter:blur(4px)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* =========================================================
   V20.7 — HUẾ ADDRESS PICKER & MOBILE FORM REFINEMENT
   ========================================================= */
.customer-fields select{
  min-height:48px;
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,transparent 50%,#0a7f76 50%),
    linear-gradient(135deg,#0a7f76 50%,transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.customer-fields label:has(#delivery-area),
.customer-fields label:has(#delivery-landmark){
  position:relative;
}
.customer-fields label:has(#delivery-area)::after{
  content:"40 phường / xã hiện hành";
  display:block;
  margin-top:2px;
  color:#7a877f;
  font-size:9px;
}
#delivery-area,#delivery-landmark{
  border-color:rgba(16,113,105,.20)!important;
  background-color:#fffdf8!important;
  box-shadow:0 8px 20px rgba(27,63,59,.04);
}
#delivery-area:focus,#delivery-landmark:focus{
  border-color:#0b8d82!important;
  box-shadow:0 0 0 4px rgba(11,141,130,.11),0 10px 22px rgba(27,63,59,.06)!important;
}
@media(max-width:700px){
  .customer-fields{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .customer-panel{padding:16px!important}
  .customer-fields input,.customer-fields select,.note-field textarea{
    min-height:50px;
    border-radius:15px!important;
    font-size:14px!important;
  }
  #delivery-landmark{font-size:13.5px!important}
}


/* V20.9 - Địa chỉ Huế chi tiết theo khu vực, phường/xã và thôn/TDP */
.customer-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.customer-fields select:disabled{opacity:.58;cursor:not-allowed;background:#eee8de}
.address-preview{
  display:flex;align-items:flex-start;gap:12px;padding:14px 15px;border-radius:16px;
  border:1px dashed rgba(13,139,129,.28);background:linear-gradient(135deg,#f4fbf8,#f7eddd);
}
.address-preview>span{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;background:#dceee9;color:#0a7f76;font-size:18px}
.address-preview div{display:grid;gap:4px;min-width:0}
.address-preview small{font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#0a8178}
.address-preview strong{font-size:12px;line-height:1.55;color:#64736e;font-weight:700;word-break:break-word}
.address-preview.ready{border-style:solid;background:linear-gradient(135deg,#e9f8f3,#f8eedf)}
.address-preview.ready>span{background:#0c8d82;color:#fff}
.address-preview.ready strong{color:var(--ink)}
@media(max-width:700px){
  .customer-fields{grid-template-columns:1fr!important}
  .address-preview{padding:13px;border-radius:15px}
}