/* WebTui site runtime v2 — CSS nền dùng chung cho 45 template. Biến màu/font do template + khách hàng đặt. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body),system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg);line-height:1.65;font-size:16px;overflow-x:hidden;font-variant-numeric:lining-nums}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-heading),var(--font-body),serif;line-height:1.12;margin:0 0 .5em;font-weight:var(--heading-weight,700);letter-spacing:var(--heading-spacing,0);text-wrap:balance}
h1{font-size:clamp(2.2rem,5vw,4rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.7rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.container{width:min(var(--container,1180px),100% - 2rem);margin-inline:auto}
.section{padding-block:var(--section-pad,5rem);position:relative}
.section--tight{padding-block:2.75rem}
.section--alt{background:var(--surface-2,var(--surface))}
.section--wash{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 9%,var(--bg)),var(--bg))}
.section--dark{background:var(--dark);color:var(--dark-ink,#fff)}
.section--primary{background:var(--primary);color:var(--primary-ink)}
.section--pattern::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(circle at 8% 12%,color-mix(in srgb,var(--accent) 45%,transparent) 0 3px,transparent 4px),radial-gradient(circle at 14% 18%,color-mix(in srgb,var(--accent) 35%,transparent) 0 2px,transparent 3px),radial-gradient(circle at 92% 20%,color-mix(in srgb,var(--accent) 40%,transparent) 0 3px,transparent 4px),radial-gradient(circle at 88% 26%,color-mix(in srgb,var(--accent) 30%,transparent) 0 2px,transparent 3px),radial-gradient(circle at 95% 80%,color-mix(in srgb,var(--accent) 35%,transparent) 0 3px,transparent 4px),radial-gradient(circle at 6% 85%,color-mix(in srgb,var(--accent) 35%,transparent) 0 2px,transparent 3px),radial-gradient(circle at 11% 90%,color-mix(in srgb,var(--accent) 25%,transparent) 0 4px,transparent 5px);background-repeat:no-repeat}
.pattern-dots .section--pattern::before{background-image:radial-gradient(color-mix(in srgb,var(--text) 14%,transparent) 1px,transparent 1.5px);background-size:22px 22px;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);mask-image:linear-gradient(180deg,#000,transparent 60%)}
.pattern-grid .section--pattern::before{background-image:linear-gradient(color-mix(in srgb,var(--text) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 8%,transparent) 1px,transparent 1px);background-size:48px 48px;opacity:.6;-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%);mask-image:radial-gradient(ellipse at center,#000,transparent 75%)}
.pattern-none .section--pattern::before{display:none}
.section > .container{position:relative;z-index:1}
.section-head{max-width:680px;margin-bottom:2.5rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin-bottom:.6rem}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.75rem}
.eyebrow-chip .eyebrow{background:color-mix(in srgb,var(--accent) 14%,transparent);padding:.35rem .85rem;border-radius:999px;letter-spacing:.06em;text-transform:none;font-size:.8rem}
.eyebrow-chip .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.eyebrow-line .eyebrow::before{content:"";width:28px;height:2px;background:var(--accent)}
.section--dark .eyebrow,.section--primary .eyebrow{color:var(--accent-on-dark,var(--accent))}
.lead{font-size:1.1rem;color:var(--muted)}
.section--dark .lead,.section--primary .lead{color:inherit;opacity:.85}
.muted{color:var(--muted)}
.link-more{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text);border-bottom:2px solid var(--accent);padding-bottom:.2rem}
.link-more::after{content:"→";transition:.2s}
.link-more:hover::after{transform:translateX(3px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.6rem;border-radius:var(--btn-radius,var(--radius));font-weight:600;font-size:.95rem;border:1.5px solid transparent;cursor:pointer;transition:.2s;font-family:inherit;line-height:1.2;text-align:center}
.btn-primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--primary) 70%,transparent)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 14px 28px -12px color-mix(in srgb,var(--primary) 80%,transparent)}
.btn-outline{border-color:currentColor;color:inherit;background:transparent}
.btn-outline:hover{background:rgba(0,0,0,.05)}
.section--dark .btn-outline:hover,.hero--dark .btn-outline:hover,.section--primary .btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-accent{background:var(--accent);color:var(--accent-ink,#fff)}
.btn-light{background:#fff;color:#111}
.btn-sm{padding:.5rem 1rem;font-size:.85rem}
.btn-xs{padding:.35rem .75rem;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase}
.btn-block{width:100%}
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--surface);border-radius:var(--radius);overflow:hidden;position:relative;transition:.25s;display:flex;flex-direction:column}
.cards--soft .card{box-shadow:0 12px 32px -20px rgba(0,0,0,.28)}
.cards--soft .card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -22px rgba(0,0,0,.38)}
.cards--outline .card{border:1px solid var(--border)}
.cards--outline .card:hover{border-color:var(--primary);transform:translateY(-3px)}
.cards--flat .card{background:transparent;border-radius:0}
.cards--flat .card .card-body{padding-inline:0}
.cards--shadow .card{box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 28px -14px rgba(0,0,0,.22)}
.cards--shadow .card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(0,0,0,.3)}
.card-media{aspect-ratio:var(--card-ratio,4/3);overflow:hidden;background:var(--surface-2);position:relative}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .card-media img{transform:scale(1.05)}
.card-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:.35rem}
.card-body p{color:var(--muted);font-size:.95rem;margin-bottom:.75rem}
.price{font-weight:700;color:var(--primary);font-family:var(--font-heading);font-size:1.15rem}
.price small{font-weight:500;color:var(--muted);font-family:var(--font-body);font-size:.8rem}
.price-old{text-decoration:line-through;color:var(--muted);font-weight:400;font-size:.85rem;font-family:var(--font-body);margin-left:.4rem}
.tag{display:inline-block;font-size:.72rem;padding:.2rem .6rem;border-radius:999px;background:var(--surface-2);color:var(--muted);font-weight:600;letter-spacing:.03em}
.tag-accent{background:var(--accent);color:var(--accent-ink,#fff)}
.card-body>.tag{align-self:flex-start}
.card-body>.link-more{align-self:flex-start;margin-top:auto}
.price-line .btn{padding-inline:.75rem}
.badge{position:absolute;top:.75rem;left:.75rem;z-index:2;background:var(--accent);color:var(--accent-ink,#fff);font-size:.68rem;font-weight:700;padding:.28rem .6rem;border-radius:999px;letter-spacing:.05em;text-transform:uppercase}
.badge-sale{background:#e11d48;color:#fff}
.badge-demo{position:absolute;top:.75rem;left:.75rem;background:rgba(0,0,0,.55);color:#fff;font-size:.68rem;padding:.2rem .5rem;border-radius:4px;letter-spacing:.05em}
.disclaimer{font-size:.78rem;color:var(--muted);text-align:center;margin-top:1.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;padding:.4rem .8rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text)}
.chip::before{content:"✓";color:var(--accent);font-weight:800}
.hero--dark .chip,.section--dark .chip{background:rgba(255,255,255,.12);color:#fff}
.hero--fullbleed .chip{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.checks{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.5rem}
.checks li{padding-left:1.7rem;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-size:.75rem;font-weight:800;display:grid;place-items:center}

/* ===== Reveal ===== */
@media (prefers-reduced-motion:no-preference){
  /* up: trồi nhẹ 18px | media: ảnh mở dần từ khung + thu nhẹ | head: dòng nhỏ → tiêu đề → mô tả lần lượt. Đường cong êm, không nảy. */
  body:not(.no-reveal) [data-reveal]{--ease:cubic-bezier(.22,.8,.24,1);opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease),clip-path 1.1s var(--ease);transition-delay:var(--d,0s)}
  body:not(.no-reveal) [data-reveal].in{opacity:1;transform:none}
  body:not(.no-reveal) [data-reveal="media"]{transform:none;clip-path:inset(7% 7% 7% 7% round calc(var(--radius) + 6px))}
  body:not(.no-reveal) [data-reveal="media"].in{clip-path:inset(0 0 0 0 round 0)}
  body:not(.no-reveal) [data-reveal="media"].rv-done{clip-path:none}
  body:not(.no-reveal) [data-reveal="media"]:not(.rv-done) img:not(.slide-img){transform:scale(1.08);transition:transform 1.1s var(--ease);transition-delay:var(--d,0s)}
  body:not(.no-reveal) [data-reveal="media"].in:not(.rv-done) img:not(.slide-img){transform:none}
  body:not(.no-reveal) [data-reveal="head"]{opacity:1;transform:none}
  body:not(.no-reveal) [data-reveal="head"]>*{opacity:0;transform:translateY(16px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
  body:not(.no-reveal) [data-reveal="head"].in>*{opacity:1;transform:none}
  body:not(.no-reveal) [data-reveal="head"].in>:nth-child(2){transition-delay:.1s}
  body:not(.no-reveal) [data-reveal="head"].in>:nth-child(3){transition-delay:.2s}
  body:not(.no-reveal) [data-reveal="head"].in>:nth-child(4){transition-delay:.28s}
  body:not(.no-reveal) [data-reveal="head"].in>:nth-child(n+5){transition-delay:.36s}
}

/* ===== NAV ===== */
.topstrip{background:var(--dark);color:#fff;font-size:.78rem;padding:.35rem 0}
.topstrip .container{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.topstrip span{opacity:.85}
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg,var(--surface));color:var(--nav-ink,var(--text));border-bottom:1px solid var(--nav-border,var(--border));backdrop-filter:saturate(1.4) blur(10px)}
.nav--transparent{position:absolute;left:0;right:0;background:transparent;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;backdrop-filter:none}
.nav--dark{background:var(--dark);color:#fff;border-bottom-color:rgba(255,255,255,.1)}
.nav--primary{background:var(--primary);color:var(--primary-ink);border-bottom-color:rgba(255,255,255,.14)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--nav-h,76px)}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--font-heading);font-weight:700;font-size:1.3rem;letter-spacing:.01em}
.brand-mark{width:40px;height:40px;border-radius:var(--radius);background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;font-size:1.05rem;font-weight:800;flex:none}
.brand img{height:42px;width:auto}
.nav-links{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0;font-weight:500;font-size:.95rem}
.nav-links a{opacity:.85;position:relative;padding:.25rem 0}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent);border-radius:2px}
.nav-actions{display:flex;align-items:center;gap:.75rem}
.nav-toggle{display:none;background:none;border:0;color:inherit;font-size:1.6rem;cursor:pointer;padding:.25rem}
.nav--center .nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav--center .nav-links{justify-self:center}
.nav--center .nav-actions{justify-self:end}
.nav--pill .nav-links{background:rgba(0,0,0,.05);padding:.35rem .5rem;border-radius:999px;gap:.25rem}
.nav--pill .nav-links a{padding:.45rem .9rem;border-radius:999px}
.nav--pill .nav-links a.active{background:var(--primary);color:var(--primary-ink);opacity:1}
.nav--pill .nav-links a.active::after{display:none}
.nav--stacked .nav-inner{flex-direction:column;gap:.75rem;padding-block:1rem}
.nav--stacked .brand{font-size:1.7rem}
.nav--stacked .nav-links{gap:2rem}
.nav--minimal .nav-inner{min-height:62px}
.nav--minimal .nav-links{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;padding:.5rem .8rem;border-radius:999px;background:rgba(0,0,0,.06);cursor:pointer;border:0;color:inherit;font-family:inherit}
.nav--transparent .cart-btn,.nav--dark .cart-btn,.nav--primary .cart-btn{background:rgba(255,255,255,.14)}
.cart-count{background:var(--accent);color:var(--accent-ink,#fff);border-radius:999px;font-size:.7rem;min-width:18px;height:18px;display:grid;place-items:center;padding-inline:4px}
@media (max-width:900px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--surface);color:var(--text);padding:1rem 1.25rem 1.5rem;gap:.85rem;border-bottom:1px solid var(--border);box-shadow:0 20px 40px -20px rgba(0,0,0,.3)}
  .nav--pill .nav-links{border-radius:0;background:var(--surface)}
  .nav--pill .nav-links a.active{background:var(--surface-2);color:var(--text)}
  .nav.open .nav-links{display:flex}
  .nav-toggle{display:inline-block}
  .nav--center .nav-inner{display:flex}
  .nav--stacked .nav-inner{flex-direction:row}
  .nav-actions .btn{display:none}
  .nav{position:sticky;background:var(--surface);color:var(--text)}
  .nav--dark{background:var(--dark);color:#fff}
  .nav--dark .nav-links{background:var(--dark);color:#fff}
  .topstrip{display:none}
}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden}
.hero-inner{display:grid;gap:2.5rem;align-items:center}
.hero-text h1{margin-bottom:1rem}
.hero-text .lead{font-size:1.15rem;max-width:560px}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.hero .chips{margin-top:1.25rem}
.hero-media{position:relative;isolation:isolate}
.hero-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--hero-radius,var(--radius))}
.shape-arch .hero--split .hero-media img,.shape-arch .hero--collage .hero-collage img:first-child{border-radius:999px 999px var(--radius) var(--radius)}
.shape-blob .hero--split .hero-media img{border-radius:46% 54% 52% 48%/56% 42% 58% 44%}
.shape-blob .hero--split .hero-media::before{content:"";position:absolute;inset:-6% -4% -4% -8%;background:color-mix(in srgb,var(--accent) 22%,transparent);border-radius:58% 42% 46% 54%/44% 58% 42% 56%;z-index:-1}
.shape-tilt .hero--split .hero-media{transform:rotate(-2deg)}
.shape-tilt .hero--split .hero-media img{box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.shape-circle .hero--split .hero-media{aspect-ratio:1!important}
.shape-circle .hero--split .hero-media img{border-radius:50%}
.hero-float{position:absolute;background:var(--surface);color:var(--text);border-radius:var(--radius);padding:.85rem 1.1rem;box-shadow:0 20px 40px -20px rgba(0,0,0,.4);display:flex;gap:.75rem;align-items:center;font-size:.85rem;z-index:2}
.hero-float b{display:block;font-size:1.15rem;font-family:var(--font-heading);line-height:1.1}
.hero-float--bl{left:-1rem;bottom:1.5rem}
.hero-float--tr{right:-1rem;top:1.5rem}
.hero-float .stars{margin:0}
.hero--split .hero-inner{grid-template-columns:1.05fr 1fr;padding-block:4.5rem}
.hero--split .hero-media{aspect-ratio:5/4}
.hero--split.hero--reverse .hero-media{order:-1}
.hero--fullbleed{min-height:var(--hero-min,88vh);display:grid;align-items:end;color:#fff}
.hero--fullbleed .hero-bg{position:absolute;inset:0}
.hero--fullbleed .hero-bg img{width:100%;height:100%;object-fit:cover;border-radius:0}
.hero--fullbleed .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.2) 55%,rgba(0,0,0,.35))}
.hero--fullbleed .hero-inner{position:relative;grid-template-columns:1fr;padding-block:7rem 4.5rem}
.hero--fullbleed .hero-text{max-width:760px}
.hero--fullbleed .lead{color:rgba(255,255,255,.9)}
.hero--fullbleed.hero--center{align-items:center;text-align:center}
.hero--fullbleed.hero--center .hero-text{margin-inline:auto}
.hero--fullbleed.hero--center .hero-actions,.hero--fullbleed.hero--center .chips{justify-content:center}
.hero-scroll{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(255,255,255,.6);border-radius:14px}
.hero-scroll::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:scrollhint 1.6s infinite}
@keyframes scrollhint{0%{transform:translateY(0);opacity:1}100%{transform:translateY(14px);opacity:0}}
.hero--centered{text-align:center;padding-top:4.5rem}
.hero--centered .hero-inner{grid-template-columns:1fr}
.hero--centered .hero-text{max-width:800px;margin-inline:auto}
.hero--centered .hero-text .lead{margin-inline:auto}
.hero--centered .hero-actions,.hero--centered .chips{justify-content:center}
.hero--centered .hero-media{margin-top:3rem;aspect-ratio:21/9;border-radius:var(--radius);overflow:hidden}
.hero--editorial .hero-inner{grid-template-columns:1fr 1.2fr;padding-block:3rem 0;align-items:end}
.hero--editorial h1{font-size:clamp(2.6rem,6.5vw,5.4rem);line-height:1;letter-spacing:-.02em}
.hero--editorial .hero-media{aspect-ratio:4/5;max-height:640px}
.hero--editorial .hero-media img{border-radius:var(--radius) var(--radius) 0 0}
.hero--stack{padding-top:3.5rem}
.hero--stack .hero-inner{grid-template-columns:1fr}
.hero--stack .hero-text{max-width:860px}
.hero--stack .hero-media{aspect-ratio:16/7;margin-top:2rem}
.hero--collage .hero-inner{grid-template-columns:1fr 1fr;padding-block:4.5rem}
.hero-collage{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.hero-collage img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:var(--radius)}
.hero-collage img:nth-child(2){margin-top:2.5rem}
.hero-collage img:nth-child(3){margin-top:-2.5rem}
.hero--dark{background:var(--dark);color:#fff}
.hero--primary{background:var(--primary);color:var(--primary-ink)}
.hero--primary .lead,.hero--dark .lead{color:inherit;opacity:.85}
.hero-note{display:flex;gap:1.75rem;margin-top:2rem;flex-wrap:wrap;font-size:.9rem}
.hero-note b{display:block;font-size:1.35rem;font-family:var(--font-heading)}
.hero-panel{background:var(--surface);color:var(--text);border-radius:var(--radius);padding:1.6rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.hero-panel h3{margin-bottom:1rem}
/* arch (kiểu Trà Nails) */
.hero--arch{padding-block:3.5rem 4rem}
.hero--arch .hero-inner{grid-template-columns:1.05fr 1fr}
.hero-thumbs{display:flex;gap:.9rem;margin-top:2rem;align-items:center;flex-wrap:wrap}
.hero-thumbs img{width:110px;height:82px;object-fit:cover;border-radius:999px 12px 999px 12px}
.hero-thumbs img:nth-child(2){border-radius:12px 999px 12px 999px}
.hero-thumbs img:nth-child(3){border-radius:50%;width:82px}
.hero-thumbs .link-more{margin-left:auto;white-space:nowrap}
.hero-arch{position:relative;aspect-ratio:4/5;width:100%;max-width:520px;margin-left:auto}
.hero-arch .slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:999px 999px 24px 24px;opacity:0;transition:opacity .8s}
.hero-arch .slide-img.on{opacity:1}
.hero-arch::before{content:"";position:absolute;inset:-14px -14px -14px -14px;border:1.5px solid color-mix(in srgb,var(--accent) 70%,transparent);border-radius:999px 999px 30px 30px;pointer-events:none}
.hero-arch .arch-dots{position:absolute;bottom:1rem;left:0;right:0;display:flex;justify-content:center;gap:.4rem;z-index:2}
.hero-leaf{position:absolute;width:150px;color:var(--accent);opacity:.7;pointer-events:none}
.hero-leaf--l{left:-70px;bottom:-30px;transform:rotate(-20deg)}
.hero-leaf--r{right:-40px;top:-30px;transform:rotate(30deg)}
.sparkle{position:absolute;color:var(--dark);font-size:1.3rem;pointer-events:none}
/* slider hero */
.hero--slider{color:#fff;background:var(--dark)}
.hero--slider .slider-track{height:var(--hero-min,80vh);min-height:520px}
.hero--slider .slide{position:relative;display:grid;align-items:center}
.hero--slider .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.hero--slider .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.78),rgba(0,0,0,.25) 65%,rgba(0,0,0,.1))}
.hero--slider .slide .container{position:relative;z-index:1;padding-block:4rem 5.5rem}
.hero--slider .hero-text{max-width:640px}
.hero--slider .lead{color:rgba(255,255,255,.9)}
.hero--slider .checks li::before{background:rgba(255,255,255,.18);color:#fff}
/* video hero/section */
.video-poster{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:#000}
.video-poster img{width:100%;height:100%;object-fit:cover;opacity:.85}
.video-poster .play{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer}
.video-poster .play span{width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--accent-ink,#fff);display:grid;place-items:center;font-size:1.8rem;box-shadow:0 0 0 12px color-mix(in srgb,var(--accent) 35%,transparent);transition:.2s}
.video-poster .play:hover span{transform:scale(1.06)}
.video-poster iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-caption{position:absolute;left:1.25rem;bottom:1.25rem;color:#fff;font-size:.85rem;background:rgba(0,0,0,.45);padding:.35rem .7rem;border-radius:6px}
.video-split{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
@media (max-width:900px){
  .hero--split .hero-inner,.hero--editorial .hero-inner,.hero--collage .hero-inner,.hero--arch .hero-inner{grid-template-columns:1fr;padding-block:2.5rem}
  .hero--split.hero--reverse .hero-media{order:0}
  .hero--editorial .hero-media{aspect-ratio:4/3;max-height:none}
  .hero--fullbleed{min-height:72vh}
  .hero--fullbleed .hero-inner{padding-block:7rem 3rem}
  .hero--centered .hero-media{aspect-ratio:4/3}
  .hero--stack .hero-media{aspect-ratio:4/3}
  .hero-arch{max-width:100%;aspect-ratio:4/4.4}
  .hero-thumbs img{width:90px;height:66px}
  .hero-thumbs .link-more{flex-basis:100%;margin-left:0}
  .hero-float--bl{left:.5rem}.hero-float--tr{right:.5rem}
  .hero--slider .slider-track{height:auto;min-height:520px}
  .video-split{grid-template-columns:1fr}
  .shape-tilt .hero--split .hero-media{transform:none}
}

/* ===== TICKER ===== */
.ticker{overflow:hidden;white-space:nowrap;border-block:1px solid var(--border);padding:.9rem 0;background:var(--surface)}
.ticker--dark{background:var(--dark);color:#fff;border-color:rgba(255,255,255,.1)}
.ticker--primary{background:var(--primary);color:var(--primary-ink);border:0}
.ticker-track{display:inline-flex;gap:3rem;animation:ticker 40s linear infinite;font-family:var(--font-heading);font-size:1.15rem;letter-spacing:.18em;text-transform:uppercase}
.ticker-track span::after{content:"✦";margin-left:3rem;color:var(--accent)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ===== SLIDER ===== */
.slider{position:relative}
.slider-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:var(--slide-gap,0)}
.slider-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start}
.slider--cards .slide{flex:0 0 calc((100% - 2 * var(--slide-gap,1.5rem)) / 3)}
.slider--cards{--slide-gap:1.5rem}
.slider-nav{display:flex;justify-content:center;align-items:center;gap:.6rem;margin-top:1.5rem}
.slider-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:1rem}
.slider-nav .dots{display:flex;gap:.4rem}
.dots button,.arch-dots button{width:9px;height:9px;border-radius:50%;border:0;background:color-mix(in srgb,var(--text) 25%,transparent);cursor:pointer;padding:0;transition:.2s}
.dots button.on,.arch-dots button.on{background:var(--accent);width:24px;border-radius:6px}
.arch-dots button{background:rgba(255,255,255,.6)}
.arch-dots button.on{background:#fff}
.hero--slider .slider-nav{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);margin:0;z-index:2}
.hero--slider .slider-nav button{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff}
.hero--slider .dots button{background:rgba(255,255,255,.5)}
.hero--slider .dots button.on{background:#fff}
@media (max-width:900px){.slider--cards .slide{flex-basis:calc((100% - var(--slide-gap,1.5rem)) / 2)}}
@media (max-width:600px){.slider--cards .slide{flex-basis:88%}}

/* ===== ITEMS ===== */
.items-tabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:2rem}
.items-tabs button{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:.5rem 1.1rem;border-radius:999px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:.2s}
.items-tabs button.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.items--grid .card-body h3{font-size:1.1rem}
.items--list .item-row{display:grid;grid-template-columns:150px 1fr auto;gap:1.35rem;align-items:center;padding:1.35rem 0;border-bottom:1px solid var(--border)}
.items--list .item-row img{width:150px;height:108px;object-fit:cover;border-radius:var(--radius)}
.items--list .item-row h3{margin-bottom:.2rem;font-size:1.15rem}
.items--list .item-row p{margin:0;color:var(--muted);font-size:.92rem}
.items--list .item-row .price{white-space:nowrap;text-align:right}
.items--menu{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3.5rem}
.menu-cat{margin-bottom:2.25rem}
.menu-cat h3{font-size:1.4rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent);display:inline-block}
.menu-line{display:flex;align-items:baseline;gap:.5rem;padding:.6rem 0;flex-wrap:wrap}
.menu-line .name{font-weight:600}
.menu-line .dots-fill{flex:1;border-bottom:1px dotted var(--border);transform:translateY(-4px);min-width:20px}
.menu-line .desc{flex-basis:100%;font-size:.85rem;color:var(--muted);margin-top:-.2rem}
.items--wide .card{display:grid;grid-template-columns:1fr 1fr}
.items--wide .card-media{aspect-ratio:auto;min-height:280px}
.items--wide .card:nth-child(even) .card-media{order:2}
.items--wide .card-body{padding:2.25rem;justify-content:center}
.items--wide .card .card-body{padding:2.25rem}.items--wide .card-body .tag{align-self:flex-start}
.items--table{width:100%;border-collapse:collapse;font-size:.95rem}
.items--table th,.items--table td{padding:.95rem 1rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.items--table th{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.items--table img{width:68px;height:68px;object-fit:cover;border-radius:10px}.items--table td:first-child{width:84px}.items--table td img,.cart-table td img{min-width:64px;max-width:none}
.item-meta{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:auto}
.item-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.specs{list-style:none;padding:0;margin:.5rem 0 0;font-size:.85rem;color:var(--muted);display:grid;gap:.15rem}
.specs li b{color:var(--text);font-weight:600}
/* price cards (Trà Nails) */
.price-cards{display:grid;grid-template-columns:repeat(var(--pc-cols,2),1fr);gap:1.5rem}
.price-card{background:var(--surface);border-radius:calc(var(--radius) + 6px);padding:1.75rem 1.75rem 1.5rem;box-shadow:0 20px 40px -28px rgba(0,0,0,.3);border:1px solid var(--border)}
.price-card h3{font-size:1.5rem;margin-bottom:1rem}
.price-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.6rem;align-items:center;padding:.7rem 0;border-bottom:1px dashed var(--border);font-size:.95rem}
.price-line:last-child{border-bottom:0}
.price-line .p{color:var(--primary);font-weight:700;white-space:nowrap}
.price-line small{display:block;color:var(--muted);font-size:.78rem}
@media (max-width:820px){.price-cards{grid-template-columns:1fr}}
@media (max-width:760px){.items--menu{grid-template-columns:1fr}.items--wide .card{grid-template-columns:1fr}.items--wide .card:nth-child(even) .card-media{order:0}.items--list .item-row{grid-template-columns:100px 1fr}.items--list .item-row img{width:100px;height:76px}.items--list .item-row .price{grid-column:2;text-align:left}.table-wrap{overflow-x:auto}}

/* ===== FEATURES / STATS / PROCESS ===== */
.feature{padding:1.6rem;border-radius:var(--radius);background:var(--surface);transition:.25s}
.feature:hover{transform:translateY(-4px)}
.feature-icon{width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);display:grid;place-items:center;font-size:1.4rem;margin-bottom:1rem}
.feature h3{font-size:1.05rem}
.feature p{color:var(--muted);font-size:.92rem;margin:0}
.features--inline .feature{background:transparent;padding:0;display:flex;gap:1rem}
.features--inline .feature-icon{margin:0;flex:none}
.features--bar{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;text-align:center}
.features--bar .feature{padding:0;background:transparent;max-width:230px}
.features--bar .feature-icon{margin-inline:auto}
.features--columns{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.features--columns .feature{background:transparent;border-radius:0;text-align:center;padding:2rem 1.25rem;border-right:1px solid var(--border)}
.features--columns .feature:last-child{border-right:0}
.features--columns .feature-icon{margin-inline:auto;background:transparent;font-size:2rem;width:auto;height:auto}
.features--columns .feature h3{font-size:1.2rem}
.section--dark .feature{background:rgba(255,255,255,.06)}
.section--dark .feature p{color:inherit;opacity:.8}
@media (max-width:900px){.features--columns{grid-template-columns:repeat(2,1fr)}.features--columns .feature:nth-child(2n){border-right:0}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.stat b{display:block;font-family:var(--font-heading);font-size:2.6rem;line-height:1;color:var(--primary)}
.section--dark .stat b,.section--primary .stat b{color:inherit}
.stat span{font-size:.9rem;color:var(--muted)}
.section--dark .stat span,.section--primary .stat span{color:inherit;opacity:.8}
.stats--tiles .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:left}
.stats--tiles .stat i{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--accent) 16%,transparent);font-style:normal;margin-bottom:.75rem}
.section--dark .stats--tiles .stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.stats--inline{display:flex;gap:2.5rem;flex-wrap:wrap;text-align:left;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.stats--inline .stat{display:flex;gap:.6rem;align-items:baseline}
.stats--inline .stat b{font-size:1.9rem;color:var(--accent)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:step}
.process .step{position:relative;padding:1.6rem;background:var(--surface);border-radius:var(--radius)}
.process .step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-heading);font-size:2.2rem;color:var(--accent);display:block;margin-bottom:.5rem;line-height:1}
.process .step h3{font-size:1.05rem}.process .step p{margin:0;color:var(--muted);font-size:.9rem}
.process--line{grid-template-columns:1fr;max-width:780px;gap:0}
.process--line .step{display:grid;grid-template-columns:70px 1fr;gap:1rem;background:transparent;padding:1.25rem 0;border-bottom:1px solid var(--border)}
.process--line .step::before{margin:0}
.process--numbered{gap:2rem}
.process--numbered .step{background:transparent;padding:0}
.process--numbered .step::before{content:counter(step);width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink,#fff);font-family:var(--font-body);font-size:.95rem;font-weight:800;display:grid;place-items:center;margin-bottom:.9rem}
.process--numbered .step h3{text-transform:uppercase;font-size:.95rem;letter-spacing:.04em}
.section--dark .process .step{background:rgba(255,255,255,.06)}
@media (max-width:760px){.process{grid-template-columns:1fr 1fr}.process--line{grid-template-columns:1fr}}

/* ===== GALLERY ===== */
.gallery--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--gallery-radius,var(--radius));cursor:zoom-in}
.gallery img{width:100%;object-fit:cover;transition:transform .6s}
.gallery figure:hover img{transform:scale(1.05)}
.gallery--grid img{aspect-ratio:1}
.gallery--masonry{columns:3;column-gap:1rem}
.gallery--masonry figure{break-inside:avoid;margin-bottom:1rem}
.gallery--masonry figure:nth-child(3n+1) img{aspect-ratio:3/4}
.gallery--masonry figure:nth-child(3n+2) img{aspect-ratio:1}
.gallery--masonry figure:nth-child(3n) img{aspect-ratio:4/3}
.gallery--mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:.85rem}
.gallery--mosaic figure:first-child{grid-column:span 2;grid-row:span 2}
.gallery--mosaic figure:nth-child(4){grid-row:span 2}
.gallery--mosaic img{height:100%}
.gallery--strip{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
.gallery--strip figure{flex:0 0 min(360px,78vw);scroll-snap-align:start}
.gallery--strip img{aspect-ratio:4/5}
.gallery--edge{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.gallery--edge figure{border-radius:0}
.gallery--edge img{aspect-ratio:1}
.section--edge{padding:0}
figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:.65rem .9rem;font-size:.8rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));opacity:0;transition:.25s}
figure:hover figcaption{opacity:1}
.gallery--captions figcaption{position:static;background:none;color:var(--muted);opacity:1;text-align:center;padding:.5rem 0 0}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;place-items:center;z-index:200;padding:1rem}
.lightbox.open{display:grid}
.lightbox img{max-width:100%;max-height:90vh;border-radius:8px}
.lightbox button{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.15);border:0;color:#fff;font-size:1.6rem;width:44px;height:44px;border-radius:50%;cursor:pointer}
@media (max-width:760px){.gallery--grid,.gallery--edge{grid-template-columns:repeat(2,1fr)}.gallery--masonry{columns:2}.gallery--mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.gallery--mosaic figure:nth-child(4){grid-row:auto}}

