:root{--paper:#f4ecdc;--paper2:#eadcc6;--ink:#27231f;--orange:#ef7200;--red:#cf4735;--chalk:#f7f0e3;--display:"Kalam","Patrick Hand",cursive;--hand:"Patrick Hand",cursive;--sans:"Be Vietnam Pro",sans-serif}
html,body{margin:0;padding:0;width:100%;max-width:100vw;overflow-x:hidden;position:relative}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px}.paper-noise{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");mix-blend-mode:multiply}

/* ==========================================
   1. CINEMATIC FULLSCREEN VIDEO HERO (HERO 1)
   ========================================== */
.video-hero-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 1;
  overflow: hidden;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gentle, staggered movement for the six signature dish photos. */
@keyframes signatureDishSway {
  0%, 100% { transform: rotate(-1.8deg) translateY(0); }
  50% { transform: rotate(1.8deg) translateY(-3px); }
}

.aesthetic-card .card-img-box img {
  transform-origin: 50% 58%;
  animation: signatureDishSway 4.8s ease-in-out infinite;
  will-change: transform;
}

.aesthetic-card:nth-child(2n) .card-img-box img { animation-direction: reverse; }
.aesthetic-card:nth-child(2) .card-img-box img { animation-delay: -.8s; animation-duration: 5.3s; }
.aesthetic-card:nth-child(3) .card-img-box img { animation-delay: -1.7s; animation-duration: 4.5s; }
.aesthetic-card:nth-child(4) .card-img-box img { animation-delay: -2.4s; animation-duration: 5.6s; }
.aesthetic-card:nth-child(5) .card-img-box img { animation-delay: -3.1s; animation-duration: 4.9s; }
.aesthetic-card:nth-child(6) .card-img-box img { animation-delay: -3.8s; animation-duration: 5.4s; }

.aesthetic-card:hover .card-img-box img {
  animation: none;
  transform: scale(1.08) rotate(0deg) translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .aesthetic-card .card-img-box img { animation: none; }
}

/* Compact floating order control on narrow screens so it never covers footer links. */
@media (max-width: 767px) {
  .floating-order-button {
    right: 14px !important;
    bottom: 14px !important;
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-width: 2.5px !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
  }

  .floating-order-button > span {
    display: block !important;
    grid-row: auto !important;
    font-size: 27px !important;
    line-height: 1 !important;
    transform: translateY(-1px);
  }

  .floating-order-button > strong,
  .floating-order-button > small {
    display: none !important;
  }
}

/* The two custom line drawings have more transparent padding than the original icons. */
.category-list .category:nth-child(2) .cat-thumb-img,
.category-list .category:nth-child(3) .cat-thumb-img {
  transform: scale(1.42) !important;
}

.category-list .category:nth-child(2):hover .cat-thumb-img,
.category-list .category:nth-child(2).active .cat-thumb-img,
.category-list .category:nth-child(3):hover .cat-thumb-img,
.category-list .category:nth-child(3).active .cat-thumb-img {
  transform: scale(1.55) !important;
}
.video-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.video-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
}
.video-vignette-overlay {
  display: none;
}
.video-hero-overlay {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1380px;
  height: 100%;
  padding: 80px 40px 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  color: #fff;
  user-select: none;
  box-sizing: border-box;
}
.video-hero-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform-origin: top left;
  animation: badgeFlyToCorner 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) 2s forwards;
  will-change: transform, top, left;
}
@keyframes badgeFlyToCorner {
  0%   { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
  30%  { top: 48%; left: 50%; transform: translate(-50%, -55%) scale(1.08); opacity: 1; }
  100% { top: clamp(20px, 5vh, 60px); left: clamp(20px, 4vw, 50px); transform: translate(0, 0) scale(0.48); opacity: 0.95; }
}

.hero-visual{height:100%;min-height:0;max-height:56vh;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;overflow:hidden}
.circular-hero-wrapper{position:relative;width:100%;height:100%;min-height:0;display:flex;justify-content:center;align-items:center;overflow:hidden}
.circular-wheel{width:min(44vh, 36vw);height:min(44vh, 36vw);aspect-ratio:1/1;border-radius:50%;border:none;box-shadow:none;position:relative;right:0;margin:0 auto;flex-shrink:0;display:flex;justify-content:center;align-items:center;transition:transform 1s cubic-bezier(.34,1.2,.64,1);will-change:transform;background:transparent;z-index:10}
.video-subhead {
  display: inline-block;
  background: rgba(239, 114, 0, 0.9);
  color: #fff;
  padding: 6px 18px;
  border-radius: 20px;
  font: 15px var(--sans);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.video-title {
  font: clamp(48px, 6.8vw, 95px)/0.95 var(--hand);
  font-weight: 700;
  color: #fff;
  margin: 12px 0 6px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.85);
  transform: rotate(-2deg);
}
.video-tagline {
  font: clamp(18px, 2.2vw, 26px) var(--hand);
  color: #f7f0e3;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.4;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85);
}
.video-hero-actions {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  z-index: 20;
  pointer-events: none;
}

.btn-video-sound {
  pointer-events: auto;
  background: rgba(39, 35, 31, 0.75);
  border: 1.5px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  color: #fff;
  padding: 8px 16px;
  font: 15px/1 var(--hand);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: transform 0.2s, background-color 0.2s;
  z-index: 25;
}

.btn-video-sound:hover {
  transform: scale(1.06);
  background: var(--orange);
  border-color: var(--orange);
}

.scroll-down-cue {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  text-decoration: none;
  font: 16px/1 var(--hand);
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
  animation: cueBounce 2s ease-in-out infinite;
  margin: 0;
  z-index: 22;
  white-space: nowrap;
  text-align: center;
}

.cue-mouse {
  width: 20px;
  height: 30px;
  border: 1.5px solid #fff;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.cue-wheel {
  width: 3.5px;
  height: 6px;
  background: #fff;
  border-radius: 2px;
  animation: wheelScroll 1.5s ease-in-out infinite;
}

.cue-arrow {
  font-size: 18px;
  line-height: 1;
}

@keyframes cueBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -8px); }
}

@keyframes wheelScroll {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}

/* ==========================================
   2. PARALLAX CURTAIN WRAPPER (HERO 2 & SECTIONS)
   ========================================== */
.curtain-content-wrapper {
  position: relative;
  z-index: 10;
  background: var(--paper);
  box-shadow: 0 -25px 60px rgba(0,0,0,0.55);
  border-top: 1px solid rgba(255,255,255,0.15);
  /* Push content below the fixed video with stable height */
  margin-top: 100vh;
  margin-top: 100svh;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
  padding-bottom: 20px;
}

