/* PUPI — web bán lẻ. Concept "Bầu trời & Mây": cyan theo logo · mây trắng · nền sáng sạch. Coral chỉ cho giá / sale. */

/* ================= DESIGN TOKENS ================= */
:root{
  /* brand (cyan theo logo) */
  --pri:#34C3E8; --pri-h:#1FB6DD; --pri-d:#119BC2; --pri-ink:#0B7FA3; --pri-l:#E8F9FE;
  /* bầu trời */
  --sky-top:#53CFF2; --sky-mid:#7FDCFA; --sky-soft:#DFF7FF;
  /* mây */
  --cloud:#FFFFFF; --cloud-shadow:#EAF5FB;
  /* nền / chữ */
  --bg:#FCFBF8; --surface:#FFFFFF; --line:#E8E3DC; --line2:#F1EEE9; --tint:#F6FBFE;
  --text:#4D392F; --muted:#7A6B62; --brown:#4D392F;
  /* nhấn */
  --coral:#F26D85; --coral-d:#E2506B; --coral-l:#FDE9ED; --yellow:#FFD76A; --brand-bear:#d48a52;
  --ok:#2f8f4e; --warn:#b7791f; --bad:#d64545; --gray:#9aa3a9;
  /* hình khối */
  --r:18px; --r-sm:12px; --shadow:0 6px 22px rgba(30,110,150,.08); --shadow-h:0 14px 34px rgba(30,110,150,.16);
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif; --display:'Baloo 2','Be Vietnam Pro',system-ui,sans-serif;
  /* ANIMATION TOKENS — mây trôi rất chậm, chỉ ở vùng sky */
  --cloud-dur-1:35s; --cloud-dur-2:50s; --cloud-dur-3:9s; --float-dur:7s; --ease-soft:cubic-bezier(.45,.05,.35,1);
  --t-fast:.15s; --t-med:.25s;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 var(--font);overflow-x:hidden}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:var(--text)}
h1,h2,h3{font-family:var(--display);color:var(--brown);line-height:1.2;margin:0}
.wrap{max-width:1360px;margin:0 auto;padding:0 16px}
.ic{width:20px;height:20px;flex:0 0 auto}
.muted{color:var(--muted)} .small{font-size:13px}
.m-only{display:none!important}
[hidden]{display:none!important}
.heart-mini{width:18px;height:18px;display:inline-block;vertical-align:-2px}
:focus-visible{outline:2.5px solid var(--pri);outline-offset:2px}