/* ===== ABOUT / INTRO / TEAM / TESTIMONIALS / FAQ ===== */
.about{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.about-media{position:relative}
.about-media img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}
.shape-arch .about-media img{border-radius:999px 999px var(--radius) var(--radius);aspect-ratio:4/5}
.shape-blob .about-media img{border-radius:52% 48% 44% 56%/48% 56% 44% 52%}
.about--reverse .about-media{order:2}
.about--stack{grid-template-columns:1fr;max-width:840px;margin-inline:auto;text-align:center}
.about--stack .about-media img{aspect-ratio:21/9;border-radius:var(--radius)}
.about-list{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.5rem}
.about-list li{padding-left:1.7rem;position:relative}
.about-list li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.intro-media{position:relative;padding-bottom:3rem;padding-right:3rem}
.intro-media .main{border-radius:999px 999px var(--radius) var(--radius);aspect-ratio:4/5;object-fit:cover;width:82%}
.shape-rounded .intro-media .main,.shape-sharp .intro-media .main{border-radius:var(--radius)}
.intro-media .sub{position:absolute;right:0;bottom:0;width:48%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);border:8px solid var(--bg);box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.intro-media .sparkle{top:-10px;left:10%}
@media (max-width:820px){.about{grid-template-columns:1fr}.about--reverse .about-media{order:0}.intro-media .main{width:88%}}
.team{display:grid;grid-template-columns:repeat(var(--team-cols,4),1fr);gap:1.5rem}
.member{text-align:center}
.member img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--member-radius,50%);margin-bottom:.85rem}
.shape-arch .member img{border-radius:999px 999px var(--radius) var(--radius);aspect-ratio:4/5}
.member h3{font-size:1.05rem;margin-bottom:.15rem}.member span{font-size:.85rem;color:var(--muted)}
.member .chips{justify-content:center;margin-top:.6rem}
.member .chip::before{display:none}
.profile{display:grid;grid-template-columns:320px 1fr;gap:3rem;align-items:center}
.profile img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
@media (max-width:760px){.team{grid-template-columns:repeat(2,1fr)}.profile{grid-template-columns:1fr}}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.quote{background:var(--surface);border-radius:var(--radius);padding:1.7rem;position:relative;display:flex;flex-direction:column}
.quote::before{content:"“";font-family:var(--font-heading);font-size:4.2rem;line-height:1;color:var(--accent);position:absolute;top:.5rem;right:1.2rem;opacity:.35}
.quote p{font-style:italic;margin-bottom:1rem;flex:1}
.quote .who{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.7rem}
.quote .who div>span{display:block;color:var(--muted);font-weight:400;font-size:.8rem}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;font-weight:700;flex:none}
.stars{color:#f5a524;letter-spacing:.1em;font-size:.85rem;margin-bottom:.5rem}
.testimonials--single{grid-template-columns:1fr;max-width:780px;margin-inline:auto;text-align:center}
.testimonials--single .quote{background:transparent;padding:0}
.testimonials--single .quote p{font-size:1.45rem;font-family:var(--font-heading)}
.testimonials--single .quote .who{justify-content:center}
.testimonials--photo .quote{padding:0;overflow:hidden;text-align:center}
.testimonials--photo .quote::before{display:none}
.testimonials--photo .quote img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:999px 999px 0 0}
.testimonials--photo .quote .avatar{margin:-24px auto 0;border:3px solid var(--surface)}
.testimonials--photo .quote-body{padding:.9rem 1.5rem 1.6rem}
.testimonials--photo .quote .who{display:block}
.section--dark .quote,.section--primary .quote{background:rgba(255,255,255,.08)}
@media (max-width:820px){.testimonials{grid-template-columns:1fr}}
.faq{max-width:800px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--border);padding:1rem 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--accent);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.75rem 0 0;color:var(--muted)}

