/*
Theme Name: Massive Hanoi
Description: Giao diện riêng cho hệ thống Massive (Hanoi Massive Barber — 30/09 XOÁ HẲN Nail, chỉ còn barber).
Version: 1.35.6
Author: Lâm cho Chủ tịch Đinh Tuấn Anh
Text Domain: massive
*/
:root{
  --bg:#070807;--bg2:#0f110f;--card:#141714;--line:#232823;
  --text:#f4f6f1;--muted:#9aa197;--neon:#39e53c;--neon-d:#22b526;--pink:#ff3d8b;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Be Vietnam Pro',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:.5px;line-height:1;text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--neon);font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--neon)}
.hexbg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='%2339e53c' stroke-opacity='.07' stroke-width='1.2'/%3E%3C/svg%3E")}

/* NAV */
nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
nav.solid{background:rgba(7,8,7,.9);backdrop-filter:blur(12px);border-color:var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:12px}
.brand{display:flex;align-items:center;gap:12px;font-family:'Anton';font-size:22px;letter-spacing:1.5px}
.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--neon)}
.brand small{display:block;font-family:'Be Vietnam Pro';font-size:10px;letter-spacing:3px;color:var(--muted);font-weight:600;margin-top:-2px}
.links{display:flex;gap:28px;font-size:14px;font-weight:500}
.links a{opacity:.75;transition:opacity .2s}
.links a:hover{opacity:1;color:var(--neon)}
.nav-r{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--neon);color:#051005;font-weight:800;padding:14px 26px;border-radius:99px;font-size:15px;transition:transform .15s,box-shadow .2s;box-shadow:0 0 0 0 rgba(57,229,60,.5);border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(57,229,60,.6)}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--text);border:1.5px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.btn.sm{padding:9px 18px;font-size:13px}

/* HERO */
.hero{position:relative;min-height:min(100vh,940px);min-height:min(100svh,940px);display:flex;align-items:center;padding:110px 0 70px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:center 30%/cover no-repeat}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,8,7,.97) 0%,rgba(7,8,7,.85) 45%,rgba(7,8,7,.45) 100%),
  linear-gradient(0deg,var(--bg) 0%,transparent 35%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;width:100%}