/* ================= BUTTONS ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:999px;padding:9px 20px;font-weight:600;font-size:14px;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);white-space:nowrap;background:none}
.btn .ic{width:17px;height:17px}
.btn:active{transform:scale(.97)}
.btn-lg{padding:12px 28px;font-size:15px}
.btn-block{width:100%}
.btn-pri{background:var(--pri);color:#fff;box-shadow:0 6px 16px rgba(52,195,232,.32)}
.btn-pri:hover{background:var(--pri-h);box-shadow:0 8px 20px rgba(31,182,221,.38)}
.btn-pri-o{border-color:var(--pri);color:var(--pri-d);background:#fff}
.btn-pri-o:hover{background:var(--pri-l)}
.btn-sale{background:var(--coral);color:#fff}
.btn-sale:hover{background:var(--coral-d)}
.btn-ghost{border-color:var(--line);background:#fff;color:var(--brown)}
.btn-ghost:hover{border-color:var(--pri);color:var(--pri-d)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.link{background:none;border:0;padding:4px}

/* ================= HEADER ================= */
.preview-bar{background:#fff4cf;color:#7a5200;font-size:13px;text-align:center;padding:7px 16px}
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line2)}
.hdr-in{display:flex;align-items:center;gap:22px;height:72px}
.logo{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.logo-mark{height:38px;width:auto}
.logo-bear{width:44px;height:44px;border-radius:12px;object-fit:cover}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-txt b{font-family:var(--display);font-weight:800;font-size:30px;color:var(--pri);letter-spacing:1px}
.logo-txt i{font-style:normal;font-size:9.5px;color:var(--pri-d);font-weight:600;margin-top:1px}
.hdr-nav{display:flex;gap:4px;margin-left:12px}
.hdr-nav a{position:relative;padding:8px 14px;border-radius:999px;font-weight:600;font-size:14.5px;color:var(--brown);transition:color var(--t-fast)}
.hdr-nav a:hover{color:var(--pri-d)}
.hdr-nav a.on{color:var(--pri-d)}
.hdr-nav a.on::after{content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2.5px;border-radius:2px;background:var(--pri)}
.hdr-search{flex:1;max-width:300px;margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--tint);border:1.5px solid var(--line2);border-radius:999px;padding:0 14px;height:42px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.hdr-search:focus-within,.m-search:focus-within{border-color:var(--pri);box-shadow:0 0 0 4px rgba(52,195,232,.15);background:#fff}
.hdr-search input{border:0;background:none;outline:none;width:100%;font-size:13.5px}
.hdr-search .ic{color:var(--muted);width:18px}
.hdr-act{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--brown);position:relative;flex:0 0 auto}
.hdr-act:hover{color:var(--pri-d)}
.hdr-act .ic{width:23px;height:23px}
.cart-n{position:absolute;top:-8px;left:14px;background:var(--coral);color:#fff;font-size:11px;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px;font-weight:700}
.cart-n.bump{animation:bump .45s var(--ease-soft)}
@keyframes bump{30%{transform:scale(1.45)}60%{transform:scale(.9)}}
.hdr-burger{display:none;background:none;border:0;padding:6px;margin-left:-6px}
.hdr-burger .ic{width:26px;height:26px}
.m-search{display:none}
.drawer{position:fixed;inset:0;z-index:100;background:rgba(20,60,80,.32)}
.drawer-in{background:#fff;width:min(320px,86vw);height:100%;padding:16px 20px;display:flex;flex-direction:column;gap:2px;overflow:auto;animation:slideIn .22s var(--ease-soft)}
.drawer-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.drawer-h button{background:none;border:0}
.drawer-in>a{padding:13px 4px;border-bottom:1px solid var(--line2);font-weight:600;color:var(--brown)}
.drawer-in>a:hover{color:var(--pri-d)}
@keyframes slideIn{from{transform:translateX(-30px);opacity:0}}

/* ================= SKY WORLD — hệ mây dùng chung =================
   Lớp (dưới → trên): nền trời (gradient) → mây xa (.cband.far) → mây gần (.cband.near) → nội dung → viền chuyển cảnh (.bank / .wave / .sky-edge)
   Mây = DẢI LẶP NGANG toàn chiều rộng (tile 1440px, đám mây nằm gọn trong tile → trôi vòng liền mạch, không "giật").
   Chỉ animate transform (GPU). Parallax cuộn: app.js đặt translateY trên wrapper [data-par]. */
:root{--cl-far:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1440' height='220' viewBox='0 0 1440 220'%3E%3Cdefs%3E%3Csymbol id='c' viewBox='0 0 200 96'%3E%3Cpath fill='%23fff' d='M42 92C19 92 6 77 11 61c4-12 17-18 30-15 4-20 23-33 44-29 13-13 38-11 49 7 19-6 40 6 41 26 13 3 20 15 15 27-3 9-11 15-21 15z'/%3E%3C/symbol%3E%3C/defs%3E%3Cuse href='%23c' xlink:href='%23c' x='30' y='40' width='110' height='53' opacity='0.6'/%3E%3Cuse href='%23c' xlink:href='%23c' x='250' y='120' width='70' height='34' opacity='0.5'/%3E%3Cuse href='%23c' xlink:href='%23c' x='410' y='26' width='140' height='67' opacity='0.55'/%3E%3Cuse href='%23c' xlink:href='%23c' x='640' y='100' width='90' height='43' opacity='0.6'/%3E%3Cuse href='%23c' xlink:href='%23c' x='830' y='16' width='120' height='58' opacity='0.5'/%3E%3Cuse href='%23c' xlink:href='%23c' x='1010' y='128' width='80' height='38' opacity='0.55'/%3E%3Cuse href='%23c' xlink:href='%23c' x='1170' y='54' width='150' height='72' opacity='0.6'/%3E%3Cuse href='%23c' xlink:href='%23c' x='1350' y='140' width='60' height='29' opacity='0.45'/%3E%3C/svg%3E");--cl-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1440' height='240' viewBox='0 0 1440 240'%3E%3Cdefs%3E%3Csymbol id='c' viewBox='0 0 200 96'%3E%3Cpath fill='%23fff' d='M42 92C19 92 6 77 11 61c4-12 17-18 30-15 4-20 23-33 44-29 13-13 38-11 49 7 19-6 40 6 41 26 13 3 20 15 15 27-3 9-11 15-21 15z'/%3E%3C/symbol%3E%3C/defs%3E%3Cuse href='%23c' xlink:href='%23c' x='70' y='96' width='220' height='106' opacity='0.92'/%3E%3Cuse href='%23c' xlink:href='%23c' x='500' y='34' width='170' height='82' opacity='0.85'/%3E%3Cuse href='%23c' xlink:href='%23c' x='840' y='120' width='250' height='120' opacity='0.9'/%3E%3Cuse href='%23c' xlink:href='%23c' x='1210' y='62' width='190' height='91' opacity='0.85'/%3E%3C/svg%3E");--cl-small:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1440' height='170' viewBox='0 0 1440 170'%3E%3Cdefs%3E%3Csymbol id='c' viewBox='0 0 200 96'%3E%3Cpath fill='%23fff' d='M42 92C19 92 6 77 11 61c4-12 17-18 30-15 4-20 23-33 44-29 13-13 38-11 49 7 19-6 40 6 41 26 13 3 20 15 15 27-3 9-11 15-21 15z'/%3E%3C/symbol%3E%3C/defs%3E%3Cuse href='%23c' xlink:href='%23c' x='20' y='60' width='90' height='43' opacity='0.75'/%3E%3Cuse href='%23c' xlink:href='%23c' x='290' y='18' width='70' height='34' opacity='0.65'/%3E%3Cuse href='%23c' xlink:href='%23c' x='510' y='96' width='110' height='53' opacity='0.75'/%3E%3Cuse href='%23c' xlink:href='%23c' x='760' y='36' width='80' height='38' opacity='0.7'/%3E%3Cuse href='%23c' xlink:href='%23c' x='980' y='104' width='100' height='48' opacity='0.75'/%3E%3Cuse href='%23c' xlink:href='%23c' x='1210' y='30' width='90' height='43' opacity='0.7'/%3E%3C/svg%3E");
  --band-far-dur:60s;--band-near-dur:36s;--band-small-dur:48s;--world-light:#F3FAFE}
.sky{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 60% 50% at 78% 12%,rgba(255,255,255,.5) 0,transparent 70%),linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 52%,#B5EAFB 100%)}
.sky.soft{background:radial-gradient(ellipse 60% 60% at 85% 0%,rgba(255,255,255,.7) 0,transparent 70%),linear-gradient(180deg,#A9E7FB 0%,var(--sky-soft) 70%,#EEF9FE 100%)}
.sky>*:not(.clouds):not(.bank):not(.wave):not(.sky-edge):not(.bigtype):not(.scroll-hint){position:relative;z-index:3}
.clouds{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cpar{position:absolute;left:0;right:0;will-change:transform}
.cband{height:100%;width:calc(100% + 1440px);background-repeat:repeat-x;background-position:0 0;will-change:transform;animation:band var(--band-far-dur) linear infinite}
.cband.far{background-image:var(--cl-far);background-size:1440px 220px;height:220px}
.cband.near{background-image:var(--cl-near);background-size:1440px 240px;height:240px;animation-duration:var(--band-near-dur);animation-direction:reverse;filter:drop-shadow(0 8px 14px rgba(30,130,180,.10))}
.cband.small{background-image:var(--cl-small);background-size:1440px 170px;height:170px;animation-duration:var(--band-small-dur)}
@keyframes band{to{transform:translateX(-1440px)}}
.sparkle{position:absolute;z-index:2;color:#fff;opacity:.85;width:14px;height:14px;animation:twinkle 4.5s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.2;transform:scale(.7)}}
/* thềm mây 3 lớp ở đáy hero — lớp trước đặc, có phần "đế" kéo dài để khi dâng lên (parallax) không lộ khe */
.bank{position:absolute;left:0;right:0;bottom:-1px;z-index:4;pointer-events:none;will-change:transform}
.bank svg{display:block;width:100%;height:150px}
.bank .b1{fill:#fff;opacity:.45} .bank .b2{fill:#fff;opacity:.75} .bank .b3{fill:var(--world-light)}
.bank::after{content:'';display:block;height:180px;margin-top:-1px;background:var(--world-light)}
.bank{margin-bottom:-180px}
/* sóng mềm ở ĐẦU vùng trời (nền sáng → trời); khối tư vấn nằm ở đoạn nền đã về kem */
.cta-full .wave{fill:var(--bg)}
.wave{position:absolute;left:0;right:0;top:-1px;z-index:4;display:block;width:100%;height:84px;fill:var(--world-light);pointer-events:none}
/* viền mây nhỏ ở ĐÁY vùng trời (trời → nền sáng) */
.sky-edge{position:absolute;left:0;right:0;bottom:-1px;z-index:4;display:block;width:100%;height:64px;fill:var(--world-light);pointer-events:none}

/* ================= HERO — bầu trời toàn màn hình + gấu PUPI tương tác =================
   Biến do app.js cập nhật (lerp + rAF):  --mx, --my ∈ [-1,1] vị trí chuột so với gấu · --sp ∈ [0,1] tiến độ cuộn qua hero.
   Chỉ dùng transform / translate / rotate / opacity (GPU). prefers-reduced-motion → đứng yên (cuối file). */
.hero{--mx:0;--my:0;--sp:0;min-height:calc(100svh - 72px);padding-bottom:96px;display:flex;align-items:center}
/* mây: mỗi tầng phản ứng chuột khác nhau (xa ~ đứng yên, gần dịch rõ) + dâng lên theo cuộn */
.hero .cpar.far{top:4%;height:220px;translate:calc(var(--mx) * -3px) calc(var(--my) * -2px);transform:translateY(calc(var(--sp) * -40px))}
.hero .cpar.far2{top:40%;height:220px;opacity:.6;translate:calc(var(--mx) * -7px) calc(var(--my) * -4px);transform:translateY(calc(var(--sp) * -90px))}
.hero .cpar.near{bottom:100px;height:240px;translate:calc(var(--mx) * -16px) calc(var(--my) * -8px);transform:translateY(calc(var(--sp) * -200px))}
/* chữ khổng lồ phía sau gấu */
.bigtype{position:absolute;z-index:2;right:2%;top:50%;font-family:var(--display);font-weight:800;font-size:clamp(150px,25vw,400px);line-height:.8;letter-spacing:-.02em;
  color:#fff;opacity:calc(.42 - var(--sp) * .5);pointer-events:none;user-select:none;text-shadow:0 20px 60px rgba(17,110,150,.18);
  transform:translateY(-55%) translate(calc(var(--mx) * -10px),calc(var(--my) * -6px))}
.hero-in{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:10px;width:100%;flex:1 1 auto}
.hero-copy{padding:30px 0;opacity:clamp(0,calc((.78 - var(--sp)) / .38),1);transform:translateY(calc(var(--sp) * -70px))}
.hero-copy>*{animation:riseIn .8s var(--ease-soft) both}
.hero-copy>:nth-child(2){animation-delay:.08s}.hero-copy>:nth-child(3){animation-delay:.16s}.hero-copy>:nth-child(4){animation-delay:.24s}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}}
.kicker{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:700;color:var(--pri-ink);margin:0 0 16px;background:rgba(255,255,255,.75);padding:6px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(17,110,150,.10)}
.hero h1{font-size:clamp(34px,4.4vw,58px);font-weight:800;color:#2f2119}
.hero h1 span{color:#05668A;text-shadow:0 2px 0 rgba(255,255,255,.75)}
.hero-text{max-width:440px;margin:18px 0 28px;color:#33241d;font-weight:500;font-size:16px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-pri{background:var(--pri-d)}
.hero .btn-pri:hover{background:var(--pri-ink)}
.hero .btn-pri-o{border-color:#fff}
/* GẤU: stage (cuộn) → look (chuột: dịch/nghiêng cả con) → float (idle bồng bềnh) → svg bộ phận (đầu/mắt theo chuột, chớp, thở, vẫy) */
.bear-stage{position:relative;height:min(58vh,560px);aspect-ratio:400/500;justify-self:center;transform:translateY(calc(max(0, var(--sp) - .35) * -170px)) scale(calc(1 - var(--sp) * .06))}
.bear-look{position:absolute;inset:0 0 34px;translate:calc(var(--mx) * 15px) calc(var(--my) * 10px);rotate:calc(var(--mx) * 2deg);animation:bearIn 1s var(--ease-soft) .2s both}
.bear-float{width:100%;height:100%;animation:idleFloat 6s ease-in-out 1.2s infinite alternate}
.bear{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 22px 30px rgba(17,95,130,.22))}
.bear .b-head{transform-box:view-box;transform-origin:200px 262px;transform:translate(calc(var(--mx) * 9px),calc(var(--my) * 6px)) rotate(calc(var(--mx) * 7deg))}
.bear .b-eyes{transform:translate(calc(var(--mx) * 8px),calc(var(--my) * 6px))}
.bear .b-eye{transform-box:fill-box;transform-origin:center;animation:blink 5.5s infinite}
.bear .b-eye+.b-eye{animation-delay:.02s}
.bear .b-body{transform-box:view-box;transform-origin:200px 455px;animation:breathe 4.2s ease-in-out infinite alternate}
.bear .b-armR{transform-box:view-box;transform-origin:282px 292px;animation:wave 1.8s var(--ease-soft) 1.4s 1}
@keyframes bearIn{from{opacity:0;transform:translateY(60px) scale(.9)}}
@keyframes idleFloat{to{transform:translateY(-5px)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
@keyframes breathe{to{transform:scale(1.012,1.018)}}
@keyframes wave{0%,100%{transform:rotate(0)}20%{transform:rotate(-38deg)}40%{transform:rotate(-18deg)}60%{transform:rotate(-38deg)}80%{transform:rotate(-14deg)}}
.bear-seat{position:absolute;left:-8%;right:-8%;bottom:0;width:116%;z-index:2;filter:drop-shadow(0 10px 18px rgba(17,110,150,.18));translate:calc(var(--mx) * 6px) calc(var(--my) * 3px)}
.hero-bubble{position:absolute;right:-6%;top:6%;z-index:5;background:#fff;border-radius:999px 999px 999px 18px;padding:12px 18px;text-align:center;
  font-family:var(--display);font-size:15px;font-weight:700;line-height:1.25;color:var(--pri-ink);box-shadow:0 10px 24px rgba(17,110,150,.18);animation:popIn .7s var(--ease-soft) 1.6s both;translate:calc(var(--mx) * 20px) calc(var(--my) * 12px)}
@keyframes popIn{from{opacity:0;transform:translateY(20px) scale(.85)}}
.hero-script img{height:16px;width:auto;display:inline-block;vertical-align:-2px;margin-right:4px}
.hero-script{display:flex;align-items:center;gap:2px;position:absolute;left:50%;bottom:-6px;z-index:5;white-space:nowrap;font-family:var(--display);font-weight:700;color:#fff;background:var(--pri);padding:7px 16px;border-radius:999px;font-size:14px;line-height:1.2;box-shadow:0 8px 20px rgba(17,110,150,.2);transform:translateX(-50%);animation:popIn .7s var(--ease-soft) 1.9s both}
/* thềm mây: dâng lên che hero ở nhịp cuối của cuộn (80–100%) */
.hero .bank{transform:translateY(calc(max(0, var(--sp) - .4) * -380px))}
.hero .bank::after{height:420px}
.hero .bank{margin-bottom:-420px}
/* gợi ý cuộn */
.scroll-hint{position:absolute;left:50%;bottom:58px;z-index:5;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.9);border-radius:14px;opacity:calc(1 - var(--sp) * 4)}
.scroll-hint span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:hint 1.8s ease-in-out infinite}
@keyframes hint{60%{transform:translateY(12px);opacity:0}}

/* ================= TRUST ================= */
.trust{display:grid;grid-template-columns:1fr auto;gap:16px;margin-top:-118px;position:relative;z-index:6}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 10px}
.trust-i{display:flex;align-items:center;gap:12px;padding:4px 14px;border-right:1px solid var(--line2)}
.trust-i:last-child{border-right:0}
.trust-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--pri-l);color:var(--pri-d);box-shadow:inset 0 0 0 1px #d3f1fb}
.trust-ic .ic{width:22px;height:22px}
.trust-i b{display:block;color:var(--brown);font-size:13.5px}
.trust-i small{color:var(--muted);font-size:12px}
.trust-note{background:linear-gradient(135deg,#E3F7FE,#fff);border:1px solid #d6f1fb;display:flex;align-items:center;gap:10px;border-radius:var(--r);padding:10px 22px;font-family:var(--display);font-weight:600;color:var(--pri-ink);font-size:15px;line-height:1.25}
.trust-note .logo-bear{width:48px}

/* ================= SECTIONS ================= */
.sec{margin-top:48px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.sec-h h2{font-size:clamp(22px,2.6vw,28px);font-weight:800}
.sec-h p{margin:2px 0 0;color:var(--muted);font-size:14px}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--pri-d);white-space:nowrap}
.more:hover{color:var(--pri-ink)}
.more .ic{width:16px;transition:transform var(--t-fast)}
.more:hover .ic{transform:translateX(3px)}

/* collections */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.col-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;min-height:150px;transition:transform var(--t-med),box-shadow var(--t-med)}
.col-img{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--tint,#F6FBFE)}
.col-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s,opacity .9s ease}
.col-img img.fade-in{opacity:0}
.col-txt{padding:12px 56px 16px 16px;display:flex;flex-direction:column;border-top:3px solid var(--tint)}
.col-txt b{font-family:var(--display);color:var(--brown);font-size:18px;line-height:1.25}
.col-txt small{color:var(--muted);font-size:13.5px}
.col-go{position:absolute;right:14px;bottom:16px;width:34px;height:34px;border-radius:50%;background:var(--pri-l);display:grid;place-items:center;color:var(--pri-d);transition:background var(--t-fast),color var(--t-fast)}
.col-go .ic{width:15px}
.col-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.col-card:hover .col-img img{transform:scale(1.05)}
.col-card:hover .col-go{background:var(--pri);color:#fff}

/* product grid + card */
.grid{display:grid;gap:20px}
.g5{grid-template-columns:repeat(4,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;transition:transform var(--t-med),box-shadow var(--t-med);border:1px solid var(--line2)}
.card:hover{box-shadow:var(--shadow-h);transform:translateY(-4px)}
.card-img{position:relative;aspect-ratio:1/1;background:var(--tint);overflow:hidden;margin:10px 10px 0;border-radius:16px}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.card:hover .card-img img{transform:scale(1.04)}
.badge{position:absolute;top:18px;left:18px;font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap;width:max-content;line-height:1.3}
.badge.hot{background:var(--yellow);color:#6b4a00}
.badge.best{background:var(--pri);color:#fff}
.badge.new{background:var(--pri-l);color:var(--pri-d);box-shadow:inset 0 0 0 1px #c9eefb}
.badge.sale{left:auto;right:8px;top:auto;bottom:8px;background:var(--coral);color:#fff}
.pd-badges .badge{position:static}
.card-out{position:absolute;left:8px;bottom:8px;background:#eef0f2;color:#68737a;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px}
.card-heart{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.95);display:grid;place-items:center;color:var(--coral);box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform var(--t-fast)}
.card-heart:hover{transform:scale(1.1)}
.card-heart .ic{width:17px}
.card-heart.on .ic{fill:var(--coral)}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-name{font-size:16.5px;font-weight:600;color:var(--brown);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:46px}
.card-name:hover{color:var(--pri-d)}
.card-sizes{display:flex;gap:4px;flex-wrap:wrap}
.card-sizes span{font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:1px 8px;color:var(--muted)}
.card-price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.card-price b{color:var(--coral);font-size:21px;font-weight:700}
.card-price b small{font-size:13.5px;font-weight:500}
.card-price s,.pd-price s,.ci-price s{color:var(--muted);font-size:13px}
.card .btn{padding:11px 12px;font-size:15px}

/* best + promo */
.best-row{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:stretch}
.best-row .g5{grid-template-columns:repeat(3,1fr)}
.promo{border-radius:var(--r);padding:26px;display:flex;flex-direction:column;min-height:360px}
.promo h3{font-size:26px;color:#2f2119;font-weight:800}
.promo h3 span{color:var(--pri-ink);font-size:23px}
.promo p{font-size:13.5px;color:#3d2d25;margin:8px 0 16px;max-width:280px}
.promo-art{position:relative;flex:1;min-height:170px}
.promo-art img{position:absolute;border-radius:22px;object-fit:cover;border:5px solid #fff;box-shadow:0 12px 26px rgba(17,110,150,.2)}
.promo-art .pi0{width:150px;height:150px;right:6px;bottom:0}
.promo-art .pi1{width:110px;height:110px;right:140px;bottom:20px;transform:rotate(-5deg)}
.promo-art .pi2{width:84px;height:84px;right:96px;top:0;transform:rotate(6deg)}
.promo-note{position:absolute;left:0;bottom:6px;background:#fff;border-radius:16px 16px 16px 4px;padding:8px 12px;font-family:var(--display);font-weight:600;color:var(--pri-ink);box-shadow:var(--shadow);font-size:14px;line-height:1.2}

/* CTA section (sky) */
.cta-full{margin-top:70px;padding:120px 0 110px}
.cta-full .cpar.small{top:70px;height:170px}
.cta-full .cpar.far{bottom:30px;height:220px;opacity:.8}
.cta-sky{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.cta-sky h2{font-size:clamp(24px,3vw,32px);color:#2f2119}
.cta-sky p{color:#3d2d25;margin:8px 0 18px;max-width:520px}
.cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.cta-pics{display:flex;justify-content:flex-end;gap:12px}
.cta-pics img{width:120px;height:120px;border-radius:22px;object-fit:cover;border:5px solid #fff;box-shadow:0 12px 26px rgba(17,110,150,.18)}
.cta-pics img:nth-child(2){transform:translateY(-14px) rotate(3deg)}
.cta-pics img:nth-child(1){transform:rotate(-4deg)}

/* reviews, community, faq */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review{margin:0;background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--shadow);display:flex;gap:12px}
.review img{width:84px;height:84px;border-radius:12px;object-fit:cover}
.review b{display:block;color:var(--brown)}
.stars{color:#f5b423;letter-spacing:1px;font-size:13px}
.review p{font-size:13px;margin:4px 0 0}
.community-in{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:center;background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.community-in h2{font-size:26px}
.community-in p{color:var(--muted);font-size:14px}
.community-btns{display:flex;gap:10px;flex-wrap:wrap}
.community-pics{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.community-pics img{aspect-ratio:1;object-fit:cover;border-radius:14px;width:100%;transition:transform var(--t-med)}
.community-pics a:hover img{transform:scale(1.04)}
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{background:#fff;border-radius:var(--r-sm);border:1px solid var(--line2);padding:0 18px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.faq details:hover{border-color:#c9eefb}
.faq details[open]{border-color:#c9eefb;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--brown);list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--pri-d);font-size:22px;line-height:1;transition:transform var(--t-med)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 14px;color:var(--muted);animation:faqIn var(--t-med) var(--ease-soft)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}}
.faq-mini .faq{display:grid;grid-template-columns:1fr 1fr}

/* ================= BREADCRUMB · BANNER · LISTING ================= */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);padding-top:16px;padding-bottom:4px}
.crumbs a:hover{color:var(--pri-d)} .crumbs i{font-style:normal;opacity:.5}
.crumbs span{color:var(--brown)}
.banner-full{padding-bottom:40px}
.banner-full .crumbs{position:relative;z-index:2}
.banner{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:18px;padding-bottom:22px;min-height:140px}
.banner h1{font-size:clamp(26px,3vw,36px);font-weight:800;color:#2f2119}
.banner p{margin:6px 0 0;color:#3d2d25;max-width:620px}
.banner-n{background:#fff;color:var(--pri-ink);border-radius:999px;padding:5px 14px;font-weight:700;font-size:13px;white-space:nowrap;box-shadow:0 4px 12px rgba(17,110,150,.12)}
@media (min-width:961px){.listing .g4{grid-template-columns:repeat(3,1fr)}}   /* chỉ máy tính — trước đây đè luôn lên điện thoại (thành 3 cột) */
.listing{display:grid;grid-template-columns:240px 1fr;gap:26px;margin-top:22px;align-items:start}
.filters{position:sticky;top:90px;background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.filters-h{display:none}
.fgroup h3{font-family:var(--font);font-size:12.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:6px}
.fopt{display:flex;justify-content:space-between;padding:6px 10px;border-radius:10px;font-size:14px;color:var(--brown);transition:background var(--t-fast)}
.fopt small{color:var(--muted)}
.fopt:hover{background:var(--tint)}
.fopt.on{background:var(--pri-l);color:var(--pri-ink);font-weight:600}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchips .fopt{border:1px solid var(--line);padding:4px 10px}
.fchips .fopt.on{border-color:var(--pri)}
.listing-bar{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:14px}
.sort label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.sort select{border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;background:#fff;color:var(--brown);font-weight:600}
.sort select:focus{border-color:var(--pri);outline:none}
.pager{display:flex;justify-content:center;gap:6px;margin-top:26px}
.pager a{min-width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid var(--line);font-weight:600;transition:border-color var(--t-fast)}
.pager a:hover{border-color:var(--pri)}
.pager a.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.empty{text-align:center;padding:50px 16px;color:var(--muted)}
.empty.big{padding:80px 16px}
.empty.big .logo-bear{width:90px;height:80px;margin:0 auto 14px}
.empty.big h1{margin-bottom:8px}

/* ================= PRODUCT DETAIL (nền sạch) ================= */
.pd-top{background:linear-gradient(180deg,var(--sky-soft),rgba(223,247,255,0));padding-bottom:4px}
.pd{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;margin-top:12px;align-items:start}
.pd-gallery{position:sticky;top:90px;min-width:0}
.pd-info{min-width:0}
.listing-main,.cart-main,.co-form{min-width:0}
.pd-main{aspect-ratio:1;background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in}
.pd-main img{width:100%;height:100%;object-fit:cover;transition:transform .15s}   /* ảnh đã chuẩn vuông 1:1 */
.noimg{display:grid;place-items:center;height:100%;color:var(--muted)}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.pd-thumbs button{flex:0 0 76px;height:76px;border-radius:12px;overflow:hidden;border:2px solid transparent;padding:0;background:#fff;transition:border-color var(--t-fast)}
.pd-thumbs button.on{border-color:var(--pri)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover}
.pd-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tag{font-size:12px;background:var(--pri-l);color:var(--pri-ink);padding:3px 10px;border-radius:999px;font-weight:600}
.pd-info h1{font-size:clamp(26px,3vw,34px);font-weight:800}
.pd-short{color:var(--muted);margin:10px 0 0}
.pd-price{display:flex;align-items:baseline;gap:12px;margin:16px 0 20px;padding:14px 18px;background:#fff;border-radius:var(--r-sm);border:1px solid var(--line2)}
.pd-price b{font-size:30px;color:var(--coral);font-weight:700}
.pd-price s{font-size:16px}
.opt{margin-bottom:16px}
.opt-h{font-size:14px;color:var(--muted);margin-bottom:8px}
.opt-h b{color:var(--brown)}
.opt-list{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:8px 16px;font-weight:600;font-size:14px;color:var(--brown);transition:border-color var(--t-fast),background var(--t-fast)}
.chip:hover{border-color:var(--pri)}
.chip.on{border-color:var(--pri);background:var(--pri-l);color:var(--pri-ink)}
.chip.dim{opacity:.45;border-style:dashed}
.pd-stock{font-size:14px;font-weight:600;margin:4px 0 16px;display:flex;align-items:center;gap:8px}
.pd-stock::before{content:'';width:9px;height:9px;border-radius:50%;background:currentColor}
.pd-stock.con_hang{color:var(--ok)} .pd-stock.sap_ve{color:var(--warn)} .pd-stock.het_hang{color:var(--gray)}
.pd-buy{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;background:#fff;height:48px}
.qty button{border:0;background:none;width:40px;height:100%;font-size:20px;color:var(--brown)}
.qty button:hover{color:var(--pri-d)}
.qty input{width:44px;border:0;text-align:center;font-weight:700;outline:none;background:none;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty.sm{height:36px}.qty.sm button{width:30px;font-size:16px}.qty.sm input{width:34px}
.pd-buy .btn-lg{flex:1;min-width:150px;height:48px}
.pd-support{list-style:none;padding:16px 18px;margin:22px 0 0;background:var(--tint);border:1px solid #e2f4fb;border-radius:var(--r-sm);display:grid;gap:10px;font-size:13.5px}
.pd-support li{display:flex;gap:10px;align-items:center}
.pd-support .ic{color:var(--pri-d)}
.pd-support b{color:var(--brown)}
.pd-desc{display:grid;grid-template-columns:1fr 340px;gap:26px;margin-top:46px}
.pd-desc-main,.pd-spec{background:#fff;border-radius:var(--r);padding:24px 28px;box-shadow:var(--shadow)}
.pd-desc h2{font-size:22px;margin-bottom:10px}
.pd-spec h3{font-size:19px;margin-bottom:10px}
.pd-spec dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:14px}
.pd-spec dt{color:var(--muted)} .pd-spec dd{margin:0;color:var(--brown);font-weight:500}
.pd-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:8px;align-items:center;box-shadow:0 -6px 20px rgba(0,0,0,.06)}
.pd-sticky>div{flex:1}.pd-sticky b{color:var(--coral);font-size:18px}
.pd-sticky .btn{padding:10px 14px}

/* mô tả dạng khối */
.blocks{color:var(--text);line-height:1.75}
.blocks p{margin:0 0 12px}
.blocks .blk-h{font-size:20px;margin:22px 0 8px;color:var(--brown)}
.blocks .blk-h:first-child{margin-top:4px}
.blk-fig{margin:16px 0;text-align:center}
.blk-fig img{width:100%;max-height:560px;object-fit:cover;border-radius:16px;margin:0 auto}
.blk-fig figcaption{font-size:13px;color:var(--muted);margin-top:8px;font-style:italic}
.blk-ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px}
.blk-ul li{position:relative;padding-left:26px}
.blk-ul li::before{content:'';position:absolute;left:6px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--pri);box-shadow:0 0 0 3px var(--pri-l)}
.blk-video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.blk-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blk-mp4{width:100%;border-radius:16px}
.preview-note{background:#fff4cf;color:#7a5200;border-radius:12px;padding:10px 16px;margin-top:14px;font-size:14px}

/* ================= CART + CHECKOUT (sạch, không hiệu ứng mây) ================= */
.cart-page,.checkout{display:grid;grid-template-columns:1fr 380px;gap:26px;margin-top:14px;align-items:start}
.cart-main h1,.co-form h1{font-size:30px;margin-bottom:14px}
.freeship-bar{display:flex;align-items:center;gap:10px;background:var(--pri-l);color:var(--pri-ink);border-radius:var(--r-sm);padding:10px 16px;font-size:14px;margin-bottom:14px}
.ci{display:grid;grid-template-columns:84px 1fr auto auto 30px;gap:16px;align-items:center;background:#fff;border-radius:var(--r);padding:12px;margin-bottom:10px;box-shadow:var(--shadow);animation:fadeUp var(--t-med) var(--ease-soft)}
.ci-img{width:84px;height:84px;border-radius:12px;overflow:hidden;background:var(--tint)}
.ci-img img{width:100%;height:100%;object-fit:cover}
.ci-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.ci-info b{color:var(--brown);font-weight:600}
.ci-info small{color:var(--muted)}
.ci-info .warn{color:var(--warn);font-weight:600}
.ci-price{color:var(--coral);font-weight:600;font-size:14px}
.ci-total{color:var(--brown);min-width:90px;text-align:right}
.ci-x{border:0;background:var(--bg);width:30px;height:30px;border-radius:50%;font-size:18px;color:var(--muted)}
.ci-x:hover{background:var(--coral-l);color:var(--coral)}
.summary{position:sticky;top:90px;background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.summary h2{font-size:21px}
.summary textarea,.co-form textarea,.co-form input:not([type=radio]):not([type=checkbox]),.voucher input,.track-form input{border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;width:100%;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.summary textarea:focus,.co-form textarea:focus,.co-form input:focus,.voucher input:focus,.track-form input:focus{border-color:var(--pri);box-shadow:0 0 0 4px rgba(52,195,232,.14)}
.co-form input.bad{border-color:var(--bad);background:#fff6f6}
.check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;color:var(--brown)}
.check input{accent-color:var(--pri);width:17px;height:17px}
.check .ic{color:var(--pri-d);width:18px}
.voucher{display:flex;gap:8px}
.voucher-msg{margin:0;font-size:12.5px;color:var(--warn)}
.voucher-msg:empty{display:none}
.totals{display:grid;grid-template-columns:1fr auto;gap:8px;margin:4px 0;font-size:14.5px;border-top:1px dashed var(--line);padding-top:12px}
.totals dt{color:var(--muted)} .totals dd{margin:0;text-align:right;color:var(--brown);font-weight:600}
.totals .free{color:var(--ok)}
.totals .grand{font-size:17px;color:var(--brown);font-weight:700;border-top:1px solid var(--line2);padding-top:10px}
.totals dd.grand{color:var(--coral);font-size:21px}
.co-form{display:flex;flex-direction:column;gap:16px}
.co-form fieldset{border:0;background:#fff;border-radius:var(--r);padding:18px 22px;margin:0;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.co-form legend{float:left;width:100%;font-family:var(--display);font-weight:700;font-size:18px;color:var(--brown);margin-bottom:4px}
.co-form label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:600;color:var(--muted)}
.co-form label.check{flex-direction:row}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.radio{flex-direction:row!important;align-items:center;gap:12px!important;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.radio.on{border-color:var(--pri);background:#f5fcff}
.radio input{accent-color:var(--pri);width:18px;height:18px}
.radio span{display:flex;flex-direction:column;flex:1}
.radio b{color:var(--brown)} .radio small{color:var(--muted);font-weight:400}
.radio em{font-style:normal;color:var(--ok)}
.form-err{background:#fff0f0;color:var(--bad);border-radius:12px;padding:10px 14px;font-weight:600;font-size:14px;margin:0}
.coi{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;font-size:13.5px;padding:6px 0}
.coi-img{position:relative;width:56px;height:56px;border-radius:10px;overflow:visible;background:var(--tint)}
.coi-img img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.coi-img b{position:absolute;top:-6px;right:-6px;background:var(--pri-d);color:#fff;font-size:11px;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center}
.coi span:nth-child(2){display:flex;flex-direction:column}
.coi small{color:var(--muted)}

/* ================= THANKS + TRACK ================= */
.thanks{padding:40px 16px}
.thanks-card{max-width:640px;margin:0 auto;background:#fff;border-radius:24px;padding:36px;text-align:center;box-shadow:var(--shadow)}
.thanks-card .logo-bear{width:84px;height:74px;margin:0 auto 10px}
.thanks-card h1{font-size:30px;margin-bottom:8px}
.code{font-size:20px;color:var(--pri-d);letter-spacing:1px}
.thanks-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.order-box{text-align:left;margin-top:18px;background:var(--tint);border-radius:var(--r);padding:18px}
.order-items>div{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:4px 0}
.steps{list-style:none;display:flex;padding:0;margin:0 0 16px;counter-reset:s}
.steps li{flex:1;text-align:center;font-size:12px;color:var(--muted);position:relative;padding-top:30px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:12px;z-index:1}
.steps li::after{content:'';position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line)}
.steps li:first-child::after{display:none}
.steps li.done{color:var(--brown);font-weight:600}
.steps li.done::before{background:var(--pri);border-color:var(--pri);color:#fff}
.steps li.done::after{background:var(--pri)}
.order-st.bad{color:var(--bad);font-weight:700}
.track{max-width:720px;padding-bottom:30px}
.track h1{font-size:30px;margin-top:10px}
.track-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin:16px 0}
.track h2{font-size:20px;margin-top:10px}

/* ================= PROSE ================= */
.prose-wrap{display:grid;grid-template-columns:1fr 260px;gap:26px;margin-top:10px;align-items:start}
.prose{background:#fff;border-radius:var(--r);padding:30px 36px;box-shadow:var(--shadow);max-width:820px}
.prose-wrap:not(:has(.prose-side)){grid-template-columns:1fr}
.prose h1{font-size:32px;margin-bottom:14px}
.prose h2{font-size:20px;margin:22px 0 6px}
.prose p{color:var(--muted)}
.prose-side{background:#fff;border-radius:var(--r);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;position:sticky;top:90px}
.prose-side h3{font-size:17px;margin-bottom:6px}
.prose-side a{padding:6px 0;color:var(--brown);font-size:14px}
.prose-side a:hover{color:var(--pri-d)}
.contact-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}
.contact-i{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:14px;transition:border-color var(--t-fast)}
.contact-i:hover{border-color:var(--pri)}
.contact-i .ic{color:var(--pri-d);width:26px;height:26px}
.contact-i span{display:flex;flex-direction:column}
.contact-i b{color:var(--brown)} .contact-i small{color:var(--muted)}

/* ================= FOOTER + TOAST ================= */
.ftr{margin-top:70px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(220,245,254,0) 0,#DDF5FE 90px,#CDEFFB 100%);padding-top:60px}
.ftr .cpar.small{top:0;height:170px;opacity:.9}
.ftr>.wrap{position:relative;z-index:2}
.ftr-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:24px;padding-top:24px}
.ftr-brand p{font-size:13px;color:var(--muted);margin:12px 0}
.ftr h4{margin:4px 0 10px;color:var(--brown);font-size:14px}
.ftr-in>div>a{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);padding:4px 0}
.ftr-in>div>a:hover{color:var(--pri-d)}
.ftr-contact .ic{width:17px;color:var(--pri-d)}
.ftr-social{display:flex;gap:10px}
.ftr-social a{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--pri-d);box-shadow:0 2px 8px rgba(17,110,150,.1)}
.ftr-social a:hover{background:var(--pri);color:#fff}
.ftr-copy{border-top:1px solid rgba(255,255,255,.7);margin-top:26px;padding:14px 16px 20px;font-size:12.5px;color:var(--muted);text-align:right}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:200;background:#163a4a;color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;transition:opacity var(--t-med),transform var(--t-med);box-shadow:var(--shadow-h);white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast a{color:#9fe6fb;font-weight:700;margin-left:8px;text-decoration:underline}

/* fade-in nhẹ khi section xuất hiện (chỉ khi có JS) */
.js .reveal{opacity:0;translate:0 20px;transition:opacity .7s var(--ease-soft),translate .7s var(--ease-soft)}
.js .reveal.in{opacity:1;translate:0 0}
.js .reveal .grid>.card,.js .reveal .cols>.col-card{opacity:0;translate:0 22px;transition:transform var(--t-med),box-shadow var(--t-med),opacity .65s var(--ease-soft) calc(var(--i,0) * 70ms + .1s),translate .65s var(--ease-soft) calc(var(--i,0) * 70ms + .1s)}
.js .reveal.in .grid>.card,.js .reveal.in .cols>.col-card{opacity:1;translate:0 0}
.grid>:nth-child(2),.cols>:nth-child(2){--i:1}.grid>:nth-child(3),.cols>:nth-child(3){--i:2}.grid>:nth-child(4),.cols>:nth-child(4){--i:3}.grid>:nth-child(5),.cols>:nth-child(5){--i:4}
.grid>:nth-child(6),.cols>:nth-child(6){--i:5}.grid>:nth-child(7){--i:6}.grid>:nth-child(8){--i:7}.grid>:nth-child(9){--i:8}.grid>:nth-child(10){--i:9}
/* nền "thế giới" trang chủ: sau thềm mây là trời rất nhạt, nhạt dần về kem — các section nằm trên cùng 1 nền, không đóng hộp */
.home-world{background:linear-gradient(180deg,var(--world-light) 0,#F7FCFE 900px,var(--bg) 1500px)}
.after-cta{background:linear-gradient(180deg,var(--world-light) 0,var(--bg) 600px);padding-bottom:10px}
.after-cta{padding-top:24px}
.after-cta>.sec:first-child{margin-top:0}
/* khối tư vấn: trời đậm dần xuống đáy để viền mây trắng nổi rõ khi chuyển sang 'Gợi ý cho bạn' */
.cta-full.sky.soft{background:radial-gradient(ellipse 50% 60% at 80% 30%,rgba(255,255,255,.55) 0,transparent 70%),linear-gradient(180deg,#E6F7FE 0%,#BFECFB 45%,#9FDFF6 100%)}
.cta-full .sky-edge{fill:var(--world-light);filter:drop-shadow(0 -6px 10px rgba(30,130,180,.12))}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}}

/* ================= RESPONSIVE ================= */
@media (max-width:1180px){
  .hdr-nav a{padding:8px 9px}
  .hdr-nav a.on::after{left:9px;right:9px}
  .hdr-acc span{display:none}
  .g5,.best-row .g5{grid-template-columns:repeat(3,1fr)}
  .g5>.card:nth-child(n+7){display:none}
  .best-row{grid-template-columns:1fr}
  .promo{min-height:260px;flex-direction:row;align-items:center}
  .cols{grid-template-columns:repeat(3,1fr)}
  .ftr-in{grid-template-columns:1fr 1fr 1fr}
  .ftr-brand{grid-column:1/-1}
}
@media (max-width:960px){
  .hdr-nav,.hdr-search,.hdr-acc{display:none}
  .hdr-burger{display:block}
  .hdr-in{height:62px;gap:10px;justify-content:space-between}
  .hdr-cart span{display:none}
  .m-search{display:flex;align-items:center;gap:8px;background:var(--tint);border:1.5px solid var(--line2);border-radius:999px;padding:0 14px;height:40px;margin:0 16px 10px;width:auto}
  .m-search input{border:0;background:none;outline:none;width:100%;font-size:14px}
  .m-search .ic{color:var(--muted);width:18px}
  .hero-in{grid-template-columns:1fr;min-height:0}
  .hero{padding-bottom:20px}
  .hero-copy{padding:30px 22px 0}
  .hero-script{font-size:12px;padding:6px 12px}
  .hero .cpar.far2{display:none}   /* mobile: bớt mây */
  .hero{min-height:0;padding-bottom:130px}
  .hero-in{grid-template-columns:1fr}
  .bear-stage{height:340px;margin-top:-10px}
  .bigtype{top:auto;bottom:120px;right:50%;transform:translateX(50%);font-size:34vw}
  .hero-bubble{right:-4%;top:2%;font-size:12.5px;padding:9px 13px}
  .scroll-hint{display:none}
  .kicker{letter-spacing:.6px;font-size:11px}
  .hero .bank svg{height:64px}
  .hero{padding-bottom:70px}
  .bear-stage{height:300px;margin-bottom:10px}
  .kicker{letter-spacing:.6px;font-size:11px}
  .trust{grid-template-columns:1fr}
  .trust-in{grid-template-columns:1fr 1fr;gap:10px}
  .trust-i{border:0;padding:4px}
  .trust-note{display:none}
  .g5,.g4,.best-row .g5{grid-template-columns:repeat(3,1fr)}
  .g5>.card:nth-child(n+7){display:none}
  .best-row .g5>.card:nth-child(n+4){display:flex}
  .listing{grid-template-columns:1fr}
  .filters{position:fixed;inset:0 0 0 auto;width:min(320px,88vw);z-index:120;border-radius:0;overflow:auto;transform:translateX(105%);transition:transform var(--t-med);top:0}
  .filters.open{transform:none;box-shadow:-20px 0 60px rgba(0,0,0,.2)}
  .filters-h{display:flex;justify-content:space-between;align-items:center}
  .m-only{display:inline-flex!important}
  .pd-sticky.m-only{display:flex!important}
  .listing-bar{justify-content:space-between}
  .pd{grid-template-columns:1fr;gap:20px}
  .pd-gallery{position:static}
  .pd-desc{grid-template-columns:1fr}
  .pd-buy .btn-lg{display:none}
  body:has(.pd-sticky){padding-bottom:72px}
  .cart-page,.checkout{grid-template-columns:1fr}
  .summary{position:static}
  .cta-sky{grid-template-columns:1fr}
  .cta-full{padding:100px 0 90px}
  .cta-pics{justify-content:flex-start}
  .community-in{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .faq-mini .faq{grid-template-columns:1fr}
  .prose-wrap{grid-template-columns:1fr}
  .prose-side{position:static}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .logo-mark{height:32px}.logo-txt b{font-size:24px}
  .hero{margin-top:10px}
  .cband.near{background-size:900px 150px;height:150px;width:calc(100% + 900px);animation-name:bandM}
  @keyframes bandM{to{transform:translateX(-900px)}}
  .trust{margin-top:-60px}
  .hero-text{margin:12px 0 18px}
  .hero-cta .btn-lg{padding:11px 20px;font-size:14px}
  .cta-full{padding:96px 0 90px}
  .trust-in{padding:12px 8px}
  .trust-ic{width:38px;height:38px}
  .trust-i b{font-size:12.5px}.trust-i small{font-size:11px}
  .sec{margin-top:36px}
  .cols{grid-template-columns:1fr 1fr;gap:10px}
  .col-img{aspect-ratio:1/1}
  .col-txt{padding:10px 44px 12px 12px}
  .col-txt b{font-size:15.5px}
  .col-go{right:10px;bottom:12px;width:30px;height:30px}
  .g5,.g4,.best-row .g5{grid-template-columns:1fr 1fr;gap:10px}
  .g5>.card:nth-child(n+5){display:none}
  .best-row .g5>.card:nth-child(n+3){display:none}
  .g4>.card{display:flex!important}
  .card-img{margin:7px 7px 0;border-radius:13px}
  .card-body{padding:10px 11px 12px;gap:7px}
  .card-name{font-size:14.5px;min-height:41px}
  .card-sizes span{font-size:11.5px;padding:0 6px}
  .card-sizes{flex-wrap:nowrap;overflow:hidden}
  .card-sizes span{flex:none}
  .badge{top:13px;left:13px;font-size:11px;padding:3px 9px}
  .card-price b{font-size:17.5px}
  .card .btn{font-size:13.5px;padding:9px 6px}
  .card .btn .ic{display:none}
  .card-heart{top:12px;right:12px;width:28px;height:28px}
  .promo{flex-direction:column;align-items:stretch;padding:20px}
  .promo-art{min-height:160px}
  .cta-pics img{width:92px;height:92px}
  .community-pics{grid-template-columns:repeat(3,1fr)}
  .community-pics a:nth-child(n+4){display:none}
  .banner{flex-direction:column;align-items:flex-start;min-height:0}
  .pd-price b{font-size:26px}
  .pd-desc-main,.pd-spec{padding:18px}
  .ci{grid-template-columns:70px 1fr auto;gap:10px}
  .ci-img{width:70px;height:70px}
  .ci .qty{grid-column:2}
  .ci-total{grid-column:3;grid-row:2}
  .ci-x{grid-column:3;grid-row:1;justify-self:end;align-self:start}
  .row2{grid-template-columns:1fr}
  .co-form fieldset{padding:16px}
  .track-form{grid-template-columns:1fr}
  .thanks-card{padding:26px 18px}
  .steps li{font-size:10.5px}
  .prose{padding:22px 18px}
  .ftr-in{grid-template-columns:1fr 1fr}
  .ftr-copy{text-align:center}
}
/* người dùng bật "giảm chuyển động" → tắt mây trôi, thẻ nổi, fade-in */
@media (prefers-reduced-motion:reduce){
  .cband,.bear-look,.bear-float,.bear *,.hero-bubble,.hero-script,.hero-copy>*,.sparkle,.scroll-hint span,.cart-n.bump{animation:none!important}
  .hero{--mx:0!important;--my:0!important}
  .js .reveal,.js .reveal .grid>.card,.js .reveal .cols>.col-card{opacity:1;translate:none;transition:none}
  [data-par]{transform:none!important}
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important}
}
img.broken{visibility:hidden}
/* CTA trời ngay trước dải nền nhạt → viền mây hoà thẳng vào dải đó */

/* ================= HERO KIỂU MAINFRAME — video gấu toàn màn hình, rê chuột để tua =================
   Video = gấu quay đầu trái→phải trên nền trời đứng yên (tools/render_hero.py, thay bằng video thật cùng tên file).
   app.js: chuột ngang → tua video.currentTime (chống dồn seek bằng onSeeked) · gõ chữ · hiện nút sau 400ms · --sp cuộn. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.mf-hero{--sp:0;position:relative;height:100svh;min-height:560px;margin-top:calc(-1 * var(--hdr-h,72px));overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:#c9cfe6 url(/media/hero-desktop.jpg?v=8) 70% center/cover}
.mf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;z-index:0;transform:translateY(calc(var(--sp) * -60px)) scale(calc(1 + var(--sp) * .04))}
.mf-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(18,72,110,.38) 0%,rgba(18,72,110,.16) 40%,transparent 60%),linear-gradient(180deg,rgba(18,72,110,.24) 0,transparent 140px)}
.mf-content{position:relative;z-index:2;width:100%;padding-top:var(--hdr-h,72px)}
.mf-inner{max-width:600px;opacity:clamp(0,calc((.7 - var(--sp)) / .35),1);transform:translateY(calc(var(--sp) * -50px))}
.mf-intro,.mf-type{font-family:var(--font);font-size:clamp(18px,4vw,26px);font-weight:400;color:#fff;margin:0 0 22px;text-shadow:0 1px 14px rgba(5,70,100,.25)}
.mf-intro{line-height:1.3;filter:blur(4px);pointer-events:none;user-select:none}
.mf-type{line-height:1.35;min-height:2.7em}
.mf-cursor{display:inline-block;width:2px;height:1.1em;background:#fff;vertical-align:middle;margin-left:2px;animation:mfBlink 1s step-end infinite}
.mf-type.done .mf-cursor{display:none}
@keyframes mfBlink{0%,100%{opacity:1}50%{opacity:0}}
.mf-pills{display:flex;flex-wrap:wrap;row-gap:4px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.mf-pills.show{opacity:1;transform:none}
.mf-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;background:#fff;color:#1b2b33;border:1px solid rgba(0,0,0,.08);border-radius:999px;
  font-size:15px;line-height:1.4;padding:.35em 1.25em;margin:0 .2em .4em;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.mf-pill:hover{background:#163a4a;color:#fff}
.mf-pill-o{background:transparent;color:#fff;border-color:#fff}
.mf-pill-o u{text-underline-offset:2px}
.mf-pill-o:hover{background:#fff;color:#163a4a}
.mf-scroll{position:absolute;left:50%;bottom:64px;z-index:5;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.9);border-radius:14px;opacity:calc(1 - var(--sp) * 4)}
.mf-scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:hint 1.8s ease-in-out infinite}
.mf-hero .bank{transform:translateY(calc(max(0, var(--sp) - .35) * -380px))}
.mf-hero .bank svg{height:110px}
.mf-hero .bank::after{height:420px}
.mf-hero .bank{margin-bottom:-420px}
.is-home .trust{margin-top:-70px}
/* header trong suốt nằm trên video (chỉ trang chủ, khi còn ở hero) */
.logo-white{display:none}
.hdr.hdr-clear{background:transparent;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
.hdr.hdr-clear .logo-mark:not(.logo-white){display:none}
.hdr.hdr-clear .logo-white{display:block}
.hdr.hdr-clear .logo-txt b,.hdr.hdr-clear .logo-txt i,.hdr.hdr-clear .hdr-nav a,.hdr.hdr-clear .hdr-act,.hdr.hdr-clear .hdr-burger{color:#fff}
.hdr.hdr-clear .hdr-nav a.on::after{background:#fff}
.hdr.hdr-clear .hdr-search,.hdr.hdr-clear+.m-search,.hdr.hdr-clear .m-search{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
.hdr.hdr-clear .hdr-search input,.hdr.hdr-clear .m-search input{color:#fff}
.hdr.hdr-clear .hdr-search input::placeholder,.hdr.hdr-clear .m-search input::placeholder{color:rgba(255,255,255,.85)}
.hdr.hdr-clear .hdr-search .ic,.hdr.hdr-clear .m-search .ic{color:#fff}
.hdr{transition:background-color .3s,border-color .3s}
@media (max-width:767px){
  /* điện thoại: video dọc 720x1280 ghép sẵn phủ kín, nhân vật ở trên, chữ nằm trên biển mây hồng phía dưới */
  .mf-hero{background:#e9b8d8 url(/media/hero-mobile.jpg?v=8) center/cover}
  .mf-video{object-position:center center}
  .mf-hero{justify-content:flex-end;padding-bottom:90px}
  .mf-shade{background:linear-gradient(0deg,rgba(70,40,95,.55) 0%,rgba(70,40,95,.2) 42%,transparent 58%),linear-gradient(180deg,rgba(18,72,110,.25) 0,transparent 140px)}
  .mf-pill{font-size:13px;padding:.35em 1em}
  .mf-scroll{display:none}
  .mf-hero .bank svg{height:56px}
  .is-home .trust{margin-top:-40px}
}
@media (prefers-reduced-motion:reduce){
  .mf-pills{opacity:1;transform:none;transition:none}
  .mf-cursor,.mf-scroll span{animation:none}
  .mf-video,.mf-inner,.mf-hero .bank{transform:none!important}
}

/* ================= HERO NHIỀU LỚP (nền trời + nhân vật tách nền + mây hồng phía trước) =================
   Lớp: .mf-bg (ảnh trời) → .clouds far (mây trắng trôi) → .mf-char (canvas, rê chuột đổi khung)
        → .mf-fg (CÙNG ảnh trời, chỉ hiện phần dưới nhờ mask → che chân nhân vật, như ngồi lọt trong mây) → shade/chữ.
   .mf-bg và .mf-fg PHẢI cùng kích thước/vị trí/parallax để khớp nhau từng điểm ảnh. */
.mf-layered{--mx:0;--my:0;background:#9fd8f5}
.mf-bg,.mf-fg{position:absolute;inset:-24px;background:var(--bg) center 58%/cover no-repeat;translate:calc(var(--mx) * -10px) calc(var(--my) * -6px);will-change:translate}
.mf-bg{z-index:0}
/* trời "thở" rất chậm — nền và lớp mây trước dùng CÙNG animation nên luôn khớp nhau */
.mf-bg,.mf-fg{animation:skyDrift 30s ease-in-out infinite alternate;transform-origin:60% 60%}
@keyframes skyDrift{to{transform:scale(1.045) translateX(-1%)}}
.mf-layered .clouds{z-index:0;opacity:.55}
.mf-layered .cpar.far{top:6%;height:220px;translate:calc(var(--mx) * -14px) 0}
.mf-char{position:absolute;z-index:1;right:max(4%,calc(50% - 640px));bottom:2%;height:min(80svh,820px);width:auto;max-width:none;
  translate:calc(var(--mx) * 18px) calc(var(--my) * 8px);filter:drop-shadow(0 26px 30px rgba(40,60,110,.22));opacity:0;transition:opacity .6s ease}
.mf-char.ready{opacity:1}
.mf-fg{z-index:2;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 72%,#000 84%);mask-image:linear-gradient(180deg,transparent 0,transparent 72%,#000 84%)}
.mf-layered .mf-shade{z-index:3;background:linear-gradient(90deg,rgba(18,72,110,.34) 0%,rgba(18,72,110,.14) 40%,transparent 60%),linear-gradient(180deg,rgba(18,72,110,.22) 0,transparent 140px)}
.mf-layered .mf-content{z-index:4}
@media (max-width:767px){
  .mf-layered{background:#9fd8f5}
  .mf-layered .mf-bg,.mf-layered .mf-fg{background-image:var(--bg-m);background-position:center 70%}
  .mf-layered .mf-video{display:none}
  .mf-char{right:auto;left:50%;bottom:auto;top:calc(var(--hdr-h,72px) + 1svh);height:min(54svh,560px);translate:calc(-50% + var(--mx) * 10px) calc(var(--my) * 4px)}
  .mf-fg{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent calc(var(--hdr-h,72px) + 44svh),#000 calc(var(--hdr-h,72px) + 54svh));mask-image:linear-gradient(180deg,transparent 0,transparent calc(var(--hdr-h,72px) + 44svh),#000 calc(var(--hdr-h,72px) + 54svh))}
  .mf-layered .mf-shade{background:linear-gradient(0deg,rgba(60,40,90,.5) 0%,rgba(60,40,90,.2) 40%,transparent 58%),linear-gradient(180deg,rgba(18,72,110,.22) 0,transparent 140px)}
}
@media (prefers-reduced-motion:reduce){.mf-bg,.mf-fg,.mf-char{translate:none!important;animation:none!important}}
/* thông tin chuẩn hoá từ Kho */
.pd-hl{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:5px;font-size:14.5px}
.pd-hl li{position:relative;padding-left:24px}
.pd-hl li::before{content:'✓';position:absolute;left:0;top:0;color:#fff;background:var(--sky-top,#2a9fd6);width:17px;height:17px;border-radius:50%;font-size:11px;display:grid;place-items:center;margin-top:3px}
.pd-story{margin:0 0 16px;padding:12px 16px;border-left:4px solid var(--sky-top,#2a9fd6);background:#f3fbfe;border-radius:8px;font-style:italic;color:var(--brown)}
.pd-spec h4{font-size:14px;margin:16px 0 6px;color:var(--muted);font-weight:600}
.pd-gift{display:flex;flex-wrap:wrap;gap:6px}
/* ---- địa chỉ: ô gợi ý kiểu bản đồ + chọn tỉnh/phường ---- */
.co-form select{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;width:100%;outline:none;font:inherit;color:var(--text);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.co-form select:focus{border-color:var(--pri);box-shadow:0 0 0 4px rgba(52,195,232,.14)}
.co-form select:disabled{background:var(--line2);color:var(--muted)}
.co-form select.bad{border-color:var(--bad);background:#fff6f6}
.addr-find{position:relative}
.addr-box{display:flex;align-items:center;gap:8px;border:1.5px solid var(--pri);border-radius:12px;padding:0 12px;background:var(--pri-l);margin-top:6px}
.addr-box .ic{width:18px;height:18px;color:var(--pri-ink);flex:none}
.co-form .addr-box input{border:0!important;box-shadow:none!important;background:transparent!important;padding:12px 0!important}
.addr-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-h);max-height:360px;overflow:auto;padding:6px}
.addr-opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:0;background:none;padding:9px 10px;border-radius:10px;cursor:pointer;font:inherit;color:var(--text)}
.addr-opt:hover,.addr-opt.on{background:var(--pri-l)}
.addr-opt b{display:block;font-weight:600;color:var(--brown)}
.addr-opt small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.addr-ic{font-size:15px;line-height:1.4}
.addr-empty{margin:0;padding:10px;color:var(--muted);font-size:13px}
.addr-note{margin:-2px 0 0}
/* ---- biến thể: chọn MẪU có ảnh nhỏ, video, kích thước ---- */
.chip-img{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px}
.chip-img img{width:34px;height:34px;border-radius:8px;object-fit:cover}
.chip.dim{opacity:.45}
.pd-main{position:relative}
.pd-mainvid{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.pd-mainvid[hidden],.pd-main img[hidden]{display:none}
.pd-vthumb{position:relative;background:#222!important}
.pd-vthumb span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:22px;text-shadow:0 1px 6px rgba(0,0,0,.6);background:rgba(0,0,0,.18)}
.pd-vinfo{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:14px;color:var(--muted);margin-top:4px}
.pd-vinfo:has(> [hidden] + [hidden]){display:none}
.pd-vvideo{border:0;background:none;color:var(--pri-ink);font-weight:700;cursor:pointer;padding:0;font:inherit;font-weight:700}
/* ===== ẢNH BÌA TRANG CHỦ (đổi trong Kho → Web bán lẻ → 🖼 Ảnh bìa web) ===== */
.hb{position:relative;overflow:hidden;background:var(--sky-soft)}
.hb-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.hb-track::-webkit-scrollbar{display:none}
.hb-slide{flex:0 0 100%;scroll-snap-align:start;display:block;line-height:0}
.hb-slide img{width:100%;height:auto;max-height:640px;object-fit:cover;display:block;aspect-ratio:12/5}
.hb-track.drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.hb-slide img{-webkit-user-drag:none;user-select:none}
.hb-arrow{position:absolute;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--brown);box-shadow:0 2px 10px rgba(0,0,0,.18);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity var(--t-fast),background var(--t-fast),transform var(--t-fast);z-index:2}
.hb-arrow .ic{width:20px}
.hb-arrow.prev{left:18px}.hb-arrow.prev .ic{transform:rotate(180deg)}
.hb-arrow.next{right:18px}
.hb:hover .hb-arrow,.hb-arrow:focus-visible{opacity:1}
.hb-arrow:hover{background:#fff;transform:scale(1.06)}
.hb-arrow:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
@media (hover:none){.hb-arrow{display:none}}
.hb-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px}
.hb-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:pointer;padding:0}
.hb-dots button.on{background:#fff;width:22px;border-radius:6px}
.hb-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.hb-pill{padding:9px 18px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-weight:600;font-size:14.5px;color:var(--brown);box-shadow:var(--shadow);transition:border-color var(--t-fast),color var(--t-fast)}
.hb-pill:hover{border-color:var(--pri);color:var(--pri-ink)}
@media (max-width:767px){
  .hb-slide img{aspect-ratio:4/5;max-height:none}
  .hb-pills{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;scrollbar-width:none;margin-top:12px}
  .hb-pills::-webkit-scrollbar{display:none}
  .hb-pill{flex:none;font-size:13.5px;padding:8px 14px}
}
/* logo chỉ chữ "Pupi - Gấu Bông" */
.logo-txt b{font-size:22px;letter-spacing:0;white-space:nowrap}
@media (max-width:640px){.logo-txt b{font-size:18px}.logo-mark{height:28px}}
.addr-row{display:flex;gap:8px;align-items:stretch;margin-top:6px}
.addr-row .addr-box{flex:1;margin-top:0;min-width:0}
.addr-gps{flex:none;border:1.5px solid var(--pri);background:#fff;color:var(--pri-ink);border-radius:12px;padding:0 14px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.addr-gps:hover{background:var(--pri-l)}
.addr-gps:disabled{opacity:.6}
@media (max-width:480px){.addr-gps span{display:none}.addr-gps{padding:0 12px;font-size:18px}}
/* trang chủ có ẢNH BÌA (không còn video): khối cam kết nằm DƯỚI hàng lối tắt, không chồng lên */
.hb-pills+.home-world .trust,.hb-pills~.home-world .trust{margin-top:18px}
.hb-pills+.home-world{background:none}
@media (max-width:640px){
  .hb-pills~.home-world .trust{margin-top:12px}
  .trust-i{gap:8px}.trust-i b{font-size:12.5px;line-height:1.3}.trust-i small{font-size:11px;line-height:1.35;display:block}
}

.addr-box:has(input.bad){border-color:var(--coral)}

/* dòng liên hệ: Zalo · Messenger · Gọi điện */
.contact-line{border:1px dashed var(--line);border-radius:14px;padding:12px 14px;background:#fbfdff}
.contact-line p{margin:0 0 8px;font-weight:600;color:var(--brown);font-size:14px}
.cl-btns{display:flex;flex-wrap:wrap;gap:8px}
.cl-btn{flex:1 1 140px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 12px;border-radius:12px;font-weight:600;font-size:14px;text-decoration:none;color:#fff;white-space:nowrap}
.cl-btn .ic{width:17px;height:17px}
.cl-btn.zalo{background:#0068ff}.cl-btn.zalo b{font-weight:800;background:#fff;color:#0068ff;border-radius:6px;padding:0 5px;font-size:12px}
.cl-btn.ms{background:linear-gradient(90deg,#0a7cff,#a334fa)}
.cl-btn.tel{background:#22a35a}
.cl-btn:hover{filter:brightness(1.07)}
.pd-info .contact-line,.pd-buy+.contact-line{margin-top:14px}

/* ===== CHAT VỚI PUPI (khung nổi — app.js) ===== */
.cl-btn.chat{width:100%;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:15px;padding:12px 14px;background:linear-gradient(135deg,var(--pri),var(--pri-d));box-shadow:0 6px 16px rgba(17,155,194,.28)}
.cl-btn.chat:hover{filter:brightness(1.05)}
.cl-alt{margin:8px 0 0!important;font-weight:400!important;font-size:13px!important;color:var(--muted)!important}
.cl-alt a{color:var(--pri-ink);font-weight:600}
.chatw{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.chatw-fab{position:relative;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;background:var(--pri);color:#fff;font:inherit;font-weight:700;font-size:15px;padding:13px 20px 13px 16px;border-radius:999px;box-shadow:0 10px 26px rgba(17,155,194,.35);transition:transform var(--t-fast),background var(--t-fast)}
.chatw-fab .ic{width:22px;height:22px}
.chatw-fab:hover{background:var(--pri-d);transform:translateY(-2px)}
.chatw-fab:focus-visible,.chatw-x:focus-visible,.chatw-form button:focus-visible{outline:3px solid var(--pri-ink);outline-offset:2px}
.chatw.open .chatw-fab span{display:none}
.chatw.open .chatw-fab{padding:13px}
.chatw-dot{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:var(--coral);border:2px solid #fff}
.chatw-panel{width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 120px));background:#fff;border-radius:20px;box-shadow:0 18px 50px rgba(20,70,100,.25);display:flex;flex-direction:column;overflow:hidden;order:-1}
.chatw-panel[hidden]{display:none}
.chatw-h{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;background:linear-gradient(135deg,var(--pri),var(--pri-d));color:#fff}
.chatw-h img{border-radius:12px;background:#fff}
.chatw-h div{flex:1;display:flex;flex-direction:column;line-height:1.25}
.chatw-h b{font-family:var(--display);font-size:17px}
.chatw-h small{opacity:.9;font-size:12.5px}
.chatw-x{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:grid;place-items:center}
.chatw-x .ic{width:18px;height:18px}
.chatw-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#F6FBFE;overscroll-behavior:contain}
.chatw-m{display:flex;flex-direction:column;max-width:85%;gap:4px}
.chatw-m.me{align-self:flex-end;align-items:flex-end}
.chatw-m.pupi{align-self:flex-start}
.chatw-b{padding:9px 13px;border-radius:16px;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.chatw-m.pupi .chatw-b{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--brown)}
.chatw-m.me .chatw-b{background:var(--pri);color:#fff;border-bottom-right-radius:5px}
.chatw-m.pupi .chatw-b a{color:var(--pri-ink);font-weight:600}
.chatw-m.me .chatw-b a{color:#fff}
.chatw-m.pending{opacity:.6}
.chatw-m.failed{cursor:pointer}
.chatw-err{color:var(--coral-d);font-size:12px}
.chatw-tag{font-size:11px;font-weight:600;color:var(--muted);padding-left:4px}
.chatw-tag.nv{color:var(--pri-ink)}
.chatw-card{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;text-decoration:none;color:inherit;width:100%;max-width:260px}
.chatw-card:hover{border-color:var(--pri)}
.chatw-card img{width:52px;height:52px;border-radius:9px;object-fit:cover;flex:0 0 52px}
.chatw-card span{display:flex;flex-direction:column;min-width:0}
.chatw-card b{font-size:13px;line-height:1.3;color:var(--brown);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chatw-card small{color:var(--coral-d);font-weight:700;font-size:12.5px}
.chatw-typing .chatw-b{display:flex;gap:4px;padding:12px 14px}
.chatw-typing i{width:7px;height:7px;border-radius:50%;background:#9fb6c2;animation:chatwDot 1.2s infinite}
.chatw-typing i:nth-child(2){animation-delay:.2s}.chatw-typing i:nth-child(3){animation-delay:.4s}
@keyframes chatwDot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.chatw-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px;background:#F6FBFE}
.chatw-chips:empty{display:none}
.chatw-chips button{border:1px solid var(--pri);background:#fff;color:var(--pri-ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.chatw-chips button:hover{background:var(--pri-l)}
.chatw-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line)}
.chatw-form textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:14px;padding:9px 12px;font:inherit;font-size:16px;line-height:1.35;max-height:120px}
.chatw-form textarea:focus{outline:none;border-color:var(--pri)}
.chatw-form button{width:42px;height:42px;flex:0 0 42px;border-radius:50%;border:0;background:var(--pri);color:#fff;cursor:pointer;display:grid;place-items:center}
.chatw-form button .ic{width:20px;height:20px}
.chatw-note{margin:0;padding:0 12px 10px;font-size:11.5px;color:var(--muted);text-align:center}
body:has(.pd-sticky) .chatw{bottom:calc(84px + env(safe-area-inset-bottom))}
@media (max-width:640px){
  .chatw-fab span{display:none}
  .chatw-fab{padding:14px}
  .chatw.open,body:has(.pd-sticky) .chatw.open{left:0;right:0;bottom:0;align-items:stretch;z-index:120}
  .chatw.open .chatw-fab{display:none}
  .chatw-panel{width:100%;height:min(88vh,100dvh);border-radius:20px 20px 0 0}
  body:has(.chatw.open){overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.chatw-typing i{animation:none}.chatw-fab{transition:none}}

/* VIDEO TRANG CHỦ (kiểu "Livestream gần đây") */
.vids-h{text-align:center;margin-bottom:22px}
.vids-h h2{display:inline-flex;align-items:center;gap:16px;font-size:34px;margin:0}
.vids-h h2 i{width:46px;height:3px;border-radius:2px;background:var(--coral)}
.vids-h p{color:var(--muted);margin:8px 0 0}
.vids-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*18px)/4);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.vc{position:relative;margin:0;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:#111;scroll-snap-align:start;box-shadow:var(--shadow)}
.vc video{width:100%;height:100%;object-fit:cover;display:block}
.vc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;border:0;background:rgba(20,20,20,.55);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform var(--t-med),background var(--t-med)}
.vc-play svg{width:30px;height:30px;margin-left:3px}
.vc:hover .vc-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(20,20,20,.7)}
.vc.on .vc-play{display:none}
.vc figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;display:flex;flex-direction:column;gap:3px;pointer-events:none}
.vc figcaption b{font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vc figcaption span{font-weight:700;color:#ffd1dc}
.vc figcaption a{pointer-events:auto;color:#fff;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:4px;font-size:14px}
.vc figcaption a .ic{width:15px;height:15px}
.vc.on figcaption{display:none}
@media (max-width:960px){.vids-row{grid-auto-columns:40%}.vids-h h2{font-size:26px}}
@media (max-width:560px){.vids-row{grid-auto-columns:68%;gap:12px}.vids-h h2{font-size:22px;gap:10px}.vids-h h2 i{width:26px}}