/* ===== PRICING / PLANS ===== */
.pricing{width:100%;border-collapse:collapse}
.pricing th,.pricing td{padding:1rem;border-bottom:1px solid var(--border);text-align:left}
.pricing th{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pricing td.p{text-align:right;font-weight:700;color:var(--primary);white-space:nowrap}
.pricing td small{display:block;color:var(--muted);font-weight:400;font-size:.82rem}
.pricing--cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.plan{background:var(--surface);border-radius:var(--radius);padding:1.9rem;border:1px solid var(--border);text-align:center;position:relative;display:flex;flex-direction:column}
.plan.featured{border-color:var(--primary);box-shadow:0 24px 48px -28px var(--primary)}
.plan .ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--accent-ink,#fff);font-size:.72rem;font-weight:700;padding:.3rem .8rem;border-radius:999px;letter-spacing:.05em}
.plan .price{font-size:2.1rem;display:block;margin:.5rem 0 1rem}
.plan ul{list-style:none;padding:0;margin:0 0 1.5rem;color:var(--muted);font-size:.92rem;display:grid;gap:.45rem;flex:1}
.plan--spec{text-align:left;padding:0;overflow:hidden}
.plan--spec .plan-head{padding:1.5rem 1.5rem 1.2rem;background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 14%,var(--surface)),var(--surface))}
.plan--spec .plan-head .price{margin:.25rem 0 0;font-size:1.6rem}
.plan--spec ul{padding:1rem 1.5rem 0;gap:0}
.plan--spec li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed var(--border)}
.plan--spec li b{color:var(--text)}
.plan--spec .plan-cta{padding:1.25rem 1.5rem 1.5rem;display:flex;gap:.5rem}
.section--dark .plan{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
@media (max-width:820px){.pricing--cards{grid-template-columns:1fr}}

/* ===== CTA / PROMO / CONTACT / DIRECTIONS / FOOTER ===== */
.cta-band{border-radius:var(--radius);padding:3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;background:var(--primary);color:var(--primary-ink);position:relative;overflow:hidden}
.cta-band h2{margin:0 0 .35rem}.cta-band p{margin:0;opacity:.88}
.cta-band--dark{background:var(--dark);color:#fff}
.cta-band--accent{background:var(--accent);color:var(--accent-ink,#fff)}
.cta-band--image{position:relative;overflow:hidden;color:#fff;min-height:340px;align-items:end}
.cta-band--image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta-band--image::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.25))}
.cta-band--image>*:not(img){position:relative;z-index:1}
.parallax{position:relative;min-height:440px;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;background:var(--dark)}
.parallax > img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;will-change:transform}
.parallax::after{content:"";position:absolute;inset:0;background:rgba(10,10,12,.55)}
.parallax .container{position:relative;z-index:1;padding-block:4rem;max-width:760px}
.parallax h2{font-size:clamp(1.9rem,3.5vw,3rem);margin-bottom:.75rem}
.parallax p{opacity:.9;font-size:1.05rem}
.promo{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;background:linear-gradient(100deg,var(--primary),color-mix(in srgb,var(--primary) 60%,var(--accent)));color:var(--primary-ink);padding:1.25rem 1.75rem;border-radius:var(--radius)}
.promo b{font-family:var(--font-heading);font-size:1.15rem}
.promo code{background:rgba(255,255,255,.2);padding:.3rem .7rem;border-radius:6px;font-weight:700;letter-spacing:.1em}
.promo--strip{border-radius:0;padding:1rem 0}
.promo--strip .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact-info{display:grid;gap:1.25rem;align-content:start}
.contact-info .ci{display:flex;gap:.9rem}
.contact-info .ci b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.15rem}
.contact-info .ci-icon{width:42px;height:42px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;flex:none}
.map{border-radius:var(--radius);overflow:hidden;background:var(--surface-2);min-height:230px;display:grid;place-items:center;color:var(--muted);font-size:.9rem;text-align:center;padding:1rem}
.map iframe{width:100%;height:100%;min-height:280px;border:0}
.form{display:grid;gap:.9rem;background:var(--surface);padding:1.9rem;border-radius:var(--radius);border:1px solid var(--border)}
.form--plain{background:transparent;border:0;padding:0}
.form label{display:grid;gap:.35rem;font-size:.88rem;font-weight:600}
.form input,.form textarea,.form select{font:inherit;padding:.75rem .95rem;border:1px solid var(--border);border-radius:calc(var(--radius) * .6);background:var(--bg);color:var(--text);width:100%}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid color-mix(in srgb,var(--primary) 40%,transparent);border-color:var(--primary)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.form-msg{font-size:.9rem;padding:.75rem 1rem;border-radius:8px;display:none}
.form-msg.ok{display:block;background:#e8f7ee;color:#166534}
.form-msg.err{display:block;background:#fdecec;color:#991b1b}
.section--dark .form,.booking-dark .form{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.section--dark .form input,.section--dark .form textarea,.section--dark .form select,.booking-dark .form input,.booking-dark .form textarea,.booking-dark .form select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.booking-dark .form select option{color:#111}
.booking-dark{background:var(--dark);color:#fff}
.booking-dark .booking-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center}
.booking-dark .booking-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px var(--radius) var(--radius)}
.shape-rounded .booking-dark img,.shape-sharp .booking-dark img{border-radius:var(--radius)}
.directions{text-align:center;max-width:720px;margin-inline:auto}
.directions h2{font-size:clamp(1.85rem,3.3vw,2.85rem)}
.directions .addr{font-size:1.1rem;margin:.5rem 0 1.5rem}
.directions .map{margin-top:2rem;text-align:left}
@media (max-width:820px){.contact{grid-template-columns:1fr}.form .row{grid-template-columns:1fr}.booking-dark .booking-grid{grid-template-columns:1fr}.booking-dark .booking-grid img{aspect-ratio:4/3;max-height:320px}}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.logos span{padding:.8rem 1.4rem;border:1px solid var(--border);border-radius:10px;font-weight:700;letter-spacing:.06em;color:var(--muted);background:var(--surface);font-family:var(--font-heading);font-size:1.05rem}
.section--dark .logos span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
.footer{padding:4rem 0 2rem;background:var(--footer-bg,var(--dark));color:var(--footer-ink,#fff);font-size:.92rem}
.footer a{opacity:.8}.footer a:hover{opacity:1}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:2.5rem;margin-bottom:2.5rem}
.footer h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:1rem;color:var(--accent)}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.footer .brand{margin-bottom:.75rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.25rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;opacity:.7}
.footer--light{background:var(--surface);color:var(--text);border-top:1px solid var(--border)}
.footer--light .footer-bottom{border-top-color:var(--border)}
.footer--simple{text-align:center}
.footer--simple .footer-grid{display:block}
.footer--simple .footer-links{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin:1rem 0 2rem}
.footer--primary{background:var(--primary);color:var(--primary-ink)}
.footer--primary h4{color:inherit;opacity:.8}
.socials{display:flex;gap:.6rem;margin-top:1rem}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:.75rem;font-weight:700}
.footer--light .socials a{background:var(--surface-2)}
.footer-top{border-top:4px solid var(--accent)}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ===== PAGE HEADER / DETAIL / CART / BOOKING / POSTS ===== */
.page-header{padding:4.5rem 0 3rem;background:var(--surface-2)}
.page-header h1{margin-bottom:.35rem;font-size:clamp(2rem,4vw,3.2rem)}
.page-header--dark{background:var(--dark);color:#fff}
.page-header--primary{background:var(--primary);color:var(--primary-ink)}
.page-header--image{position:relative;color:#fff;min-height:340px;display:flex;align-items:end;padding-bottom:2.5rem}
.page-header--image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-header--image::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.2))}
.page-header--image .container{position:relative;z-index:1}
.crumbs{font-size:.82rem;opacity:.7;margin-bottom:.75rem}
.detail{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:start}
.detail-media img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover}
.detail-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:.6rem}
.detail-thumbs img{aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;opacity:.75}
.detail-thumbs img:hover{opacity:1}
.detail-info .price{font-size:1.7rem;display:block;margin:.5rem 0 1rem}
.detail-info .desc{color:var(--muted);margin-bottom:1.5rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius)}
.qty button{background:none;border:0;width:36px;height:40px;font-size:1.1rem;cursor:pointer;color:inherit}
.qty input{width:48px;text-align:center;border:0;background:transparent;font:inherit;color:inherit}
.buy-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-bottom:1.5rem}
@media (max-width:820px){.detail{grid-template-columns:1fr}}
.cart-table{width:100%;border-collapse:collapse}
.cart-table td,.cart-table th{padding:.9rem .5rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.cart-table img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.cart-summary{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.cart-summary .line{display:flex;justify-content:space-between;padding:.35rem 0}
.cart-summary .total{font-weight:700;font-size:1.2rem;border-top:1px solid var(--border);margin-top:.5rem;padding-top:.75rem}
.cart-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;align-items:start}
@media (max-width:820px){.cart-layout{grid-template-columns:1fr}}
.empty{padding:3rem;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius)}
.radio-cards{display:grid;gap:.6rem}
.radio-cards label{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem 1rem;border:1px solid var(--border);border-radius:calc(var(--radius) * .6);cursor:pointer;font-weight:500}
.radio-cards label small{display:block;color:var(--muted);font-weight:400}
.radio-cards input{width:auto;margin-top:.3rem}
.notice{background:#fff8e6;color:#7a4b00;border:1px solid #f5d38a;border-radius:8px;padding:.75rem 1rem;font-size:.88rem;margin-bottom:1rem}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.post-date{font-size:.76rem;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.post-body{max-width:760px;margin-inline:auto;font-size:1.05rem}
.post-body p{margin-bottom:1.2em}
@media (max-width:820px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.posts{grid-template-columns:1fr}}
.itinerary{position:relative;max-width:800px;margin-inline:auto;padding-left:2rem}
.itinerary::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:var(--border)}
.itinerary .day{position:relative;padding:0 0 1.75rem 1.25rem}
.itinerary .day::before{content:"";position:absolute;left:-2rem;top:.35rem;width:20px;height:20px;border-radius:50%;background:var(--accent);border:4px solid var(--bg)}
.itinerary .day b{display:block;font-family:var(--font-heading);font-size:1.15rem}
.itinerary .day span{color:var(--muted);font-size:.95rem}
.qr-menu{text-align:center;max-width:420px;margin-inline:auto}
.qr-menu img{margin:1rem auto;width:240px;border:1px solid var(--border);border-radius:12px;padding:8px;background:#fff}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(20px);background:var(--dark);color:#fff;padding:.75rem 1.25rem;border-radius:999px;font-size:.9rem;opacity:0;pointer-events:none;transition:.25s;z-index:100;white-space:nowrap;max-width:calc(100% - 2rem)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* liên hệ nổi + thanh mobile */
.site-contact{position:fixed;right:14px;bottom:5.5rem;z-index:60;display:flex;flex-direction:column;gap:.55rem}
.site-contact a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--surface);color:var(--text);box-shadow:0 12px 24px -12px rgba(0,0,0,.5);font-size:1.15rem;border:1px solid var(--border);line-height:1;transition:.2s}
.site-contact a small{font-size:.55rem;font-weight:700;margin-top:2px;letter-spacing:.02em}
.site-contact a:hover{transform:translateY(-3px)}
.site-contact a.call{background:#16a34a;color:#fff;border-color:#16a34a}
.site-contact a.book{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
@media (max-width:760px){
  .site-contact{display:none}
  body{padding-bottom:4.5rem}
}
.demo-banner{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#111827;color:#fff;font-size:.72rem;text-align:center;padding:.3rem .75rem;opacity:.9}
body.has-demo-banner{padding-bottom:1.6rem}
@media (max-width:760px){body.has-demo-banner{padding-bottom:6rem}}
.hours-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center}
.hours-grid .hb{padding:1.6rem;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border)}
.hours-grid .hb b{display:block;font-family:var(--font-heading);font-size:1.15rem;margin-bottom:.35rem}
@media (max-width:760px){.hours-grid{grid-template-columns:1fr}}
.split-list{display:grid;grid-template-columns:1fr 1fr;gap:2rem 3rem}
@media (max-width:760px){.split-list{grid-template-columns:1fr}}
.newsletter{display:flex;gap:.6rem;max-width:520px;margin-inline:auto}
.newsletter input{flex:1;font:inherit;padding:.8rem 1rem;border-radius:999px;border:1px solid var(--border)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* UI refinement 2026-09: shared quality layer, preserve each template's art direction. */
:root{--demo-height:28px;--mobile-height:0px}
.site-skip{position:fixed;top:-80px;left:16px;z-index:200;background:var(--surface);color:var(--text);padding:12px 18px;border:2px solid var(--primary);border-radius:6px}.site-skip:focus{top:10px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.ui-icon{width:21px;height:21px;display:inline-block;vertical-align:middle}.cart-btn{display:inline-flex;align-items:center;gap:5px}
.nav-inner{min-height:78px}.nav-links a{font-size:.86rem;letter-spacing:.01em}.nav-actions{gap:.85rem}.btn{min-height:44px;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}.btn-primary{box-shadow:0 5px 16px -10px var(--primary)}.btn:hover{transform:translateY(-1px)}
.hero-text .lead{line-height:1.8;max-width:50ch}.hero-text h1{letter-spacing:-.025em;line-height:1.12}.hero-inner{gap:clamp(2rem,5vw,5rem)}.hero .chips{gap:.4rem}.hero .chip{font-size:.73rem;font-weight:500;padding:.35rem .65rem}.hero-note{opacity:.8}.hero-float{box-shadow:0 12px 35px -20px #0005}.hero-leaf{opacity:.35}.sparkle{opacity:.45}.section-head .lead{line-height:1.8}.section--pattern::before{opacity:.28}.cards--soft .card{box-shadow:0 5px 24px -18px #0003}.card .card-body{padding:1.5rem}.card h3{line-height:1.35}.card p{line-height:1.75}.footer p,.footer li{line-height:1.9}.footer-bottom{line-height:1.8}.form input,.form select,.form textarea{min-height:46px}.form-msg{line-height:1.7}.demo-banner{padding:.4rem 1rem;font-size:.7rem;line-height:1.6}body.has-demo-banner{padding-bottom:var(--demo-height)}.site-contact{bottom:calc(var(--demo-height) + 24px)}.site-contact a{width:48px;height:48px;box-shadow:0 5px 22px #0002}.site-contact a small{font-size:.6rem}.site-contact a:not(.call):not(.book){display:none}
.motion-toggle{position:absolute;right:14px;bottom:14px;z-index:5;padding:8px 12px;border:1px solid #fff7;border-radius:6px;background:#152b32d9;color:#fff;font-size:11px;min-height:36px;cursor:pointer}.hero-arch .motion-toggle{bottom:54px;right:22px}.hero--slider .motion-toggle{bottom:20px}.toast{bottom:calc(var(--demo-height) + var(--mobile-height) + 20px)}
@media(max-width:900px){.nav-inner{min-height:65px}.nav-toggle{min-width:44px;min-height:44px}.hero-inner{gap:1.8rem}.hero--split .hero-inner,.hero--editorial .hero-inner,.hero--collage .hero-inner,.hero--arch .hero-inner{padding-block:2rem}.hero-text h1{font-size:clamp(2rem,6.8vw,3rem);margin-bottom:.85rem}.hero-text .lead{font-size:1rem;line-height:1.7}.hero-actions{gap:.55rem;margin-top:1.2rem}.hero-note{margin-top:1.25rem}.hero .chips{margin-top:.8rem}.hero-arch{aspect-ratio:5/4;max-height:450px}.hero--fullbleed .hero-inner{padding-block:5rem 3rem}.hero-float{padding:.65rem .85rem;font-size:.72rem}.hero-float b{font-size:1rem}}
@media(max-width:760px){:root{--mobile-height:68px;--demo-height:0px}.demo-banner{display:none!important}.container{width:calc(100% - 2.5rem)}body.has-demo-banner,body.no-demo-banner{padding-bottom:calc(var(--demo-height) + var(--mobile-height))}body.no-demo-banner{--demo-height:0px}.mobile-bar,body.no-demo-banner .mobile-bar{bottom:var(--demo-height);padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -5px 24px #00000008;gap:10px}.mobile-bar .btn{min-height:46px;font-size:.85rem;padding:.65rem .6rem}.section{padding-block:3.5rem}.section-head{margin-bottom:1.8rem}.section-head h2{font-size:clamp(1.7rem,6vw,2.2rem)}.hero--arch .hero-text .hero-note{display:none}.hero--arch .hero-text .chips{display:none}.hero-text h1{max-width:14ch}.hero--centered .hero-text h1,.hero--fullbleed.hero--center .hero-text h1{margin-inline:auto}.hero .eyebrow{font-size:.65rem;letter-spacing:.1em}.hero--split .hero-media,.hero--editorial .hero-media{aspect-ratio:5/4}.hero--arch .hero-arch{aspect-ratio:5/4;border-radius:160px 160px var(--radius) var(--radius)}.hero--slider .slide .container{padding-block:3rem 5rem}.hero--slider .motion-toggle{right:12px;bottom:74px}.footer-grid{gap:2rem}.footer{padding-top:3rem}.demo-banner{font-size:.65rem}.form input,.form select,.form textarea{font-size:16px}.hero .btn{font-size:.83rem}.hero-text .lead{font-size:.94rem}.hero-leaf,.sparkle{display:none}.brand{max-width:70%;overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-scroll{display:none}[data-reveal]{opacity:1!important;transform:none!important}}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stats .stat{min-width:0;overflow-wrap:anywhere}.stats--inline{display:flex}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.stats--tiles .stat{padding:1rem}.stats b{font-size:clamp(1.6rem,7vw,2.6rem)}}
@media(max-width:900px){.hero--arch{padding-block:0 1rem}}
@media(max-width:760px){.hero--arch .hero-thumbs{margin-top:1rem;gap:0}.hero--arch .hero-thumbs img{display:none}.hero--arch .hero-thumbs .link-more{font-size:.75rem}.hero--arch .hero-inner{gap:1.25rem}}

/* Template identities: scalable vector emblem + editable wordmark. */
.brand{gap:.65rem;min-width:0;flex-shrink:1}.brand-logo{width:48px;height:52px;flex:0 0 48px;display:inline-flex;align-items:center;justify-content:center;line-height:1;color:inherit}.brand-logo svg{display:block;width:100%;height:100%;color:inherit;overflow:visible}.brand-logo--designed{color:var(--primary)}.brand-logo--custom{width:auto;max-width:104px;flex-basis:auto}.brand-logo--custom img{height:auto;max-height:48px;max-width:104px;width:auto;object-fit:contain}.brand-lockup{display:flex;flex-direction:column;gap:5px;min-width:0;line-height:1.1}.brand-name{font-family:var(--font-heading);font-size:1.23rem;font-weight:650;letter-spacing:-.02em;overflow-wrap:normal}.brand-descriptor{font-family:var(--font-body),sans-serif;font-size:8px;line-height:1.2;font-weight:500;letter-spacing:.2em;white-space:nowrap;opacity:.72}.brand-lockup--luxury .brand-name,.brand-lockup--editorial .brand-name{font-weight:600;letter-spacing:.01em}.brand-lockup--luxury .brand-descriptor{letter-spacing:.24em}.brand-lockup--modern .brand-name{font-weight:700;letter-spacing:-.025em}.brand-lockup--playful .brand-name{font-weight:750;letter-spacing:-.035em}.nav--stacked .brand-logo{width:56px;height:60px;flex-basis:56px}.nav--stacked .brand-name{font-size:1.65rem}.nav--dark .brand-logo--designed,.nav--transparent .brand-logo--designed,.nav--primary .brand-logo--designed,.footer .brand-logo--designed{color:inherit}.footer .brand-logo{width:52px;height:56px;flex-basis:52px}.footer .brand-name{font-size:1.3rem}.footer .brand-lockup{gap:7px}.footer .brand-descriptor{font-size:8px;opacity:.7}.footer .brand{max-width:none}
@media(min-width:901px) and (max-width:1200px){.nav-inner{gap:1rem}.nav-links{gap:1rem}.nav .brand-name{font-size:1.12rem}.nav .brand-logo{width:42px;flex-basis:42px}.nav .brand-descriptor{font-size:7px;letter-spacing:.16em}}
@media(max-width:900px){.nav .brand{gap:.5rem;max-width:calc(100% - 112px)}.nav .brand-logo{width:40px;height:46px;flex-basis:40px}.nav .brand-logo--custom{width:auto;max-width:80px;flex-basis:auto}.nav .brand-logo--custom img{max-width:80px;max-height:42px}.nav .brand-name{font-size:1.13rem;line-height:1.15}.nav .brand-descriptor{font-size:6.8px;letter-spacing:.13em;white-space:normal;line-height:1.3}.nav .brand-lockup{gap:4px}.nav .brand-logo--designed{color:inherit}.nav .brand-name{overflow-wrap:anywhere}.nav--stacked .brand-name{font-size:1.13rem}.nav--stacked .brand-logo{width:40px;height:46px;flex-basis:40px}}
@media(max-width:360px){.nav .brand{gap:.35rem;max-width:calc(100% - 102px)}.nav .brand-logo{width:34px;flex-basis:34px}.nav .brand-name{font-size:1rem}.nav .brand-descriptor{font-size:6px;letter-spacing:.1em}.nav-actions{gap:.3rem}.cart-btn{padding:.4rem .6rem}}
@media(max-width:360px){.items--list .item-row{grid-template-columns:80px minmax(0,1fr);gap:.8rem}.items--list .item-row>div{min-width:0}.items--list .item-row img{width:80px;height:68px}.items--list .item-row .price{white-space:normal;overflow-wrap:anywhere}.items--list .item-row .price-old{display:inline-block}}

/* Trang đặt web: làm nổi khối khi bấm "Xem trên web" ở topping */
.wt-flash{outline:3px solid #5a4ff3;outline-offset:-3px;animation:wtFlash 1.3s ease-in-out 2;position:relative;z-index:2}@keyframes wtFlash{0%,100%{outline-color:rgba(90,79,243,.95)}50%{outline-color:rgba(90,79,243,.2)}}

/* ===== v3 (10/2026): lớp giao diện hiện đại — chữ lớn, nhịp rộng, icon nét, section mới (bento, statement, story, rail, hero frame) ===== */
:root{--section-pad:clamp(4.5rem,8.5vw,7.5rem)}
body{font-size:17px}
h1{font-size:clamp(2.6rem,5.8vw,5.25rem);line-height:1.08}
h2{font-size:clamp(1.85rem,3.1vw,2.75rem);line-height:1.15;letter-spacing:-.015em}
.hero-text h1{letter-spacing:-.025em;line-height:1.08}
.container{width:min(var(--container,1240px),100% - 2.5rem)}
.section-head{max-width:760px;margin-bottom:clamp(2.5rem,4vw,3.75rem)}
.section-head .lead{font-size:1.12rem}
.section-head--split{max-width:none;display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem 3.5rem;align-items:end}
.section-head--split h2{margin:0}
.section-head--split .lead{margin-bottom:1rem}
@media (max-width:820px){.section-head--split{grid-template-columns:1fr}}
.nav{transition:box-shadow .3s,background .3s}
.nav.is-scrolled{box-shadow:0 12px 30px -22px rgba(0,0,0,.45)}
.btn{padding:.95rem 1.7rem}
.btn-sm{padding:.6rem 1.15rem}
.btn-xs{padding:.4rem .85rem;min-height:36px}
.card-body h3,.feature h3,.price-card h3{letter-spacing:-.01em}
.cta-band{padding:clamp(2.5rem,5vw,4.5rem)}
.page-header{padding:clamp(5rem,9vw,7.5rem) 0 clamp(3rem,5vw,4.5rem)}
.disclaimer{font-size:.74rem;opacity:.72;display:flex;align-items:center;justify-content:center;gap:.45rem;flex-wrap:wrap}
.disclaimer::before{content:"i";flex:none;width:15px;height:15px;border-radius:50%;border:1px solid currentColor;font:600 10px/13px Georgia,serif;text-align:center;font-style:italic}
/* icon nét thay emoji */
.ui-icon{width:1em;height:1em;flex:none}
.feature-icon .ui-icon{width:26px;height:26px}
.features--columns .feature-icon{color:var(--accent)}
.features--columns .feature-icon .ui-icon{width:40px;height:40px;stroke-width:1.3}
.features--bar .feature-icon .ui-icon{width:28px;height:28px}
.icon-text{font-family:var(--font-heading);font-weight:700;font-size:.95em;line-height:1}
.stats--tiles .stat i{color:var(--accent)}
.stats--tiles .stat i .ui-icon{width:20px;height:20px}
/* nút dừng trình chiếu: icon tròn */
.motion-toggle{width:38px!important;height:38px!important;min-height:0!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;background:rgba(0,0,0,.42)!important;border:1px solid rgba(255,255,255,.4)!important;backdrop-filter:blur(6px);color:#fff;opacity:.85;transition:opacity .2s}
.motion-toggle:hover,.motion-toggle:focus-visible{opacity:1}
/* footer: chữ thương hiệu cỡ lớn */
.footer-word{font-family:var(--font-heading);font-weight:var(--heading-weight,700);font-size:min(15rem,calc((min(100vw,var(--container,1240px)) - 2.5rem) / (var(--fw-chars) * .56)));line-height:1.2;padding:.16em 0 .12em;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:clip;opacity:.13;margin:0 0 .6rem;user-select:none;pointer-events:none}
.footer--light .footer-word{opacity:.09}

/* ===== Bento ===== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(210px,21vw,290px);gap:clamp(.75rem,1.4vw,1.1rem)}
.bento-tile{position:relative;border-radius:calc(var(--radius) + 8px);overflow:hidden;background:var(--surface);isolation:isolate}
.shape-sharp .bento-tile{border-radius:var(--radius)}
.bento-a{grid-column:1/3;grid-row:1/3}.bento-b{grid-column:3;grid-row:1}.bento-c{grid-column:4;grid-row:1}.bento-d{grid-column:3;grid-row:2}.bento-e{grid-column:4;grid-row:2}
.bento-e.bento-wide{grid-column:3/5}
.bento-img{display:block;color:#fff}
.bento-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.bento-img:hover img{transform:scale(1.05)}
.bento-img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.74))}
.bento-cap{position:absolute;left:0;right:0;bottom:0;padding:1.2rem 1.3rem;display:grid;gap:.2rem}
.bento-cap small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.82;font-weight:600}
.bento-cap b{font-family:var(--font-heading);font-size:1.22rem;line-height:1.2;font-weight:var(--heading-weight,700)}
.bento-a .bento-cap{padding:clamp(1.4rem,2.5vw,2.2rem)}
.bento-a .bento-cap b{font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.015em}
.bento-desc{font-size:.95rem;opacity:.86;max-width:40ch}
.bento-cap em{font-style:normal;justify-self:start;margin-top:.5rem;font-size:.8rem;font-weight:700;padding:.32rem .75rem;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(8px)}
.bento-go{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#111;font-size:1rem;opacity:0;transform:scale(.8);transition:.3s}
.bento-img:hover .bento-go,.bento-img:focus-visible .bento-go{opacity:1;transform:none}
.bento-note{padding:clamp(1.25rem,2vw,1.75rem);display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.bento-note--accent{background:color-mix(in srgb,var(--accent) 17%,var(--surface))}
.bento-note--dark{background:var(--dark);color:#fff}
.bento-note h3{font-size:1.18rem;margin-bottom:.35rem}
.bento-note p{font-size:.92rem;margin:0;opacity:.8}
.bento-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--surface);color:var(--primary);flex:none}
.bento-note--dark .bento-ic{background:rgba(255,255,255,.1);color:var(--accent)}
.bento-ic .ui-icon{width:24px;height:24px}
.section--alt .bento-note--accent{background:var(--surface)}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(200px,auto)}.bento-tile{grid-column:auto!important;grid-row:auto!important}.bento-a{grid-column:1/-1!important;aspect-ratio:4/3}.bento-img:not(.bento-a){aspect-ratio:1}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.bento-tile{grid-column:1/-1!important}.bento-a,.bento-img:not(.bento-a){aspect-ratio:4/3}.bento-note{min-height:0}}

/* ===== Statement ===== */
.statement .container{max-width:1120px;text-align:center}
.statement-text{font-family:var(--font-heading);font-weight:var(--heading-weight,600);font-size:clamp(1.8rem,4.2vw,3.7rem);line-height:1.24;letter-spacing:-.02em;margin:0 auto;text-wrap:balance}
.statement-pill{display:inline-block;vertical-align:middle;width:clamp(70px,9vw,132px);height:clamp(40px,5vw,70px);border-radius:999px;overflow:hidden;margin:0 .05em;transform:translateY(-.06em);box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.statement-pill img{width:100%;height:100%;object-fit:cover}
.statement-foot{display:flex;justify-content:center;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;margin-top:clamp(2.5rem,5vw,4rem);padding-top:2rem;border-top:1px solid var(--border)}
.statement-stat{display:flex;flex-direction:column;align-items:center}
.statement-stat b{font-family:var(--font-heading);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:var(--primary)}
.statement-stat span{font-size:.85rem;color:var(--muted);margin-top:.4rem}
.section--dark .statement-stat b{color:var(--accent)}.section--dark .statement-stat span{color:inherit;opacity:.7}.section--dark .statement-foot{border-color:rgba(255,255,255,.14)}

/* ===== Story (ghim ảnh khi cuộn) ===== */
.story-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.story--reverse .story-media{order:2}
.story-sticky{position:sticky;top:calc(var(--nav-h,76px) + 1.5rem)}
.story-img{width:100%;aspect-ratio:4/5;max-height:78vh;object-fit:cover;border-radius:calc(var(--radius) + 8px)}
.shape-arch .story-img{border-radius:999px 999px var(--radius) var(--radius)}
.shape-sharp .story-img{border-radius:var(--radius)}
.story-badge{position:absolute;left:1.25rem;bottom:1.25rem;max-width:72%;background:var(--surface);color:var(--text);border-radius:var(--radius);padding:.9rem 1.15rem;box-shadow:0 20px 40px -20px rgba(0,0,0,.45);display:flex;flex-direction:column}
.story-badge b{font-family:var(--font-heading);font-size:1.9rem;line-height:1;color:var(--primary)}
.story-badge span{font-size:.82rem;color:var(--muted);margin-top:.3rem}
.story-steps{list-style:none;padding:0;margin:0 0 2.5rem}
.story-steps li{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding:1.75rem 0;border-top:1px solid var(--border)}
.story-steps li:last-child{border-bottom:1px solid var(--border)}
.story-n{font-family:var(--font-heading);font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;color:var(--accent);min-width:2.2ch}
.story-steps h3{font-size:1.28rem;margin-bottom:.35rem}
.story-steps p{margin:0;color:var(--muted)}
.section--dark .story-steps li{border-color:rgba(255,255,255,.12)}.section--dark .story-steps p{color:inherit;opacity:.75}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}.story-sticky{position:relative;top:0}.story-img{aspect-ratio:4/3}.story--reverse .story-media{order:0}}

/* ===== Gallery rail (cuộn ngang) ===== */
.gallery-rail-sec{overflow:hidden}
.rail-nav{display:flex;gap:.6rem;justify-self:end}
.rail-nav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.1rem;cursor:pointer;transition:.2s}
.rail-nav button:hover{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.section--dark .rail-nav button{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.gallery--rail{--rail-pad:max(1.25rem,calc((100% - var(--container,1240px)) / 2));display:flex;gap:clamp(.75rem,1.4vw,1.15rem);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--rail-pad);scroll-padding-inline:var(--rail-pad)}
.gallery--rail::-webkit-scrollbar{display:none}
.gallery--rail figure{flex:0 0 clamp(250px,28vw,400px);scroll-snap-align:start;border-radius:calc(var(--radius) + 6px)}
.gallery--rail figure:nth-child(3n+2){flex-basis:clamp(300px,40vw,560px)}
.gallery--rail img{height:clamp(330px,38vw,540px);width:100%}
.gallery--rail figcaption{opacity:1;padding:2.5rem 1.1rem .95rem;font-size:.92rem;display:flex;gap:.6rem;align-items:baseline}
.gallery--rail figcaption span{font-size:.7rem;opacity:.75;letter-spacing:.12em}
@media (max-width:760px){.rail-nav{display:none}.gallery--rail figure,.gallery--rail figure:nth-child(3n+2){flex-basis:78%}.gallery--rail img{height:min(110vw,460px)}}

/* ===== Ticker chữ lớn ===== */
.ticker--big{padding:1.1rem 0;border:0;background:transparent}
.ticker--big .ticker-track{font-size:clamp(2.4rem,6.5vw,5.6rem);letter-spacing:-.015em;text-transform:none;font-weight:var(--heading-weight,700);gap:2.25rem;animation-duration:60s}
.ticker--big .ticker-track span{line-height:1.2}
.ticker--big .ticker-track span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--text) 55%,transparent)}
.ticker--big .ticker-track span::after{margin-left:2.25rem;font-size:.42em;vertical-align:middle;-webkit-text-stroke:0;color:var(--accent)}
.ticker--big.ticker--dark,.ticker--big.ticker--primary{padding:1.6rem 0}
.ticker--big.ticker--dark .ticker-track span:nth-child(even){-webkit-text-stroke-color:rgba(255,255,255,.6)}

/* ===== Hero frame (khung bo góc, chữ lớn góc dưới) ===== */
.hero--frame{padding:clamp(.5rem,1.1vw,1rem) clamp(.5rem,1.1vw,1rem) 0}
.hero-frame{position:relative;min-height:min(88vh,860px);border-radius:clamp(18px,2.2vw,32px);overflow:hidden;display:flex;align-items:flex-end;color:#fff;isolation:isolate;background:var(--dark)}
.shape-sharp .hero-frame{border-radius:var(--radius)}
.hero-frame .hero-bg{position:absolute;inset:0;z-index:-1}
.hero-frame .hero-bg img{width:100%;height:100%;object-fit:cover;border-radius:0}
.hero-frame .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.08) 28%,rgba(0,0,0,.22) 52%,rgba(0,0,0,.78))}
@media (prefers-reduced-motion:no-preference){body:not(.no-reveal) .hero-frame .hero-bg img{animation:wtFrameZoom 16s cubic-bezier(.2,.7,.2,1) both}}
@keyframes wtFrameZoom{from{transform:scale(1.08)}to{transform:none}}
.hero-frame-in{width:min(var(--container,1240px),100% - 2.5rem);margin-inline:auto;padding:clamp(7rem,14vh,10rem) 0 clamp(1.5rem,4vw,3rem);display:grid;grid-template-columns:1.45fr 1fr;gap:2rem 3rem;align-items:end}
.hero-frame-in:has(.hero-bar){grid-template-columns:1fr}
.hero--frame .hero-text{max-width:860px}
.hero--frame .hero-text h1{color:#fff;font-size:clamp(2.6rem,6.2vw,5.8rem)}
.hero--frame .lead{color:rgba(255,255,255,.9)}
.hero--frame .eyebrow{color:#fff;opacity:.92}
.hero--frame .btn-outline{color:#fff;border-color:rgba(255,255,255,.6)}
.hero--frame .btn-outline:hover{background:rgba(255,255,255,.14)}
.hero--frame .chip{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.hero--frame .chip::before{color:#fff}
.hero--frame .hero-note{color:#fff}
.hero-glass{justify-self:end;display:grid;gap:.85rem;width:100%;max-width:340px;padding:1.2rem 1.35rem;border-radius:calc(var(--radius) + 6px);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.hero-glass small{display:block;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:.15rem}
.hero-glass b{font-weight:600;font-size:.96rem}
.hero-glass>div+div{padding-top:.85rem;border-top:1px solid rgba(255,255,255,.2)}
.hero-bar{display:grid;grid-template-columns:1.3fr 1fr .55fr auto;gap:.5rem;align-items:stretch;padding:.55rem;border-radius:calc(var(--radius) + 10px);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);max-width:1000px}
.hero-bar label{display:grid;gap:.15rem;padding:.55rem .95rem;border-radius:calc(var(--radius) + 2px);background:rgba(255,255,255,.94);color:var(--text);cursor:pointer}
.hero-bar label span{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero-bar input,.hero-bar select{border:0;background:transparent;font:inherit;font-size:.95rem;font-weight:600;color:var(--text);padding:0;width:100%;outline:0;min-height:26px}
.hero-bar .btn{min-height:60px;border-radius:calc(var(--radius) + 2px);padding-inline:1.6rem}
@media (max-width:900px){.hero-frame{min-height:auto}.hero-frame-in{grid-template-columns:1fr;padding-top:9rem}.hero-glass{justify-self:stretch;max-width:none;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.hero-glass>div+div{border-top:0;padding-top:0}.hero-bar{grid-template-columns:1fr 1fr}.hero-bar .btn{grid-column:1/-1;min-height:52px}}
@media (max-width:480px){.hero-bar{grid-template-columns:1fr}.hero-bar .hb-sm{display:none}}
@media (max-width:900px){.hero-frame .hero-bg::after{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.38) 45%,rgba(0,0,0,.78))}}
@media (max-width:560px){.hero--frame .hero-bar{display:none}.hero-frame-in{padding-top:6.5rem}}
/* ===== Affiliate: nút mua trên sàn, nhãn sàn, mã giảm giá ===== */
.btn-buy{color:#fff!important;border:0;white-space:nowrap;box-shadow:0 8px 18px -10px rgba(0,0,0,.35)}
.btn-buy--shopee{background:#ee4d2d}.btn-buy--shopee:hover{background:#d73211}
.btn-buy--lazada{background:linear-gradient(90deg,#0f146d,#f36d2a)}
.btn-buy--tiktok{background:#111}.btn-buy--tiktok:hover{background:#2a2a2a}
.btn-buy--tiki{background:#1a94ff}
.btn-buy--other{background:var(--primary)}
.pf-tag{position:absolute;left:.6rem;bottom:.6rem;font-size:.7rem;font-weight:800;letter-spacing:.02em;padding:.22rem .55rem;border-radius:6px;color:#fff;background:#333;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.pf-tag--shopee{background:#ee4d2d}.pf-tag--lazada{background:#0f146d}.pf-tag--tiktok{background:#111}.pf-tag--tiki{background:#1a94ff}
.card-media{position:relative}
.coupon{display:inline-flex;align-items:center;gap:.3rem;margin-left:.4rem;padding:.3rem .6rem;border:1.5px dashed var(--primary);border-radius:8px;background:color-mix(in srgb,var(--primary) 7%,transparent);color:var(--primary);font:inherit;font-size:.76rem;cursor:copy}
.coupon b{letter-spacing:.04em}.coupon.is-copied{border-style:solid;background:#16a34a;color:#fff;border-color:#16a34a}
.item-actions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.buy-row--aff{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0 .4rem}
/* items--table trên điện thoại: mỗi hàng thành thẻ (mẫu có thể ghi đè trong style.css); team 1–2 người: ảnh không phình to */
.team--few{max-width:720px;margin-inline:auto}.team--few .member img{max-width:280px;margin-inline:auto}
@media (max-width:760px){.table-wrap--items{overflow:visible}.items--table,.items--table tbody{display:block}.items--table thead{display:none}.items--table tbody tr{display:grid;grid-template-columns:72px minmax(0,1fr);gap:.35rem .9rem;padding:1rem 0;border-bottom:1px solid var(--border)}.items--table tbody tr:last-child{border-bottom:0}.items--table td{display:block;border:0;padding:0;min-width:0}.items--table td.td-img{grid-row:span 2;width:auto}.items--table img{width:72px;height:72px}.items--table td.td-name,.items--table td.td-specs{grid-column:2}.items--table .specs:empty{display:none}.items--table td.price{grid-column:1/-1;font-size:1.1rem;margin-top:.35rem}.items--table td.td-act{grid-column:1/-1}.items--table td.td-act:empty{display:none}.items--table td.td-act .btn{width:100%;min-height:44px}}

/* giam-doc 15/10: neo không bị header dính che */
section[id]{scroll-margin-top:80px}
/* Cụm liên hệ nổi (contact-dock.php): cột nút | gộp một nút (bấm mở, logo xoay vòng) | thanh sát đáy điện thoại. Nền trắng cố định để logo màu luôn rõ. */
.cdock{position:fixed;z-index:45;right:16px;bottom:calc(var(--demo-height,0px) + 22px);font-family:var(--font-body),system-ui,sans-serif}
.cdock--left{right:auto;left:16px}
.cdock-list{display:flex;flex-direction:column;gap:2px;padding:6px;max-height:calc(100dvh - var(--demo-height,0px) - 44px);overflow-y:auto;scrollbar-width:thin;background:#fff;border:1px solid #0000001c;border-radius:14px;box-shadow:0 16px 36px -20px #0007}
.cdock-item{width:62px;min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:10px;color:#1c1c1c;transition:background .2s,transform .2s}
.cdock-item:hover{background:#0000000a;transform:translateY(-1px)}
.cdock-item:focus-visible,.cdock-launcher:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.cdock-ic{width:34px;height:34px;display:block}
.cdock-ic svg,.cdock-face svg{width:100%;height:100%;display:block}
.cdock-item small{font-size:10.5px;line-height:13px;font-weight:600;white-space:nowrap;color:#1c1c1c;letter-spacing:0}
.cdock-launcher{display:none;position:relative;width:62px;height:62px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #0000001a,0 14px 30px -12px #0008;cursor:pointer}
.cdock-launcher::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--primary);opacity:0;animation:cdock-ring 2.4s ease-out infinite}
.cdock-face{position:absolute;inset:14px;opacity:0;transform:scale(.55) rotate(-25deg);transition:opacity .4s,transform .4s}
.cdock-face.is-on{opacity:1;transform:none}
.cdock-close{position:absolute;inset:0;display:grid;place-items:center;font-size:32px;line-height:1;color:#1c1c1c;opacity:0;transform:rotate(-90deg);transition:opacity .3s,transform .3s}
.cdock.is-open .cdock-face{opacity:0}
.cdock.is-open .cdock-close{opacity:1;transform:none}
.cdock.is-open .cdock-launcher::after{animation:none}
@keyframes cdock-ring{0%{opacity:.55;transform:scale(.92)}70%,100%{opacity:0;transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.cdock-launcher::after{animation:none}.cdock-face,.cdock-close,.cdock-list{transition:none!important}}
@media (min-width:761px){
  .cdock--d-hidden{display:none}
  .cdock--d-toggle .cdock-launcher{display:block}
  .cdock--d-toggle .cdock-list{max-height:calc(100dvh - var(--demo-height,0px) - 120px);position:absolute;right:0;bottom:calc(100% + 14px);opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transform-origin:bottom right;transition:opacity .25s,transform .25s,visibility .25s}
  .cdock--left.cdock--d-toggle .cdock-list{right:auto;left:0;transform-origin:bottom left}
  .cdock--d-toggle.is-open .cdock-list{opacity:1;visibility:visible;transform:none}
}
@media (max-width:760px){
  .cdock{right:10px;bottom:calc(var(--demo-height,0px) + 14px)}
  .cdock--left{right:auto;left:10px}
  .cdock--m-hidden{display:none}
  .cdock-item{width:54px;min-height:56px}
  .cdock-ic{width:30px;height:30px}
  .cdock-item small{font-size:10px}
  .cdock--m-toggle .cdock-launcher{display:block;width:56px;height:56px}
  .cdock--m-toggle .cdock-face{inset:12px}
  .cdock--m-toggle .cdock-list{position:absolute;right:0;bottom:calc(100% + 12px);opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transform-origin:bottom right;transition:opacity .25s,transform .25s,visibility .25s}
  .cdock--left.cdock--m-toggle .cdock-list{right:auto;left:0;transform-origin:bottom left}
  .cdock--m-toggle.is-open .cdock-list{opacity:1;visibility:visible;transform:none}
  .cdock--m-bar{left:0;right:0;bottom:var(--demo-height,0px)}
  .cdock--m-bar .cdock-list{max-height:none;overflow:visible;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding:4px 6px calc(4px + env(safe-area-inset-bottom));border:0;border-top:1px solid #0000001a;border-radius:0;box-shadow:0 -8px 24px -14px #0004}
  .cdock--m-bar .cdock-item{width:auto;min-height:60px}
  .cdock--m-bar .cdock-item:nth-child(n+6){display:none}
}
.socials a{width:40px;height:40px;padding:9px;background:#fff;box-shadow:0 0 0 1px #0000001a;transition:transform .2s}
.socials a:hover{transform:translateY(-2px)}
.socials a svg{width:100%;height:100%;display:block}
/* Popup đặt lịch nhanh (booking-popup.php, thẻ <dialog>): giữa màn hình trên máy tính, trượt lên từ đáy trên điện thoại. */
html.bpop-lock{overflow:hidden}
.bpop:not([open]){display:none}
.bpop{width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:calc(var(--radius) + 10px);background:var(--surface);color:var(--text);box-shadow:0 40px 90px -30px #000a;overflow:auto;overscroll-behavior:contain}
.bpop::backdrop{background:color-mix(in srgb,var(--dark) 58%,transparent);backdrop-filter:blur(4px)}
.bpop[open]{animation:bpop-in .28s ease}
@keyframes bpop-in{from{opacity:0;transform:translateY(16px) scale(.97)}}
.bpop-card{position:relative;padding:2rem 2rem 1.6rem}
.bpop-head{margin-bottom:1.2rem;padding-right:2.5rem}
.bpop-head h2{font-size:clamp(1.5rem,4vw,2rem);margin:.45rem 0}
.bpop-head p{color:var(--muted);margin:0;font-size:.95rem;line-height:1.65}
.bpop-close{position:absolute;top:.85rem;right:.85rem;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface-2);color:var(--text);font-size:26px;line-height:1;cursor:pointer;transition:background .2s}
.bpop-close:hover{background:var(--border)}
.bpop-close:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.bpop .bpop-form{padding:0;border:0;background:none;border-radius:0;box-shadow:none}
.bpop-submit{width:100%;margin-top:.35rem}
.bpop-alt{text-align:center;font-size:.88rem;color:var(--muted);margin:.85rem 0 0}
.bpop-alt a{color:var(--primary);font-weight:700}
@media (max-width:560px){
  .bpop{width:100%;max-width:100%;max-height:92dvh;margin:auto auto 0;border-radius:22px 22px 0 0}
  .bpop[open]{animation:bpop-up .3s ease}
  .bpop-card{padding:1.5rem 1.15rem calc(1.2rem + env(safe-area-inset-bottom))}
}
@keyframes bpop-up{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.bpop[open]{animation:none}}
/* Nút chuyển màu (style.buttons = gradient, đổi ở trang Giao diện): màu chính sang pha màu nhấn, rê chuột thì dải màu trượt. */
.btns-gradient .btn-primary{border-color:transparent;background-image:linear-gradient(115deg,var(--primary) 0%,color-mix(in oklch,color-mix(in oklch,var(--primary) 75%,var(--accent)) 82%,var(--primary-tone,#000)) 50%,var(--primary) 100%);background-size:200% 100%;background-position:0 0;transition:background-position .5s ease,transform .18s ease,box-shadow .18s ease}
.btns-gradient .btn-primary:hover{background-position:100% 0;filter:none}
.btns-gradient .btn-accent{border-color:transparent;background-image:linear-gradient(115deg,var(--accent),color-mix(in oklch,color-mix(in oklch,var(--accent) 75%,var(--primary)) 84%,var(--accent-tone,#000)))}
/* Nút lên đầu trang (chỉ máy tính): hiện khi đã cuộn xuống, vòng tròn chạy theo tiến độ cuộn; nằm phía đối diện cụm liên hệ. */
.totop{position:fixed;z-index:44;left:16px;bottom:calc(var(--demo-height,0px) + 22px);width:52px;height:52px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--text);box-shadow:0 0 0 1px #0000001a,0 12px 28px -14px #0007;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s,color .2s}
.totop--right{left:auto;right:16px}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{color:var(--primary);transform:translateY(-2px)}
.totop:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.totop svg{grid-area:1/1}
.totop-ring{width:52px;height:52px;transform:rotate(-90deg)}
.totop-ring circle{fill:none;stroke:var(--border);stroke-width:2.5}
.totop-ring .totop-bar{stroke:var(--primary);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.totop-arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.totop{display:none}}
/* Tiêu đề đầu trang: tên thương hiệu là dòng chính (cỡ vừa phải, không vỡ 2 chữ một dòng), slogan nhỏ hơn bên dưới. */
.hero h1.hero-title.hero-title{font-size:1rem;line-height:1;max-width:none;margin-bottom:1.1rem;letter-spacing:0}
.hero-brand{display:block;font-size:clamp(2.5rem,4.4vw,4rem);line-height:1.06;letter-spacing:-.02em;font-weight:calc(var(--heading-weight,700) + 100);text-wrap:balance}
.hero-headline{display:block;margin-top:.6rem;font-family:var(--font-body),system-ui,sans-serif;font-size:clamp(1.12rem,1.55vw,1.42rem);line-height:1.45;font-weight:600;letter-spacing:0;text-transform:none;opacity:.88;text-wrap:balance;max-width:34ch}
.hero--centered .hero-headline,.hero--center .hero-headline,.hero-text[style*="center"] .hero-headline{margin-inline:auto}
.hero--editorial .hero-brand{font-size:clamp(2.6rem,4.8vw,4.4rem)}
@media (max-width:760px){.hero-brand{font-size:clamp(2.1rem,9.2vw,2.75rem)}.hero-headline{font-size:1.06rem}}
/* Icon trong nút (gắn tự động ở layout.php theo ý nghĩa nút) */
.btn .btn-ic{width:1.15em;height:1.15em;flex:none;stroke-width:1.9}
.btn .btn-ic--trail{transition:transform .25s ease}
.btn:hover .btn-ic--trail{transform:translateX(3px)}
.btn-xs .btn-ic,.btn-sm .btn-ic--trail{display:none}
.btn-label{display:inline}
/* Icon nhận diện ngành ở dòng chữ nhỏ trên tiêu đề (thay chấm / gạch trang trí) */
.eyebrow.has-ic::before{display:none}
.eyebrow .ey-ic{width:1.35em;height:1.35em;flex:none;stroke-width:1.7}
/* Nhãn cạnh tên (Khách hay hỏi, Nổi bật…) thẳng hàng với chữ */
h3 .tag{vertical-align:middle;position:relative;top:-.12em;line-height:1.35;margin-left:.3rem}
/* Ảnh đại diện trong cảm nhận: logo website khi khách không có ảnh thật */
.quote .who .avatar{display:grid;color:inherit;font-size:inherit;font-weight:700}
.avatar--logo{width:48px;height:48px;background:#fff;color:var(--primary);box-shadow:0 0 0 1px var(--border),0 6px 16px -10px #0006;padding:8px;overflow:hidden}
.avatar--logo .brand-logo,.avatar--logo .brand-mark{width:100%;height:100%;flex-basis:auto;margin:0;display:grid;place-items:center;color:var(--primary)}
.avatar--logo svg,.avatar--logo img{width:100%;height:100%;object-fit:contain;display:block}
.avatar--logo:has(.brand-mark){padding:0}
.avatar--logo .brand-mark{font-size:1.15rem;line-height:1;background:var(--primary);color:var(--primary-ink);border-radius:50%}
/* Cảm nhận dạng trượt (không có ảnh): logo nằm trên tên, không đè lên chữ */
.slider--cards .quote .who{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center}
.slider--cards .quote .who .avatar{margin:0}
.avatar--photo{padding:0;overflow:hidden}.avatar--photo img{width:100%;height:100%;object-fit:cover}
.testimonials--single .quote::before{position:static;display:block;margin:0 auto -.6rem;font-size:3.6rem}
/* Menu xếp chồng: hàng trên [số điện thoại | thương hiệu | nút], hàng dưới là menu → không còn trống hai bên, thấp gọn hơn */
@media (min-width:901px){
  .nav--stacked .nav-inner{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"phone brand actions" "links links links";align-items:center;gap:.35rem 1rem;padding-block:.65rem .25rem}
  .nav--stacked .brand{grid-area:brand}
  .nav--stacked .nav-links{grid-area:links;justify-content:center;padding-top:.45rem;border-top:1px solid var(--border)}
  .nav--stacked .nav-actions{grid-area:actions;justify-self:end}
  .nav--stacked .nav-phone{grid-area:phone;justify-self:start;display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:600;color:var(--text)}
  .nav--stacked .nav-phone svg{width:18px;height:18px;color:var(--primary)}
  .nav--stacked .nav-actions .btn{display:inline-flex}
}
.nav-phone{display:none}
/* Cỡ nút toàn website (style.button_size, đổi ở trang Giao diện): Vừa là mặc định, gọn hơn bản cũ; nút nhỏ / rất nhỏ (btn-sm, btn-xs) giữ nguyên. */
.btnsize-md .btn:not(.btn-sm,.btn-xs){padding:.68rem 1.4rem}
.btnsize-sm .btn:not(.btn-sm,.btn-xs){padding:.5rem 1.1rem;font-size:.875rem;min-height:40px}
.btnsize-lg .btn:not(.btn-sm,.btn-xs){padding:.95rem 1.9rem;font-size:1rem}
.btnsize-lg .btn:not(.btn-sm,.btn-xs,.hero-bar .btn){min-height:52px}
@media (max-width:760px){.btnsize-sm .btn:not(.btn-sm,.btn-xs){min-height:42px}}
/* Cảm nhận kiểu "kèm ảnh": ảnh cắt vòm nên thẻ không có nền chữ nhật (tránh lộ 2 góc trắng phía trên ảnh); chỉ phần chữ có nền. */
.testimonials--photo .quote,.section--dark .testimonials--photo .quote,.section--primary .testimonials--photo .quote{background:transparent;box-shadow:none}
.testimonials--photo .quote-body{flex:1;background:var(--surface);border-radius:0 0 var(--radius) var(--radius)}
.section--dark .testimonials--photo .quote-body,.section--primary .testimonials--photo .quote-body{background:rgba(255,255,255,.08)}
.testimonials--photo .quote .avatar{position:relative;z-index:1;margin-bottom:-24px}
.testimonials--photo .quote-body{padding-top:1.9rem}
/* Ô nhập đang chọn: viền đổi màu chính + vòng sáng mờ ôm sát mép (thay viền cách 4px ra ngoài trông lệch).
   outline trong suốt giữ viền thấy được ở chế độ tương phản cao của Windows. */
input:focus-visible,select:focus-visible,textarea:focus-visible,.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid transparent;outline-offset:0;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
.section--dark input:focus-visible,.section--dark select:focus-visible,.section--dark textarea:focus-visible,.booking-dark .form input:focus,.booking-dark .form select:focus,.booking-dark .form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
/* Đầu trang kiểu tạp chí: ảnh không chạm đáy khối (khối kế tiếp như thanh chữ chạy trông như bị dính), bo đủ 4 góc. */
.hero--editorial .hero-inner{padding-block:3rem}
.hero--editorial .hero-media img{border-radius:var(--radius)}
/* Đầu trang có video: 2 cột trên máy tính, xếp chồng trên màn hình hẹp (trước đây cột chữ bị ép rất hẹp trên điện thoại). */
.hero-inner--video{grid-template-columns:1fr 1.2fr;padding-block:4rem}
@media (max-width:900px){.hero-inner--video{grid-template-columns:1fr;padding-block:2.5rem}}
/* Chỉ báo cuộn (con chuột) đè lên nút / số liệu trên điện thoại → ẩn. */
@media (max-width:760px){.hero-scroll{display:none}}
/* Menu trong suốt đè trên ảnh sáng: thêm lớp tối mờ phía trên để chữ menu luôn đọc được; dòng chữ nhỏ trên tiêu đề ảnh tràn dùng màu sáng. */
.nav--transparent:not(.nav--dark){background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.18) 75%,transparent)}
.nav--transparent:not(.nav--dark) .brand,.nav--transparent:not(.nav--dark) .nav-links a{text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero--fullbleed .eyebrow{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45)}
/* Logo dạng ảnh (mẫu chưa có logo vector, vẽ bằng Codex) */
.brand-logo--image img{display:block;width:100%;height:100%;object-fit:contain}
/* Khối liên hệ: icon nét theo màu chính, 2 cột cao bằng nhau (bản đồ giãn lấp phần còn lại), có hàng mạng xã hội */
.contact{align-items:stretch}
.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.contact-info .ci-list{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.6rem}
.contact-info .ci-list .ci:first-child{grid-column:1/-1}
.contact-info .ci-icon{background:color-mix(in srgb,var(--primary) 11%,var(--surface));color:var(--primary)}
.contact-info .ci-icon svg{width:21px;height:21px}
.contact-info .ci a,.contact-info .ci span{overflow-wrap:anywhere}
.ct-social{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem}
.ct-social b{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-right:.35rem}
.ct-social a{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px var(--border),0 6px 14px -10px #0006;transition:transform .2s}
.ct-social a:hover{transform:translateY(-2px)}
.ct-social svg{width:24px;height:24px;display:block}
.contact-info .map{flex:1 1 auto;min-height:240px}
.contact-info .map iframe{min-height:240px}
.map--ph{position:relative;padding:1.5rem;background:
  linear-gradient(118deg,transparent 47%,color-mix(in srgb,var(--primary) 22%,transparent) 47% 50.5%,transparent 50.5%),
  linear-gradient(28deg,transparent 62%,#ffffffb3 62% 64.5%,transparent 64.5%),
  linear-gradient(160deg,transparent 30%,#ffffff99 30% 32%,transparent 32%),
  repeating-linear-gradient(0deg,transparent 0 46px,#ffffff80 46px 48px),
  repeating-linear-gradient(90deg,transparent 0 62px,#ffffff80 62px 64px),
  color-mix(in srgb,var(--primary) 6%,var(--surface-2))}
.map-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem;max-width:300px;padding:2.1rem 1.4rem 1.2rem;background:var(--surface);border-radius:var(--radius);box-shadow:0 18px 40px -24px #0007;color:var(--text)}
.map-card b{font-family:var(--font-heading);font-size:1.05rem}
.map-card small{color:var(--muted);font-size:.85rem;line-height:1.45}
.map-card .btn{margin-top:.55rem}
.map-card em{font-style:normal;font-size:.72rem;color:var(--muted);margin-top:.4rem;opacity:.8}
.map-pin{position:absolute;top:-24px;left:50%;width:48px;height:48px;margin-left:-24px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;box-shadow:0 10px 22px -10px var(--primary)}
.map-pin svg{width:22px;height:22px;transform:rotate(45deg)}
@media (max-width:900px){.contact-info .map{flex:none}}
@media (max-width:520px){.contact-info .ci-list{grid-template-columns:1fr}}
.contact-info .ci-list .ci:last-child:nth-child(even){grid-column:1/-1}
.map--ph{padding-top:2.6rem}
/* Thanh tab danh mục: icon trước tên */
.items-tabs button{display:inline-flex;align-items:center;gap:.45rem;min-height:40px}
.items-tabs button svg{width:17px;height:17px;flex:none;color:var(--primary);transition:color .2s}
.items-tabs button.on svg{color:currentColor}
/* Cụm liên hệ nổi: 3 kiểu (Content::CONTACT_STYLES). card = thẻ trắng có chữ (mặc định, các luật .cdock ở trên);
   panel = cột dính mép màn hình, ô Đặt lịch nền màu chính (kiểu nhakhoa); bubble = bong bóng tròn lớn, viền màu từng kênh nhấp nháy. */
.cdock-item--map{--cd:#34a853}.cdock-item--facebook{--cd:#1877f2}.cdock-item--messenger{--cd:#a033ff}.cdock-item--phone{--cd:#16a34a}.cdock-item--zalo{--cd:#0068ff}
.cdock-item--booking{--cd:var(--primary)}.cdock-item--tiktok{--cd:#111}.cdock-item--youtube{--cd:#ff0000}.cdock-item--instagram{--cd:#e1306c}.cdock-item--email{--cd:#ea4335}
/* panel */
.cdock--s-panel .cdock-list{padding:0;gap:0;border-radius:16px;overflow:hidden auto}
.cdock--s-panel .cdock-item{width:70px;min-height:68px;border-radius:0;border-bottom:1px solid #0000000f}
.cdock--s-panel .cdock-item:last-child{border-bottom:0}
.cdock--s-panel .cdock-item:hover{transform:none;background:#0000000a}
.cdock--s-panel .cdock-item--booking{background:var(--primary);color:var(--primary-ink)}
.cdock--s-panel .cdock-item--booking:hover{background:color-mix(in srgb,var(--primary) 88%,#000)}
.cdock--s-panel .cdock-item--booking small{color:var(--primary-ink)}
.cdock--s-panel .cdock-item--booking .cdock-ic{background:#fff;border-radius:50%;padding:5px}
.cdock--s-panel .cdock-item small{font-size:10.5px}
@media (min-width:761px){
  .cdock--s-panel.cdock--d-float{right:0;bottom:calc(var(--demo-height,0px) + 14vh)}
  .cdock--s-panel.cdock--d-float.cdock--left{right:auto;left:0}
  .cdock--s-panel.cdock--d-float .cdock-list{border-radius:16px 0 0 16px;border-right:0}
  .cdock--s-panel.cdock--d-float.cdock--left .cdock-list{border-radius:0 16px 16px 0;border-right:1px solid #0000001c;border-left:0}
}
@media (max-width:760px){
  .cdock--s-panel.cdock--m-float{right:0}
  .cdock--s-panel.cdock--m-float.cdock--left{right:auto;left:0}
  .cdock--s-panel.cdock--m-float .cdock-list{border-radius:14px 0 0 14px;border-right:0}
  .cdock--s-panel.cdock--m-float.cdock--left .cdock-list{border-radius:0 14px 14px 0;border-right:1px solid #0000001c;border-left:0}
  .cdock--s-panel.cdock--m-float .cdock-item{width:58px;min-height:58px}
  .cdock--s-panel.cdock--m-bar .cdock-list{padding:0 0 env(safe-area-inset-bottom)}
  .cdock--s-panel.cdock--m-bar .cdock-item{border-bottom:0;border-right:1px solid #0000000f;min-height:62px}
  .cdock--s-panel.cdock--m-bar .cdock-item:last-child{border-right:0}
}
/* bubble */
.cdock--s-bubble .cdock-list{background:none;border:0;box-shadow:none;padding:8px;gap:14px;overflow:visible}
.cdock--s-bubble .cdock-item{position:relative;width:58px;height:58px;min-height:0;padding:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--cd),0 12px 26px -12px #000a}
.cdock--s-bubble .cdock-item:hover{background:#fff;transform:scale(1.07)}
.cdock--s-bubble .cdock-item::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--cd);opacity:0;animation:cdock-ring 2.6s ease-out infinite;pointer-events:none}
.cdock--s-bubble .cdock-item:nth-child(2)::after{animation-delay:.5s}.cdock--s-bubble .cdock-item:nth-child(3)::after{animation-delay:1s}
.cdock--s-bubble .cdock-item:nth-child(4)::after{animation-delay:1.5s}.cdock--s-bubble .cdock-item:nth-child(5)::after{animation-delay:2s}
.cdock--s-bubble .cdock-ic{width:34px;height:34px}
.cdock--s-bubble .cdock-item small{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);padding:.3rem .7rem;border-radius:999px;background:#111d;color:#fff;font-size:12px;line-height:1.3;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none}
.cdock--s-bubble.cdock--left .cdock-item small{right:auto;left:calc(100% + 12px);transform:translate(-6px,-50%)}
.cdock--s-bubble .cdock-item:hover small,.cdock--s-bubble .cdock-item:focus-visible small{opacity:1;visibility:visible;transform:translate(0,-50%)}
.cdock--s-bubble .cdock-launcher{box-shadow:0 0 0 3px var(--primary),0 14px 30px -12px #0008}
@media (prefers-reduced-motion:reduce){.cdock--s-bubble .cdock-item::after{animation:none}}
@media (max-width:760px){
  .cdock--s-bubble .cdock-item{width:52px;height:52px;min-height:0}
  .cdock--s-bubble .cdock-ic{width:30px;height:30px}
  .cdock--s-bubble.cdock--m-bar .cdock-list{background:#fff;padding:4px 6px calc(4px + env(safe-area-inset-bottom));gap:0;border-top:1px solid #0000001a;box-shadow:0 -8px 24px -14px #0004}
  .cdock--s-bubble.cdock--m-bar .cdock-item{width:auto;height:auto;min-height:60px;border-radius:10px;box-shadow:none}
  .cdock--s-bubble.cdock--m-bar .cdock-item::after{display:none}
  .cdock--s-bubble.cdock--m-bar .cdock-item small{position:static;transform:none;opacity:1;visibility:visible;background:none;color:#1c1c1c;padding:0;font-size:10px}
  .cdock--s-bubble.cdock--m-bar .cdock-ic{width:30px;height:30px}
}
/* Bộ ảnh không để lỗ trống khi số ảnh không chia đều cột.
   So le (masonry): gallery.php chia 3 cột, cột thấp giãn ảnh cho bằng đáy; điện thoại: lưới 2 cột, ảnh lẻ cuối trải rộng. */
.gallery--masonry{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:stretch}
.gm-col{display:flex;flex-direction:column;gap:1rem;min-width:0}
.gallery--masonry .gm-col figure{margin:0;flex:1 1 auto;min-height:150px}
.gallery--masonry .gm-0{aspect-ratio:3/4}.gallery--masonry .gm-1{aspect-ratio:1}.gallery--masonry .gm-2{aspect-ratio:4/3}
.gallery--masonry .gm-col figure img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
@media (max-width:760px){
  .gallery--masonry{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .gm-col{display:contents}
  .gallery--masonry .gm-col figure{aspect-ratio:1;min-height:0}
  .gallery--masonry .gm-col figure.gm-wide{grid-column:span 2;aspect-ratio:2/1}
}
/* Lưới vuông (grid): 6 rãnh, mỗi ảnh 2 rãnh; hàng cuối thiếu thì ảnh còn lại trải đều hết hàng (giữ cùng chiều cao hàng).
   Hàng Lược Barber (salon-04) có lưới riêng nên bỏ qua. */
body:not(.tpl-salon-04) .gallery--grid{grid-template-columns:repeat(6,minmax(0,1fr))}
body:not(.tpl-salon-04) .gallery--grid figure{grid-column:span 2}
@media (min-width:761px){
body:not(.tpl-salon-04) .gallery--grid figure:last-child:nth-child(3n+1){grid-column:span 6}
body:not(.tpl-salon-04) .gallery--grid figure:last-child:nth-child(3n+1) img{aspect-ratio:3/1}
body:not(.tpl-salon-04) .gallery--grid figure:last-child:nth-child(3n+2),body:not(.tpl-salon-04) .gallery--grid figure:nth-last-child(2):nth-child(3n+1){grid-column:span 3}
body:not(.tpl-salon-04) .gallery--grid figure:last-child:nth-child(3n+2) img,body:not(.tpl-salon-04) .gallery--grid figure:nth-last-child(2):nth-child(3n+1) img{aspect-ratio:3/2}
}
@media (max-width:760px){
  body:not(.tpl-salon-04) .gallery--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:not(.tpl-salon-04) .gallery--grid figure:nth-child(n){grid-column:auto}
  body:not(.tpl-salon-04) .gallery--grid figure:nth-child(n) img{aspect-ratio:1}
  body:not(.tpl-salon-04) .gallery--grid figure:last-child:nth-child(odd){grid-column:span 2}
  body:not(.tpl-salon-04) .gallery--grid figure:last-child:nth-child(odd) img{aspect-ratio:2/1}
}
/* Ghép ảnh (mosaic, 4 cột, ảnh 1 to 2×2, ảnh 4 cao 2 hàng): đổi khổ vài ảnh theo tổng số ảnh để lấp kín ô. */
@media (min-width:761px){
.gallery--mosaic figure:nth-child(4):last-child{grid-row:auto;grid-column:span 2}
.gallery--mosaic figure:nth-child(4):nth-last-child(2){grid-row:auto}
.gallery--mosaic figure:nth-child(5):nth-last-child(2),.gallery--mosaic figure:nth-child(5):nth-last-child(3){grid-row:span 2}
.gallery--mosaic figure:nth-child(6):last-child{grid-column:span 2}
.gallery--mosaic figure:nth-child(4n+9):last-child{grid-column:span 4}
.gallery--mosaic figure:nth-child(4n+9):nth-last-child(2),.gallery--mosaic figure:nth-child(4n+10):last-child,.gallery--mosaic figure:nth-child(4n+9):nth-last-child(3){grid-column:span 2}
}
@media (max-width:760px){
  .gallery--mosaic figure:nth-child(n){grid-column:auto;grid-row:auto}
  .gallery--mosaic figure:first-child{grid-column:span 2;grid-row:span 2}
  .gallery--mosaic figure:last-child:nth-child(even){grid-column:span 2}
}
/* Đầu trang kiểu khung: nội dung căn giữa theo chiều dọc (trước dồn xuống đáy), khung cách khối dưới bằng khoảng hai bên
   (trước dính vào thanh chữ chạy); lớp tối đều hơn ở giữa vì chữ trắng giờ nằm giữa ảnh. */
.hero--frame{padding-bottom:clamp(.5rem,1.1vw,1rem)}
.hero-frame{align-items:center}
.hero-frame-in{padding-block:clamp(4.5rem,10vh,7rem);align-items:center}
.hero-frame .hero-bg::after{background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.34) 45%,rgba(0,0,0,.62))}
@media (max-width:900px){.hero-frame-in{padding-block:6rem 2.5rem}}
/* Đầu trang kiểu tạp chí: chữ căn giữa theo chiều dọc so với ảnh (trước dồn xuống đáy, phía trên trống) */
.hero--editorial .hero-inner{align-items:center}
/* Thanh cuộn (máy tính): mảnh, bo tròn, theo màu chính của mẫu, đậm lên khi rê chuột. Chrome / Edge / Safari dùng ::-webkit-scrollbar
   (bo tròn được); Firefox dùng scrollbar-color. Các dải trượt ngang vẫn ẩn thanh cuộn như cũ. */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--primary) 42%,transparent);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--primary) 72%,transparent)}
::-webkit-scrollbar-corner{background:transparent}
@supports (-moz-appearance:none){html,.cdock-list{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--primary) 50%,transparent) transparent}}
/* ===== Mua hàng kiểu web bán lẻ (Đợt 1): thẻ sản phẩm, thanh sắp xếp, tab vuốt ngang, ảnh nhỏ thực đơn ===== */
.items-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1rem;flex-wrap:wrap;margin:0 0 1.25rem}
.items-count{color:var(--muted);font-size:.92rem}
.items-count b{color:var(--text);font-weight:700}
.items-sort{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--muted)}
.items-sort select{height:42px;padding:0 2.3rem 0 .95rem;border:1px solid var(--border);border-radius:999px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center/14px;-webkit-appearance:none;appearance:none;font:inherit;font-weight:600;color:var(--text);cursor:pointer}
.items-sort select:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
[data-tabs] .items-tabs+.items-toolbar{margin-top:-.75rem}
.items--shop:not(.items--wide) .card-body h3{font-size:1.02rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.items--wide.items--shop .item-actions .btn{flex:0 1 auto;padding-inline:1.4rem}
.items--shop .card-body>p:not(.muted){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.items--shop .item-meta{flex-direction:column;align-items:stretch;gap:.65rem}
.items--shop .price{font-size:1.28rem;display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .45rem;line-height:1.2}
.items--shop .price-old{margin-left:0}
.items--shop .item-actions .btn{flex:1;min-height:42px;justify-content:center}
.items--shop .badge-sale{font-size:.78rem;padding:.3rem .6rem;border-radius:8px;letter-spacing:0;text-transform:none}
.menu-line--img{position:relative;padding-left:80px;min-height:86px}
.menu-thumb{position:absolute;left:0;top:.6rem;width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--surface-2)}
.menu-add .btn{min-height:36px;padding-inline:.9rem;margin-top:.4rem}
@media (max-width:560px){
  .items--shop:not(.items--wide){grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .items--shop:not(.items--wide) .card-body{padding:.75rem .8rem .85rem}
  .items--shop:not(.items--wide) .card-body h3{font-size:.92rem}
  .items--shop:not(.items--wide) .card-body>p,.items--shop:not(.items--wide) .specs,.items--shop:not(.items--wide) .card-body>.tag{display:none}
  .items--shop:not(.items--wide) .price{font-size:1.05rem}
  .items--shop:not(.items--wide) .price small{display:none}
  .items--shop:not(.items--wide) .item-actions .btn{min-height:40px;padding-inline:.5rem;font-size:.82rem}
  .items--shop:not(.items--wide) .badge{top:.5rem;left:.5rem}
  .items-sort span{display:none}
}
@media (max-width:760px){
  .items-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:-1.25rem;padding:0 1.25rem 2px;scroll-padding-inline:1.25rem;-webkit-mask:linear-gradient(90deg,transparent,#000 1.25rem,#000 calc(100% - 1.25rem),transparent)}
  .items-tabs::-webkit-scrollbar{display:none}
  .items-tabs button{flex:none;white-space:nowrap}
}
/* Đầu trang con gọn (trước cao gần 300px gần như trống); đường dẫn rõ, có gạch dưới khi rê */
.page-header{padding:clamp(2.5rem,5vw,4rem) 0 clamp(1.75rem,3.2vw,2.75rem)}
.page-header--image{min-height:clamp(220px,32vw,320px)}
.page-header--compact{padding:clamp(1.6rem,3vw,2.4rem) 0 clamp(1.25rem,2.5vw,1.9rem)}
.page-header--compact h1{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-bottom:0}
.crumbs{opacity:.85;font-size:.85rem}
.crumbs a{color:inherit;text-decoration:none;font-weight:500}
.crumbs a:hover{text-decoration:underline}
.section--tight{padding-top:clamp(1.75rem,3.5vw,2.75rem)}
/* Thanh bước mua hàng: Giỏ hàng → Thông tin → Hoàn tất */
.buy-steps{display:flex;gap:0;list-style:none;margin:1.1rem 0 0;padding:0;max-width:520px;counter-reset:st}
.buy-steps li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.82rem;font-weight:600;color:var(--muted);counter-increment:st;text-align:center}
.buy-steps li::before{content:counter(st);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--border);color:var(--muted);font-weight:700;position:relative;z-index:1}
.buy-steps li+li::after{content:"";position:absolute;top:14px;right:calc(50% + 18px);left:calc(-50% + 18px);height:2px;background:var(--border)}
.buy-steps li.on,.buy-steps li.done{color:var(--text)}
.buy-steps li.on::before{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.buy-steps li.done::before{content:"✓";background:color-mix(in srgb,var(--primary) 14%,var(--surface));border-color:var(--primary);color:var(--primary)}
.buy-steps li.done+li::after,.buy-steps li.on::after{background:var(--primary)}
.buy-steps a{color:inherit;text-decoration:none}
/* Chi tiết sản phẩm: ảnh có nút phóng to, giá to kèm % giảm, dải cam kết, 2 nút mua */
.detail-main{position:relative;cursor:zoom-in}
.detail-main .badge-sale{top:.9rem;left:.9rem;font-size:.85rem;border-radius:8px;text-transform:none;letter-spacing:0}
.detail-zoom{position:absolute;right:.75rem;bottom:.75rem;width:38px;height:38px;border-radius:50%;background:#fffe;color:#222;display:grid;place-items:center;box-shadow:0 6px 16px -8px #0007;pointer-events:none}
.detail-zoom svg{width:18px;height:18px}
.detail-thumbs img.on,.detail-thumbs img:hover{opacity:1;outline:2px solid var(--primary);outline-offset:2px}
.detail-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .7rem;margin:.6rem 0 1.1rem}
.detail-price .price{font-size:clamp(1.7rem,3vw,2.1rem);margin:0;display:inline}
.detail-price .price-old{font-size:1rem;margin:0}
.detail-off{background:#e11d48;color:#fff;font-weight:700;font-size:.85rem;padding:.2rem .5rem;border-radius:6px}
.detail-trust{list-style:none;margin:0 0 1.4rem;padding:.9rem 1rem;display:grid;gap:.7rem;border:1px solid var(--border);border-radius:var(--radius);background:color-mix(in srgb,var(--primary) 4%,var(--surface))}
.detail-trust li{display:flex;gap:.7rem;align-items:flex-start}
.detail-trust .dt-ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)}
.detail-trust .dt-ic svg{width:17px;height:17px}
.detail-trust b{display:block;font-size:.93rem}
.detail-trust small{display:block;color:var(--muted);font-size:.83rem;line-height:1.45}
.buy-row .qty{height:48px}
.buy-row .qty button{width:42px;height:46px}
.buy-row .btn{min-height:48px;flex:1 1 150px;justify-content:center}
/* Thanh mua bám đáy (chỉ điện thoại): nằm trên thanh liên hệ dưới đáy nếu có */
.buybar{display:none}
@media (max-width:760px){
  .buybar:not([hidden]){display:flex;align-items:center;gap:.6rem;position:fixed;left:0;right:0;bottom:calc(var(--demo-height,0px) + var(--mobile-height,0px));z-index:44;padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -10px 26px -18px #0006;animation:buybarIn .25s ease}
  .buybar-price{flex:1;min-width:0;display:flex;flex-direction:column}
  .buybar-price small{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buybar-price b{color:var(--primary);font-size:1.12rem;font-family:var(--font-heading)}
  .buybar .btn{min-height:44px;padding-inline:1.1rem}
  .buybar .btn-icon-only{width:44px;padding:0;justify-content:center}
  .buybar .btn-icon-only svg{width:20px;height:20px}
  body.has-buybar{padding-bottom:calc(var(--demo-height,0px) + var(--mobile-height,0px) + 70px)}
  body.has-buybar .cdock:not(.cdock--m-bar),body.has-buybar .totop{bottom:calc(var(--demo-height,0px) + 84px)}
}
@keyframes buybarIn{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.buybar{animation:none!important}}
/* Giỏ hàng: dòng thẻ có ảnh, nút xoá, số lượng; giỏ trống có hình + gợi ý; ô tổng bám theo khi cuộn (máy tính), thanh tổng bám đáy (điện thoại) */
.cart-lines{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.cart-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.cart-line{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;gap:1rem;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.cart-line img{width:72px;height:72px;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.cl-info{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.cl-info b{font-size:.98rem;line-height:1.35}
.cl-info small{color:var(--muted)}
.cl-remove{align-self:flex-start;display:inline-flex;align-items:center;gap:.3rem;margin-top:.15rem;padding:.45rem .1rem;min-height:36px;border:0;background:none;color:var(--muted);font:inherit;font-size:.86rem;font-weight:500;cursor:pointer}
.cl-remove:hover{color:#e11d48}
.cl-remove svg{width:15px;height:15px}
.cart-line .qty button{width:40px;height:40px}
.cart-line [data-line-qty]{min-width:32px;text-align:center;font-weight:600}
.cl-total{min-width:96px;text-align:right;font-size:1.02rem}
.cart-more{display:flex;align-items:center;gap:.4rem;padding:1rem 1.25rem;color:var(--primary);font-weight:600;text-decoration:none}
.cart-more svg{width:16px;height:16px;transform:rotate(180deg)}
.cart-summary{position:sticky;top:calc(var(--nav-h,76px) + 1rem)}
.cart-summary h3{margin-bottom:.75rem}
.cart-summary .total b{color:var(--primary)}
.cart-note{display:flex;gap:.4rem;align-items:flex-start;margin:.85rem 0 0;font-size:.82rem;color:var(--muted)}
.cart-note svg{flex:none;width:15px;height:15px;color:var(--primary);margin-top:.15rem}
.cart-mbar{display:none}
.cart-empty{text-align:center;padding:clamp(2rem,5vw,3.5rem) 1.5rem;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface)}
.ce-ic{width:84px;height:84px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary)}
.ce-ic svg{width:38px;height:38px}
.cart-empty h2{font-size:clamp(1.3rem,2.5vw,1.6rem);margin-bottom:.4rem}
.cart-empty p{color:var(--muted);margin-bottom:1.25rem}
.cart-suggest{margin-top:2.5rem}
.cart-suggest h3{margin-bottom:1rem}
@media (max-width:760px){
  .cart-line{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"img info total" "img qty qty";gap:.5rem .85rem;padding:.9rem 1rem}
  .cart-line img{grid-area:img;width:64px;height:64px}
  .cl-info{grid-area:info}.cart-line .qty{grid-area:qty;justify-self:start}.cl-total{grid-area:total;min-width:0;align-self:start}
  .cart-summary{position:static}
  .cart-mbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;position:fixed;left:0;right:0;bottom:calc(var(--demo-height,0px) + var(--mobile-height,0px));z-index:44;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -10px 26px -18px #0006}
  .cart-mbar>span{display:flex;flex-direction:column;font-size:.78rem;color:var(--muted)}
  .cart-mbar b{color:var(--primary);font-size:1.15rem;font-family:var(--font-heading)}
  .cart-mbar .btn{min-height:46px;padding-inline:1.6rem}
  body:has(.cart-mbar){padding-bottom:calc(var(--demo-height,0px) + var(--mobile-height,0px) + 72px)}
  body:has(.cart-mbar) .cdock:not(.cdock--m-bar),body:has(.cart-mbar) .totop{bottom:calc(var(--demo-height,0px) + 86px)}
  .buy-steps li{font-size:.75rem}
}
/* Thanh toán: tiêu đề nhóm, tóm tắt đơn có ảnh nhỏ */
.co-title{font-size:1.05rem;margin:.25rem 0 .1rem}
.co-line{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto;gap:.7rem;align-items:center}
.co-line img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.co-line span small{display:block;color:var(--muted);font-size:.8rem}
.done-hero{display:flex;gap:1rem;align-items:center;padding:1.1rem 1.25rem;margin-bottom:1.25rem;border-radius:var(--radius);background:color-mix(in srgb,#16a34a 10%,var(--surface));border:1px solid color-mix(in srgb,#16a34a 35%,transparent)}
.dh-ic{flex:none;width:46px;height:46px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center}
.dh-ic svg{width:24px;height:24px}
.done-hero b{display:block}
.done-hero small{color:var(--muted)}
/* Tìm nhanh: nút kính lúp trên menu + hộp tìm (máy tính: khung giữa; điện thoại: phủ màn hình) */
.search-btn{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:999px;background:rgba(0,0,0,.06);color:inherit;cursor:pointer;transition:background .2s;flex:none}
.search-btn:hover{background:color-mix(in srgb,var(--primary) 14%,transparent)}
.search-btn svg{width:19px;height:19px}
.nav--transparent .search-btn,.nav--dark .search-btn,.nav--primary .search-btn{background:rgba(255,255,255,.14)}
.ssearch:not([open]){display:none}
.ssearch{width:min(640px,calc(100% - 24px));max-height:min(78vh,620px);margin:10vh auto auto;padding:0;border:0;border-radius:calc(var(--radius) + 8px);background:var(--surface);color:var(--text);box-shadow:0 40px 90px -30px #000a;overflow:hidden}
.ssearch::backdrop{background:color-mix(in srgb,var(--dark) 55%,transparent);backdrop-filter:blur(3px)}
.ss-box{display:flex;flex-direction:column;max-height:inherit}
.ss-input{display:flex;align-items:center;gap:.7rem;padding:0 .9rem 0 1.1rem;border-bottom:1px solid var(--border)}
.ss-input svg{width:20px;height:20px;color:var(--muted);flex:none}
.ss-input input{flex:1;min-width:0;height:60px;border:0;outline:none;background:transparent;font:inherit;font-size:1.05rem;color:inherit}
.ss-input input::-webkit-search-cancel-button{-webkit-appearance:none}
.ss-input input:focus,.ss-input input:focus-visible{box-shadow:none!important;outline:none!important;border:0!important}
.ss-input:focus-within{box-shadow:inset 0 -2px 0 var(--primary)}
.ss-close{border:0;background:var(--surface-2);color:var(--muted);font:inherit;font-size:.82rem;font-weight:600;padding:.45rem .8rem;border-radius:8px;cursor:pointer}
.ss-res{overflow-y:auto;padding:.5rem}
.ss-cap{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.6rem .6rem .3rem}
.ss-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:.85rem;align-items:center;padding:.55rem .6rem;border-radius:12px;color:inherit;text-decoration:none}
.ss-item:hover,.ss-item.on{background:color-mix(in srgb,var(--primary) 9%,var(--surface))}
.ss-item img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:var(--surface-2)}
.ss-item b{display:block;font-size:.95rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-item small{display:block;font-size:.8rem;color:var(--muted)}
.ss-item em{font-style:normal;font-weight:700;color:var(--primary);white-space:nowrap}
.ss-empty{padding:1.5rem 1rem;color:var(--muted);text-align:center}
@media (max-width:760px){
  .search-btn{width:40px;height:40px}
  .ssearch{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0}
  .ss-input input{height:58px;font-size:16px}
}
.cl-remove span{font-size:1.15em;line-height:1}
/* iPad (761–1100px): lưới bán hàng 3 cột; chi tiết sản phẩm và giỏ hàng giữ 2 cột (trước gộp 1 cột từ 820px, ảnh chiếm cả màn hình) */
@media (min-width:761px) and (max-width:1100px){
  .items--shop.grid-3,.items--shop.grid-4{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .items--shop .card-body{padding:1rem 1.05rem 1.15rem}
  .detail{grid-template-columns:1fr 1fr;gap:2rem}
  .cart-layout{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:1.5rem}
}
@media (min-width:761px) and (max-width:820px){.detail-thumbs{grid-template-columns:repeat(4,1fr);gap:.4rem}}
@media (min-width:761px){.detail-media{position:sticky;top:calc(var(--nav-h,76px) + 1rem)}}
/* ===== Đợt 2: điện thoại / iPad dễ dùng cho mọi mẫu =====
   Vùng bấm ≥ 40px trên màn cảm ứng (điện thoại, iPad) và màn hẹp; chữ tối thiểu 12px (nhãn viết hoa giãn chữ 11.5px). */
@media (pointer:coarse),(max-width:760px){
  /* Liên kết chân trang: mỗi dòng đủ cao để bấm, không dính nhau */
  .footer ul{gap:0}
  .footer li a,.footer-links a{display:inline-flex;align-items:center;min-height:40px}
  .footer--simple .footer-links{gap:.25rem 1.25rem}
  /* Nút và liên kết nhỏ */
  .cart-btn{min-height:40px}
  .link-more{min-height:40px}
  .btn-xs,.btn-sm{min-height:40px}
  .menu-line .name{display:inline-flex;align-items:center;min-height:40px}
  .faq summary{min-height:48px;align-items:center;padding-block:.35rem}
  .coupon{min-height:40px}
  /* Chấm chuyển ảnh: giữ chấm nhỏ nhưng vùng bấm 32×32 (viền trong suốt + nền chỉ tô phần nội dung) */
  .dots,.arch-dots{gap:0!important}
  .dots button,.arch-dots button{box-sizing:content-box;width:9px;height:9px;padding:11px 6px;background-clip:content-box}
  .dots button.on,.arch-dots button.on{width:24px}
  .hero-arch .arch-dots{bottom:.3rem}
}
/* Thẻ có tên là liên kết: bấm vào đâu trên thẻ cũng mở chi tiết (như web bán lẻ); nút / liên kết khác trong thẻ vẫn bấm riêng */
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card .item-actions,.card .card-media .badge,.card .pf-tag,.card .link-more,.card-body a:not(h3 a),.card-body button{position:relative;z-index:2}
.card h3 a:focus-visible{outline:none}
.card:has(h3 a:focus-visible){outline:2px solid var(--primary);outline-offset:3px}
/* Chữ nhỏ: tối thiểu 12px */
.chip,.hero .chip{font-size:.78rem}
.badge{font-size:.75rem}
.disclaimer{font-size:.78rem}
figcaption,.gallery figcaption{font-size:.8rem}
.bento-cap small{font-size:.74rem}
.tag,.tag-accent{font-size:.76rem}
.plan .ribbon{font-size:.76rem}
.map-card em{font-size:.78rem}
.pf-tag{font-size:.74rem}
.btn-xs{font-size:.78rem}
.cdock-item small{font-size:11px}
@media (max-width:760px){
  .hero .eyebrow{font-size:.74rem;letter-spacing:.08em}
  .cdock-item small{font-size:10.5px}
  .nav .brand-descriptor{font-size:7.5px;letter-spacing:.1em}
}
/* Đợt 2 (tiếp): số thứ tự ảnh trượt, nhãn ô kính đầu trang đủ 12px; dòng danh sách bấm được cả dòng; số điện thoại đủ cao để bấm */
.gallery--rail figcaption span{font-size:.78rem}
.hero-glass small{font-size:.75rem}
.item-row{position:relative}
.item-row h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.item-row .item-actions,.item-row .btn,.item-row .tag{position:relative;z-index:2}
@media (pointer:coarse),(max-width:760px){
  .menu-add .btn{min-height:40px}
  .contact-info .ci a,.hero-glass a{display:inline-flex;align-items:center;min-height:40px}
  .dots button,.arch-dots button{padding:15px 7px}
}
@media (max-width:760px){.cdock-item small,.cdock .cdock-item small{font-size:11px!important;letter-spacing:-.01em}}
.bento-cap small{font-size:.76rem}
/* iPad dọc (761–1100): gói giá 3 cột ngang (trước xếp chồng, mỗi gói rộng hết màn hình) */
@media (min-width:761px) and (max-width:1100px){
  .pricing--cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
  .pricing--cards .plan{padding-inline:1.25rem}
  .pricing--cards .plan .price{font-size:clamp(1.45rem,3.2vw,1.9rem)}
}
/* Đơn vị sau giá (/ đêm, / người) không rớt dòng một mình */
.plan .price small{white-space:nowrap}
.plan .ribbon{white-space:nowrap}
.plan ul{align-content:start}