.hero h1{font-size:clamp(52px,8.6vw,118px);margin:18px 0 22px}
.hero h1 span{color:var(--neon);text-shadow:0 0 40px rgba(57,229,60,.45)}
.hero .lead{font-size:18px;color:#c9cec5;max-width:540px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.proof{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.proof div b{display:block;font-family:'Anton';font-size:38px;line-height:1}
.proof div b em{font-style:normal;color:#ffc93c;font-size:22px;vertical-align:6px;margin-left:4px}
.proof div span{font-size:13px;color:var(--muted)}
.phone{position:relative;justify-self:center;width:min(300px,100%);aspect-ratio:9/16;border-radius:34px;padding:9px;background:linear-gradient(160deg,#2a2f2a,#0c0e0c);box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08),0 0 80px -10px rgba(57,229,60,.35);transform:rotate(3deg)}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:26px}
.phone .chip{position:absolute;left:-26px;bottom:52px;background:var(--text);color:#0b0b0b;border-radius:14px;padding:10px 14px;font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.4);transform:rotate(-3deg)}
.phone .chip i{font-style:normal;color:#e0a800}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:11px;letter-spacing:3px;color:var(--muted);text-transform:uppercase}

/* MARQUEE */
.marquee{background:var(--neon);color:#051005;overflow:hidden;white-space:nowrap;border-block:1px solid var(--neon-d)}
.marquee .track{display:inline-flex;animation:mq 30s linear infinite;padding:14px 0}
.marquee span{font-family:'Anton';font-size:22px;letter-spacing:1px;padding:0 22px;text-transform:uppercase}
.marquee span::after{content:"⬢";margin-left:44px;font-size:14px;vertical-align:3px}
@keyframes mq{to{transform:translateX(-50%)}}

section{padding:100px 0;position:relative}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.head h2{font-size:clamp(40px,5.6vw,72px);margin-top:12px}
.head h2 span{color:var(--neon)}
.head p{color:var(--muted);max-width:420px}

/* SIGNATURE */
.sig{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sc{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;isolation:isolate;border:1px solid var(--line)}
.sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s}
.sc::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.95) 5%,rgba(0,0,0,.2) 60%,transparent);z-index:-1}
.sc:hover img{transform:scale(1.06)}
.sc .in{padding:26px;width:100%}
.sc .n{font-family:'Anton';color:var(--neon);font-size:14px;letter-spacing:2px}
.sc h3{font-size:34px;margin:8px 0}
.sc p{color:#c3c8bf;font-size:14.5px}
.sc .pr{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.sc .pr b{font-family:'Anton';font-size:30px}
.sc .pr b small{font-family:'Be Vietnam Pro';font-size:12px;color:var(--muted);margin-left:4px}
.sc .pr a{font-size:13px;font-weight:700;color:var(--neon)}
.sc .badge{position:absolute;top:18px;left:18px;background:var(--neon);color:#051005;font-size:11px;font-weight:800;letter-spacing:1.5px;padding:6px 12px;border-radius:99px}

/* REELS */
.reels-sec{background:var(--bg2);border-block:1px solid var(--line);overflow:hidden}
.reels{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 18px;margin:0 -20px;scrollbar-width:none}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;flex:0 0 250px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;scroll-snap-align:start;background:#000;cursor:pointer;border:1px solid var(--line);transition:transform .25s,border-color .25s}
.reel:hover{transform:translateY(-6px);border-color:var(--neon)}
.reel video{width:100%;height:100%;object-fit:cover}
.reel .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 45%);pointer-events:none;transition:opacity .3s}
.reel.playing .ov{opacity:0}
.reel .dur{align-self:flex-end;background:rgba(0,0,0,.6);font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px}
.reel .play{position:absolute;top:50%;left:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(57,229,60,.92);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(57,229,60,.2)}
.reel .play::after{content:"";border-left:18px solid #051005;border-block:11px solid transparent;margin-left:5px}
.reel .cap{font-weight:700;font-size:15px}
.reel .cap small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.reel-nav{display:flex;gap:10px}
.reel-nav button{width:48px;height:48px;border-radius:50%;background:transparent;border:1.5px solid var(--line);color:var(--text);font-size:18px;cursor:pointer}
.reel-nav button:hover{border-color:var(--neon);color:var(--neon)}

/* GALLERY */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.gal figure{border-radius:16px;overflow:hidden;position:relative;border:1px solid var(--line);cursor:zoom-in}
.gal figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gal figure:hover img{transform:scale(1.07)}
.gal .t2{grid-row:span 2}.gal .w2{grid-column:span 2}
.lb{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:20px}
.lb.on{display:flex}
.lb img{max-height:90vh;border-radius:14px}
.lb button{position:absolute;top:18px;right:18px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer}

/* MENU */
.menu-sec{background:var(--bg2);border-block:1px solid var(--line)}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:30px;padding-bottom:4px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--muted);padding:11px 20px;border-radius:99px;font:600 14px 'Be Vietnam Pro';cursor:pointer;transition:.2s}
.tabs button:hover{color:var(--text)}
.tabs button.on{background:var(--neon);color:#051005;border-color:var(--neon)}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 34px}
.row{display:flex;align-items:baseline;gap:12px;padding:17px 0;border-bottom:1px solid var(--line)}
.row .nm{font-weight:500}
.row .dots{flex:1;border-bottom:2px dotted #2e342e;transform:translateY(-5px)}
.row .pr{font-family:'Anton';font-size:19px;color:var(--neon);white-space:nowrap;letter-spacing:.5px}
.note{color:var(--muted);font-size:13px;margin-top:18px}

/* TEAM */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 14px;text-align:center;transition:border-color .2s,transform .2s}
.bar:hover{border-color:var(--neon);transform:translateY(-4px)}
.av{width:84px;height:84px;margin:0 auto 14px;display:grid;place-items:center;font-family:'Anton';font-size:32px;color:var(--neon);background:#0b0d0b;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.bar b{display:block;font-size:15px;letter-spacing:1px}
.bar span{font-size:12px;color:var(--muted)}
.bar.star{border-color:rgba(57,229,60,.5);background:linear-gradient(180deg,rgba(57,229,60,.1),var(--card))}
.bar.star span{color:var(--neon);font-weight:700}

/* REVIEWS */
.rev{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px}
.score{background:var(--neon);color:#051005;border-radius:24px;padding:40px;position:relative;overflow:hidden}
.score::after{content:"⬢";position:absolute;right:-30px;bottom:-80px;font-size:260px;opacity:.12;line-height:1}
.score .big{font-family:'Anton';font-size:128px;line-height:.9}
.score .st{font-size:24px;letter-spacing:3px}
.score p{font-weight:600;margin-top:10px;max-width:300px}
.score .btn{background:#051005;color:var(--text);margin-top:28px}
.themes{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:34px}
.themes h3{font-size:26px;margin-bottom:20px}
.bar-row{display:grid;grid-template-columns:150px 1fr 36px;gap:14px;align-items:center;margin:14px 0;font-size:14px;font-weight:500}
.trk{height:10px;background:#0b0d0b;border-radius:99px;overflow:hidden}
.trk i{display:block;height:100%;background:linear-gradient(90deg,var(--neon-d),var(--neon));border-radius:99px;width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.why{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.why div{display:flex;gap:10px;color:#c3c8bf;font-size:14.5px;background:#0b0d0b;border-radius:12px;padding:12px 14px}
.why div::before{content:"✓";color:var(--neon);font-weight:800}

/* VISIT */
.visit{display:grid;grid-template-columns:1fr 1.25fr;gap:24px}
.info{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:34px;display:grid;gap:24px;align-content:start}
.info .k{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-weight:700}
.info .v{font-size:19px;font-weight:600;margin-top:2px}
.map{border-radius:24px;overflow:hidden;border:1px solid var(--line);min-height:420px}
.map iframe{width:100%;height:100%;min-height:420px;border:0;filter:invert(.9) hue-rotate(180deg) saturate(.6)}

/* FINAL CTA */
.final{position:relative;padding:110px 0;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.final::before{content:"";position:absolute;inset:0;background:var(--bgimg) center/cover;opacity:.18}
.final .wrap{position:relative}
.final h2{font-size:clamp(44px,7vw,96px)}
.final h2 span{color:var(--neon)}
.final p{color:var(--muted);margin:16px auto 30px;max-width:480px}
.final .cta{justify-content:center}

footer{border-top:1px solid var(--line);padding:30px 0 110px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.fab{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;display:none;gap:10px;padding:8px;border-radius:99px;background:rgba(15,17,15,.9);backdrop-filter:blur(10px);border:1px solid var(--line)}
.fab a{flex:1}

.rv{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.marquee .track{animation:none}}

@media (max-width:960px){
  .links{display:none}
  nav .btn.sm{display:none}
  .hero .wrap,.rev,.visit{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:120px}
  .phone{width:220px;transform:none}
  .phone .chip{left:-40px}
  .sig{grid-template-columns:1fr}
  .sc{aspect-ratio:4/5}
  .gal{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .gal .w2{grid-column:span 2}
  .menu{grid-template-columns:1fr;padding:6px 20px}
  .team{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:1fr}
  .fab{display:flex}
  .scroll-hint{display:none}
  section{padding:72px 0}
  .reel{flex-basis:200px}
}
@media (max-width:420px){.bar-row{grid-template-columns:110px 1fr 30px}.score .big{font-size:100px}}

/* ===== Phần mới cho WordPress ===== */
[hidden]{display:none!important}
.narrow{max-width:780px}
.links a{white-space:nowrap}

/* Hệ thống 3 tiệm */
.shops{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shop{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.shop:hover{border-color:var(--neon);transform:translateY(-4px)}
.shop.flag{border-color:rgba(57,229,60,.55);box-shadow:0 0 0 1px rgba(57,229,60,.25),0 20px 60px -30px rgba(57,229,60,.5)}
.shop-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.shop-img img{width:100%;height:100%;object-fit:cover}
.shop-img .badge,.sc .badge{position:absolute;top:14px;left:14px;background:var(--neon);color:#051005;font-size:11px;font-weight:800;letter-spacing:1.5px;padding:6px 12px;border-radius:99px}
.shop:not(.flag) .badge{background:rgba(7,8,7,.8);color:var(--text);border:1px solid var(--line)}
.shop-in{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.shop-in h3{font-size:26px}
.shop-addr{font-weight:600;font-size:14.5px}
.shop-rate{color:#ffc93c;font-weight:700;font-size:14px}
.shop-in p{color:#c3c8bf;font-size:14.5px;flex:1}
.shop-in .cta{margin-top:10px;align-items:center}
.shop-in .more{font-size:13px;font-weight:700;color:var(--neon)}
.combo{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px}
.combo div{background:#0b0d0b;border:1px dashed var(--line);border-radius:14px;padding:16px 18px;color:#c3c8bf;font-size:14.5px}
.combo b{color:var(--text)}

/* Ảnh BARBER | NAIL */
.gtabs{margin-bottom:22px}
.gal{grid-auto-rows:240px}
.gal figure:nth-child(6n+1){grid-row:span 2}
.more-wrap{text-align:center;margin-top:22px}

/* Trang trong */
.page-hero{position:relative;padding:150px 0 70px;border-bottom:1px solid var(--line);overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:var(--bgimg,none) center/cover;opacity:.28}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 70%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(44px,7vw,96px);margin:14px 0}
.page-hero h1 span{color:var(--neon)}
.page-hero .lead{font-size:18px;color:#c9cec5;max-width:640px}
.page-hero.plain{padding-bottom:50px}
.info .pitch{font-size:17px;color:#c9cec5}
.flag-box{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;background:var(--card);border:1px solid rgba(57,229,60,.45);border-radius:24px;padding:36px;overflow:hidden}
.flag-box h2{font-size:clamp(34px,4.6vw,56px);margin:12px 0 14px}
.flag-box h2 span{color:var(--neon)}
.flag-box p{color:#c3c8bf}
.flag-box img{border-radius:18px;aspect-ratio:4/3;object-fit:cover;width:100%}

/* Blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s,transform .2s}
.post:hover{border-color:var(--neon);transform:translateY(-4px)}
.post-img{aspect-ratio:16/10;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover}
.post-in{padding:20px}
.post-in .date{font-size:12px;color:var(--muted);letter-spacing:1px}
.post-in h3{font-size:24px;margin:8px 0}
.post-in p{color:#c3c8bf;font-size:14.5px}
.pager{margin-top:30px;text-align:center}
.pager .page-numbers{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:10px;margin:0 3px}
.pager .current{background:var(--neon);color:#051005}
.entry{font-size:17px;color:#d6dad2}
.entry>*+*{margin-top:1.1em}
.entry h2,.entry h3{font-family:'Be Vietnam Pro';text-transform:none;font-weight:800;letter-spacing:0;line-height:1.3;margin-top:1.6em;color:var(--text)}
.entry h2{font-size:28px}.entry h3{font-size:22px}
.entry a{color:var(--neon);text-decoration:underline}
.entry ul,.entry ol{padding-left:1.3em}
.entry img{border-radius:14px;height:auto}
.entry .cover{margin-bottom:28px}
.wp-block-gallery{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.post-cta{margin-top:40px;background:var(--card);border:1px solid rgba(57,229,60,.45);border-radius:18px;padding:26px}
.post-cta b{font-size:20px;color:var(--text)}
.post-cta p{margin:6px 0 16px;color:var(--muted)}

/* Chân trang */
footer{padding-top:50px}
footer .wrap{align-items:flex-start}
.f-brand b{display:block;font-family:'Anton';font-size:24px;color:var(--text);letter-spacing:1px}
.f-shops{display:grid;gap:12px}
.f-shops a b{display:block;color:var(--text);font-size:14px}
.f-shops a span{font-size:13px}
.f-contact{display:grid;gap:8px}
.f-contact a:hover,.f-shops a:hover b{color:var(--neon)}
footer .copy{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:13px}

@media (max-width:960px){
  .shops,.posts,.combo,.flag-box{grid-template-columns:1fr}
  .page-hero{padding:120px 0 50px}
  .gal{grid-auto-rows:170px}
  .flag-box{padding:24px}
  footer .wrap{flex-direction:column}
}

/* Thanh quản trị WordPress (chỉ Chủ tịch thấy khi đăng nhập) không che menu */
.admin-bar nav{top:32px}
@media (max-width:782px){.admin-bar nav{top:46px}}

/* ===== Thẻ riêng từng tiệm (tab) ===== */
.stabs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px;position:sticky;top:80px;z-index:5}
.stabs button{min-height:64px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;color:var(--text);cursor:pointer;padding:10px 12px;text-align:left;font-family:'Be Vietnam Pro';transition:.2s}
.stabs button b{display:block;font-family:'Anton';font-weight:400;font-size:20px;letter-spacing:.5px;text-transform:uppercase}
.stabs button small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.stabs button.on{background:var(--neon);border-color:var(--neon);color:#051005;box-shadow:0 10px 30px -12px rgba(57,229,60,.7)}
.stabs button.on small{color:#0d3a0e}
.spane{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.spane.flag{border-color:rgba(57,229,60,.55)}
.spane-img{position:relative;min-height:420px}
.spane-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spane-img .badge{position:absolute;top:16px;left:16px;background:var(--neon);color:#051005;font-size:12px;font-weight:800;letter-spacing:1.5px;padding:7px 14px;border-radius:99px}
.spane:not(.flag) .badge{background:rgba(7,8,7,.85);color:var(--text);border:1px solid var(--line)}
.spane-in{padding:30px;display:flex;flex-direction:column;gap:14px}
.spane-in h3{font-size:clamp(30px,3.4vw,42px)}
.facts{list-style:none;display:grid;gap:10px}
.facts li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:16px}
.facts li span{width:28px;flex:0 0 28px;text-align:center}
.spane-in p{color:#c3c8bf}
.big-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.big-cta .btn{min-height:54px;font-size:16px;padding:12px 16px}
.big-cta .btn:first-child{grid-column:1/-1}
.mini-map{border-radius:16px;overflow:hidden;border:1px solid var(--line);height:200px;background:#0b0d0b}
.mini-map iframe{width:100%;height:100%;border:0;filter:invert(.9) hue-rotate(180deg) saturate(.6)}

/* ===== Menu ☰ trên điện thoại ===== */
.burger{display:none;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.06);border:1.5px solid var(--line);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sheet{position:fixed;inset:72px 0 0;z-index:49;background:rgba(7,8,7,.97);backdrop-filter:blur(10px);overflow-y:auto}
.sheet-in{padding:20px;display:grid;gap:12px;max-width:520px;margin:0 auto}
.sheet-k{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--neon);font-weight:800;margin-top:8px}
.sheet-shop{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;min-height:64px}
.sheet-shop b{display:block;font-size:17px}
.sheet-shop span{font-size:13px;color:var(--muted)}
.sheet-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sheet-links a{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;font-weight:700;min-height:54px}
.sheet .btn{min-height:56px;margin-top:6px}
body.menu-open{overflow:hidden}

@media (max-width:960px){
  .burger{display:flex}
  nav .btn.sm{display:none}
  .stabs{top:72px;gap:6px;background:var(--bg);padding:8px 0;margin:0 -4px 14px}
  .stabs button{padding:8px;text-align:center;min-height:60px;border-radius:14px}
  .stabs button b{font-size:15px}
  .stabs button small{font-size:10.5px}
  .spane{grid-template-columns:1fr}
  .spane-img{min-height:230px}
  .spane-in{padding:20px}
  .facts li{font-size:15px}
}
@media (max-width:380px){.stabs button small{display:none}}

/* Nhãn tiệm trên từng ảnh / video: khách biết ảnh này ở tiệm nào */
.gal figure{position:relative}
.gal figure .tag,.reel .tag{position:absolute;top:10px;left:10px;background:rgba(7,8,7,.78);color:var(--text);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px);font-size:11px;font-weight:800;letter-spacing:1px;padding:4px 10px;border-radius:99px;pointer-events:none;text-transform:uppercase}
.reel .tag{top:16px;left:16px}
#reels .gtabs{margin-bottom:18px}

/* 3 tab tiệm ở mục video và ảnh: cùng kiểu nút to như "Our shops", không dính trên đầu */
.stabs.flat{position:static;background:none;padding:0;margin:0 0 18px}
@media (max-width:960px){.stabs.flat{margin:0 0 14px}}

/* KOL / creators & guests */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.feat-media{position:relative;aspect-ratio:9/16;background:#000;cursor:pointer}
.feat-media img,.feat-media video,.feat-media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.feat-media .play{position:absolute;top:50%;left:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(57,229,60,.92);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(57,229,60,.2)}
.feat-media .play::after{content:"";border-left:18px solid #051005;border-block:11px solid transparent;margin-left:5px}
.feat-media .tag{position:absolute;top:12px;left:12px;background:rgba(7,8,7,.78);color:var(--text);border:1px solid rgba(255,255,255,.18);font-size:11px;font-weight:800;letter-spacing:1px;padding:4px 10px;border-radius:99px;text-transform:uppercase;pointer-events:none}
.feat-media.on .tag,.feat-media.on .play{display:none}
.feat-in{padding:24px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.feat blockquote{font-size:18px;line-height:1.5;color:var(--text);font-weight:600}
.feat-who b{display:block;font-size:16px}
.feat-who span{color:var(--neon);font-size:13px;font-weight:700}
.feat-in small{color:var(--muted);font-size:12px}
.feat-in .more{font-size:13px;font-weight:700;color:var(--neon)}
@media (max-width:960px){.feat{grid-template-columns:1fr}.feat-media{aspect-ratio:4/5}}

/* Nhãn "đang xem tiệm nào" trên khung điện thoại đầu trang */
.phone .now{position:absolute;top:22px;left:50%;transform:translateX(-50%) rotate(-3deg);white-space:nowrap;background:rgba(7,8,7,.82);color:var(--text);border:1px solid rgba(57,229,60,.6);backdrop-filter:blur(6px);font-size:12px;font-weight:800;padding:7px 13px;border-radius:99px;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:92%;overflow:hidden;text-overflow:ellipsis}
.phone .now.pop{animation:nowpop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes nowpop{from{opacity:0;transform:translateX(-50%) translateY(-8px) rotate(-3deg)}to{opacity:1;transform:translateX(-50%) rotate(-3deg)}}
@media (max-width:960px){.phone .now{font-size:11px;padding:6px 11px}}

/* ===== Khung đặt lịch cho khách nước ngoài (WhatsApp / Instagram / Email) ===== */
.book{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center}
.book-in{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--bg2);border:1px solid var(--line);border-radius:24px 24px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));animation:bookup .3s cubic-bezier(.2,.8,.2,1)}
@keyframes bookup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:700px){.book{align-items:center}.book-in{border-radius:24px}}
.book-hd{display:flex;justify-content:space-between;align-items:center}
.book-hd b{font-family:'Anton';font-weight:400;font-size:28px;text-transform:uppercase;letter-spacing:.5px}
.book-x{width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--text);font-size:24px;cursor:pointer}
.book-sub{color:var(--muted);font-size:14px;margin:6px 0 4px}
.book-k{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--neon);font-weight:800;margin:16px 0 8px}
.book-shops{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.book-shops button{min-height:60px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;color:var(--text);cursor:pointer;padding:8px;font-family:'Be Vietnam Pro'}
.book-shops button b{display:block;font-size:13px}
.book-shops button small{display:block;font-size:11px;color:var(--muted)}
.book-shops button.on{background:var(--neon);border-color:var(--neon);color:#051005}
.book-shops button.on small{color:#0d3a0e}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.book-grid label{display:grid;gap:5px;font-size:12px;font-weight:700;color:var(--muted)}
.book-grid label.full{grid-column:1/-1}
.book-grid input,.book-grid select,.book-grid textarea{min-height:48px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;color:var(--text);padding:0 12px;font:500 16px 'Be Vietnam Pro';width:100%;color-scheme:dark}
.book-grid textarea{padding:12px;resize:vertical;min-height:84px;line-height:1.45}
.book-grid label small{font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
.book-grid input:focus,.book-grid select:focus,.book-grid textarea:focus{outline:none;border-color:var(--neon)}
.book-send{display:grid;gap:10px}
.book-send .btn{min-height:54px;font-size:16px}
.book-send .bk-wa{background:#25d366;color:#04230f}
.book-note{color:var(--muted);font-size:12px;margin-top:8px}
.bk-igstep{margin-top:12px;padding:14px;border:1.5px solid var(--neon);border-radius:14px;background:#0b140b}
.bk-igstep b{color:var(--neon)}
.bk-igstep p{margin:6px 0 10px;font-size:14px;color:#c3c8bf}
.bk-igstep p b{color:var(--text)}
.bk-igstep pre{white-space:pre-wrap;word-break:break-word;font:500 13px/1.45 'Be Vietnam Pro';color:var(--muted);background:var(--card);border-radius:10px;padding:10px 12px;margin:0 0 12px;max-height:160px;overflow:auto}
.bk-igstep .btn{width:100%;min-height:54px;font-size:16px;background:linear-gradient(45deg,#f58529,#dd2a7b 50%,#8134af);color:#fff;border:0}
.book-vn{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--muted);text-decoration:underline}

/* ===== 3 tab = 3 trang tiệm (nút chuyển trang) ===== */
.stabs.shopnav a{min-height:64px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;color:var(--text);padding:10px 12px;display:flex;flex-direction:column;justify-content:center;transition:.2s}
.stabs.shopnav a b{display:block;font-family:'Anton';font-weight:400;font-size:20px;letter-spacing:.5px;text-transform:uppercase;line-height:1.1}
.stabs.shopnav a small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.stabs.shopnav a:hover{border-color:var(--neon)}
.stabs.shopnav a.on{background:var(--neon);border-color:var(--neon);color:#051005;box-shadow:0 10px 30px -12px rgba(57,229,60,.7)}
.stabs.shopnav a.on small{color:#0d3a0e}
section .stabs.shopnav{position:static;margin:0 0 18px}
.shopnav-bar{position:sticky;top:72px;z-index:40;background:rgba(7,8,7,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 0}
.shopnav-bar .stabs.shopnav{position:static;margin:0}
html{scroll-padding-top:84px}
html:has(body.inner){scroll-padding-top:170px}
.shop-hero{padding-bottom:40px}
@media (max-width:960px){
  .stabs.shopnav a{padding:8px;text-align:center;min-height:60px;border-radius:14px}
  .stabs.shopnav a b{font-size:15px}
  .stabs.shopnav a small{font-size:10.5px}
  .shopnav-bar{padding:8px 0}
}
@media (max-width:380px){.stabs.shopnav a small{display:none}}

/* Logo thật WhatsApp / Instagram */
.ico{width:1.3em;height:1.3em;flex:0 0 auto;vertical-align:-.28em;display:inline-block}
.ico-wa{color:#25D366}
.bk-wa .ico-wa,.btn:not(.ghost) .ico-wa{color:currentColor}
.f-contact a,.info .v a{display:inline-flex;align-items:center;gap:6px}

/* ===== Dải video đông khách vuốt ngang ở đầu trang ===== */
.hero-reel-wrap{position:relative;min-width:0;width:100%}
.hero-reel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 12% 10px;-webkit-overflow-scrolling:touch}
.hero-reel::-webkit-scrollbar{display:none}
.hr-card{position:relative;flex:0 0 76%;aspect-ratio:9/16;border-radius:26px;overflow:hidden;scroll-snap-align:center;background:#000;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 60px -15px rgba(57,229,60,.35)}
.hr-card video{width:100%;height:100%;object-fit:cover}
.hr-card .now{position:absolute;top:14px;left:12px;right:12px;text-align:center;background:rgba(7,8,7,.8);color:var(--text);border:1px solid rgba(57,229,60,.6);backdrop-filter:blur(6px);font-size:12px;font-weight:800;padding:7px 10px;border-radius:99px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-dots{display:flex;justify-content:center;gap:7px;margin-top:6px}
.hr-dots i{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.25);cursor:pointer;transition:.25s}
.hr-dots i.on{width:22px;background:var(--neon)}
.hero-reel-wrap .chip{position:absolute;left:4%;bottom:44px;background:var(--text);color:#0b0b0b;border-radius:14px;padding:10px 14px;font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.4);transform:rotate(-3deg);z-index:2}
.hero-reel-wrap .chip i{font-style:normal;color:#e0a800}
@media (max-width:960px){
  .hero-reel{padding:6px 12vw 10px;margin:0 -20px}
  .hr-card{flex-basis:74vw;max-width:340px}
  .hero-reel-wrap .chip{left:6%;bottom:40px;font-size:12px}
}

/* Form "Booking request" cho khách không dùng WhatsApp/Instagram (26/09) */
.rq-page{padding:120px 0 70px}
.rq-wrap{max-width:560px}
.rq-h{font-size:clamp(40px,8vw,64px);margin:10px 0 6px}
.rq-h span{color:var(--neon)}
.rq{display:grid;gap:4px}
.rq-sub{color:#c3c8bf;font-size:14px;margin-bottom:4px}
.rq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rq-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.rq-chips button{background:var(--card);border:1.5px solid var(--line);color:var(--text);border-radius:999px;padding:8px 13px;font:600 13px 'Be Vietnam Pro';cursor:pointer}
.rq-chips button.on{border-color:var(--neon);color:var(--neon);background:#0e1a0e}
.rq-chips button:focus-visible,.rq-shops button:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.rq-err{color:#ff8a8a;font-size:14px;margin-top:10px}
.rq-send{width:100%;min-height:56px;font-size:16px;margin-top:14px}
.rq-send[disabled]{opacity:.6;cursor:wait}
.rq-fine{font-size:12px;color:var(--muted);text-align:center;margin-top:8px}
.rq-done{display:grid;gap:12px;justify-items:center;text-align:center;padding:30px 10px}
.rq-tick{width:68px;height:68px;border-radius:50%;background:var(--neon);color:#051005;display:grid;place-items:center;font-size:36px;font-weight:800}
.rq-done h3{font-family:'Anton';font-weight:400;font-size:30px;text-transform:uppercase}
.rq-done p{color:#c3c8bf;max-width:38ch}
.rq-test{font-size:13px;border:1px dashed var(--line);border-radius:12px;padding:10px 12px;text-align:left;color:var(--muted)}
.rq-wa{width:100%;min-height:56px;font-size:16px;background:#25d366;color:#04230f}
.rq-wa .ico{width:22px;height:22px}
.rq-alt{margin-top:18px;width:100%;min-height:48px;background:none;border:1.5px dashed var(--line);border-radius:14px;color:var(--text);font:600 14px 'Be Vietnam Pro';cursor:pointer}
.rq-alt:hover,.rq-alt[aria-expanded=true]{border-color:var(--neon);color:var(--neon)}
.rq-altbox{margin-top:6px}

/* ===== CHỌN NGÔN NGỮ (v1.19.0) — nút cờ ở thanh trên, danh sách xổ xuống ===== */
.lang{position:relative;flex:0 0 auto}
.lang .flag{width:22px;height:15px;border-radius:2px;flex:0 0 22px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lang-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-radius:99px;border:1.5px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);font:700 13px 'Be Vietnam Pro',sans-serif;cursor:pointer;letter-spacing:.5px}
.lang-cur{display:inline-flex;align-items:center;gap:7px}
.lang-btn .chev{width:11px;height:8px;opacity:.7}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:95;list-style:none;margin:0;padding:6px;min-width:190px;background:#111311;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.lang-list[hidden]{display:none}
.lang-list button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;background:none;color:var(--text);font:500 15px 'Be Vietnam Pro',sans-serif;text-align:left;border-radius:10px;cursor:pointer}
.lang-list button:hover{background:rgba(57,229,60,.12);color:var(--neon)}
@media (max-width:600px){.lang-btn{height:38px;padding:0 10px}.lang-btn b{display:none}}
/* Ẩn thanh công cụ và khung gợi ý của Google Translate, giữ trang không bị đẩy xuống */
body{top:0!important}
iframe.skiptranslate,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame,.goog-tooltip,.VIpgJd-ZVi9od-ORHb-OEVmcd,.VIpgJd-ZVi9od-aZ2wEe-wOHMyf{display:none!important;visibility:hidden!important}
.goog-text-highlight,font[style*="background-color"]{background:none!important;box-shadow:none!important}
/* Khi đang dịch: tên thương hiệu giữ nguyên nhưng Google hay nuốt khoảng trắng hai bên → chêm lại */
html.translated-ltr .mn-keep{margin-inline:.22em}
/* Tên thương hiệu nằm thẳng trong tiêu đề: giữ màu của tiêu đề (không bị tô xanh như chữ nhấn) */
html.translated-ltr h1>.mn-keep,html.translated-ltr h2>.mn-keep,html.translated-ltr h3>.mn-keep{color:inherit!important;text-shadow:inherit}
@media (max-width:600px){.brand small{letter-spacing:1.5px;white-space:nowrap}}

/* ===== CÂU CHUYỆN "Our story" (v1.22.0 — 30/09) ===== */
.story-sec{background:var(--bg2);border-block:1px solid var(--line);overflow:hidden}
.story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start}
.story-txt h2{font-size:clamp(38px,5vw,66px);margin:14px 0 36px}
.story-txt h2 span{color:var(--neon);display:block}
.story-ch{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;padding:26px 0;border-top:1px solid var(--line)}
.story-n{font-family:'Anton';font-weight:400;font-size:34px;line-height:1;color:var(--neon);opacity:.9}
.story-ch h3{font-size:24px;margin-bottom:12px}
.story-ch p{color:#c3c8bf;font-size:16px;line-height:1.75}
.story-ch p+p{margin-top:12px}
.story-ch em{color:var(--text);font-style:normal;font-weight:700;border-bottom:2px solid var(--neon)}
.story-end{border-top:1px solid var(--line);padding-top:28px;font-family:'Anton';text-transform:uppercase;font-size:clamp(24px,2.6vw,32px);line-height:1.2;letter-spacing:.5px}
.story-end span{color:var(--neon)}
.story-img{position:sticky;top:110px;margin:0;border-radius:26px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:#000}
.story-img img{width:100%;height:100%;object-fit:cover}
.story-img figcaption{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;background:rgba(7,8,7,.82);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:12px 18px 12px 14px;font-weight:700;font-size:13px;line-height:1.25;color:#c3c8bf;text-transform:uppercase;letter-spacing:1px}
.story-15{font-family:'Anton';font-size:48px;line-height:1;color:var(--neon);letter-spacing:0}

/* ===== REVIEW THẬT TRÊN GOOGLE (dải vuốt ngang) ===== */
.grev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:64px 0 24px}
.grev-head h3{font-size:clamp(30px,3.6vw,44px);margin-top:10px}
.grev-head h3 span{color:var(--neon)}
.grev{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:4px 20px 18px;margin:0 -20px;scrollbar-width:none}
.grev::-webkit-scrollbar{display:none}
.grev-card{flex:0 0 340px;scroll-snap-align:start;margin:0;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:18px;transition:border-color .2s,transform .2s}
.grev-card:hover{border-color:rgba(57,229,60,.5);transform:translateY(-3px)}
.grev-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grev-tag{background:rgba(57,229,60,.12);color:var(--neon);border:1px solid rgba(57,229,60,.35);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.grev-st{color:#ffc53d;letter-spacing:2px;font-size:14px}
.grev-card blockquote{font-size:15.5px;line-height:1.65;color:var(--text);flex:1}
.grev-card figcaption{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.grev-av{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#0b0d0b;border:1.5px solid var(--neon);color:var(--neon);font-family:'Anton';font-size:18px}
.grev-who b{display:block;font-size:15px}
.grev-who small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.grev-note{color:var(--muted);font-size:13.5px;margin-top:8px}
.grev-note a{color:var(--neon);font-weight:700}
@media (max-width:900px){
  .story{grid-template-columns:1fr;gap:32px}
  .story-img{position:relative;top:0;aspect-ratio:4/3;order:-1}
  .story-ch{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .story-n{font-size:28px}
  .story-ch h3{font-size:21px}
  .story-ch p{font-size:15px}
  .grev-card{flex-basis:82vw}
  .grev-head{margin-top:48px}
  .grev-head .reel-nav{display:none}
}

/* ===== v1.23.0: dòng ghi chú truyện + HỎI ĐÁP "barber near me" ===== */
.story-note{color:var(--muted);font-size:13px;font-style:italic;margin:-22px 0 22px}
.story-ch strong{color:var(--text);font-weight:700}
.faq{display:grid;gap:12px;max-width:900px}
.faq-it{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:0 22px;transition:border-color .2s}
.faq-it[open]{border-color:rgba(57,229,60,.45)}
.faq-it summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:700;font-size:16.5px}
.faq-it summary::-webkit-details-marker{display:none}
.faq-it summary::after{content:"+";flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(57,229,60,.12);color:var(--neon);font-size:20px;font-weight:800;transition:transform .2s}
.faq-it[open] summary::after{transform:rotate(45deg)}
.faq-it p{color:#c3c8bf;padding:0 0 20px;line-height:1.7}
@media (max-width:900px){.faq-it{padding:0 16px}.faq-it summary{font-size:15.5px;padding:17px 0}}
/* v1.24.0: bản tiếng Việt viết tay — chữ Anton có dấu (Ể, Ữ, Ộ) cần dòng thưa hơn để dấu không chạm dòng trên */
.vi-hand h1,.vi-hand h2,.vi-hand h3{line-height:1.14}
.vi-hand .story-end{line-height:1.3}
/* v1.24.1: nút dài (Book at Hanoi Massive Barber, 56 Hang Duong) xuống 2 dòng thì chữ căn giữa */
.btn{text-align:center}

/* ===== BẢN THỬ TRANG BÁN HÀNG v2 (30/09) — mọi lớp có tiền tố v2- để không đụng CSS cũ ===== */
.v2{padding-top:72px}
.v2 .wrap{max-width:760px}
.v2-hero{position:relative;min-height:calc(100svh - 72px);display:flex;align-items:flex-end;overflow:hidden;background:#000}
.v2-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.v2-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,7,.1) 0%,rgba(7,8,7,.55) 45%,var(--bg) 100%)}
.v2-hero-in{position:relative;z-index:1;padding-top:40px;padding-bottom:40px}
.v2-rate{display:inline-flex;gap:6px;align-items:center;background:rgba(7,8,7,.72);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);border-radius:99px;padding:7px 14px;font-size:13.5px;color:#d9ddd5}
.v2-rate b{color:#ffc53d}
.v2-hero h1{font-size:clamp(40px,11vw,76px);line-height:1.02;margin:16px 0 14px}
.v2-hero h1 span{color:var(--neon);display:block}
.v2-sub{color:#c9cec5;font-size:16px;line-height:1.6}
.v2-price{display:inline-flex;align-items:baseline;gap:8px;margin-top:16px;font-size:15px;color:#c9cec5}
.v2-price b{font-family:'Anton';font-weight:400;font-size:30px;color:var(--text);letter-spacing:.5px}
.v2-price span{color:var(--neon);font-weight:800}
.v2-cta{display:grid;gap:10px;margin-top:20px}
.v2-cta .btn{width:100%;padding:16px 20px;font-size:16px}
.v2-dir{display:block;margin-top:14px;font-size:13.5px;color:var(--muted)}
.v2-dir:hover{color:var(--neon)}
.v2-sec{padding:56px 0;border-top:1px solid var(--line)}
.v2-k{color:var(--neon);font-weight:800;font-size:12px;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.v2-h{font-size:clamp(32px,8vw,52px);line-height:1.05;margin-bottom:24px}
.v2-h span{color:var(--neon)}
.v2-more{display:inline-block;margin-top:18px;color:var(--neon);font-weight:700;font-size:14.5px}
.v2-note{color:var(--muted);font-size:13.5px;margin:-10px 0 18px}
/* review */
.v2-rev-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:4px 20px 8px;margin:0 -20px;scrollbar-width:none}
.v2-rev-row::-webkit-scrollbar{display:none}
.v2-rev{flex:0 0 min(84vw,340px);scroll-snap-align:start;margin:0;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px}
.v2-st{color:#ffc53d;letter-spacing:2px}
.v2-rev blockquote{font-size:16px;line-height:1.6;flex:1}
.v2-rev figcaption{color:var(--muted);font-size:12.5px}
.v2-rev figcaption b{color:var(--text)}
/* giá */
/* 03/10 ô quy đổi tiền ở khu giá (giống landing Massive Nail) */
.v2-cur{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:-4px 0 16px}
.v2-cur label{font-size:13px;color:var(--muted)}
.v2-cur select{min-height:40px;max-width:62%;background:var(--card);border:1.5px solid var(--line);border-radius:12px;color:var(--text);padding:0 10px;font:600 14px "Be Vietnam Pro";color-scheme:dark}
.v2-cur select:focus{outline:none;border-color:var(--neon)}
.v2-cur-note{color:var(--muted);font-size:12.5px;margin-top:12px}
.v2-sig{display:grid;gap:16px}
.v2-card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr)}
.v2-card-img{position:relative;aspect-ratio:16/9}
.v2-card-img img{width:100%;height:100%;object-fit:cover}
.v2-badge{position:absolute;top:12px;left:12px;background:var(--neon);color:#051005;font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.v2-card-in{padding:18px 18px 20px}
.v2-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.v2-card h3{font-size:24px;line-height:1.05}
.v2-pr{text-align:right;flex:0 0 auto}
.v2-pr b{display:block;font-family:'Anton';font-weight:400;font-size:28px;line-height:1}
.v2-pr span{color:var(--neon);font-weight:800;font-size:14px}
.v2-card p{color:#c3c8bf;font-size:14.5px;margin:10px 0 12px}
.v2-inc{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.v2-inc li{font-size:12px;font-weight:700;color:#c3c8bf;background:#0b0d0b;border:1px solid var(--line);border-radius:99px;padding:4px 10px}
.v2-inc li::before{content:"✓ ";color:var(--neon)}
.v2-card .btn{width:100%}
/* 3 bước */
.v2-steps{list-style:none;display:grid;gap:12px;margin-bottom:22px}
.v2-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.v2-steps b{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--neon);color:#051005;font-family:'Anton';font-weight:400;font-size:22px}
.v2-steps h3{font-size:19px;margin-bottom:4px}
.v2-steps p{color:#c3c8bf;font-size:14.5px}
.v2-how .btn{width:100%;padding:16px}
/* ảnh */
.v2-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px}
.v2-gal figure{margin:0}
.v2-gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:zoom-in}
/* cam kết */
.v2-prom{display:grid;gap:10px}
.v2-pr-it{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.v2-ic{font-size:26px;line-height:1.2}
.v2-pr-it h3{font-family:'Be Vietnam Pro';text-transform:none;letter-spacing:0;font-weight:800;font-size:16px;margin-bottom:2px}
.v2-pr-it p{color:#c3c8bf;font-size:14px}
.v2-check{border:1.5px dashed #ffc53d}
.v2-flag{display:inline-block;margin-top:6px;font-style:normal;font-size:12px;font-weight:700;color:#1a1400;background:#ffc53d;border-radius:6px;padding:2px 8px}
/* câu chuyện rút gọn */
.v2-lead{color:#d6dad2;font-size:17px;line-height:1.7}
.v2-lead em{font-style:normal;font-weight:700;color:var(--text);border-bottom:2px solid var(--neon)}
.v2-story .story-note{margin:12px 0 0}
.v2-more-story{margin-top:18px;border:1px solid var(--line);border-radius:16px;padding:0 18px;background:var(--card)}
.v2-more-story summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:800;color:var(--neon)}
.v2-more-story summary::-webkit-details-marker{display:none}
.v2-more-story summary::after{content:" ↓"}
.v2-more-story[open] summary::after{content:" ↑"}
.v2-more-story h3{font-size:20px;margin:18px 0 8px}
.v2-more-story p{color:#c3c8bf;font-size:15px;line-height:1.75;margin-bottom:10px}
.v2-more-story p:last-child{padding-bottom:12px}
.v2-more-story em{font-style:normal;font-weight:700;color:var(--text)}
/* bảng giá đầy đủ */
.v2-menu{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:0 16px;margin-bottom:10px}
.v2-menu summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-weight:800;font-size:16px}
.v2-menu summary::-webkit-details-marker{display:none}
.v2-menu summary small{color:var(--muted);font-weight:600}
.v2-menu summary small::after{content:" +";color:var(--neon);font-weight:800}
.v2-menu[open] summary small::after{content:" −"}
.v2-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;color:#d6dad2}
.v2-row b{flex:0 0 auto;text-align:right}
.v2-row small{display:block;color:var(--neon);font-weight:700;font-size:12px}
/* bản đồ + chốt */
.v2-map{border-radius:20px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;margin-bottom:14px}
.v2-map iframe{width:100%;height:100%;border:0;filter:grayscale(.3) invert(.9) hue-rotate(180deg)}
/* khung đặt lịch: nút chọn nhanh dịch vụ + giờ (chỉ trên bản thử) */
.v2-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.book-grid .v2-chips{grid-column:1/-1}
.v2-chip{border:1.5px solid var(--line);background:#0b0d0b;color:var(--text);border-radius:99px;padding:9px 13px;font:700 13.5px 'Be Vietnam Pro',sans-serif;cursor:pointer}
.v2-chip.on{background:var(--neon);border-color:var(--neon);color:#051005}
.v2-chip small{font-weight:600;opacity:.75}
@media (min-width:900px){
  .v2 .wrap{max-width:1000px}
  .v2-cta{grid-template-columns:1fr 1fr}
  .v2-sig{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2-prom{grid-template-columns:1fr 1fr}
  .v2-gal{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* v1.26.0: trang bán hàng v2 thành TRANG CHỦ — neo menu (#v2-…) không bị thanh trên che */
.v2 [id]{scroll-margin-top:84px}
/* v1.26.1: bản tiếng Việt — tiêu đề lớn trang chủ mới cần dòng thưa hơn để dấu (Ệ, Ủ, Ộ) không chạm dòng trên */
.vi-hand .v2-hero h1,.vi-hand .v2-h{line-height:1.16}
/* 04/10 bản dịch tay 中文 / 日本語 / 한국어: font Anton không có chữ châu Á → dùng Be Vietnam Pro đậm; tiêu đề chỉ xuống dòng ở chỗ <wbr> / dấu cách, không cắt giữa từ */
.asia-hand h1,.asia-hand h2,.asia-hand h3{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:800;letter-spacing:0;line-height:1.28}
.asia-hand h1,.asia-hand h2{word-break:keep-all;overflow-wrap:anywhere}
.asia-hand .v2-hero h1{font-size:clamp(30px,8.4vw,60px);line-height:1.22}
.asia-hand .v2-h{font-size:clamp(26px,6.8vw,44px);line-height:1.28}
/* v1.29.0: dải 20 review có avatar tròn nhỏ (ảnh thật hoặc chữ cái như Google), thẻ cao theo nội dung, không còn khoảng trống */
.v2-rev-row{align-items:flex-start}
.v2-rev{gap:10px}
.v2-rev blockquote{flex:none;font-size:15.5px}
.v2-rev-who{display:flex;align-items:center;gap:10px;color:var(--text);font-size:14px}
.v2-rev-who b{display:block;font-size:15px;line-height:1.25}
.v2-rev-who small{display:block;color:var(--muted);font-size:12px}
.v2-av{flex:0 0 40px;width:40px;height:40px;border-radius:50%;object-fit:cover;display:grid;place-items:center;color:#fff;font:700 17px 'Be Vietnam Pro',sans-serif}
.v2-rev-by{color:var(--neon);font-size:12.5px;font-weight:700}
.v2-rev-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.v2-swipe{color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap}
/* v1.29.2: nhãn nổi bật trên thẻ review (review khen thợ nói tiếng Anh) */
.v2-rev-tag{display:inline-block;margin-left:8px;vertical-align:2px;background:rgba(57,229,60,.14);color:var(--neon);border:1px solid rgba(57,229,60,.4);border-radius:99px;padding:2px 9px;font:800 11px 'Be Vietnam Pro',sans-serif;letter-spacing:.3px}
/* 30/09 v1.30: khung đặt lịch — nút ngày Today / Tomorrow / Another day thay dải nút giờ */
.bk-when{grid-column:1/-1;display:grid;gap:2px}
.bk-lbl{font-size:12px;font-weight:700;color:var(--muted)}
#bkDays .v2-chip{flex:1 1 0;min-height:46px;font-size:14.5px;white-space:nowrap}
#bkDays .v2-chip:disabled{opacity:.4;cursor:not-allowed}
.book-grid select option:disabled{color:#666}

/* ===== 02/11 LƯỚI VIDEO KIỂU TÓC TỰ CHẠY (khuôn web MSPREME): bản ngắn 360p không tiếng, chạm = xem bản đầy đủ có tiếng ===== */
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.st-tile{position:relative;margin:0;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:9/16;border:1px solid var(--line)}
.st-tile video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.st-tile figcaption{position:absolute;left:0;right:0;bottom:48px;padding:30px 10px 6px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-weight:800;font-size:14px;line-height:1.25;pointer-events:none}
.st-nopick figcaption{bottom:0;padding-bottom:12px}
.st-tile figcaption small{display:block;font-weight:600;font-size:10.5px;opacity:.8;margin-top:2px}
.st-pick{position:absolute;left:8px;right:8px;bottom:8px;min-height:36px;display:grid;place-items:center;padding:4px 6px;border-radius:10px;background:var(--neon);color:#051005;font-weight:800;font-size:13px;line-height:1.15;text-align:center;text-decoration:none}
.st-pick:hover{background:var(--neon-d)}
.st-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:16px}
.st-modal[hidden]{display:none}
.st-modal video{max-width:100%;max-height:100%;border-radius:12px;background:#000}
.st-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer}
@media(min-width:720px){.st-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}

/* ===== v1.35.0 (03/11) TRANG BÁN HÀNG GỌN: màn đầu ngắn, video kiểu tóc lên ngay dưới, ô nhỏ 3 cột như MSPREME, giữ nền cũ ===== */
.v2-hero{min-height:0}
.v2-hero-in{width:100%;padding-top:18px;padding-bottom:16px}
.v2-rate{font-size:12.5px;padding:5px 12px}
.v2-hero h1{font-size:clamp(30px,8.6vw,56px);line-height:1.04;margin:10px 0 8px}
.v2-hero .v2-sub{font-size:13.5px;line-height:1.5}
.v2-price{margin-top:8px;font-size:13.5px}
.v2-price b{font-size:24px}
.v2-hero .v2-cta{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.v2-hero .v2-cta .btn{padding:12px 8px;font-size:13.5px;line-height:1.2}
.v2-dir{margin-top:10px;font-size:12.5px}
.asia-hand .v2-hero h1{font-size:clamp(26px,7.2vw,50px)}
.v2-sec{padding:30px 0}
.v2-h{font-size:clamp(26px,7vw,40px);margin-bottom:12px}
.asia-hand .v2-h{font-size:clamp(22px,6vw,34px)}
.v2-k{font-size:11px;letter-spacing:2.5px;margin-bottom:6px}
.v2-more{margin-top:12px;font-size:13.5px}
.v2-work{border-top:0;padding-top:16px}
/* lưới video ô nhỏ: bìa trọn, chữ đè mép dưới video, nút nằm dưới video để không che tóc */
.st-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.st-tile{aspect-ratio:auto;display:flex;flex-direction:column;border-radius:10px}
.st-tile video{aspect-ratio:3/4;height:auto;flex:none;object-position:top}
.st-tile figcaption{bottom:32px;padding:16px 6px 4px;font-size:11.5px;line-height:1.2}
.st-tile figcaption small{display:none}
.st-pick{position:static;min-height:32px;border-radius:0;padding:3px 4px;font-size:11.5px}
.st-nopick video{flex:1;min-height:0;height:100%}
.st-nopick figcaption{bottom:0;padding-bottom:6px}
/* review */
.v2-rev{flex:0 0 min(74vw,290px);padding:14px;gap:8px;border-radius:16px}
.v2-rev blockquote{font-size:14px;line-height:1.5}
/* 3 dịch vụ: ảnh trái, chữ phải */
.v2-sig{gap:10px}
.v2-card{grid-template-columns:104px minmax(0,1fr);border-radius:16px}
.v2-card-img{aspect-ratio:auto;height:100%}
.v2-badge{top:6px;left:6px;font-size:9px;letter-spacing:.5px;padding:3px 7px}
.v2-card-in{padding:12px}
.v2-card-top{gap:8px}
.v2-card h3{font-size:17px;line-height:1.12}
.v2-pr b{font-size:20px}
.v2-pr span{font-size:12px}
.v2-card p{font-size:12.5px;line-height:1.4;margin:6px 0 8px}
.v2-inc{display:none}
.v2-card .btn{padding:9px 10px;font-size:13px}
.v2-cur{margin:0 0 10px}
.v2-cur select{min-height:34px;font-size:13px}
/* cam kết: ô nhỏ 2 cột */
.v2-prom{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.v2-pr-it{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px;border-radius:14px}
.v2-ic{font-size:22px}
.v2-pr-it h3{font-size:14px;line-height:1.25}
.v2-pr-it p{font-size:12.5px;line-height:1.4}
/* 3 bước */
.v2-steps{gap:8px;margin-bottom:14px}
.v2-steps li{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:10px 12px;border-radius:14px}
.v2-steps b{width:32px;height:32px;font-size:16px}
.v2-steps h3{font-size:15.5px;margin-bottom:2px}
.v2-steps p{font-size:13px;line-height:1.4}
.v2-how .btn{padding:13px}
@media(min-width:720px){.st-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}}
@media(min-width:900px){
  .v2 .wrap{max-width:1120px}
  .v2-hero-in{padding-top:32px;padding-bottom:26px}
  .v2-hero h1{font-size:clamp(40px,4.6vw,60px)}
  .v2-hero .v2-sub{font-size:15px;max-width:720px}
  .v2-hero .v2-cta{max-width:560px}
  .v2-hero .v2-cta .btn{font-size:15px}
  .v2-card{grid-template-columns:minmax(0,1fr)}
  .v2-card-img{aspect-ratio:16/9;height:auto}
  .v2-prom{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2-how .btn{width:auto;padding:13px 36px}
}
/* ảnh tiệm: 6 ô vuông đều, bỏ ô cao từ bố cục cũ; hỏi đáp, bản đồ, danh sách dịch vụ gọn theo cùng cỡ */
.v2-gal{grid-auto-rows:auto}
.v2-gal figure:nth-child(6n+1){grid-row:auto}
#faq{padding:30px 0;border-top:1px solid var(--line)}
#faq h2{font-size:clamp(26px,7vw,40px);line-height:1.05}
.asia-hand #faq h2{font-size:clamp(22px,6vw,34px);line-height:1.28}
.vi-hand #faq h2{line-height:1.16}
#faq .faq{max-width:none;gap:8px}
#faq .faq-it{border-radius:14px}
#faq .faq-it summary{padding:13px 0;font-size:14.5px}
#faq .faq-it p{font-size:14px;line-height:1.55;padding-bottom:14px}
.v2-row{padding:8px 0;font-size:13.5px}
.v2-map{aspect-ratio:16/10;border-radius:14px}
.v2-menu summary{padding:12px 0;font-size:15px}
@media(min-width:900px){.v2-map{aspect-ratio:21/8}#faq .faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}

/* 03/11 banner đặt lịch nổi: điện thoại nằm trên thanh Book now, máy tính ở góc phải dưới; chỉ hiện sau 3,5 giây */
.mb-bb{position:fixed;left:14px;right:14px;bottom:94px;z-index:58;display:grid;grid-template-columns:84px minmax(0,1fr);background:#111411;border:1.5px solid var(--neon);border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.65);animation:mbBbIn .35s ease-out}
.mb-bb[hidden]{display:none}
.mb-bb>img{width:100%;height:0;min-height:100%;object-fit:cover;object-position:top}
.mb-bb-in{padding:11px 12px;min-width:0}
.mb-bb-in b{display:block;font-size:15.5px;font-weight:800;line-height:1.25;color:var(--text);padding-right:24px}
.mb-bb-in p{margin:3px 0 9px;font-size:12.5px;line-height:1.4;color:#c3c8bf;padding-right:12px}
.mb-bb-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mb-bb-cta .btn{width:100%;min-height:38px;padding:7px 6px;font-size:13px;line-height:1.15}
.mb-bb-x{position:absolute;top:4px;right:4px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:20px;line-height:1;cursor:pointer}
@keyframes mbBbIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(min-width:961px){.mb-bb{left:auto;right:24px;bottom:24px;width:400px;grid-template-columns:110px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.mb-bb{animation:none}}
body.menu-open .mb-bb,.sheet:not([hidden])~.mb-bb{display:none}
/* 03/11 v1.35.1: mọi nút đặt lịch nhấp nháy nhẹ để hút mắt khách. Ô video chỉ đổi độ sáng vì lưới có nhiều nút và viền ô cắt mất quầng sáng */
@keyframes mbBookPulse{0%,100%{opacity:1;box-shadow:0 0 18px 2px rgba(57,229,60,.6)}50%{opacity:.76;box-shadow:0 0 0 0 rgba(57,229,60,0)}}
@keyframes mbPickPulse{0%,100%{opacity:1}50%{opacity:.72}}
a.btn[href*="booking.easysalon"]{animation:mbBookPulse 1.6s ease-in-out infinite}
a.st-pick[href*="booking.easysalon"]{animation:mbPickPulse 1.6s ease-in-out infinite}
a.btn[href*="booking.easysalon"]:hover,a.st-pick[href*="booking.easysalon"]:hover{animation:none}
@media(prefers-reduced-motion:reduce){a.btn[href*="booking.easysalon"],a.st-pick[href*="booking.easysalon"]{animation:none}}
/* 03/11 v1.35.2: trên điện thoại banner đặt lịch nằm giữa màn hình và rung nhẹ mỗi 3 giây */
@keyframes mbBbShake{0%,76%,100%{transform:none}80%{transform:translateX(-3px) rotate(-1deg)}84%{transform:translateX(3px) rotate(1deg)}88%{transform:translateX(-2px) rotate(-.6deg)}92%{transform:translateX(2px) rotate(.6deg)}96%{transform:none}}
@media(max-width:960px){.mb-bb{top:0;bottom:0;margin:auto 0;height:fit-content;animation:mbBbIn .35s ease-out,mbBbShake 3s ease-in-out .5s infinite}}
@media(prefers-reduced-motion:reduce){.mb-bb{animation:none}}
@media(max-width:360px){.mb-bb{grid-template-columns:60px minmax(0,1fr)}.mb-bb>img{object-position:right top}.mb-bb-cta .btn{gap:4px;padding:7px 2px;font-size:12px;white-space:nowrap}.mb-bb-cta .btn svg{width:14px;height:14px}.fab a{padding-left:8px;padding-right:8px;white-space:nowrap}}
/* 03/11 v1.35.3: banner đặt lịch bị chìm vì nền tối trên trang tối, cùng màu với các nút phía sau. Đổi nền sáng, viền neon, điện thoại có lớp tối phủ trang (chạm là đóng), ảnh lên đầu, chữ to */
.mb-bb{background:#fff;border:0;box-shadow:0 0 0 3px var(--neon),0 0 44px rgba(57,229,60,.55),0 22px 60px rgba(0,0,0,.6);z-index:70;border-radius:20px}
.mb-bb-in{padding:14px 16px 16px}
.mb-bb-in b{color:#0b0f0b;font-size:18px;padding-right:18px}
.mb-bb-in p{color:#3c433c;font-size:13.5px;margin:4px 0 12px;padding-right:0}
.mb-bb-cta{gap:8px}
.mb-bb-cta .btn{min-height:46px;font-size:14.5px}
.mb-bb-cta .btn.ghost{background:#fff;color:#0b0f0b;border:1.5px solid #0b0f0b;backdrop-filter:none}
.mb-bb-cta .btn.ghost svg{color:#1a9e3d}
.mb-bb-x{top:8px;right:8px;width:38px;height:38px;background:rgba(0,0,0,.72);z-index:1}
.mb-bb-dim{display:none}
@media(max-width:960px){
.mb-bb-dim:not([hidden]){display:block;position:fixed;inset:0;z-index:69;background:rgba(0,0,0,.68);backdrop-filter:blur(3px);animation:mbDimIn .3s ease-out}
.mb-bb,.mb-bb.mb-bb{left:18px;right:18px;grid-template-columns:minmax(0,1fr)}
.mb-bb>img,.mb-bb.mb-bb>img{height:auto;min-height:0;aspect-ratio:16/9;object-position:top}
.mb-bb-in b{font-family:Anton,"Be Vietnam Pro",sans-serif;font-weight:400;font-size:27px;line-height:1.2;letter-spacing:.3px;text-transform:uppercase;padding-right:0}
.mb-bb-in p{font-size:14.5px}
.mb-bb-cta{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.mb-bb-cta .btn{min-height:52px;font-size:15.5px}
}
@media(max-width:360px){.mb-bb-cta .btn{font-size:13.5px;padding:7px 4px}.mb-bb-in b{font-size:24px}}
@media(max-width:960px) and (max-height:620px){.mb-bb>img,.mb-bb.mb-bb>img{aspect-ratio:16/6}}
@keyframes mbDimIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.mb-bb-dim:not([hidden]){animation:none}}
@keyframes mbBbBtn{0%,100%{box-shadow:0 0 16px 3px rgba(57,229,60,.75);transform:scale(1)}50%{box-shadow:0 0 0 0 rgba(57,229,60,0);transform:scale(1.025)}}
.mb-bb a.btn[href*="booking.easysalon"]{background:#2ad12e;animation:mbBbBtn 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.mb-bb a.btn[href*="booking.easysalon"]{animation:none}}
@media(max-width:960px){.mb-bb-x{right:auto;left:8px}}

/* 09/11 v1.35.5: popup đặt lịch bản A2 — gọn giữa màn hình điện thoại, ảnh tiệm đông khách thấy trọn quán, viền neon nháy + rung để khách book. Khối thường (không grid) để Safari iPhone không xếp chữ đè ảnh; căn giữa bằng translate để không đụng transform của hoạt ảnh rung */
@keyframes mbBbBlink{0%,100%{box-shadow:0 0 0 3px var(--neon),0 0 30px rgba(57,229,60,.45),0 22px 60px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 5px #b6ff9a,0 0 80px 16px rgba(57,229,60,1),0 22px 60px rgba(0,0,0,.6)}}
.mb-bb,.mb-bb.mb-bb{display:block}
.mb-bb[hidden]{display:none}
body.menu-open .mb-bb,.sheet:not([hidden])~.mb-bb{display:none}
.mb-bb>img,.mb-bb.mb-bb>img{display:block;width:100%;height:auto;min-height:0;aspect-ratio:1200/674;object-fit:cover;object-position:center}
@media(max-width:960px){
.mb-bb,.mb-bb.mb-bb{left:10%;right:10%;top:50%;bottom:auto;margin:0;height:auto;translate:0 -50%;animation:mbBbIn .35s ease-out,mbBbShake 3s ease-in-out .5s infinite,mbBbBlink 1.2s ease-in-out .4s infinite}
.mb-bb-in b{font-size:22px}
.mb-bb-in p{font-size:13px}
.mb-bb-cta .btn{min-height:44px;font-size:13.5px;padding:7px 4px;gap:5px}
.mb-bb-cta .btn svg{width:18px;height:18px}
}
@media(max-width:360px){.mb-bb,.mb-bb.mb-bb{left:12px;right:12px}.mb-bb-in b{font-size:20px}}
@media(prefers-reduced-motion:reduce){.mb-bb,.mb-bb.mb-bb{animation:none}}
/* 09/11 v1.35.6: máy tính — nút X sang góc trái để không đè logo trong ảnh */
.mb-bb-x{right:auto;left:8px}