.topbar{height:48px;min-height:48px;max-width:100%;width:100%;padding:0 clamp(16px, 3vw, 50px);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:9999;background-color:rgba(244,236,220,0.95);background-image:url("assets/reference/paper-main.png");background-size:96px 64px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-shrink:0;box-sizing:border-box;box-shadow:0 3px 12px rgba(39,35,31,0.15);border-bottom:2px solid rgba(39,35,31,0.28);transition:box-shadow 0.3s ease}
.topbar.is-fixed{box-shadow:0 4px 18px rgba(39,35,31,0.28)!important}
.header-hero-wrapper.has-fixed-topbar{padding-top:var(--fixed-topbar-height,48px)!important}
.brand{width:auto;min-width:110px;color:var(--ink);text-decoration:none;font:20px/16px var(--hand);font-weight:700;position:relative;transform:rotate(-3deg);text-shadow:0 1px 3px rgba(255,255,255,0.8);flex-shrink:0}.brand span,.brand b{display:block}.brand b{font-size:24px;margin-left:10px}.brand i{position:absolute;color:var(--orange);font:20px var(--hand);right:-6px;top:-2px;transform:rotate(-43deg)}
.desktop-nav{display:flex;gap:clamp(14px, 2vw, 30px);margin:0 auto;padding:0 8px}
.desktop-nav a{color:var(--ink);text-decoration:none;font:17px var(--hand);font-weight:700;position:relative;text-shadow:0 1px 3px rgba(255,255,255,0.9);letter-spacing:0.3px;white-space:nowrap}
.desktop-nav a:after{content:"";position:absolute;height:3px;background:var(--orange);left:0;right:100%;bottom:-3px;border-radius:2px;transition:.25s}
.desktop-nav a:hover:after,.desktop-nav a.active:after{right:0}
.nav-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.cart{padding:0;border:none;border-radius:0;background:none;text-decoration:none;position:relative;display:inline-flex;align-items:center;transition:transform .2s}
.cart:hover{transform:scale(1.08)}
.cart-icon-img{height:34px;width:auto;display:block;filter:drop-shadow(0 3px 6px rgba(39,35,31,.2))}
.cart b{position:absolute;right:-4px;top:-4px;background:var(--orange);color:white;width:16px;height:16px;border-radius:50%;font:700 11px/16px var(--sans);text-align:center;box-shadow:0 2px 5px rgba(0,0,0,0.25)}
.topbar-order-link{display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;border-radius:999px;background:var(--orange);color:#fff;text-decoration:none;font:800 13px var(--sans);letter-spacing:.04em;box-shadow:0 5px 14px rgba(239,114,0,.28);transition:transform .2s ease,box-shadow .2s ease}
.topbar-order-link:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(239,114,0,.38)}
.brush-button{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;text-decoration:none;padding:7px 16px;font:14px var(--hand);font-weight:600;border:0;cursor:pointer;clip-path:polygon(2% 18%,9% 8%,26% 12%,40% 5%,57% 10%,72% 5%,88% 13%,99% 7%,96% 32%,100% 51%,96% 74%,98% 91%,78% 87%,64% 96%,47% 90%,29% 96%,14% 88%,2% 93%,5% 68%,0 52%);transition:.2s}.brush-button:hover{transform:translateY(-2px) rotate(-1deg);background:#111}.mobile-menu{display:none;background:none;border:0;width:34px}.mobile-menu span{display:block;height:2px;background:var(--ink);margin:6px}
.header-hero-wrapper{background-image:url("../BG.png");background-size:cover;background-position:center center;background-repeat:no-repeat;position:relative;width:100%;max-width:100vw;height:100vh;height:100dvh;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;overflow:hidden}
.header-hero-wrapper main{height:calc(100vh - 48px);height:calc(100dvh - 48px);width:100%;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;overflow:visible;box-sizing:border-box}
.hero{height:calc(100vh - 198px);height:calc(100dvh - 198px);flex:1;min-height:0;max-height:calc(100vh - 198px);width:100%;max-width:100%;padding:0 clamp(16px, 2.5vw, 45px);display:grid;grid-template-columns:minmax(240px, 30%) 1fr;align-items:center;background:transparent;box-sizing:border-box;position:relative;overflow:visible}
.hero-copy{padding:8px 12px 6px 10px;position:relative;z-index:30;max-height:calc(100vh - 200px);display:flex;flex-direction:column;justify-content:center;background-color:rgba(244,236,220,0.88);background-image:url("assets/reference/paper-main.png");background-size:96px 64px;background-blend-mode:multiply;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:2px solid rgba(39,35,31,0.5);border-radius:18px;box-shadow:3px 4px 0 rgba(39,35,31,0.18),inset 0 1px 0 rgba(255,255,255,0.55);max-width:clamp(240px, 26vw, 340px);transform:translateX(-4px) rotate(-0.5deg);text-align:left}
.hero-copy:before{content:"";position:absolute;width:70px;height:18px;background:#d9c09c;top:-9px;left:25px;transform:rotate(-2deg);opacity:0.9;box-shadow:0 1px 3px rgba(0,0,0,0.12)}
.hero-default-copy{transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);will-change:opacity,transform;text-align:left}
.hero.show-dish .hero-default-copy{opacity:0;transform:translateX(-50px);pointer-events:none;position:absolute;visibility:hidden}
.hero-dish-detail{opacity:0;transform:translateX(40px);pointer-events:none;position:absolute;visibility:hidden;transition:opacity .65s cubic-bezier(.34,1.2,.64,1),transform .65s cubic-bezier(.34,1.2,.64,1);will-change:opacity,transform;width:100%;text-align:left}
.hero.show-dish .hero-dish-detail{opacity:1;transform:translateX(0);pointer-events:auto;position:relative;visibility:visible}
.hero-dish-title{font:clamp(20px, 2.6vh, 28px) var(--hand);font-weight:700;color:var(--ink);margin:0;letter-spacing:-.5px;line-height:1.1;text-align:left}
.hero-dish-desc{font-family:var(--hand);line-height:1.25;font-size:clamp(11.5px, 1.3vh, 14px);color:var(--ink);margin:3px 0 6px;max-width:100%;text-align:left;padding-left:0}
.hero-dish-action{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.hero-cart-btn{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;text-decoration:none;padding:4px 12px 4px 10px;border-radius:24px;font:clamp(13px, 1.6vh, 16px) var(--hand);font-weight:700;box-shadow:0 3px 10px rgba(39,35,31,.25);transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.hero-cart-svg{display:block;stroke:currentColor;transition:transform .2s ease}
.hero-cart-btn:hover{transform:translateY(-2px) scale(1.04);background:var(--orange);box-shadow:0 6px 16px rgba(239,114,0,.35)}
.hero-cart-btn:hover .hero-cart-svg{transform:rotate(-10deg) scale(1.1)}
.hero-dish-price{letter-spacing:.5px}
.heart-doodle{background:none;border:none;padding:0;cursor:pointer;font:24px var(--hand);color:var(--ink);margin-left:6px;vertical-align:middle;transition:transform .25s cubic-bezier(.34,1.5,.64,1),color .25s ease;user-select:none;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.heart-doodle:hover{transform:scale(1.25);color:var(--red)}
.heart-doodle.liked{color:var(--red);transform:scale(1.25);animation:heartPop .4s cubic-bezier(.34,1.5,.64,1)}
@keyframes heartPop{0%{transform:scale(.8)}50%{transform:scale(1.45)}100%{transform:scale(1.25)}}
.hero-ingredient-note{position:absolute;right:clamp(8px, 1.5vw, 28px);top:50%;transform:translateY(-50%) rotate(2.5deg) scale(.88);background:#f5ecdb;border:1.5px solid var(--ink);padding:8px 10px 5px;width:clamp(130px, 12vw, 165px);max-height:calc(100vh - 185px);box-shadow:3px 4px 0 rgba(39,35,31,.2);font-family:var(--hand);z-index:30;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .5s cubic-bezier(.34,1.2,.64,1),transform .5s cubic-bezier(.34,1.2,.64,1);will-change:opacity,transform;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");background-size:200px 200px;background-blend-mode:multiply}
.hero.show-dish .hero-ingredient-note{opacity:1;transform:translateY(-50%) rotate(2.5deg) scale(0.92);pointer-events:auto;visibility:visible}
.hero-ingredient-note.note-anim-trigger{animation:ingredientPopIn 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;}
@keyframes ingredientPopIn {
  0% { opacity: 0; transform: translateY(-40%) rotate(-4deg) scale(0.8); }
  60% { opacity: 1; transform: translateY(-52%) rotate(4deg) scale(0.96); }
  100% { opacity: 1; transform: translateY(-50%) rotate(2.5deg) scale(0.92); }
}
.hero-ingredient-note:after{content:"";position:absolute;inset:4px;border:1px dashed rgba(39,35,31,.35);pointer-events:none}
.hero-ingredient-note .tape{position:absolute;width:75px;height:18px;background:#d9c09c;left:25px;top:-9px;transform:rotate(4deg);opacity:.9}
.hero-ingredient-note h3{font-size:13.5px;margin:0 0 2px;border-bottom:1px solid var(--ink);color:var(--ink)}
.hero-ingredient-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1px;font-size:11px;line-height:1.15}
.hero-ingredient-note-tip{display:block;margin-top:2px;font-size:9px;color:#73695c}
.hero-copy h1{font:clamp(26px,2.8vh,40px)/.88 var(--hand);margin:0 0 6px;font-weight:500;transform:rotate(-2deg)}
.hero-title-img{margin:0 0 4px;padding:0;transform:none}
.hero-title-img img{max-width:180px;height:auto;display:block;filter:drop-shadow(0 2px 4px rgba(39,35,31,.15))}
.hero-copy h1 em{font-style:normal;color:var(--orange);position:relative}
.hero-copy h1 em:after{content:"";position:absolute;left:2px;right:0;bottom:-7px;height:4px;background:var(--orange);transform:rotate(-5deg);border-radius:50%}
.hero-copy p{font-family:var(--hand);line-height:1.25;font-size:14px;font-weight:400;margin:0 0 6px;color:var(--ink);letter-spacing:0.3px}
.hero-buttons{display:flex;gap:10px;align-items:center;margin-left:0}
.btn-img-layer img{height:32px;width:auto;display:block;transition:.2s}
.btn-img-layer:hover img{transform:translateY(-2px) scale(1.03)}
.pencil{position:absolute;color:#a79c89;opacity:.55;font:36px var(--hand)}
.scribble-one{right:8px;top:-60px;transform:rotate(-20deg)}
.face{right:30px;top:100px}
.hero-visual{height:100%;max-height:calc(100vh - 180px);min-height:0;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;overflow:visible}
.circular-hero-wrapper{position:relative;width:100%;height:100%;max-height:calc(100vh - 180px);min-height:0;display:flex;justify-content:center;align-items:center;overflow:visible}
.circular-wheel{width:min(calc(100vh - 170px), 48vw);height:min(calc(100vh - 170px), 48vw);aspect-ratio:1/1;border-radius:50%;border:none;box-shadow:none;position:relative;right:0;margin:0 auto;flex-shrink:0;display:flex;justify-content:center;align-items:center;transition:transform 1s cubic-bezier(.34,1.2,.64,1);will-change:transform;background:transparent;z-index:10}
.wheel-slide{position:absolute;inset:0;width:100%;height:100%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;z-index:2;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s ease;transform:none!important}
.wheel-slide.active{z-index:20;opacity:1;visibility:visible;pointer-events:auto}
.wheel-slide img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;border:none;background:transparent;box-shadow:none;pointer-events:auto;filter:drop-shadow(0 14px 28px rgba(39,35,31,.35));transition:transform .8s cubic-bezier(.34,1.2,.64,1),filter .4s ease;transform:scale(0.95);backface-visibility:hidden;-webkit-backface-visibility:hidden;image-rendering:-webkit-optimize-contrast}
.wheel-slide.active img{transform:scale(1.12);border:none;background:transparent;box-shadow:none;filter:drop-shadow(0 20px 42px rgba(39,35,31,.45))}
.category.active{background:rgba(239,114,0,.15);border-radius:14px;box-shadow:inset 0 0 0 2px var(--orange);transform:translateY(-4px) scale(1.05)}
.category.active b{color:var(--orange);font-weight:700}
.hero-sketch,.food-label,.fresh-stamp,.hotspot,.hotspot-tip{display:none!important}
.category-strip{height:100px;min-height:100px;max-height:100px;margin-top:-90px;margin-bottom:35px;width:100%;max-width:100%;padding:4px clamp(16px, 3vw, 40px) 6px;position:relative;text-align:center;background:rgba(244, 236, 220, 0.94);background-image:url("assets/reference/paper-main.png");background-size:96px 64px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:2.5px solid rgba(39, 35, 31, 0.28);box-shadow:0 -8px 24px rgba(39, 35, 31, 0.22);box-sizing:border-box;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;z-index:50}
.category-strip h2{display:inline-block;font:clamp(16px, 2.2vh, 20px) var(--hand);font-weight:700;color:var(--ink);margin:0 auto 2px;border-bottom:2px solid var(--ink);transform:rotate(-1deg)}
.category-list{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px, 1.2vw, 14px);align-items:center}
.category{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;font:16px var(--hand);min-width:0;transition:transform .25s ease}
.category .doodle-icon{height:clamp(36px, 5vh, 50px);width:75px;display:flex;align-items:center;justify-content:center;position:relative;transform:none!important;transition:transform .25s ease, filter .25s ease}
.cat-thumb-img{width:auto;height:100%;max-height:100%;max-width:54px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(39,35,31,0.22));transform:none!important;transition:transform .25s ease}
.category:hover .cat-thumb-img,.category.active .cat-thumb-img{transform:scale(1.12)!important}
.signature{background-image:url("assets/reference/signature-bg-layer.png");background-size:cover;background-position:center;min-height:480px;width:100%;max-width:100%;padding:45px clamp(24px, 4.5vw, 70px);display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-between:space-between;gap:40px;box-sizing:border-box}.signature-copy{padding:20px 24px;position:relative;z-index:2;max-width:450px}.signature-copy h2{font:36px var(--hand);margin:0}.orange-underline{display:block;width:230px;border-top:4px solid var(--orange);transform:rotate(-3deg);margin:3px 0 22px}.signature-copy p{font-family:var(--hand);line-height:1.45;font-size:22px;max-width:280px;margin-bottom:18px}.price-button-img{display:inline-block;vertical-align:middle;margin-top:12px}.price-button-img img{height:54px;width:auto;display:block;transition:.2s}.price-button-img:hover img{transform:translateY(-2px) scale(1.03)}.heart-doodle{font:35px var(--hand);margin-left:18px;vertical-align:middle}.ingredient-note{justify-self:end;background:#f8f1e4;border:1.5px solid var(--ink);padding:25px 25px 17px;max-width:240px;position:relative;transform:rotate(-2deg);box-shadow:2px 2px 0 rgba(39,35,31,.15);font-family:var(--hand);z-index:2}.ingredient-note:after{content:"";position:absolute;inset:4px;border:1px dashed rgba(39,35,31,.4);pointer-events:none}.ingredient-note .tape{position:absolute;width:100px;height:24px;background:#d9c09c;left:45px;top:-15px;transform:rotate(5deg);opacity:.9}.ingredient-note h3{font-size:23px;margin:0 0 12px;border-bottom:1px solid var(--ink)}.ingredient-note ul{list-style:none;padding:0;margin:0;font-size:17px;line-height:1.45}.ingredient-note small{display:block;margin-top:8px;font-size:11px}
.story-review{width:100%;max-width:100%;padding:0 clamp(24px, 4.5vw, 70px);display:grid;grid-template-columns:1fr 1fr;min-height:380px;box-sizing:border-box}.story-map{position:relative;overflow:hidden}.story-map-link{display:block;width:100%;height:100%;min-height:380px;position:relative;text-decoration:none;cursor:pointer}.story-map-link iframe{width:100%;height:100%;border:0;pointer-events:none;display:block;filter:sepia(0.1) saturate(0.95)}.story-map-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:24px;gap:4px;background:linear-gradient(to top,rgba(39,35,31,0.7) 0%,transparent 55%);transition:background .3s ease;color:#fff;text-align:center}.story-map-link:hover .story-map-overlay{background:linear-gradient(to top,rgba(239,114,0,0.8) 0%,rgba(239,114,0,0.2) 60%,transparent 100%)}.story-map-overlay span{font-size:32px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));transition:transform .3s ease}.story-map-link:hover .story-map-overlay span{transform:translateY(-6px) scale(1.2)}.story-map-overlay b{font:700 16px var(--hand);text-shadow:0 1px 4px rgba(0,0,0,.8)}.story-map-overlay small{font:13px var(--hand);opacity:.85;background:rgba(0,0,0,.35);padding:3px 10px;border-radius:10px}.story-card{background-image:url("assets/reference/story-card-bg-clean.png");background-size:cover;background-position:center;color:white;padding:36px 42px 30px;position:relative;clip-path:none;border-radius:0;box-shadow:none}.story-card p{font-family:var(--hand);font-size:28px;line-height:1.45;max-width:340px;margin-top:75px;position:relative;z-index:2;color:#f0f0f0}.story-card p span{color:var(--red)}.stall-doodle{display:none}.reviews h2{font:32px var(--hand);font-weight:700;margin:0 0 16px;border-bottom:2px solid currentColor;display:inline-block}.video-card{padding:30px 18px 15px;text-align:center;background:#e8dcc9}.video-paper{height:230px;background:#f5ead6;padding:9px;box-shadow:0 4px 8px rgba(39,35,31,.14);transform:rotate(1deg);position:relative}.video-paper img{width:100%;height:100%;object-fit:cover}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border:2px solid white;border-radius:50%;color:white;background:rgba(0,0,0,.26);font-size:25px;cursor:pointer}.video-card>span{display:inline-block;background:#decba9;padding:8px 35px;font:18px var(--hand);transform:rotate(-2deg)}.reviews{padding:30px 36px;background-image:url("assets/reference/review-card-bg.png");background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:center}.review-bubble{border:2px solid var(--ink);border-radius:40px 40px 40px 10px;padding:16px 22px;display:flex;align-items:center;gap:16px;margin:12px 0;position:relative;background:rgba(255,255,255,.28);box-shadow:2px 3px 0 rgba(39,35,31,0.12)}.review-bubble:after{content:"";position:absolute;right:28px;bottom:-12px;border:12px solid transparent;border-top-color:var(--ink);transform:rotate(-28deg)}.avatar,.avatar-img{flex:0 0 58px;width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);box-shadow:0 2px 6px rgba(0,0,0,0.15)}.avatar{display:grid;place-items:center;color:white;font-weight:bold;background:#7c5a3d}.a2{background:#a66c4e}.review-bubble b{font:700 18px var(--hand);color:var(--ink);letter-spacing:0.3px}.review-bubble strong{display:inline-block;margin-left:8px;color:var(--orange);font-size:15px;letter-spacing:2px}.review-bubble p{font:16px/1.45 var(--hand);color:var(--ink);margin:4px 0 0}.review-bubble i{color:var(--red)}
footer{min-height:170px;width:100%;max-width:100%;padding:24px clamp(24px, 4.5vw, 70px) 15px;display:grid;grid-template-columns:210px 260px 110px 200px 1fr;gap:20px;align-items:center;position:relative;border-top:1px solid rgba(39,35,31,.13);box-sizing:border-box}

.mobile-bottom {
  display: none !important;
}

/* ==========================================
   AESTHETIC CATEGORIZED MENU SECTION STYLING
   ========================================== */
.aesthetic-menu-section {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 35px clamp(24px, 4.5vw, 70px) 45px;
  position: relative;
  box-sizing: border-box;
}
.signature-menu-intro{max-width:680px;margin:10px auto 0;text-align:center;color:#66513b;font:18px/1.55 var(--hand)}
#menuCatPills,#menuSubCatPills{display:none!important}
#aestheticMenuGrid .card-qty-group,#aestheticMenuGrid .card-plus-btn{display:none!important}
.card-order-link{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;padding:0;border-radius:50%;background:var(--orange);color:#fff;text-decoration:none;transition:transform .2s ease,background-color .2s ease;box-shadow:0 4px 10px rgba(239,114,0,.25)}
.card-order-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-order-link:hover{transform:translateY(-2px);background:#d95e00}

/* Gi? h�ng cu du?c ng?ng s? d?ng; m?i don h�ng du?c th?c hi?n tr?c ti?p tr�n Sapo. */
.cart-drawer-overlay,.toast-notification{display:none!important}
.floating-order-button{position:fixed;right:22px;bottom:22px;z-index:1200;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:12px 18px 11px;border:2px solid rgba(255,255,255,.86);border-radius:999px;background:var(--orange);color:#fff;text-decoration:none;box-shadow:0 10px 28px rgba(39,35,31,.32);transition:transform .2s ease,box-shadow .2s ease}
.floating-order-button>span{grid-row:1/3;font-size:25px}.floating-order-button strong{font:900 14px/1 var(--sans);letter-spacing:.05em}.floating-order-button small{font:600 10px/1.2 var(--sans);opacity:.88}.floating-order-button:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 34px rgba(239,114,0,.42)}

@media(max-width:767px){
  .topbar-order-link{padding:7px 12px;font-size:11px}
  .floating-order-button{right:12px;bottom:78px;padding:10px 14px}
  .floating-order-button>span{font-size:21px}
  .floating-order-button strong{font-size:12px}
  .signature-menu-intro{font-size:16px;padding-inline:10px}
}

.aesthetic-menu-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-bottom: 28px;
}

.menu-heading-wrap .heading-tag {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font: 700 12px var(--sans);
  letter-spacing: 2px;
  padding: 4px 14px;
  border-radius: 15px;
  box-shadow: 0 2px 6px rgba(239, 114, 0, 0.3);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.menu-heading-wrap h2 {
  font: 700 36px var(--hand);
  color: var(--ink);
  margin: 0;
  transform: rotate(-1deg);
}

.menu-cat-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 4px 0 10px;
}

@media(max-width: 860px) {
  .menu-cat-pills {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 6px 12px 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
}

.menu-cat-pills::-webkit-scrollbar {
  display: none;
}

.cat-pill-btn {
  background: rgba(244, 236, 220, 0.9);
  background-image: url("assets/reference/paper-main.png");
  background-size: 96px 64px;
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 6px 14px;
  font: 700 14px var(--hand), "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(39,35,31,0.12);
  transition: all 0.2s ease;
  user-select: none;
  flex-shrink: 0;
}

.cat-pill-btn:hover {
  transform: translateY(-2px);
  background-color: #fff;
  box-shadow: 3px 3px 0 rgba(39,35,31,0.18);
}

.cat-pill-btn.active {
  background-color: var(--orange);
  background-image: none;
  color: #fff;
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: translateY(-2px) scale(1.03);
}

/* Sub-Category Pills Row */
.menu-subcat-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 4px 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.subcat-pill-btn {
  background: rgba(244, 236, 220, 0.85);
  border: 1.5px solid rgba(39, 35, 31, 0.3);
  border-radius: 14px;
  padding: 5px 12px;
  font: 600 13px/1 var(--hand);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease, background-color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.subcat-pill-btn:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: var(--ink);
}

.subcat-pill-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* Harmonize all sections across the entire site to 100% Full Width */
.hero,
.category-strip,
.aesthetic-menu-section,
.story-review,
footer,
.topbar {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ==========================================
   50/50 SPLIT SCREEN MENU EXPLORER
   ========================================== */
.menu-showcase-panel, .showcase-photo-frame {
  display: none !important;
}

.menu-split-container {
  display: block;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Danh s�ch m�n an tr�n 100% m�n h�nh theo chu?n UI burger app */
.menu-items-scroll-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0;
}

.subcat-group-block {
  width: 100%;
  box-sizing: border-box;
}

.subcat-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(39, 35, 31, 0.2);
}

.subcat-group-title h3 {
  font: 700 clamp(16px, 4vw, 20px) var(--hand);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.3px;
}

.subcat-group-badge {
  background: var(--orange);
  color: #fff;
  font: 700 12px var(--sans);
  padding: 2px 8px;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(239, 114, 0, 0.3);
}

.subcat-group-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media(max-width: 768px) {
  .subcat-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
}

.menu-items-scroll-list::-webkit-scrollbar {
  width: 5px;
}
.menu-items-scroll-list::-webkit-scrollbar-thumb {
  background: rgba(39, 35, 31, 0.25);
  border-radius: 4px;
}

/* Th? m�n an (Modern Compact Card Layout - 3 C?t Mobile) */
.aesthetic-card {
  background-color: rgba(244, 236, 220, 0.95);
  background-image: url("assets/reference/paper-main.png");
  background-size: 96px 64px;
  border: 1.5px solid rgba(39, 35, 31, 0.35);
  border-radius: 14px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 2px 3px 0 rgba(39, 35, 31, 0.12);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.25s ease, border-color 0.2s;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.aesthetic-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
  box-shadow: 3px 5px 10px rgba(239, 114, 0, 0.22);
}

.aesthetic-card.active-dish {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange), 2.5px 3.5px 8px rgba(239, 114, 0, 0.25);
}

.aesthetic-card .card-img-box {
  width: 100%;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 4px;
  overflow: visible;
}

.aesthetic-card .card-rank-tag {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 5;
  background: linear-gradient(135deg, #ff4e50, #f9d423);
  color: #fff;
  font: 800 10px/1 var(--sans);
  letter-spacing: 0.5px;
  padding: 3px 6px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(255, 78, 80, 0.4);
}

.aesthetic-card .card-img-box img {
  max-height: 85px;
  max-width: 100%;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 4px 8px rgba(39, 35, 31, 0.2));
  transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.aesthetic-card:hover .card-img-box img {
  transform: scale(1.08) translateY(-2px);
}

.aesthetic-card .card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  width: 100%;
}

.aesthetic-item-title {
  font: 700 clamp(12px, 3.2vw, 15px)/1.15 var(--hand);
  color: var(--ink);
  margin: 0 0 2px;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 3px;
  border-top: 1px dashed rgba(39, 35, 31, 0.2);
}

.aesthetic-item-price {
  font: 700 clamp(12px, 3.2vw, 15px) var(--sans);
  color: var(--orange);
  letter-spacing: -0.3px;
}

.card-plus-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  font: 700 16px/26px var(--sans);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}

@media(max-width: 768px) {
  .aesthetic-card {
    padding: 5px 4px 6px;
    border-radius: 10px;
  }

  .aesthetic-card .card-img-box {
    height: 72px;
    margin-bottom: 2px;
  }

  .aesthetic-card .card-rank-tag {
    font-size: 8.5px;
    padding: 2px 4px;
    border-radius: 4px;
  }

  .aesthetic-card .card-img-box img {
    max-height: 68px;
  }

  .aesthetic-item-title {
    font-size: clamp(11px, 2.9vw, 13px);
    line-height: 1.15;
    margin-bottom: 2px;
  }

  .card-footer-row {
    padding-top: 2px;
  }

  .aesthetic-item-price {
    font-size: clamp(11px, 3vw, 13px);
  }

  .card-plus-btn {
    width: 22px;
    height: 22px;
    font-size: 14px;
    line-height: 22px;
  }
}

.card-plus-btn:hover {
  transform: scale(1.15);
  background: var(--orange);
}

.card-plus-btn:hover {
  transform: scale(1.15);
  background: var(--orange);
}

.card-plus-btn.has-qty {
  background: var(--orange);
  box-shadow: 0 3px 8px rgba(239, 114, 0, 0.4);
}

.card-qty-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e63946;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 10px;
  font: 700 11px/1 var(--sans);
  padding: 2px 5px;
  min-width: 16px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  animation: badgePopIn 0.25s cubic-bezier(0.34, 1.5, 0.64, 1);
  pointer-events: none;
}

@keyframes badgePopIn {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.card-plus-btn:hover {
  background: var(--orange);
  transform: scale(1.12);
  box-shadow: 0 3px 8px rgba(239,114,0,0.35);
}

.card-plus-btn:active {
  transform: scale(0.92);
}

/* 50% B�n Ph?i: Khung H�nh To Vu�ng V?n */
.menu-showcase-panel {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
}

.showcase-photo-frame {
  background-color: #fff;
  background-image: url("assets/reference/paper-main.png");
  background-size: 96px 64px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 16px;
  position: relative;
  box-shadow: 4px 6px 0 rgba(39,35,31,0.18);
  transform: rotate(0.5deg);
}

.showcase-photo-frame .top-tape {
  position: absolute;
  width: 90px;
  height: 20px;
  background: #d9c09c;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  opacity: 0.9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  z-index: 5;
}

.showcase-img-box {
  width: 100%;
  height: 380px; /* Tang chi?u cao cho khung h�nh vu�ng v?n v� sang hon */
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  background: #f7ede0;
  position: relative;
}

.showcase-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.showcase-stamp-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--orange);
  color: #fff;
  font: 700 11px var(--sans);
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.showcase-dish-info {
  padding-top: 14px;
}

.showcase-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.showcase-title-row h3 {
  font: 700 24px/1.2 var(--hand);
  color: var(--ink);
  margin: 0;
}

.showcase-dish-price {
  font: 700 24px var(--hand);
  color: var(--orange);
  white-space: nowrap;
}

.showcase-dish-info p {
  font: 15px/1.45 var(--hand);
  color: #635647;
  margin: 0 0 14px;
}

.btn-showcase-add {
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 12px;
  font: 700 18px var(--hand);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(39,35,31,0.25);
  transition: transform 0.2s, background-color 0.2s;
}

.btn-showcase-add:hover {
  background: var(--orange);
  transform: translateY(-2px);
}

.aesthetic-item-title {
  font: 700 19px/1.25 var(--hand);
  color: var(--ink);
  margin: 0 0 4px;
}

.aesthetic-item-desc {
  font: 13px/1.35 var(--hand);
  color: #695e52;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aesthetic-card-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px dashed rgba(39, 35, 31, 0.2);
  padding-top: 8px;
  margin-top: auto;
}

.aesthetic-item-price {
  font: 700 20px var(--hand);
  color: var(--orange);
  letter-spacing: 0.3px;
}

.aesthetic-item-tag {
  font: 700 11px var(--sans);
  color: #8c7f6f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

footer {
  min-height: 170px;
  width: 100%;
  max-width: 100%;
  padding: 30px clamp(24px, 4.5vw, 70px) 35px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  position: relative;
  border-top: 1.5px solid rgba(39, 35, 31, 0.18);
  box-sizing: border-box;
  background: var(--paper);
}

.contact {
  flex: 1 1 auto;
  max-width: 240px;
}
.contact h3 {
  font: 700 24px var(--hand);
  margin: 0 0 6px;
  color: var(--ink);
}
.contact p {
  font: 16px/1.5 var(--hand);
  color: var(--ink);
  margin: 0;
}

.footer-cta {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-cta a {
  display: inline-block;
  text-decoration: none;
}
.footer-cta img {
  max-height: 125px; /* Tang chi?u cao to r�, kh�ng b? h?p */
  width: auto;
  max-width: 330px;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(39,35,31,0.18));
  transition: transform 0.25s cubic-bezier(0.34, 1.3, 0.64, 1), filter 0.25s ease;
}
.footer-cta a:hover img {
  transform: scale(1.08) rotate(-1.5deg);
  filter: drop-shadow(0 6px 16px rgba(239,114,0,0.3));
}

.scooter {
  font-size: 58px;
  transform: rotate(-5deg);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  animation: steam 2.5s infinite ease-in-out;
}

.hours-note {
  background: #e9a443;
  padding: 14px 18px;
  transform: rotate(-4deg);
  font-family: var(--hand);
  box-shadow: 3px 4px 8px rgba(39,35,31,.18);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
}
.hours-note b {
  display: block;
  font-size: 20px;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 4px;
}
.hours-note span {
  display: block;
  font-size: 15px;
  line-height: 1.3;
}

.follow-wrapper {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
}
.follow-img-box img {
  width: 210px;
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(39,35,31,.1));
}

.social-links.vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.social-btn:hover {
  transform: translateY(-2px) scale(1.15);
  box-shadow: 0 5px 12px rgba(0,0,0,0.32);
}
.social-btn.facebook { background: #1877f2; }
.social-btn.tiktok { background: #111; color: #fff; }
.social-btn.sapo { background: #0088ff; color: #fff; }

footer > small {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-family: var(--hand);
  color: #8c7f6f;
  white-space: nowrap;
}
@keyframes sketch-draw{to{stroke-dashoffset:0}}@keyframes steam{0%,100%{opacity:.8;transform:translateY(0) rotate(-7deg)}50%{opacity:.2;transform:translateY(-18px) rotate(7deg)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* T? l? desktop du?c kh�a theo artboard tham chi?u. */
@media(min-width:761px){
  .topbar{height:48px;min-height:48px}
  .hero{min-height:0;padding-bottom:0}
  .hero-visual{height:100%;max-height:58vh}
  .brush-photo img{height:410px}
  .food-label{font-size:18px;line-height:16px}
  .fresh-stamp{width:105px;height:105px}.fresh-stamp b{font-size:26px}.fresh-stamp span{font-size:14px;line-height:14px}
  .category-strip h2{font-size:15px;margin-bottom:2px}
  .doodle-icon{height:32px;font-size:26px}
  .category{font-size:13px}.round-arrow{top:35px}
  .signature{min-height:380px;padding-top:25px;padding-bottom:25px}
  .signature-copy{padding:10px 16px}.signature-copy h2{font-size:26px;white-space:nowrap}
  .orange-underline{width:205px;margin-bottom:12px}
  .signature-copy p{font-size:11px;line-height:1.48}.price-button{font-size:19px;margin-top:8px}
  .signature-photo{height:330px}
  .ingredient-note{padding:20px 20px 13px}.ingredient-note h3{font-size:20px}.ingredient-note ul{font-size:15px}
  .story-review{min-height:275px;padding-top:7px;padding-bottom:7px}
  .story-card{padding:20px 38px}.story-card h2,.reviews h2{font-size:22px}.story-card p{font-size:10px}
  .stall-doodle{height:86px;bottom:12px}
  .video-card{padding:18px 14px 9px}.video-paper{height:185px}.video-card>span{padding:5px 30px}
  .reviews{padding:18px 28px}.review-bubble{padding:9px 14px;margin:7px 0}
  .gallery{padding-top:12px;padding-bottom:13px}.gallery-title{padding-top:18px}.gallery-title h2{font-size:21px;line-height:22px}
  .food-card img{height:92px}.food-card b,.food-card em{font-size:15px;line-height:16px}
  footer{min-height:140px;padding-top:13px;padding-bottom:7px}.hours-note{padding:13px}.footer-cta h2{font-size:23px;line-height:22px}
}
@media(min-width:761px) and (max-width:1100px){
  footer{grid-template-columns:180px 220px 110px 220px 170px;gap:8px}
  .desktop-nav{gap:27px}.topbar{padding-left:44px;padding-right:44px}
  .nav-actions{gap:9px}.cart{padding-left:10px;padding-right:10px}
  .gallery{grid-template-columns:1.05fr repeat(5,1fr) 30px;gap:8px}
}

/* ==========================================
   MOBILE RESPONSIVE AUDIT & LAYOUT REFINEMENT (<= 768px)
   ========================================== */
@media(max-width: 768px) {
  body {
    padding-bottom: 0;
    overflow-x: hidden;
    max-width: 100vw;
  }

  .curtain-content-wrapper {
    margin-top: 100vh;
    margin-top: 100svh;
    padding-bottom: 0;
  }

  /* Video Hero Controls Mobile */
  .video-hero-actions {
    bottom: 14px;
    padding: 0 14px;
  }
  .btn-video-sound {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 20px;
    gap: 4px;
  }
  .btn-video-sound .sound-icon {
    font-size: 14px;
  }
  .btn-video-sound .sound-label {
    font-size: 12px;
  }
  .scroll-down-cue {
    bottom: 12px;
    font-size: 13px;
  }
  .cue-mouse {
    width: 18px;
    height: 28px;
    border-width: 1.5px;
    padding-top: 4px;
  }
  .cue-wheel {
    width: 3px;
    height: 5px;
  }
  .cue-arrow {
    font-size: 16px;
  }

  /* Topbar Mobile */
  .topbar {
    height: 60px;
    padding: 0 14px;
  }
  .brand {
    font-size: 20px/16px var(--hand);
    min-width: 100px;
  }
  .brand b {
    font-size: 24px;
    margin-left: 10px;
  }
  .desktop-nav {
    display: none;
  }
  .nav-actions {
    display: flex;
    gap: 10px;
  }
  .nav-actions .brush-button {
    display: none;
  }
  .cart-icon-img {
    height: 36px;
  }

  /* Page 2 Hero Mobile Stage (Perfect 1-Screen Ratio Scaling) */
  /* Page 2 Hero Mobile Stage - Clean Natural Flow Without Address-Bar Jitter */
  .header-hero-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    box-sizing: border-box;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .header-hero-wrapper main {
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: 100%;
    overflow: visible !important;
    box-sizing: border-box;
  }

  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 10px !important;
    gap: 4px;
    width: 100%;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
  }

  .hero-ingredient-note {
    display: none !important;
  }

  /* Center Dish Plate Wheel Mobile (Order 1 - Dynamic Flex Scaling) */
  .hero-visual {
    order: 1;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: 38vh !important;
    min-height: 0 !important;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    overflow: visible;
    margin: 0 auto;
  }

  .circular-hero-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
  }

  .circular-wheel {
    width: clamp(130px, 26vh, 175px) !important;
    height: clamp(130px, 26vh, 175px) !important;
    position: relative;
    right: 0;
    margin: 0 auto;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wheel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wheel-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .wheel-slide.active img {
    transform: scale(1.05);
    rotate: 0deg;
  }

  /* Dish Info Card Mobile (Order 2) */
  .hero-copy {
    order: 2;
    width: 100%;
    max-width: clamp(270px, 92vw, 360px);
    margin: 0 auto;
    padding: 8px 12px 6px;
    transform: none;
    box-sizing: border-box;
    position: relative;
    z-index: 20;
    background-color: rgba(244, 236, 220, 0.94);
    border-radius: 14px;
    flex-shrink: 1;
    overflow: visible;
  }

  .hero-dish-title {
    font-size: clamp(17px, 4.2vw, 21px);
    line-height: 1.1;
  }

  .hero-dish-desc {
    font-size: clamp(11px, 2.7vw, 13px);
    line-height: 1.25;
    margin: 2px 0 5px;
  }

  .hero-dish-action {
    gap: 8px;
    margin-bottom: 0;
  }

  .hero-cart-btn {
    padding: 4px 11px;
    font-size: clamp(12.5px, 3.2vw, 14.5px);
    border-radius: 16px;
  }

  .heart-doodle {
    font-size: 20px;
    margin-left: 4px;
  }

  /* Category Strip Mobile (Order 3 - Pinned to bottom, zero blank space) */
  .category-strip {
    order: 3;
    width: 100%;
    padding: 6px 4px 10px;
    flex-shrink: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto;
    min-height: 0;
    z-index: 40;
    box-sizing: border-box;
  }

  .category-strip h2 {
    font-size: 14px;
    margin: 0 auto 4px;
    line-height: 1.1;
  }

  .category-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }

  .category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 2px 1px;
    min-width: 0;
  }

  .category .doodle-icon {
    height: clamp(38px, 6vh, 44px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .cat-thumb-img {
    height: 100%;
    max-height: 40px;
    width: auto;
    max-width: 44px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(39,35,31,0.2));
  }

  .category b {
    font-size: clamp(9px, 2.4vw, 11px);
    font-family: var(--hand);
    color: var(--ink);
    text-align: center;
    white-space: nowrap;
    margin-top: 2px;
    line-height: 1.1;
    display: block;
  }

  /* Menu Explorer (Th?c don ph? n�i) */
  .aesthetic-menu-section {
    padding: 25px 16px 35px;
  }
  .aesthetic-item-desc {
    display: none !important;
  }
  .aesthetic-card {
    padding: 10px 14px;
    min-height: auto;
  }
  .menu-cat-pills {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 6px 4px 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .menu-split-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .menu-showcase-panel {
    position: static!important;
    order: -1;
  }
  .showcase-photo-frame {
    transform: none;
    padding: 12px;
  }
  .showcase-img-box {
    height: 220px;
  }
  .showcase-title-row h3 {
    font-size: 20px;
  }
  .showcase-dish-price {
    font-size: 20px;
  }
  .menu-items-scroll-list {
    grid-template-columns: 1fr;
    max-height: 480px;
    padding-right: 4px;
  }

  /* B?n D? Google Maps & D�nh Gi� Kh�ch H�ng */
  .story-review {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    gap: 24px;
  }
  .story-map {
    width: 100%;
    min-height: 240px;
    border-radius: 16px;
    border: 2px solid var(--ink);
    overflow: hidden;
  }
  .story-map-link {
    min-height: 240px;
  }
  .reviews {
    padding: 0;
    background: none;
  }
  .review-bubble {
    margin: 8px 0;
    padding: 12px 16px;
    border-radius: 20px;
  }

  /* Footer Mobile */
  footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 35px 20px 95px;
    gap: 22px;
    box-sizing: border-box;
  }
  .contact {
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }
  .contact h3 {
    font: 700 24px var(--hand);
    color: var(--ink);
    margin: 0 0 8px;
    border-bottom: 2px solid var(--ink);
    display: inline-block;
  }
  .contact p {
    font: 16px/1.5 var(--hand);
    color: var(--ink);
    margin: 0;
  }
  .follow-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0 auto;
  }
  .follow-img-box img {
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .social-links,
  .social-links.vertical {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 4px;
  }
  .footer-cta {
    margin: 0 auto;
    text-align: center;
  }
  .footer-cta img {
    max-height: 85px;
    max-width: 240px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .scooter {
    display: flex;
    font-size: 38px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  .hours-note {
    transform: rotate(-1deg);
    margin: 0 auto;
    text-align: center;
    background: #f8f1e4;
    border: 1.5px solid var(--ink);
    padding: 10px 20px;
    box-shadow: 2px 2px 0 rgba(39,35,31,0.12);
  }
  footer > small {
    position: static;
    transform: none;
    margin-top: 8px;
    font-size: 11px;
    color: #8c7f6f;
  }
  /* Thanh di?u hu?ng du?i c�ng Mobile (Ch? xu?t hi?n t? Page 2 tr? di tr�n Mobile <= 768px - 5 M?c) */
  .mobile-bottom {
    display: grid !important;
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #fdf7ec;
    background-image: url("assets/reference/paper-main.png");
    background-size: 96px 64px;
    border-top: 2px solid var(--ink);
    grid-template-columns: repeat(5, 1fr);
    padding: 3px 2px 5px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.3s ease, visibility 0.3s ease;
  }

  .mobile-bottom.show-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .mobile-bottom a {
    color: var(--ink);
    text-decoration: none;
    text-align: center;
    font: 700 clamp(9.5px, 2.5vw, 11px) var(--sans);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0 1px;
    white-space: nowrap;
  }

  .mobile-bottom span {
    font-size: 17px;
    line-height: 1;
  }

  .mobile-bottom .active {
    color: var(--orange);
  }

  .mobile-bottom i {
    position: absolute;
    top: 2px;
    right: 20%;
    background: var(--orange);
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-style: normal;
    font-size: 10px;
    font-weight: bold;
    display: grid;
    place-items: center;
  }
}

/* Raster assets extracted directly from the supplied 1024 � 1536 reference & layer directories. */
body{background-color:var(--paper);background-image:url("assets/reference/paper-main.png");background-size:96px 64px}
.paper-noise{opacity:.07}
.doodle-icon{font-size:0!important;background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .25s ease, filter .25s ease}
.doodle-icon>*{display:block}
.category:nth-child(1) .doodle-icon{background-image:none;background-size:contain!important;transform:scale(1.65)!important}
.category:nth-child(1):hover .doodle-icon{transform:rotate(3deg) scale(1.95)!important;filter:drop-shadow(0 3px 6px rgba(239,114,0,.5))!important}
.category:nth-child(2) .doodle-icon,.category:nth-child(3) .doodle-icon,.category:nth-child(4) .doodle-icon,.category:nth-child(5) .doodle-icon,.category:nth-child(6) .doodle-icon{background-image:none}
.category.active .doodle-icon:after{display:none}
.round-arrow{border:0!important;background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;font-size:0!important}
.round-arrow.prev{background-image:url("assets/reference/arrow-left.png")!important}
.round-arrow.next{background-image:url("assets/reference/arrow-right.png")!important}
.signature{background-image:url("assets/reference/signature-bg-layer.png")!important;background-size:cover!important;background-position:center!important}
.stall-doodle{left:30px;right:25px;bottom:5px;height:120px;border:0;background:url("assets/reference/doodle-stall.png") center bottom/contain no-repeat}
.stall-doodle:before,.stall-doodle>*{display:none}
.stall-doodle:after{content:"Qu�n ngon\A x?p x?p";white-space:pre;display:grid;place-items:center;position:absolute;left:26%;right:24%;top:-9%;bottom:25%;background:#282725;color:#fff;font:16px/15px var(--hand);border:1px solid #fff}
.story-card:after{content:"";position:absolute;right:24px;top:24px;width:55px;height:61px;background:url("assets/reference/doodle-lamp.png") center/contain no-repeat}
.video-card{padding:10px 0;text-align:center;background:none;transition:transform .25s ease;display:flex;flex-direction:column;align-items:center;justify-content:center}
.video-card:hover{transform:translateY(-6px)}
.video-paper{height:250px;width:100%;max-width:320px;margin:0 auto 15px}
.video-card>span{display:inline-block;width:220px;height:48px;padding:0;background:url("assets/reference/tape-video.png") center/contain no-repeat;color:transparent;font-size:0;transition:transform .25s ease;cursor:pointer}
.video-card>span:hover{transform:rotate(-2deg) scale(1.08) translateY(-4px)}
.gallery{background-image:url("assets/reference/menu-gallery-bg.png");background-size:cover;background-position:center}
.gallery-title h2,.gallery-title span,.cup-doodle{visibility:hidden!important}
footer{min-height:190px;max-width:1380px;margin:0 auto;padding:24px 20px 15px;display:grid;grid-template-columns:220px 270px 150px 270px 210px;gap:10px;align-items:center;position:relative;border-top:1px solid rgba(39,35,31,.13);background:none;border-radius:0;box-shadow:none}
.contact{margin:0;font-family:var(--hand)}
.contact h3{font-size:24px;margin:0 0 6px;letter-spacing:0.5px}
.contact p{font-size:16px;line-height:1.75;margin:0;color:var(--ink)}
.footer-cta{margin:auto}
.footer-cta img{width:250px;height:auto;display:block;transition:.2s}
.footer-cta a:hover img{transform:scale(1.04)}
.follow{border:none;border-radius:0;padding:0;transform:none;min-width:auto;margin:auto}
.follow img{width:260px;max-width:100%;height:auto;display:block;filter:drop-shadow(0 2px 4px rgba(39,35,31,.1))}
.hours-note{width:200px;height:128px;padding:0;background:url("assets/reference/footer-hours-layer.png") center/contain no-repeat;box-shadow:none;transform:none;margin:auto;filter:drop-shadow(0 2px 4px rgba(39,35,31,.1))}
.hours-note>*{visibility:hidden}
.scooter{width:140px;height:90px;background:url("assets/reference/footer-scooter-layer.png") center/contain no-repeat;font-size:0;transform:none;margin:auto}

@media(min-width:761px){
  .hero-buttons .brush-button{width:114px;height:46px;padding:0;background:url("assets/reference/hero-btn-layer.png") center/contain no-repeat;color:transparent;clip-path:none;font-size:0}
  .nav-actions .brush-button{width:128px;height:45px;padding:0;background:url("assets/reference/button-order-top.png") center/contain no-repeat;color:transparent;clip-path:none;font-size:0}
  .price-button{width:184px;height:52px;padding:0;background:url("assets/reference/button-price.png") center/contain no-repeat;color:transparent;clip-path:none;font-size:0}
}

@media(max-width:760px){
  .hours-note{width:150px;height:96px}
  .scooter{display:none}
  footer{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    min-height: unset;
    padding: 18px 16px 30px;
    gap: 12px;
    align-items: start;
  }
  .contact{ grid-column: 1 / 2; grid-row: 1; }
  .footer-map{ grid-column: 2 / 3; grid-row: 1; width: 100%; height: 110px; }
  .footer-cta{ grid-column: 1 / 2; grid-row: 2; }
  .footer-cta img{ width: 180px; }
  .follow{ grid-column: 2 / 3; grid-row: 2; }
  .follow img{ width: 160px; }
  .hours-note{ grid-column: 1 / 2; grid-row: 3; width: 130px; height: 82px; }
  .scooter{ display: none; }
  footer > small{ bottom: 8px; font-size: 9px; }
}

/* Typography and paper-edge layers reconstructed from the original artboard. */
.hero-copy h1,
.category-strip h2,
.signature-copy h2,
.story-card h2,
.reviews h2,
.gallery-title h2,
.contact h3,
.footer-cta h2,
.ingredient-screen h2{font-family:var(--hand)}
.footer-cta h2{transform:rotate(-2deg);font-style:italic}
.hero-copy h1{font-weight:400;letter-spacing:-2px}
.category-strip h2,.signature-copy h2,.story-card h2,.reviews h2{font-weight:700;letter-spacing:-.5px}

/* Keep menu cards at their content height instead of stretching every grid row. */
.subcat-group-grid { align-items: start; gap: 10px; }
.aesthetic-card { height: auto; min-height: 0; justify-content: flex-start; }
.aesthetic-card .card-content { flex: 0 1 auto; }
.aesthetic-card .card-img-box { height: 96px; margin-bottom: 4px; }
.aesthetic-card .card-img-box img { max-height: 88px; }
.aesthetic-item-desc { margin-bottom: 5px; }

.signature,.story-review,.gallery,footer{position:relative}
.signature:before,.story-review:before,.gallery:before,footer:before{content:"";position:absolute;left:0;right:0;z-index:4;pointer-events:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.signature:before,.story-review:before,.gallery:before,footer:before{display:none!important}

@media(min-width:761px){
  .brush-photo{clip-path:none;-webkit-mask:none;mask:none}
  footer{min-height:150px}
}

@media(max-width:760px){
  .brush-photo{-webkit-mask:none;mask:none}
  .hero:after{display:none!important}
  .hero-copy h1{font-size:54px;line-height:.82;letter-spacing:-2.5px}
  .signature:before,.story-review:before,.gallery:before,footer:before{background-size:auto 100%}
  /* Sticky topbar on mobile */
  .topbar{position:sticky;top:0;left:0;right:0;width:100%;height:62px;padding:0 16px;z-index:300;background-color:rgba(244,236,220,0.92);background-image:url("assets/reference/paper-main.png");background-size:96px 64px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1.5px solid rgba(39,35,31,0.3);box-shadow:0 3px 10px rgba(39,35,31,0.12)}
  .header-hero-wrapper{padding-top:0}
  .curtain-content-wrapper{padding-top:0}
  /* Fix category icons overflow */
  .category-strip{padding:8px 0 20px;overflow:hidden}
  .category-list{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:0;padding:0 16px 8px;scrollbar-width:none}
  .category-list::-webkit-scrollbar{display:none}
  .category{flex:0 0 auto;width:88px;scroll-snap-align:start;padding:0 4px}
  .category .doodle-icon{width:68px;height:60px}
  .category:nth-child(1) .doodle-icon{transform:scale(1.4)!important}
  .round-arrow{display:none}
}
/* Full Combo Animations & Hand-drawn Floating Effects */
@keyframes hand-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}
@keyframes play-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(239, 114, 0, 0.4); }
  50% { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 14px rgba(239, 114, 0, 0); }
}
@keyframes scooter-shake {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-1.5deg); }
  75% { transform: translateY(1px) rotate(1.5deg); }
}
@keyframes cart-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px) rotate(-4deg); }
  70% { transform: translateY(-2px) rotate(2deg); }
}

/* Floating Elements */
.follow img, .hours-note {
  animation: hand-float 4s ease-in-out infinite;
}
.follow img { animation-delay: 0.5s; }
.scooter {
  animation: scooter-shake 2.5s ease-in-out infinite;
}
.cart:hover .cart-icon-img {
  animation: cart-bounce 0.5s ease-in-out;
}

/* Hover Micro-Tilts for Doodle Feel */
.food-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.food-card:hover {
  transform: translateY(-8px) scale(1.05) rotate(-2deg) !important;
}
.category {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.category:hover {
  transform: translateY(-5px) scale(1.08);
}

/* Dynamic & Randomized Scroll Reveal Styles */
.reveal {
  opacity: 1;
  transition: opacity 0.7s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotate(0deg) !important;
}

/* Staggered Delays for Children Elements */
.stagger-item {
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: opacity, transform;
}
.stagger-item.revealed {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}

/* ==========================================
   SHOPPING CART & CHECKOUT SLIDEOVER DRAWER
   ========================================== */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001 !important;
  background: rgba(39, 35, 31, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  display: flex;
  justify-content: flex-end;
}
.cart-drawer-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.cart-drawer {
  width: 100%;
  max-width: 480px;
  height: 100%;
  background: #fbf6ec;
  border-left: 2px solid var(--ink);
  box-shadow: -10px 0 35px rgba(39, 35, 31, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.cart-drawer-overlay.open .cart-drawer {
  transform: translateX(0);
}
.cart-drawer-header {
  padding: 20px 24px;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-header-title h2 {
  font: 26px var(--hand);
  margin: 0;
  color: var(--ink);
}
.cart-header-icon {
  font-size: 24px;
}
.cart-items-count-badge {
  background: var(--orange);
  color: #fff;
  font: 700 13px/20px var(--sans);
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  text-align: center;
}
.cart-drawer-close {
  background: none;
  border: none;
  font-size: 24px;
  font-weight: bold;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: transform 0.2s, color 0.2s;
}
.cart-drawer-close:hover {
  transform: scale(1.2) rotate(90deg);
  color: var(--red);
}
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.freeship-bar-wrapper {
  background: #f2e6d0;
  border: 1.5px dashed var(--ink);
  padding: 12px 16px;
  border-radius: 12px;
}
.freeship-text {
  font-size: 13px;
  font-family: var(--hand);
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--ink);
}
.freeship-track {
  height: 8px;
  background: rgba(39, 35, 31, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.freeship-progress {
  height: 100%;
  background: linear-gradient(90deg, #ef7200, #2ecc71);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-item {
  display: grid;
  grid-template-columns: 65px 1fr auto;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--ink);
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 2px 2px 0 rgba(39, 35, 31, 0.1);
  transition: transform 0.2s;
}
.cart-item:hover {
  transform: translateY(-2px);
}
.cart-item img {
  width: 65px;
  height: 65px;
  object-fit: contain;
}
.cart-item-info h4 {
  font: 18px var(--hand);
  margin: 0 0 4px;
  color: var(--ink);
}
.cart-item-price {
  font-weight: 700;
  color: var(--orange);
  font-size: 15px;
}
.cart-item-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.cart-qty-pill {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  overflow: hidden;
}
.cart-qty-btn {
  background: none;
  border: none;
  width: 26px;
  height: 26px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.15s;
}
.cart-qty-btn:hover {
  background: var(--orange);
  color: #fff;
}
.cart-qty-val {
  font-size: 13px;
  font-weight: bold;
  padding: 0 8px;
  min-width: 20px;
  text-align: center;
}
.cart-item-remove {
  background: none;
  border: none;
  color: #999;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.cart-item-remove:hover {
  color: var(--red);
}
.cart-voucher-box {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 12px 14px;
  border-radius: 12px;
}
.voucher-input-group {
  display: flex;
  gap: 8px;
}
.voucher-input-group input {
  flex: 1;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--sans);
  text-transform: uppercase;
}
.voucher-input-group button {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font: 16px var(--hand);
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}
.voucher-input-group button:hover {
  background: var(--orange);
}
.voucher-message {
  font-size: 12px;
  margin-top: 6px;
  font-family: var(--hand);
}
.voucher-message.success { color: #27ae60; font-weight: bold; }
.voucher-message.error { color: var(--red); }
.cart-note-box label {
  display: block;
  font: 16px var(--hand);
  margin-bottom: 6px;
  color: var(--ink);
}
.cart-note-box textarea {
  width: 100%;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--sans);
  background: #fff;
  resize: vertical;
}
.cart-price-summary {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #555;
}
.summary-row b {
  color: var(--ink);
}
.summary-row.total-row {
  border-top: 1.5px dashed var(--ink);
  padding-top: 10px;
  margin-top: 4px;
  font-size: 17px;
  font-weight: bold;
  color: var(--ink);
}
.summary-row.total-row b {
  color: var(--orange);
  font-size: 22px;
  font-family: var(--hand);
}
.discount-val {
  color: #27ae60 !important;
}
.cart-drawer-footer {
  margin-top: 10px;
}
.btn-proceed-checkout, .btn-submit-order, .btn-continue-shopping {
  width: 100%;
  background: var(--orange);
  color: #fff;
  border: 2px solid var(--ink);
  padding: 14px 20px;
  border-radius: 30px;
  font: 20px var(--hand);
  font-weight: bold;
  cursor: pointer;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}
.btn-proceed-checkout:hover, .btn-submit-order:hover, .btn-continue-shopping:hover {
  transform: translateY(-2px);
  box-shadow: 4px 6px 0 var(--ink);
  background: #e06800;
}
.btn-proceed-checkout:active, .btn-submit-order:active, .btn-continue-shopping:active {
  transform: translateY(2px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* Step 2 Checkout Styles */
.checkout-step-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 5px;
}
.btn-back-step {
  background: none;
  border: 1px solid var(--ink);
  border-radius: 14px;
  padding: 4px 12px;
  font: 14px var(--hand);
  cursor: pointer;
  transition: background 0.2s;
}
.btn-back-step:hover {
  background: var(--orange);
  color: #fff;
}
.checkout-step-title h3 {
  margin: 0;
  font: 22px var(--hand);
}
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font: 16px var(--hand);
  font-weight: bold;
  color: var(--ink);
}
.form-group input {
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  background: #fff;
}
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.payment-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #d5c8b2;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.payment-option input {
  margin-top: 3px;
}
.payment-option.active {
  border-color: var(--orange);
  background: #fff9f0;
  box-shadow: inset 0 0 0 1px var(--orange);
}
.pay-option-content b {
  display: block;
  font-size: 14px;
  color: var(--ink);
}
.pay-option-content small {
  display: block;
  font-size: 11px;
  color: #777;
  margin-top: 2px;
}
.checkout-final-summary {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 12px 16px;
}

/* Step 3 Success Styles */
.order-success-card {
  text-align: center;
  padding: 30px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.success-icon-anim {
  font-size: 64px;
  animation: heartPop 0.6s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.order-success-card h2 {
  font: 30px var(--hand);
  color: #27ae60;
  margin: 0;
}
.order-code {
  font-size: 16px;
  background: #fff;
  border: 1px dashed var(--ink);
  padding: 6px 16px;
  border-radius: 20px;
}
.success-tape-note {
  background: #f8f1e4;
  border: 1.5px solid var(--ink);
  padding: 20px 24px;
  position: relative;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 rgba(39,35,31,0.15);
  font: 18px var(--hand);
  line-height: 1.45;
  margin: 10px 0 20px;
}
.success-tape-note .tape {
  position: absolute;
  width: 90px;
  height: 20px;
  background: #d9c09c;
  left: 50%;
  top: -10px;
  transform: translateX(-50%) rotate(2deg);
  opacity: 0.9;
}

/* Micro Toast Notification */
.toast-notification {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(39, 35, 31, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
  font: 17px var(--hand);
  font-weight: bold;
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}
.toast-notification.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}
.toast-icon {
  background: var(--orange);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
}

/* Sapo Checkout Button in Drawer */
.btn-sapo-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  margin-top: 8px;
  border-radius: 25px;
  background: #0088ff;
  color: #fff;
  text-decoration: none;
  font: 700 17px var(--hand);
  box-shadow: 0 3px 8px rgba(0, 136, 255, 0.35);
  transition: transform 0.2s, background-color 0.2s;
}
.btn-sapo-checkout:hover {
  transform: translateY(-2px);
  background: #0070d6;
}

/* ==========================================
   FRANCHISE (NHU?NG QUY?N) MODAL STYLING
   ========================================== */
.franchise-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 35, 31, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10002 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.franchise-modal-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.franchise-modal {
  background-color: #f7f1e4;
  background-image: url("assets/reference/paper-main.png");
  background-size: 96px 64px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  position: relative;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-sizing: border-box;
  overflow: visible; /* Cho ph�p n�t X l�i ra ngo�i */
  display: flex;
  flex-direction: column;
}

.franchise-modal-overlay.open .franchise-modal {
  transform: scale(1) translateY(0);
}

.franchise-modal-header {
  padding: 16px 20px;
  background: rgba(239, 114, 0, 0.15);
  border-bottom: 2px solid var(--ink);
  border-radius: 18px 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.franchise-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.franchise-header-title h2 {
  font: 700 24px var(--hand);
  color: var(--ink);
  margin: 0;
}

/* NÚT X ĐÓNG POPUP NHƯỢNG QUYỀN */
.franchise-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: var(--ink);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1), background-color 0.2s ease;
  z-index: 1000;
}

.franchise-modal-close:hover {
  background: var(--red);
  transform: scale(1.1) rotate(90deg);
}

@media(max-width: 580px) {
  .franchise-modal-close {
    top: 8px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

.franchise-modal-body {
  padding: 14px 18px 18px;
  overflow-y: auto;
  max-height: calc(88vh - 60px);
}

.franchise-banner-note {
  background: #fff;
  border: 1.5px solid var(--ink);
  padding: 10px 14px;
  position: relative;
  transform: rotate(-0.5deg);
  box-shadow: 2px 2px 0 rgba(39,35,31,0.12);
  margin-bottom: 12px;
}

.franchise-banner-note .tape {
  position: absolute;
  width: 70px;
  height: 14px;
  background: #d9c09c;
  left: 24px;
  top: -7px;
  transform: rotate(2deg);
  opacity: 0.9;
}

.franchise-banner-note h3 {
  font: 700 16px var(--hand);
  margin: 0 0 3px;
  color: var(--orange);
}

.franchise-banner-note p {
  font: 13.5px/1.35 var(--hand);
  color: var(--ink);
  margin: 0;
}

/* 2 Gói Nhượng Quyền Styling */
.franchise-packages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

@media(max-width: 520px) {
  .franchise-packages-grid {
    grid-template-columns: 1fr;
  }
}

.f-package-card {
  background: rgba(255, 255, 255, 0.75);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  position: relative;
  box-shadow: 2px 2px 0 rgba(39,35,31,0.1);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.f-package-card:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 3px 4px 0 rgba(39,35,31,0.18);
}

.f-package-card.active {
  background: #fffdf7;
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange), 3px 4px 0 rgba(239, 114, 0, 0.25);
  transform: translateY(-2px) scale(1.02);
}

.f-package-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.f-package-check-indicator {
  display: none;
  position: absolute;
  top: -9px;
  right: 12px;
  background: var(--orange);
  color: #fff;
  font: 700 10px var(--sans);
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.f-package-card.active .f-package-check-indicator {
  display: block;
}

.f-package-badge {
  position: absolute;
  top: -9px;
  left: 14px;
  background: var(--ink);
  color: #fff;
  font: 700 10px var(--sans);
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}

.f-package-badge.popular {
  background: var(--orange);
}

.f-package-header {
  text-align: center;
  padding-top: 4px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(39, 35, 31, 0.2);
  padding-bottom: 8px;
}

.f-package-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 2px;
}

.f-package-header h4 {
  font: 700 16px/1.2 var(--hand);
  color: var(--ink);
  margin: 0 0 2px;
}

.f-package-card.active .f-package-header h4 {
  color: var(--orange);
}

.f-package-sub {
  font: 12px var(--hand);
  color: #7a6e60;
  margin: 0;
}

.f-package-features {
  list-style: none;
  padding: 0;
  margin: 0;
  font: 13px/1.35 var(--hand);
  color: var(--ink);
}

.f-package-features li {
  margin-bottom: 4px;
}

.franchise-form .form-group {
  margin-bottom: 8px;
}

.franchise-form label {
  display: block;
  font: 700 13px var(--sans);
  color: var(--ink);
  margin-bottom: 3px;
}

.franchise-form input,
.franchise-form textarea {
  width: 100%;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1.5px solid var(--ink);
  background: #fff;
  font: 14px var(--sans);
  box-sizing: border-box;
  outline: none;
}

.franchise-form input:focus,
.franchise-form textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(239, 114, 0, 0.2);
}

.franchise-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.btn-submit-franchise {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 10px;
  font: 700 16px var(--hand);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(239, 114, 0, 0.35);
  transition: transform 0.2s, background-color 0.2s;
}

.btn-submit-franchise:hover {
  background: #d46300;
  transform: translateY(-2px);
}
.btn-submit-franchise:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}

.btn-call-franchise {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  padding: 8px;
  font: 700 15px var(--hand);
  transition: transform 0.2s;
}

.btn-call-franchise:hover {
  transform: translateY(-2px);
}

.franchise-success-msg {
  text-align: center;
  padding: 30px 15px;
  font-family: var(--hand);
}

.franchise-success-msg h3 {
  font-size: 24px;
  color: var(--orange);
  margin: 10px 0 6px;
}

.franchise-success-msg p {
  font-size: 16px;
  color: var(--ink);
}

/* ================================================================
   RESPONSIVE CONSISTENCY LAYER
   One content hierarchy across devices; layout changes only where needed.
   ================================================================ */

/* Tablet: undo the old <=768px phone layout and retain the desktop hierarchy. */
@media (min-width: 640px) and (max-width: 1023px) {
  .topbar {
    height: 56px;
    min-height: 56px;
    padding: 0 clamp(20px, 4vw, 36px);
    position: sticky;
    top: 0;
  }

  .desktop-nav {
    display: flex;
    gap: clamp(12px, 2vw, 22px);
  }

  .desktop-nav a { font-size: 15px; }
  .mobile-menu { display: none; }

  .header-hero-wrapper {
    height: auto;
    min-height: 610px;
    overflow: hidden;
  }

  .header-hero-wrapper main {
    height: auto;
    min-height: 554px;
    overflow: visible;
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(230px, 34%) minmax(0, 1fr);
    height: auto;
    min-height: 465px;
    max-height: none;
    padding: 14px clamp(16px, 3vw, 28px) 74px;
    gap: 16px;
    overflow: visible;
  }

  .hero-copy {
    order: initial;
    width: auto;
    max-width: 320px;
    margin: 0;
    transform: rotate(-.5deg);
  }

  .hero-visual {
    order: initial;
    width: 100%;
    height: min(38vw, 300px);
    max-height: none;
    margin: 0;
    overflow: visible;
  }

  .circular-hero-wrapper { height: 100%; max-height: none; }
  .circular-wheel {
    width: min(34vw, 270px);
    height: min(34vw, 270px);
  }

  .hero-ingredient-note {
    display: block !important;
    right: 4px;
    width: 126px;
    transform: translateY(-50%) rotate(2deg) scale(.86);
  }

  .category-strip {
    height: auto;
    min-height: 118px;
    max-height: none;
    margin-top: -100px;
    margin-bottom: 0;
    padding: 7px clamp(10px, 2.5vw, 20px) 8px;
    overflow: visible;
  }

  .category-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
    padding: 0;
  }

  .category { width: auto; min-height: 82px; padding: 0 2px; }
  .category .doodle-icon { width: 52px; height: 38px; }
  .category:nth-child(1) .doodle-icon { transform: scale(1.12) !important; }

  .menu-items-scroll-list {
    max-height: min(58vh, 560px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* Compact dish cards on tablet: reduce the visual footprint by roughly half. */
  .aesthetic-card { height: 156px; min-height: 156px; padding: 6px; border-radius: 12px; }
  .aesthetic-card .card-img-box { height: 64px; margin-bottom: 2px; }
  .aesthetic-card .card-img-box img { max-height: 58px; }
  .aesthetic-item-title { font-size: 14px; line-height: 1.12; }
  .aesthetic-item-desc { font-size: 10px; line-height: 1.15; margin-bottom: 3px; }
  .aesthetic-item-price { font-size: 16px; }
  .card-plus-btn { width: 26px; height: 26px; font-size: 15px; line-height: 26px; }
  .mobile-bottom { display: none !important; }

  footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    min-height: 260px;
    padding: 24px 28px 38px;
  }
}

/* Phone: preserve all information, while stacking the same components. */
@media (max-width: 639px) {
  .mobile-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body { padding-bottom: 62px; }

  .topbar {
    height: 62px;
    min-height: 62px;
    padding: 0 14px;
  }

  .mobile-menu {
    display: block;
    position: relative;
    z-index: 1002;
    padding: 3px;
    cursor: pointer;
  }

  .mobile-menu span { transition: transform .2s ease, opacity .2s ease; }
  .nav-open .mobile-menu span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-open .mobile-menu span:nth-child(2) { opacity: 0; }
  .nav-open .mobile-menu span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .desktop-nav {
    display: flex;
    position: fixed;
    z-index: 1001;
    top: 62px;
    left: 12px;
    right: 12px;
    margin: 0;
    padding: 10px;
    flex-direction: column;
    gap: 2px;
    border: 1.5px solid var(--ink);
    border-radius: 14px;
    background: var(--paper) url("assets/reference/paper-main.png") 0 0 / 96px 64px;
    box-shadow: 0 12px 30px rgba(39,35,31,.24);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
  }

  .nav-open .desktop-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .desktop-nav a {
    display: block;
    padding: 10px 12px;
    font-size: 18px;
    border-radius: 9px;
  }

  .header-hero-wrapper {
    height: auto;
    min-height: 700px;
  }

  .header-hero-wrapper main {
    height: auto;
    min-height: 638px;
  }

  .hero {
    height: auto;
    min-height: 610px;
    max-height: none;
    padding: 12px 10px 58px;
    justify-content: center;
    gap: 16px;
  }

  .hero-visual {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    justify-items: center;
    height: auto;
    flex: 0 0 auto;
    overflow: visible;
  }

  .circular-hero-wrapper {
    width: 100%;
    height: clamp(170px, 48vw, 205px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .circular-wheel {
    width: clamp(170px, 48vw, 205px);
    height: clamp(170px, 48vw, 205px);
    right: auto;
    margin: 0;
  }

  .hero-copy {
    flex: 0 0 auto;
    width: min(100%, 380px);
    max-width: none;
  }

  .hero-ingredient-note {
    display: block !important;
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    grid-row: 2;
    width: calc(100% - 20px);
    max-width: 340px;
    max-height: none;
    margin: 8px auto 0;
    padding: 10px 14px;
    transform: rotate(0deg) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-sizing: border-box;
    align-self: center;
  }

  .hero-ingredient-note .hero-ingredient-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }

  .category-strip {
    height: auto;
    min-height: 112px;
    max-height: none;
    margin-top: 0;
    margin-bottom: 0;
    padding: 6px 0 7px;
    overflow: hidden;
  }

  .category-list { min-height: 74px; padding-bottom: 2px; }
  .category { min-height: 68px; }
  .category .doodle-icon { width: 58px; height: 44px; }
  .category:nth-child(1) .doodle-icon { transform: scale(1.12) !important; }

  .aesthetic-menu-section { padding-inline: 12px; }
  .menu-items-scroll-list {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .aesthetic-card { height: 168px; min-height: 168px; padding: 6px; border-radius: 12px; }
  .aesthetic-card .card-img-box { height: 72px; margin-bottom: 2px; }
  .aesthetic-card .card-img-box img { max-height: 66px; }
  .aesthetic-item-title { font-size: 15px; line-height: 1.12; }
  .aesthetic-item-desc { font-size: 10px; line-height: 1.15; margin-bottom: 3px; }
  .aesthetic-item-price { font-size: 16px; }
  .card-plus-btn { width: 28px; height: 28px; font-size: 16px; line-height: 28px; }
  .story-review { padding-inline: 12px; }
  .story-map-link { min-height: 280px; }

  .review-bubble {
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }

  .review-bubble > div { min-width: 0; flex: 1; }
  .review-bubble b,
  .review-bubble strong { display: block; margin-left: 0; }
  .review-bubble p { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }

  footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 30px 20px 96px;
    gap: 22px;
    text-align: center;
  }

  footer > * { grid-column: auto !important; grid-row: auto !important; }
  .contact, .footer-cta, .follow-wrapper, .hours-note { margin: 0 auto; }
  .contact { width: 100%; max-width: 310px; }
  .footer-cta img { width: min(240px, 100%); max-width: 100%; height: auto; }
  .follow-wrapper { width: 100%; max-width: 280px; }
  .follow-img-box img { width: min(220px, 100%); margin: 0 auto; }
  .hours-note { width: min(150px, 100%); height: 96px; }
  footer > small { position: static; width: 100%; margin-top: 0; }
}

@media (max-width: 760px) {
  .category-strip {
    min-height: 92px !important;
    height: auto !important;
    padding-top: 4px !important;
    padding-bottom: 8px !important;
  }
  .category-strip h2 { font-size: 13px; margin-bottom: 1px; }
  .category-list { min-height: 58px; padding-bottom: 0; }
  .category { min-height: 56px; }
  .category .doodle-icon { width: 46px; height: 34px; }
  .category b { font-size: 10px; line-height: 1; }
}

/* Mobile g?n: kh�ng c� thanh di?u hu?ng du?i v� uu ti�n h�nh 6 m�n signature. */
@media (max-width: 767px) {
  .mobile-bottom { display: none !important; }
  .floating-order-button { bottom: 14px; }

  .hero { display: none !important; }

  .category-strip {
    padding: 16px 0 22px !important;
    overflow: hidden;
  }
  .category-strip h2,
  .category-strip .round-arrow { display: none !important; }
  .category-list {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 16px 8px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }
  .category-list::-webkit-scrollbar { display: none; }
  .category {
    flex: 0 0 clamp(132px, 40vw, 170px);
    min-height: 150px;
    padding: 12px 8px !important;
    border: 2px solid transparent;
    border-radius: 20px;
    scroll-snap-align: center;
    box-sizing: border-box;
  }
  .category.active {
    border-color: var(--orange);
    background: rgba(255,255,255,.28);
  }
  .category .doodle-icon {
    width: 112px !important;
    height: 105px !important;
  }
  .category .cat-thumb-img {
    width: 108px !important;
    height: 100px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
  }
  .category b {
    margin-top: 7px;
    font-size: 16px !important;
    line-height: 1.15;
    white-space: normal;
  }
}

/* Phone/tablet menu: lu�n hi?n d? d?i 6 m�n v? tay du?i ?nh m�n l?n. */
@media (max-width: 900px) {
  .category-strip {
    display: flex !important;
    height: auto !important;
    min-height: 205px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px 0 18px !important;
    overflow: visible !important;
  }
  .category-strip h2 { display: inline-block !important; margin: 0 auto 8px !important; }
  .category-strip .round-arrow { display: none !important; }
  .category-list {
    display: flex !important;
    width: 100% !important;
    min-height: 155px !important;
    gap: 12px !important;
    padding: 0 16px 8px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    box-sizing: border-box;
  }
  .category-list::-webkit-scrollbar { display: none; }
  .category {
    display: flex !important;
    flex: 0 0 138px !important;
    min-height: 145px !important;
    padding: 9px 7px !important;
    scroll-snap-align: center;
    box-sizing: border-box;
  }
  .category .doodle-icon { display: flex !important; width: 108px !important; height: 100px !important; }
  .category .cat-thumb-img { display: block !important; width: 104px !important; height: 96px !important; max-width: none !important; max-height: none !important; object-fit: contain; }
  .category b { display: block !important; font-size: 15px !important; white-space: normal !important; }
}

@media (max-width: 767px) {
  .floating-order-button {
    position: fixed !important;
    right: 14px !important;
    bottom: 14px !important;
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border: 2.5px solid #fff !important;
    border-radius: 50% !important;
  }
  .floating-order-button > span { display:block !important; font-size:27px !important; line-height:1 !important; transform:translateY(-1px); }
  .floating-order-button > strong,
  .floating-order-button > small { display:none !important; }
}

/* Scene background lives beside both HTML copies. */
.header-hero-wrapper { background-image: url("BG.png") !important; }
.wheel-slide[data-index="6"] img,
.wheel-slide[data-index="6"].active img { transform: scale(.72) !important; }
.video-title span,
.video-title b { display: block; }
.video-title b { color: var(--orange); font-weight: 700; }
.brand b,
.video-title b {
  color: transparent;
  font-size: 0 !important;
  text-shadow: none !important;
  mix-blend-mode: multiply;
  background: url("assets/reference/xap-xap-logo.png") center / contain no-repeat;
  min-height: 42px;
}
.brand b { width: 82px; min-height: 30px; }
.video-title b { width: min(360px, 82vw); margin-inline: auto; min-height: 110px; }
.video-hero-badge .video-tagline { display: none !important; }
/* Ordering is handled by the Sapo link; hide the retired internal cart UI. */
.topbar .cart,
.mobile-bottom .open-cart-btn,
.cart-drawer-overlay { display: none !important; }
.social-links .social-btn.sapo { display: none !important; }

/* Signature menu uses the line-art category assets, never the full-colour dish photos. */
.category-list .doodle-icon > img { display: none !important; }
.category-list .category:nth-child(1) .doodle-icon { background: url("assets/reference/category-egg-cups.png") center / contain no-repeat !important; }
.category-list .category:nth-child(2) .doodle-icon { background: url("assets/reference/category-com-chay-kep.png") center / contain no-repeat !important; }
.category-list .category:nth-child(3) .doodle-icon { background: url("assets/reference/category-goi-xap-xap.png") center / contain no-repeat !important; }
.category-list .category:nth-child(4) .doodle-icon { background: url("assets/reference/category-rice-paper.png") center / contain no-repeat !important; }
.category-list .category:nth-child(5) .doodle-icon { background: url("assets/reference/category-skewers.png") center / contain no-repeat !important; }
.category-list .category:nth-child(6) .doodle-icon { background: url("assets/reference/category-drink.png") center / contain no-repeat !important; }
.category-list .category:nth-child(2) .doodle-icon,
.category-list .category:nth-child(3) .doodle-icon { transform: scale(1.35) !important; }
.aesthetic-card .card-plus-btn,
.aesthetic-card .card-action-group { display: none !important; }

@media (min-width: 1024px) {
  .header-hero-wrapper { height: auto; min-height: 0; }
  .header-hero-wrapper main { height: auto; min-height: 0; }
  .hero { min-height: 500px; }
  .category-strip { margin-bottom: 0; }
}

/* The page is the only scroll surface: let the menu grow with every dish. */
.menu-items-scroll-list {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overscroll-behavior: auto;
}

/* Keep the footer columns side-by-side on narrow screens. */
@media (max-width: 639px) {
  .topbar .brand { min-width: 88px; }
  .topbar .brand b { width: 76px; min-height: 27px; }
  .category-strip { min-height: 92px; padding-top: 4px; padding-bottom: 4px; }
  .category-strip h2 { font-size: 13px; margin-bottom: 1px; border-bottom-width: 1px; }
  .category-list { min-height: 58px; gap: 0; padding: 0 8px 1px; }
  .category { width: 72px; min-height: 56px; padding: 0 2px; font-size: 11px; }
  .category .doodle-icon { width: 46px; height: 34px; }
  .category:nth-child(1) .doodle-icon { transform: scale(1.05) !important; }
  .category b { font-size: 10px; line-height: 1; margin-top: 1px; }

  .hero-visual { height: clamp(220px, 58vw, 250px); }
  .circular-hero-wrapper { height: clamp(220px, 58vw, 250px); }
  .circular-wheel { width: clamp(220px, 58vw, 250px); height: clamp(220px, 58vw, 250px); }
  .hero-copy { width: 88vw; max-width: 340px; padding: 6px 10px 5px; border-radius: 12px; }
  .hero-copy .hero-dish-title { font-size: clamp(19px, 5.2vw, 23px); }
  .hero-copy .hero-dish-desc { font-size: 12px; line-height: 1.18; margin-bottom: 4px; }
  .hero-copy .hero-cart-btn { padding: 3px 10px 3px 8px; font-size: 14px; }
  .hero-copy .heart-doodle { font-size: 21px; }

  .menu-cat-pills,
  .menu-subcat-pills {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start;
    overflow-x: visible !important;
    overflow-y: visible;
    gap: 8px 6px;
    padding: 6px 4px 12px;
  }
  .cat-pill-btn,
  .subcat-pill-btn {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .topbar { display: flex; align-items: center; }
  .topbar .nav-actions { margin-left: auto; margin-right: 8px; gap: 0; }
  .topbar .cart { padding: 0; }
  .topbar .cart-icon-img { height: 32px; max-width: 108px; object-fit: contain; }
  .topbar .mobile-menu { flex: 0 0 34px; }
  .video-hero-badge { display: flex !important; }
  .video-hero-badge .video-subhead { display: none !important; }
  .video-hero-badge .video-title { font-size: clamp(34px, 10vw, 52px); }
  .video-hero-badge .video-tagline { font-size: 14px; max-width: 290px; }
  .category-strip { padding-bottom: 76px; }
  .mobile-bottom { z-index: 500; }

  /* Phone order: dish wheel -> dish introduction -> six-item menu. */
  .hero-ingredient-note { display: none !important; visibility: hidden !important; }
  .hero-visual { grid-template-rows: auto; }
  .hero-copy { order: 2; }
  .hero-visual { order: 1; }
  footer {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-items: start;
    gap: 10px;
    padding: 22px 10px 46px;
    text-align: center;
  }
  footer > * { grid-column: auto !important; grid-row: 1 !important; width: auto !important; max-width: none !important; margin: 0 !important; }
  footer .contact { min-width: 0; }
  footer .contact h3 { font-size: 17px; }
  footer .contact p { font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
  footer .footer-cta img { width: 100%; height: auto; }
  footer .hours-note { height: 76px; background-size: contain; }
  footer .follow-wrapper { min-width: 0; }
  footer .follow-img-box img { width: 100%; height: auto; }
  footer .social-links { gap: 3px; }
  footer > small { grid-column: 1 / -1 !important; grid-row: 2 !important; }
}

/* Final mobile override: ch? gi? d?i m�n, b? to�n b? kh?i gi?i thi?u m�n l?n. */
@media (max-width: 767px) {
  .header-hero-wrapper .hero {
    display: flex !important;
    min-height: clamp(330px, 92vw, 520px) !important;
    height: auto !important;
    padding: 8px 0 !important;
  }
  .header-hero-wrapper .hero-copy { display: none !important; }
  .header-hero-wrapper .hero-visual {
    display: flex !important;
    width: 100% !important;
    min-height: clamp(315px, 88vw, 500px) !important;
    height: clamp(315px, 88vw, 500px) !important;
    max-height: none !important;
  }
  .header-hero-wrapper .circular-wheel {
    width: clamp(310px, 86vw, 490px) !important;
    height: clamp(310px, 86vw, 490px) !important;
  }
  .header-hero-wrapper .wheel-slide.active img {
    transform: scale(1.22) !important;
    rotate: 0deg !important;
  }
  .header-hero-wrapper .wheel-slide[data-index="6"].active img {
    transform: scale(0.85) !important;
    rotate: 0deg !important;
  }
  .floating-order-button{display:flex!important;grid-template-columns:none!important;gap:9px!important}
  .header-hero-wrapper,
  .header-hero-wrapper main { height: auto !important; min-height: 0 !important; max-height:none!important; overflow:visible!important; }
  .header-hero-wrapper{overflow:visible!important}
  .header-hero-wrapper main{flex:none!important}
  .category-strip { position:relative!important;z-index:60!important;margin-top:0!important;height:auto!important;min-height:205px!important;max-height:none!important;overflow:visible!important;flex:none!important; }
  .category-list{display:flex!important;visibility:visible!important;opacity:1!important;min-height:155px!important;overflow-x:auto!important}
}

/* D?i 6 m�n tr�n mobile/tablet gi? d�ng c?u tr�c m?t h�ng nhu laptop. */
@media (max-width: 900px) {
  .category-strip{height:auto!important;min-height:190px!important;max-height:none!important;padding:10px 0 14px!important;overflow:hidden!important}
  .category-strip h2{display:inline-block!important;margin:0 auto 8px!important}
  .category-list{display:flex!important;width:100%!important;min-height:145px!important;gap:10px!important;padding:0 32px 8px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scroll-padding-inline:32px;scrollbar-width:none;box-sizing:border-box}
  .category{display:flex!important;flex:0 0 36%!important;width:auto!important;min-width:0!important;min-height:138px!important;padding:7px 3px!important;transform:none!important;scroll-snap-align:center}
  .category .doodle-icon{display:flex!important;width:100%!important;height:92px!important}
  .category .cat-thumb-img{display:block!important;width:auto!important;height:88px!important;max-width:100%!important;max-height:88px!important;object-fit:contain!important}
  .category b{display:block!important;font-size:clamp(9px,1.8vw,14px)!important;line-height:1.1!important;white-space:normal!important;text-align:center!important}
  .category-strip .round-arrow{display:block!important;position:absolute!important;top:55%!important;width:42px!important;height:42px!important;z-index:90!important;filter:drop-shadow(0 4px 7px rgba(39,35,31,.3));cursor:pointer}
  .category-strip .round-arrow.prev{left:2px!important}
  .category-strip .round-arrow.next{right:2px!important}
}

/* Smaller hand-drawn category dishes on phones. */
@media (max-width: 767px) {
  .category-strip {
    min-height: 132px !important;
    padding: 4px 0 6px !important;
  }
  .category-strip h2 {
    margin: 0 auto 2px !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
  }
  .category-list {
    min-height: 100px !important;
    gap: 6px !important;
    padding: 0 24px 2px !important;
    scroll-padding-inline: 24px !important;
  }
  .category {
    flex-basis: 33% !important;
    min-height: 92px !important;
    padding: 3px 2px !important;
    border-radius: 14px !important;
  }
  .category .doodle-icon {
    height: 56px !important;
  }
  .category .cat-thumb-img {
    width: auto !important;
    height: 52px !important;
    max-height: 52px !important;
    max-width: 68px !important;
  }
  .category b { font-size: 12px !important; line-height: 1.05 !important; }
  .category-strip .round-arrow {
    width: 32px !important;
    height: 32px !important;
    top: 57% !important;
  }
  .category-list .category:nth-child(2) .cat-thumb-img,
  .category-list .category:nth-child(3) .cat-thumb-img {
    transform: scale(1.16) !important;
  }
  .category-list .category:nth-child(2):hover .cat-thumb-img,
  .category-list .category:nth-child(2).active .cat-thumb-img,
  .category-list .category:nth-child(3):hover .cat-thumb-img,
  .category-list .category:nth-child(3).active .cat-thumb-img {
    transform: scale(1.23) !important;
  }
}

/* Docker-safe order controls: keep Sapo entry points visible */
.topbar-order-link{display:inline-flex!important;align-items:center;justify-content:center;white-space:nowrap;flex-shrink:0;padding:8px 16px;border-radius:999px;background:var(--orange);color:#fff!important;text-decoration:none;font:800 13px var(--sans);letter-spacing:.04em;box-shadow:0 4px 12px rgba(239,114,0,.28)}
.floating-order-button{display:grid!important;visibility:visible!important;opacity:1!important;position:fixed;right:22px;bottom:22px;z-index:1200;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:11px 17px;border:2px solid #fff;border-radius:999px;background:var(--orange);color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(39,35,31,.3)}
@media(max-width:760px){.topbar-order-link{padding:7px 11px!important;font-size:11px!important}.floating-order-button{right:12px;bottom:78px;padding:10px 13px}.floating-order-button>span{font-size:21px}.floating-order-button strong{font-size:12px}.floating-order-button small{font-size:9px}}

/* Keep the video sound control clear of the fixed Game launcher. */
@media (max-width: 767px){
  .video-hero-actions .btn-video-sound{transform:translateX(148px);}
  .video-hero-actions .btn-video-sound:hover{transform:translateX(148px) scale(1.04);}
}

/* Secondary header action beside the Sapo order button. */
.topbar-franchise-link{display:inline-flex!important;align-items:center;justify-content:center;white-space:nowrap;flex-shrink:0;padding:8px 14px;border:1.5px solid var(--orange);border-radius:999px;background:transparent;color:var(--orange)!important;text-decoration:none;font:800 12px var(--sans);letter-spacing:.035em}
.topbar-franchise-link:hover{background:var(--orange);color:#fff!important}
@media(max-width:760px){.topbar-franchise-link{padding:6px 8px!important;font-size:9px!important}.topbar{padding-left:10px!important;padding-right:10px!important}.brand{min-width:88px!important}.brand b{font-size:19px!important}.topbar-order-link{padding:6px 9px!important;font-size:10px!important}}

/* Performance + lower-page CTA: always clearly visible with high z-index. */
.floating-order-button{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:opacity .35s ease,transform .35s ease,visibility .35s ease}
.floating-order-button.cta-ready{opacity:1!important;visibility:visible!important;pointer-events:auto}
@media(max-width:767px){.video-hero-media video{object-position:center;will-change:auto}.video-vignette-overlay{display:none}.video-hero-media{-webkit-transform:translateZ(0);transform:translateZ(0)}.paper-noise{display:none}.topbar,.category-strip{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}

/* Header secondary action: never fall back to browser link styling. */
.topbar .topbar-franchise-link,
.topbar .topbar-franchise-link:visited{display:inline-flex!important;align-items:center;justify-content:center;white-space:nowrap;padding:7px 13px!important;border:1.5px solid var(--orange)!important;border-radius:999px!important;background:rgba(255,255,255,.32)!important;color:var(--orange)!important;text-decoration:none!important;font:800 11px/1 var(--sans)!important;letter-spacing:.035em;box-shadow:0 3px 8px rgba(39,35,31,.1)}
.topbar .topbar-franchise-link:hover{background:var(--orange)!important;color:#fff!important}
.floating-order-button{display:flex!important}
@media(max-width:760px){.topbar .topbar-franchise-link{padding:6px 8px!important;font-size:9px!important}}

/* Natural touch scrolling: prevent reveal animations from making page 2 jump. */
@media (max-width: 900px){
  html{scroll-behavior:auto!important}
  .reveal,.reveal.revealed,.stagger-item,.stagger-item.revealed{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .header-hero-wrapper,.hero,.category-strip{scroll-margin-top:0!important}
}

/* Final CTA override */
.topbar a.topbar-franchise-link,.topbar a.topbar-franchise-link:visited{color:#ef7200!important;text-decoration:none!important;background:#fff8ec!important;border:2px solid #ef7200!important;border-radius:999px!important;display:inline-flex!important;line-height:1!important}
.topbar a.topbar-franchise-link:hover{color:#fff!important;background:#ef7200!important}

/* Natural vertical browsing: never force a section to snap into place. */
html,body{scroll-snap-type:none!important}
@media(max-width:900px){*{scroll-snap-type:none!important}.category-list{scroll-snap-type:x proximity!important}}

/* =========================================================
   CLEAN FIX: PAGE 2 STABILITY, CRISP FONT & PROMINENT LOGO
   ========================================================= */

/* 1. Page 2 No-Jitter Sticky Topbar */
.topbar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}
.topbar.is-fixed {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 18px rgba(39, 35, 31, 0.28) !important;
}
.header-hero-wrapper.has-fixed-topbar {
  padding-top: 0 !important;
}

/* 2. Prominent Brand Logo */
.topbar .brand {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
}
.topbar .brand > img {
  display: block !important;
  height: 48px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  transform: none !important;
}
@media (max-width: 760px) {
  .topbar .brand > img {
    height: 44px !important;
    max-width: 135px !important;
  }
}

/* 3. ĐẶT MÓN & NHƯỢNG QUYỀN Button Fonts */
.topbar-order-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: var(--orange) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .03em !important;
  box-shadow: 0 4px 12px rgba(239, 114, 0, 0.28) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.topbar-order-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(239, 114, 0, 0.38) !important;
}
@media (max-width: 760px) {
  .topbar-order-link {
    padding: 6px 11px !important;
    font-size: 11px !important;
  }
}

.topbar .topbar-franchise-link,
.topbar .topbar-franchise-link:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 7px 14px !important;
  border: 1.5px solid var(--orange) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.32) !important;
  color: var(--orange) !important;
  text-decoration: none !important;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .03em !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.topbar .topbar-franchise-link:hover {
  background: var(--orange) !important;
  color: #fff !important;
}
@media (max-width: 760px) {
  .topbar .topbar-franchise-link {
    padding: 5px 8px !important;
    font-size: 9.5px !important;
  }
}

/* 4. Floating Order CTA (Pure UTF-8, Direct HTML, No Diamond Question Marks) */
.floating-order-button {
  position: fixed !important;
  right: 18px !important;
  bottom: 14px !important;
  z-index: 9998 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: var(--orange) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(39, 35, 31, 0.3) !important;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: orderButtonWiggle 3.5s ease-in-out infinite !important;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease !important;
}
.floating-order-button.cta-ready {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.floating-order-button:before,
.floating-order-button:after {
  content: none !important;
  display: none !important;
}
.floating-order-button .f-scooter-icon {
  font-size: 20px !important;
  line-height: 1 !important;
  display: inline-block !important;
}
.floating-order-button .f-order-label {
  display: inline-block !important;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  color: #fff !important;
  letter-spacing: .04em !important;
  line-height: 1.2 !important;
}
.floating-order-button small {
  display: block !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 9px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
@keyframes orderButtonWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-8deg) scale(1.05); }
  30% { transform: rotate(7deg) scale(1.05); }
  45% { transform: rotate(-5deg) scale(1.03); }
  60% { transform: rotate(4deg) scale(1.02); }
  75% { transform: rotate(0deg) scale(1); }
}

@media (max-width: 767px) {
  .floating-order-button {
    right: 12px !important;
    bottom: 14px !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2.5px solid #fff !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 24px rgba(39, 35, 31, 0.38) !important;
    animation: orderButtonWiggle 2.8s ease-in-out infinite !important;
    transform-origin: center center !important;
  }
  .floating-order-button .f-scooter-icon {
    font-size: 21px !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
    display: block !important;
  }
  .floating-order-button .f-order-label {
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    letter-spacing: 0.03em !important;
    text-align: center !important;
    padding: 0 4px !important;
  }
  .floating-order-button small {
    display: none !important;
  }
}

/* 5. Smooth, Jitter-Free Wheel & Plate Image on Page 2 */
.circular-wheel {
  transition: transform 0.45s ease-out !important;
  will-change: transform;
}
.wheel-slide {
  transition: opacity 0.3s ease !important;
}
.wheel-slide img {
  object-fit: contain !important;
  filter: drop-shadow(0 14px 28px rgba(39, 35, 31, 0.35)) !important;
}
.wheel-slide.active img {
  transform: scale(1.06) !important;
  filter: drop-shadow(0 18px 36px rgba(39, 35, 31, 0.42)) !important;
}
@media (max-width: 900px) {
  .header-hero-wrapper,
  .header-hero-wrapper main,
  .hero,
  .hero-visual,
  .circular-hero-wrapper {
    overflow: visible !important;
  }
}

/* Mobile UX for franchise form: bottom-sheet, readable spacing, safe-area aware. */
@media (max-width: 600px) {
  .franchise-modal-overlay { align-items: flex-end; padding: 0 !important; }
  .franchise-modal { width: 100% !important; max-width: none !important; max-height: 92dvh !important; border-radius: 22px 22px 0 0 !important; overflow: hidden !important; }
  .franchise-modal-header { padding: 14px 16px !important; position: sticky; top: 0; z-index: 2; }
  .franchise-modal-header h2 { font-size: 17px !important; line-height: 1.15 !important; }
  .franchise-modal-body { overflow-y: auto !important; padding: 14px !important; -webkit-overflow-scrolling: touch; }
  .franchise-packages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .f-package-card { padding: 10px 8px !important; min-width: 0 !important; }
  .f-package-header h4 { font-size: 13px !important; line-height: 1.15 !important; white-space: nowrap; }
  .f-package-sub { font-size: 10px !important; line-height: 1.2 !important; min-height: 24px; }
  .f-package-features { font-size: 10px !important; line-height: 1.25 !important; padding-left: 0 !important; }
  .f-package-features li { margin-bottom: 5px !important; }
  .f-package-badge { font-size: 9px !important; padding: 3px 5px !important; }
  .franchise-form .form-group { margin-bottom: 10px !important; }
  .franchise-form button { width: 100% !important; min-height: 48px !important; }
}

/* 6. Video Hero Brand Logo Styling */
.video-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 6px 0 !important;
  line-height: 1 !important;
  transform: none !important;
}
.video-hero-logo {
  display: block !important;
  max-width: min(340px, 80vw) !important;
  height: auto !important;
  max-height: 115px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.45)) !important;
  transition: transform 0.3s ease !important;
}
@keyframes badgeFlyToCorner {
  0%   { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
  30%  { top: 48%; left: 50%; transform: translate(-50%, -55%) scale(1.08); opacity: 1; }
  100% { top: clamp(16px, 4vh, 45px); left: clamp(16px, 3.5vw, 40px); transform: translate(0, 0) scale(0.72); opacity: 0.96; }
}
@media (max-width: 767px) {
  .video-hero-logo {
    max-width: min(220px, 72vw) !important;
    max-height: 75px !important;
  }
  @keyframes badgeFlyToCorner {
    0%   { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
    30%  { top: 48%; left: 50%; transform: translate(-50%, -55%) scale(1.06); opacity: 1; }
    100% { top: 18px; left: 14px; transform: translate(0, 0) scale(0.78); opacity: 0.96; }
  }
}

/* 7. Giữ kích thước logo nét vẽ Bánh Trứng Chén và nút category ổn định, không bị co nhỏ lại khi không chọn */
.category-list .category {
  transform: none !important;
}
.category-list .category:hover {
  transform: translateY(-4px) !important;
}
.category-list .category.active {
  transform: translateY(-4px) !important;
}
.category-list .category .cat-thumb-img,
.category-list .category:hover .cat-thumb-img,
.category-list .category.active .cat-thumb-img {
  transform: none !important;
}

/* Icon nét vẽ Bánh Trứng Chén luôn giữ kích thước to rõ 1.45 (mobile 1.25), không bị thu nhỏ */
.category-list .category:nth-child(1) .doodle-icon,
.category-list .category:nth-child(1):hover .doodle-icon,
.category-list .category:nth-child(1).active .doodle-icon {
  transform: scale(1.45) !important;
}
@media (max-width: 639px) {
  .category-list .category:nth-child(1) .doodle-icon,
  .category-list .category:nth-child(1):hover .doodle-icon,
  .category-list .category:nth-child(1).active .doodle-icon {
    transform: scale(1.25) !important;
  }
}

/* 8. Fix Map Box & Overlay: Hiển thị bản đồ Google Maps rõ nét, lớp thông tin gọn gàng dưới đáy không che mất bản đồ */
.story-map {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #f4ecdc !important;
  box-shadow: 0 6px 18px rgba(39, 35, 31, 0.16) !important;
  border: 2.5px solid var(--ink) !important;
}
.story-map-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
  position: relative !important;
}
.story-map-link iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
  border: 0 !important;
  display: block !important;
  filter: none !important;
  pointer-events: auto !important;
}
.story-map-overlay {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: auto !important;
  padding: 10px 14px !important;
  background: linear-gradient(to top, rgba(39, 35, 31, 0.88) 0%, rgba(39, 35, 31, 0.65) 75%, transparent 100%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  pointer-events: none !important;
}
.story-map-overlay span {
  font-size: 20px !important;
  margin: 0 !important;
}
.story-map-overlay b {
  font: 700 15px var(--hand) !important;
  color: #fff !important;
  white-space: nowrap !important;
}
.story-map-overlay small {
  font: 12px var(--hand) !important;
  color: #ffe4b5 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 639px) {
  .story-map {
    min-height: 280px !important;
    border-radius: 16px !important;
  }
  .story-map-link,
  .story-map-link iframe {
    min-height: 280px !important;
  }
  .story-map-overlay {
    flex-direction: column !important;
    padding: 8px 10px !important;
    gap: 3px !important;
  }
  .story-map-overlay span {
    display: none !important;
  }
  .story-map-overlay b {
    font-size: 14px !important;
  }
  .story-map-overlay small {
    font-size: 11px !important;
    white-space: normal !important;
    text-align: center !important;
  }
}
/* Fixed sticky topbar from page 2 downwards */
.topbar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 3px 12px rgba(39, 35, 31, 0.18) !important;
}

/* Definitive natural-scroll mode: no dynamic header or nested menu scroller. */
html { scroll-behavior: auto !important; }
.menu-items-scroll-list {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  scrollbar-width: none !important;
}
.menu-items-scroll-list::-webkit-scrollbar { display: none !important; }

/* Keep dish artwork upright on every viewport (desktop, tablet, mobile); selection never rotates dishes */
.circular-wheel,
.header-hero-wrapper .circular-wheel,
.wheel-slide,
.header-hero-wrapper .wheel-slide {
  transform: none !important;
  rotate: 0deg !important;
}

.wheel-slide img,
.header-hero-wrapper .wheel-slide img {
  rotate: 0deg !important;
  object-fit: contain !important;
}

.wheel-slide.active img,
.header-hero-wrapper .wheel-slide.active img {
  rotate: 0deg !important;
  transform: scale(1.12) !important;
  filter: drop-shadow(0 18px 36px rgba(39, 35, 31, 0.42)) !important;
}

.wheel-slide[data-index="6"].active img,
.header-hero-wrapper .wheel-slide[data-index="6"].active img {
  transform: scale(0.82) !important;
  rotate: 0deg !important;
}

/* Rock-solid mobile scrolling: eliminate dynamic scaling & address-bar jitter */
html, body {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto !important;
}

@media (max-width: 900px) {
  .curtain-content-wrapper {
    margin-top: 100svh !important;
  }
  .header-hero-wrapper,
  .header-hero-wrapper main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .header-hero-wrapper.has-fixed-topbar {
    padding-top: 0 !important;
  }
}

/* ==========================================
   5 MÓN ĐỒ UỐNG HOT NHẤT HIỆN NAY (SHOWCASE)
   ========================================== */
.hot-drinks-section {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 30px clamp(20px, 4vw, 60px) 45px;
  position: relative;
  box-sizing: border-box;
}

.hot-drinks-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.hot-drinks-header {
  text-align: center;
  margin-bottom: 28px;
}

.hot-badge-tag {
  display: inline-block;
  background: linear-gradient(135deg, #ff4e50, #f9d423);
  color: #fff;
  font: 800 12px/1 var(--sans);
  letter-spacing: 2px;
  padding: 6px 16px;
  border-radius: 20px;
  box-shadow: 0 3px 10px rgba(255, 78, 80, 0.35);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.hot-drinks-title {
  font: clamp(26px, 3.8vw, 38px)/1.2 var(--hand);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}

.hot-drinks-subtitle {
  font: 16px/1.45 var(--hand);
  color: #66513b;
  max-width: 620px;
  margin: 0 auto;
}

.hot-drinks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.8vw, 22px);
  width: 100%;
  align-items: stretch;
}

.hot-drink-card {
  position: relative;
  background: rgba(255, 252, 246, 0.92);
  background-image: url("assets/reference/paper-main.png");
  background-size: 140px 100px;
  border: 1.5px solid rgba(39, 35, 31, 0.18);
  border-radius: 18px;
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(39, 35, 31, 0.08);
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease;
  box-sizing: border-box;
}

.hot-drink-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(39, 35, 31, 0.14);
  border-color: var(--orange);
}

.hot-card-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--orange);
  color: #fff;
  font: 800 11px/1 var(--sans);
  padding: 4px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(239, 114, 0, 0.35);
}

.hot-drink-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
}

.hot-drink-img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(39, 35, 31, 0.2));
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.hot-drink-card:hover .hot-drink-img {
  transform: scale(1.08) rotate(-2deg);
}

.hot-drink-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hot-drink-name {
  font: clamp(17px, 1.5vw, 19px)/1.2 var(--hand);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  text-align: center;
}

.hot-drink-desc {
  font: 13px/1.35 var(--sans);
  color: #73695c;
  margin: 0 0 12px;
  text-align: center;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hot-drink-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed rgba(39, 35, 31, 0.15);
  gap: 6px;
}

.hot-drink-price {
  font: 800 16px/1 var(--sans);
  color: var(--orange);
  letter-spacing: 0.3px;
}

.hot-drink-order-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font: 700 12px/1 var(--sans);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 3px 8px rgba(239, 114, 0, 0.25);
  white-space: nowrap;
}

.hot-drink-order-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.hot-drink-order-btn:hover {
  background: #d95e00;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 14px rgba(239, 114, 0, 0.35);
}

@media (max-width: 1024px) {
  .hot-drinks-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

@media (max-width: 680px) {
  .hot-drinks-section {
    padding: 15px 12px 25px;
  }
  .hot-drinks-header {
    margin-bottom: 14px;
  }
  .hot-badge-tag {
    font-size: 10px;
    padding: 4px 10px;
    margin-bottom: 6px;
  }
  .hot-drinks-title {
    font-size: 22px;
    margin: 0;
  }
  .hot-drinks-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .hot-drinks-grid::-webkit-scrollbar {
    display: none;
  }
  .hot-drink-card {
    flex: 0 0 115px;
    width: 115px;
    scroll-snap-align: start;
    padding: 8px 6px 10px;
    border-radius: 14px;
  }
  .hot-card-rank {
    top: 6px;
    left: 6px;
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 6px;
  }
  .hot-drink-img-wrap {
    height: 85px;
    margin-bottom: 6px;
  }
  .hot-drink-img {
    max-height: 80px;
    width: auto;
  }
  .hot-drink-name {
    font-size: 14px;
    line-height: 1.2;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 34px;
  }
  .hot-drink-desc {
    display: none;
  }
  .hot-drink-bottom {
    padding-top: 6px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .hot-drink-price {
    font-size: 13px;
  }
  .hot-drink-order-btn {
    padding: 4px 8px;
    font-size: 11px;
    width: 100%;
    justify-content: center;
  }
  .hot-drink-order-btn svg {
    width: 12px;
    height: 12px;
  }
}


/* Emphasize B�nh tr�ng tr?n in the six-item dish strip without changing other items. */
.category-list .category:nth-child(4) .cat-thumb-img{transform:scale(1.18)!important}
.category-list .category:nth-child(4) .doodle-icon{overflow:visible!important}
@media(max-width:760px){.category-list .category:nth-child(4) .cat-thumb-img{transform:scale(1.22)!important}}

/* Branded startup loading gate. */
.page-preloader{position:fixed;inset:0;z-index:200000;display:grid;place-items:center;background:#f4ecdc url("assets/reference/paper-main.png");transition:opacity .4s ease,visibility .4s ease}
.page-preloader.is-ready{opacity:0;visibility:hidden;pointer-events:none}
.preloader-card{text-align:center;width:min(320px,82vw);color:#27231f;font-family:var(--sans)}
.preloader-logo{width:150px;height:90px;object-fit:contain;display:block;margin:0 auto 14px}
.preloader-card p{margin:0 0 12px;font:600 15px var(--hand)}
.preloader-track{height:8px;border-radius:99px;background:rgba(39,35,31,.16);overflow:hidden}
.preloader-track span{display:block;height:100%;width:0;border-radius:inherit;background:var(--orange);transition:width .2s ease}
.preloader-card small{display:block;margin-top:7px;font:700 12px var(--sans);color:var(--orange)}

/* ==========================================
   ADMIN PANEL (QUAN TRI MON NOI BAT)
   ========================================== */
.admin-open {
  margin: 14px auto 0;
  padding: 8px 18px;
  border: 1.5px dashed var(--orange);
  border-radius: 99px;
  background: rgba(239, 114, 0, 0.08);
  color: var(--orange);
  font: 700 12px/1 var(--sans);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-open:hover {
  background: var(--orange);
  color: #fff;
  border-style: solid;
}

.admin-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  place-items: center;
  padding: 16px;
}
.admin-overlay.open {
  display: grid;
}

.admin-panel {
  background: #fdf7ec;
  background-image: url("assets/reference/paper-main.png");
  background-size: 96px 64px;
  padding: 28px 24px 24px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.admin-close {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 32px;
  height: 32px;
  font-size: 18px;
  line-height: 30px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.admin-close:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

.admin-header-box {
  text-align: center;
  margin-bottom: 20px;
}
.admin-pill-tag {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font: 800 11px var(--sans);
  letter-spacing: 1.5px;
  padding: 3px 12px;
  border-radius: 12px;
  margin-bottom: 6px;
}
.admin-header-box h2 {
  font: 700 28px/1.2 var(--hand);
  color: var(--ink);
  margin: 0 0 4px;
}
.admin-hint {
  font: 14px/1.4 var(--sans);
  color: #73695c;
  margin: 0;
}

/* Login box */
.admin-login-box {
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(39, 35, 31, 0.2);
  border-radius: 14px;
  padding: 22px;
  max-width: 400px;
  margin: 10px auto;
  text-align: left;
}
.admin-field-label {
  display: block;
  font: 700 12.5px var(--sans);
  color: var(--ink);
  margin-bottom: 8px;
}
.admin-input-group {
  display: flex;
  gap: 8px;
}
.admin-login-box input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid #ccc;
  border-radius: 10px;
  font: 14px var(--sans);
  outline: none;
  background: #fff;
}
.admin-login-box input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(239, 114, 0, 0.15);
}
.admin-submit-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font: 700 13px var(--sans);
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.admin-submit-btn:hover {
  background: #d95e00;
}
.admin-error-msg {
  color: #d93025;
  font: 600 12px var(--sans);
  margin: 8px 0 0;
  min-height: 16px;
}

/* Editor box */
.admin-editor-box {
  animation: fadeIn 0.3s ease;
}
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  border-bottom: 2px solid rgba(39, 35, 31, 0.15);
  padding-bottom: 8px;
}
.admin-tab {
  padding: 8px 16px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: rgba(39, 35, 31, 0.06);
  font: 700 13px var(--sans);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-tab:hover {
  background: rgba(239, 114, 0, 0.12);
}
.admin-tab.active {
  background: var(--orange);
  color: #fff;
}

.admin-table-header {
  display: grid;
  grid-template-columns: 55px 1.5fr 1fr 1.6fr;
  gap: 10px;
  padding: 6px 10px;
  font: 700 11.5px var(--sans);
  color: #8c7f6f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 48vh;
  overflow-y: auto;
  padding-right: 4px;
}
.admin-row {
  display: grid;
  grid-template-columns: 55px 1.5fr 1fr 1.6fr;
  gap: 10px;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(39, 35, 31, 0.15);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.admin-col-img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #f1ebd9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.admin-col-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.admin-row label {
  display: none;
  font: 600 10.5px var(--sans);
  color: #73695c;
  margin-bottom: 2px;
}
.admin-row input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font: 13px var(--sans);
  background: #fff;
  outline: none;
  box-sizing: border-box;
}
.admin-row input:focus {
  border-color: var(--orange);
}

.admin-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1.5px dashed rgba(39, 35, 31, 0.2);
}
.admin-save-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 99px;
  background: #2e7d32;
  color: #fff;
  font: 700 14px var(--sans);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);
  transition: all 0.2s ease;
}
.admin-save-btn:hover {
  background: #1b5e20;
  transform: translateY(-2px);
}
.admin-logout-btn {
  padding: 8px 16px;
  border: 1px solid #aaa;
  border-radius: 99px;
  background: transparent;
  color: #666;
  font: 600 12px var(--sans);
  cursor: pointer;
}
.admin-logout-btn:hover {
  background: #eee;
  color: #333;
}

@media (max-width: 650px) {
  .admin-table-header {
    display: none;
  }
  .admin-row {
    grid-template-columns: 50px 1fr;
    gap: 8px;
  }
  .admin-col-name,
  .admin-col-price,
  .admin-col-url {
    grid-column: 1 / -1;
  }
  .admin-row label {
    display: block;
  }
  .admin-login-box {
    padding: 16px;
  }
  .admin-input-group {
    flex-direction: column;
  }
  .admin-submit-btn {
    width: 100%;
  }
}



/* Tang kich thuoc mon Banh trang tron (slide 4) */
.wheel-slide[data-index="4"].active img,
.header-hero-wrapper .wheel-slide[data-index="4"].active img {
  transform: scale(1.22) !important;
}

@media (max-width: 900px) {
  .wheel-slide[data-index="4"].active img,
  .header-hero-wrapper .wheel-slide[data-index="4"].active img {
    transform: scale(1.28) !important;
  }
}


/* Styling cho the a.aesthetic-card va nut Dat mon tren card */
a.aesthetic-card {
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  cursor: pointer !important;
}

.card-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  background: var(--orange);
  color: #fff !important;
  font: 700 11px/1.2 var(--sans);
  border-radius: 12px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 5px rgba(239, 114, 0, 0.35);
  transition: transform 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

a.aesthetic-card:hover .card-order-badge {
  background: #d95e00;
  transform: scale(1.06);
}

@media (max-width: 768px) {
  .card-order-badge {
    padding: 2px 7px;
    font-size: 10px;
    border-radius: 8px;
  }
}

/* Responsive menu: bounded container and complete dish cards. */
.aesthetic-menu-section { max-width: 1600px; padding-inline: clamp(12px, 3vw, 40px); }
.subcat-group-grid { align-items: stretch; gap: 16px; }
.aesthetic-card { min-width: 0; height: auto; min-height: 0; padding: 12px; }
.aesthetic-card .card-img-box { height: 140px; flex-shrink: 0; }
.aesthetic-card .card-img-box img { max-height: 130px; }
.aesthetic-card .card-content { flex: 1; min-width: 0; gap: 8px; }
.aesthetic-item-title { display: block; overflow: visible; overflow-wrap: anywhere; font-size: 19px; line-height: 1.3; }
.card-footer-row { flex-wrap: wrap; gap: 6px; }
.aesthetic-item-price, .card-order-badge { flex-shrink: 0; }
a.aesthetic-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (max-width: 768px) {
 .subcat-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
 .aesthetic-card { padding: 6px; }
 .aesthetic-card .card-img-box { height: 80px; }
 .aesthetic-card .card-img-box img { max-height: 72px; }
 .aesthetic-item-title { font-size: 14px; }
 .aesthetic-item-price { font-size: 17px; }
 .card-order-badge { padding: 5px 7px; }
}