/* ==========================================================
   DOKI – giao diện (khớp bản demo đã duyệt)
   Màu: xanh dương #2A52D9 + xanh ngọc #2DD4BF
   Chữ: Lobster (thương hiệu) · Baloo 2 (tiêu đề) · Be Vietnam Pro (nội dung)
   ========================================================== */

/* ---------- Biến màu: sáng / tối ---------- */
:root{
  --bg:#F4F8FF;--surface:#FFFFFF;--ink:#0F1B3D;--ink2:#26334F;--muted:#51607F;
  --line:#D9E4FA;--line2:#BFD0F5;--soft-blue:#E3EAFF;--soft-teal:#DDF7F3;
  --accent-ink:#2A52D9;--deep-ink:#1E3A9E;--teal-ink:#0B717B;
  --header-bg:rgba(255,255,255,.84);--card-shadow:rgba(30,58,158,.06);--footer-bg:rgba(255,255,255,.45);
  --blue:#2A52D9;--teal:#2DD4BF;--hdr-h:150px;
  --cur:url(/assets/cursor.svg) 4 3,auto;--cur-click:url(/assets/cursor-click.svg) 6 7,pointer;
  color-scheme:light;
}
:root.dark{
  --bg:#18203A;--surface:#232D4A;--ink:#F3F6FF;--ink2:#DCE3F5;--muted:#C3CCE2;
  --line:#3A4868;--line2:#52648F;--soft-blue:#33437A;--soft-teal:#1C5357;
  --accent-ink:#A5C0FF;--deep-ink:#BFD0FF;--teal-ink:#72F0DD;
  --header-bg:rgba(24,32,58,.86);--card-shadow:rgba(0,0,0,.22);--footer-bg:rgba(35,45,74,.45);
  color-scheme:dark;
}

/* ---------- Nền tảng ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--ink);background:var(--bg);min-height:100vh;overflow-x:clip;transition:background-color .35s,color .35s;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--deep-ink)}
:root.dark a:not([class]){color:#A5C0FF}
img{max-width:100%}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
h1,h2{margin:0}
.page{position:relative;z-index:1}
section[id],footer[id]{scroll-margin-top:calc(var(--hdr-h) + 8px)}

/* Con trỏ chuột vàng bóng */
body,body *{cursor:var(--cur)}
a,button,a *,button *,.card,.card *{cursor:var(--cur-click)}
input,textarea{cursor:text}

.wrap{width:100%;margin:0;padding:0 clamp(20px,3.2vw,64px);position:relative}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.svcgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.c-accent{color:var(--accent-ink)}
.c-teal{color:var(--teal-ink)}

/* ---------- Nền động rơi ---------- */
.fallbg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fall{position:absolute;top:-80px;animation:fall linear infinite;will-change:transform}
.sway{animation:sway 3.2s ease-in-out infinite alternate}
.fall img{display:block;object-fit:contain}
.fall .f-doki{display:inline-block;white-space:nowrap;font-family:'Lobster',cursive;line-height:1}
.fall .f-brand{display:inline-block;white-space:nowrap;font-family:'Baloo 2',sans-serif;color:#1E3A9E;background:#fff;border:2px solid #C7D2FE;border-radius:999px;padding:3px 14px;box-shadow:0 6px 14px rgba(30,58,158,.12);font-weight:700}
:root.dark .fall{filter:none;opacity:.35!important}
:root.dark .fall .f-brand{background:#232D4A;color:#C3CCE2;border-color:#3A4868}

/* ---------- Hình nền theo dịp (js/season.js, H11): một canvas cố định phía sau nội dung, không nhận chuột ---------- */
.occ{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;opacity:0;transition:opacity var(--occ-fade,900ms) ease;background:var(--occ-tint,none)}
.occ.on{opacity:1}
.occ canvas{position:absolute;left:0;top:0;display:block}
html.occ-on .fallbg{display:none}
@media (prefers-reduced-motion:reduce){.occ{transition:none}}
@media print{.occ{display:none}}
@keyframes fall{0%{transform:translateY(0)}100%{transform:translateY(calc(100vh + 160px))}}
@keyframes sway{0%{transform:translateX(-18px) rotate(-18deg)}100%{transform:translateX(18px) rotate(18deg)}}

/* ---------- Nút liên hệ nổi ---------- */
.floatcol{position:fixed;right:18px;bottom:22px;z-index:20;display:flex;flex-direction:column;gap:12px;align-items:center}
.floatcol>a{width:58px;height:58px;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(15,27,61,.25);transition:transform .2s}
.floatcol>a:hover{transform:scale(1.1)}
.fl-social{background:var(--surface)}
.fl-social svg{display:block}
.fl-zalo{background:#0068FF;color:#fff;box-shadow:0 8px 20px rgba(0,104,255,.35)!important;font-size:var(--fs-sm);font-weight:700}
.fl-zalo:hover{color:#fff}
.fl-call{background:var(--blue);box-shadow:0 8px 20px rgba(30,58,158,.4)!important}
/* Hai nút liên hệ nổi — CHỈ trang web, không đụng app Android (chủ shop chốt 07/11/2026): CẢ NÚT rung theo nhịp như chuông điện thoại cho nổi bật.
   Zalo nổi bật hơn nút Gọi: to hơn, rung mạnh và dày hơn, hai vòng sóng lan ra. Vòng sóng vẽ bằng ::before/::after (transform + opacity, chạy trên GPU);
   rung dùng thuộc tính rotate/scale riêng nên vẫn cộng được với hiệu ứng phóng to khi rê chuột. */
html:not(.app-mode) .floatcol{gap:16px}
html:not(.app-mode) .floatcol>a{position:relative}
html:not(.app-mode) .floatcol .shake{animation:none}
html:not(.app-mode) .floatcol>a.fl-zalo{width:70px;height:70px;font-size:var(--fs-md);animation:flZalo 2.2s ease-in-out infinite}
html:not(.app-mode) .floatcol>a.fl-call{width:54px;height:54px;animation:flCall 3.3s ease-in-out 1.1s infinite}
html:not(.app-mode) .floatcol>a.fl-zalo::before,html:not(.app-mode) .floatcol>a.fl-zalo::after,html:not(.app-mode) .floatcol>a.fl-call::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid #3D8BFF;opacity:0;pointer-events:none;animation:flRipple 1.6s ease-out infinite}
html:not(.app-mode) .floatcol>a.fl-zalo::after{animation-delay:.8s}
html:not(.app-mode) .floatcol>a.fl-call::before{border-width:2px;border-color:#6F8DFF;animation-duration:2.2s;animation-delay:.4s}
@keyframes flZalo{0%,48%,100%{rotate:0deg;scale:1}4%{rotate:-15deg;scale:1.14}8%{rotate:14deg}12%{rotate:-13deg}16%{rotate:11deg}20%{rotate:-8deg}24%{rotate:6deg;scale:1.08}28%{rotate:-3deg}32%{rotate:0deg;scale:1}}
@keyframes flCall{0%,40%,100%{rotate:0deg}5%{rotate:-10deg}10%{rotate:9deg}15%{rotate:-7deg}20%{rotate:5deg}25%{rotate:-2deg}30%{rotate:0deg}}
@keyframes flRipple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@media (max-width:600px){
  html:not(.app-mode) .floatcol{gap:12px}
  html:not(.app-mode) .floatcol>a.fl-zalo{width:56px;height:56px}
  html:not(.app-mode) .floatcol>a.fl-call{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  html:not(.app-mode) .floatcol>a,html:not(.app-mode) .floatcol>a::before,html:not(.app-mode) .floatcol>a::after{animation:none!important}
}
.shake{display:inline-block;animation:shake 1.2s ease-in-out infinite}
.wave{animation:wave 1.6s ease-out infinite}
.wavez{animation:wavez 1.6s ease-out .4s infinite}
@keyframes shake{0%,50%,100%{transform:rotate(0)}10%,30%{transform:rotate(-18deg)}20%,40%{transform:rotate(18deg)}}
@keyframes wave{0%{box-shadow:0 0 0 0 rgba(45,212,191,.75),0 0 0 0 rgba(42,82,217,.5)}100%{box-shadow:0 0 0 18px rgba(45,212,191,0),0 0 0 34px rgba(42,82,217,0)}}
@keyframes wavez{0%{box-shadow:0 0 0 0 rgba(0,104,255,.7)}100%{box-shadow:0 0 0 26px rgba(0,104,255,0)}}

/* ---------- Thanh trên + menu dính ---------- */
.stickytop{position:sticky;top:0;z-index:10;box-shadow:0 6px 20px rgba(15,27,61,.08)}
.topbar{background:var(--blue);color:#fff;padding:12px 0;font-size:var(--fs-sm)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;white-space:nowrap}
.tb-left{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.tb-phone{color:#fff;text-decoration:underline;font-weight:600}
.tb-phone:hover{color:#fff}
.tb-right{color:#A7F3E4;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

.hdr{background:var(--header-bg);border-bottom:1px solid var(--line);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hdrwrap{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;gap:clamp(28px,4vw,72px);padding-top:18px;padding-bottom:18px;white-space:nowrap}
.brand{display:flex;align-items:center;gap:12px;justify-self:start}
.brandlogo{width:74px;height:73px;object-fit:contain}
.brandtxt{font-family:'Lobster',cursive;font-size:50px;line-height:1;color:var(--accent-ink);text-shadow:2px 2px 0 #2DD4BF,3px 3px 0 rgba(30,58,158,.25)}
/* Logo "Doki VN" (chốt 07/11/2026): chữ Doki + nhãn VN đỏ chữ vàng ở góc trên + tên miền nhỏ CĂN GIỮA ngay dưới chữ Doki.
   Dùng chung cho đầu trang chủ, Shop, Studio và chân trang; .brandrow.sm = cỡ nhỏ (chân trang, Studio). */
.brandrow{display:flex;align-items:flex-start;min-width:0}
.brandword{display:flex;flex-direction:column;align-items:center;gap:4px}
.branddom{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:10px;font-weight:700;line-height:1;letter-spacing:.16em;padding-left:.16em;color:var(--teal-ink);white-space:nowrap}
.brandvn{flex:none;margin:2px 0 0 6px;padding:6px 9px 5px;border-radius:10px;background:#DA251D;color:#FFE14D;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:17px;font-weight:800;line-height:1;letter-spacing:.06em;box-shadow:2px 2px 0 #2DD4BF;transform:rotate(-6deg)}
.brandrow.sm .brandword{gap:3px}
.brandrow.sm .branddom{font-size:9px}
.brandrow.sm .brandvn{margin:0 0 0 5px;padding:4px 6px 3px;border-radius:7px;font-size:12px;box-shadow:1.5px 1.5px 0 #2DD4BF}
.sh-foot .brandword .u-brand-lobster{line-height:1}
/* Shop ≤1200px: logo Shop đã ở cỡ gọn (shop.css) → nhãn VN + tên miền cũng thu nhỏ cho cân. Từ 1000px trở xuống đầu trang dùng bố cục điện thoại (shop.css). */
@media (max-width:1200px){
  .sh-brand .brandword{gap:3px}
  .sh-brand .branddom{font-size:9px}
  .sh-brand .brandvn{margin:0 0 0 5px;padding:4px 6px 3px;border-radius:7px;font-size:12px;box-shadow:1.5px 1.5px 0 #2DD4BF}
}
.navlinks{display:flex;gap:12px;font-size:var(--fs-h3);font-weight:700}
.navlink{position:relative;display:inline-block;padding:14px 22px;border-radius:16px;color:var(--ink);transition:color .25s,background-color .25s,transform .25s,box-shadow .25s}
.navlink::after{content:"";position:absolute;left:50%;bottom:6px;width:0;height:4px;border-radius:4px;background:linear-gradient(90deg,#2A52D9,#2DD4BF);transform:translateX(-50%);transition:width .3s cubic-bezier(.2,.8,.2,1)}
.navlink:hover{color:#2A52D9;background:rgba(42,82,217,.12);transform:translateY(-3px) scale(1.08);box-shadow:0 8px 20px rgba(42,82,217,.15)}
.navlink:hover::after{width:70%}
:root.dark .navlink:hover{color:#A5C0FF;background:rgba(165,192,255,.12)}
.hdr-right{display:flex;gap:10px;align-items:center;justify-self:end}

.themebtn{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--line2);background:var(--surface);color:var(--deep-ink);display:flex;align-items:center;justify-content:center;padding:0;transition:transform .3s,background .3s}
.themebtn:hover{transform:rotate(20deg) scale(1.06)}
.musicbtn{color:var(--accent-ink)}
.musicbtn[hidden]{display:none}
.musicbtn:hover{transform:scale(1.08)}
.musicbtn .ico-on{display:none}
.musicbtn.on .ico-on{display:block}
.musicbtn.on .ico-off{display:none}
.musicbtn.on{border-color:#2DD4BF;box-shadow:0 0 0 3px rgba(45,212,191,.28)}
.musicbtn.wait{animation:musicwait 1.8s ease-in-out infinite}
@keyframes musicwait{0%,100%{box-shadow:0 0 0 0 rgba(42,82,217,.0)}50%{box-shadow:0 0 0 6px rgba(42,82,217,.22)}}
@media (prefers-reduced-motion:reduce){.musicbtn.wait{animation:none}}
.themebtn .ico-sun{display:none}
:root.dark .themebtn .ico-moon{display:none}
:root.dark .themebtn .ico-sun{display:block}
.btn-login{color:var(--deep-ink);padding:14px 22px;border:1.5px solid var(--line2);border-radius:12px;background:var(--surface);transition:transform .2s,box-shadow .2s;font-size:var(--fs-lg);font-weight:700;line-height:1.3}
.btn-topup{background:var(--blue);color:#fff;padding:14px 24px;border:0;border-radius:12px;transition:transform .2s,box-shadow .2s;font-size:var(--fs-lg);font-weight:700;line-height:1.3}
.btn-login:hover,.btn-topup:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(42,82,217,.25)}
.menubtn{display:none;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);align-items:center;justify-content:center;padding:0}
.menubtn .ico-close{display:none}
.menubtn[aria-expanded="true"] .ico-burger{display:none}
.menubtn[aria-expanded="true"] .ico-close{display:block}

.mobilemenu{display:none;background:var(--surface);border-bottom:1px solid var(--line);padding:12px 16px 18px;flex-direction:column;gap:6px;animation:mmIn .25s ease-out}
@keyframes mmIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mmgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mmlink{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:background-color .2s;font-size:var(--fs-md);font-weight:700;line-height:1.3}
.mmlink:hover,.mmlink:active{background:var(--soft-blue);color:var(--ink)}
.mmico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.mmico.blue{background:var(--soft-blue);color:var(--accent-ink)}
.mmico.teal{background:var(--soft-teal);color:var(--teal-ink)}
.mm-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:8px}
.mm-login,.mm-topup{text-align:center;padding:14px;border-radius:14px;font-size:var(--fs-lg);font-weight:700;line-height:1.3}
.mm-login{border:1.5px solid var(--line2);color:var(--deep-ink);background:var(--surface)}
.mm-topup{border:0;background:var(--blue);color:#fff}

/* ---------- Chữ chạy ---------- */
.tickerbar{background:#0F1B3D;color:#A7F3E4;overflow:hidden;padding:12px 0;letter-spacing:1px;transform:rotate(-1deg);margin-top:14px;border-top:3px solid #2DD4BF;border-bottom:3px solid #2DD4BF;font-size:var(--fs-md);font-weight:700}
.ticker{display:flex;width:max-content;gap:36px;white-space:nowrap;animation:tick 28s linear infinite}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- Hero ---------- */
.herosec{padding:56px 0 72px;min-height:calc(100vh - 210px);display:flex;align-items:center}
.herosec>.wrap{width:100%}
.hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,96px);align-items:center}
/* Trang chủ web (07/11/2026): cả khung “Một chạm kết nối…” xích lại gần ảnh người quản lý và nằm giữa màn hình, không còn dính lề trái trên màn hình rộng */
/* Cột chữ rộng tối đa 760px (vừa đủ cho tiêu đề 2 dòng), cột ảnh tối đa 560px, cả cụm nằm giữa → hai bên lề bằng nhau, ảnh sát chữ hơn. Chỉ màn hình rộng: ≤1200px vẫn một cột như cũ. */
@media (min-width:1201px){html:not(.app-mode) .hero{grid-template-columns:minmax(0,760px) minmax(0,560px);justify-content:center;gap:clamp(32px,3.2vw,64px)}}
.hero-text{display:flex;flex-direction:column;gap:22px}
.promo{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;white-space:nowrap;text-align:center;color:var(--deep-ink);background:var(--soft-teal);border:1px solid #2DD4BF;padding:8px 16px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;line-height:1.3}
.promo-ico{font-size:1.15em;line-height:1;flex:none}
.h1{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;color:var(--ink);font-size:var(--fs-display);font-weight:800;line-height:1.2}
.gradtext{background:linear-gradient(90deg,#2A52D9,#14B8A6);-webkit-background-clip:text;background-clip:text;color:transparent}
:root.dark .gradtext{background-image:linear-gradient(90deg,#A5C0FF,#72F0DD)}
.hero-sub{margin:0;color:var(--muted);max-width:760px;font-size:var(--fs-lead);line-height:1.65}
.hero-btns{gap:12px;max-width:760px}
.hbtn{text-align:center;padding:16px 12px;border-radius:14px;transition:transform .2s,box-shadow .2s;font-size:var(--fs-lg);font-weight:700;line-height:1.3}
.hbtn:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(15,27,61,.2)}
/* Ba nút đầu trang chủ web (07/11/2026, chủ shop chốt: chữ hơi nhỏ, chưa rõ): chữ to hơn (17→20px theo màn hình), đậm hơn, nút cao hơn,
   nội dung căn giữa theo cả hai chiều, bóng đổ rõ hơn để nút tách khỏi nền. App Android không có khối này nên không đổi. */
html:not(.app-mode) .hero-btns{gap:14px}
html:not(.app-mode) .hbtn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:62px;padding:16px 18px;border-radius:16px;font-size:clamp(1.0625rem,.98rem + .3vw,1.25rem);font-weight:800;letter-spacing:.2px;line-height:1.25;box-shadow:0 10px 22px rgba(15,27,61,.22)}
html:not(.app-mode) .hb-blue,html:not(.app-mode) .hb-zalo{text-shadow:0 1px 1px rgba(0,0,0,.18)}
.hb-blue{background:var(--blue);color:#fff}.hb-blue:hover{color:#fff}
.hb-teal{background:#2DD4BF;color:#053D3A}.hb-teal:hover{color:#053D3A}
.hb-zalo{background:#0068FF;color:#fff}.hb-zalo:hover{color:#fff}
.pulse-call{animation:glowTeal 2s infinite}
@keyframes glowTeal{0%,100%{box-shadow:0 0 0 0 rgba(45,212,191,.6)}50%{box-shadow:0 0 0 12px rgba(45,212,191,0)}}
.stats{gap:12px;max-width:760px;padding-top:4px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;text-align:center;box-shadow:0 6px 18px var(--card-shadow)}
.stat-n{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;color:var(--accent-ink);font-size:var(--fs-h2);font-weight:800;line-height:1.2}
.stat-l{color:var(--muted);font-size:var(--fs-xs)}

.hero-pic{position:relative;display:flex;justify-content:center;padding-top:24px}
.pic-plate{position:absolute;top:0;width:88%;max-width:560px;aspect-ratio:3/4;border-radius:220px 220px 28px 28px;background:var(--blue);transform:rotate(4deg)}
.pic-frame{position:relative;width:88%;max-width:560px;aspect-ratio:3/4;border-radius:220px 220px 28px 28px;overflow:hidden;border:6px solid #2DD4BF;box-shadow:0 28px 60px rgba(30,58,158,.28);background:var(--surface)}
.pic-frame img{width:100%;height:100%;object-fit:cover;display:block}
.pic-name{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);background:var(--surface);border:2px solid #2DD4BF;border-radius:16px;padding:12px 22px;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.12);white-space:nowrap}
.pic-name-1{font-family:'Lobster',cursive;font-size:26px;color:var(--accent-ink);text-shadow:1px 1px 0 #2DD4BF}
.pic-name-2{color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.pic-chip{position:absolute;left:0;top:30%;background:#2DD4BF;color:#053D3A;padding:10px 14px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.12);font-size:var(--fs-sm);font-weight:700;line-height:1.3}
.bounce{animation:bounce 2.6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(6deg)}}

/* ---------- Khối chung ---------- */
.sec{padding:80px 0}
.sec-in{display:flex;flex-direction:column;gap:40px}
.sec-head{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.eyebrow{letter-spacing:3px;color:var(--teal-ink);font-size:var(--fs-xs);font-weight:600}
.sec-head h2{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;color:var(--ink);font-size:var(--fs-h1);font-weight:800;line-height:1.2}
.sec-head p{margin:0;color:var(--muted);max-width:820px;font-size:var(--fs-lead)}

/* ---------- Dịch vụ ---------- */
.card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:30px 24px 26px;width:100%;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:20px;color:var(--ink);box-shadow:0 8px 24px var(--card-shadow);transition:transform .25s,box-shadow .25s}
.card.c-teal{border-top-color:#2DD4BF}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(42,82,217,.18)}
.svc-ic{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center}
.svc-ic svg{width:30px;height:30px}
.svc-ic.blue{background:var(--soft-blue);color:var(--accent-ink)}
.svc-ic.teal{background:var(--soft-teal);color:var(--teal-ink)}
/* Chữ trong thẻ dịch vụ lớn dần theo bề rộng màn hình (ô to thì chữ to, cân với khung): tên 19→24px, mô tả 15→17px, nút 15→16px */
.svc-t{font-size:clamp(1.1875rem,1rem + .5vw,1.5rem);font-weight:700;line-height:1.3}
.svc-d{color:var(--muted);font-size:clamp(.9375rem,.86rem + .2vw,1.0625rem);line-height:1.6;max-width:46ch}
.cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;margin-top:auto;align-self:center;padding:13px 24px;border-radius:999px;background:linear-gradient(90deg,#2A52D9,#0E7C86,#2A52D9);background-size:200% 100%;background-position:0 0;color:#fff;letter-spacing:.2px;box-shadow:0 8px 18px rgba(42,82,217,.3);transition:transform .25s,box-shadow .25s,background-position .45s;font-size:clamp(.9375rem,.9rem + .1vw,1rem);font-weight:700;line-height:1.3}
.cta::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 3s ease-in-out infinite}
.g5>.card:nth-child(even) .cta::after{animation-delay:1.5s}
.cta .arr{display:inline-block;animation:arr 1.2s ease-in-out infinite}
@keyframes shine{0%{left:-60%}55%,100%{left:130%}}
@keyframes arr{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.card:hover .cta{transform:scale(1.07);box-shadow:0 12px 26px rgba(42,82,217,.45);background-position:100% 0}

/* Nhãn "Đang bảo trì" */
.maint-badge{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:4px;color:#7A4A00;background:#FFE8B0;border:1px solid #F5C451;padding:4px 10px;border-radius:999px;box-shadow:0 4px 10px rgba(122,74,0,.12);white-space:nowrap;font-size:var(--fs-xs);font-weight:600;line-height:1.3}
:root.dark .maint-badge{color:#FFE8B0;background:#5A3D08;border-color:#8A6215}
.card.is-maint{filter:grayscale(.55)}
.card.is-maint .cta{background:#5B6478;color:#fff}
.card.is-maint .cta::after,.card.is-maint .cta .arr{animation:none}

/* ---------- Quy trình ---------- */
/* Bốn ô cùng một khung cố định (cao tối thiểu đủ cho tên ≤36 ký tự + mô tả ≤100 ký tự mà admin được nhập), chữ tự xuống dòng cân đối.
   Chữ dài thì js/pagecontent.js gắn lớp .st-long để thu nhỏ chữ một nấc, khung không bị kéo cao lệch nhau. */
.step{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:12px;padding:30px 24px;min-height:clamp(230px,17vw,270px);background:var(--surface);border-radius:20px;border:1px solid var(--line);box-shadow:0 8px 24px var(--card-shadow)}
.step-n{flex:none;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-h3);font-weight:800}
.sn-blue{background:var(--blue);color:#fff}
.sn-teal{background:#2DD4BF;color:#053D3A}
.step-t{font-size:clamp(1.1875rem,1rem + .45vw,1.4375rem);font-weight:700;line-height:1.3;max-width:22ch}
.step-d{color:var(--muted);font-size:clamp(.9375rem,.87rem + .2vw,1.0625rem);line-height:1.6;max-width:34ch}
.step.st-long .step-t{font-size:clamp(1.0625rem,.95rem + .3vw,1.25rem)}
.step.st-long .step-d{font-size:clamp(.875rem,.84rem + .12vw,.9375rem)}
/* Cân đối (07/11/2026, trang chủ web): nội dung nằm GIỮA ô theo chiều dọc (khoảng trống chia đều trên/dưới, không dồn hết xuống đáy), khung thấp lại vừa chữ */
html:not(.app-mode) .step{justify-content:center;min-height:clamp(200px,13.5vw,232px);padding:28px 24px}

/* ---------- Về chúng tôi ---------- */
.aboutpanel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(28px,4vw,64px);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:32px;padding:clamp(24px,3.5vw,56px);box-shadow:0 24px 60px var(--card-shadow)}
.about-left{display:flex;flex-direction:column;align-items:center;gap:22px}
.about-logo{position:relative;width:100%;max-width:320px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 45%,var(--soft-teal),var(--soft-blue) 60%,transparent 72%);display:flex;align-items:center;justify-content:center}
.about-logo img{width:68%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(30,58,158,.25))}
.mgr-chip{display:flex;align-items:center;gap:14px;padding:12px 20px 12px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.mgr-chip img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid #2DD4BF}
.mgr-txt{display:flex;flex-direction:column;line-height:1.3}
.mgr-1{font-family:'Lobster',cursive;font-size:22px;color:var(--accent-ink)}
.mgr-2{color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.about-right{display:flex;flex-direction:column;gap:18px}
.tag{align-self:flex-start;letter-spacing:3px;color:var(--teal-ink);background:var(--soft-teal);padding:6px 14px;border-radius:999px;font-size:var(--fs-xs);font-weight:600}
.about-right h2{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;color:var(--ink);font-size:var(--fs-h2);font-weight:800;line-height:1.25}
.about-right h2 .ln{display:block;white-space:nowrap}
.about-right h2{text-align:center}
.about-right h2 .seg{display:inline-block}
.about-right p{margin:0;color:var(--muted);font-size:var(--fs-lg);line-height:1.65}
.about-right p b{color:var(--ink)}
.valgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:6px}
.valcard2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 18px;border-radius:20px;background:var(--bg);border:1px solid var(--line);border-top:4px solid var(--blue);transition:transform .25s,box-shadow .25s}
.valcard2.vc-teal{border-top-color:#2DD4BF}
.valcard2:hover{transform:translateY(-5px);box-shadow:0 14px 30px var(--card-shadow)}
.vc-ic{width:58px;height:58px;border-radius:17px;display:flex;align-items:center;justify-content:center}
.bg-blue{background:var(--blue)}.bg-teal{background:#2DD4BF}
.vc-t{font-family:'Baloo 2',sans-serif;color:var(--ink);letter-spacing:1px;font-size:clamp(1.25rem,1.1rem + .35vw,1.5rem);font-weight:800;line-height:1.25}
.vc-d{color:var(--muted);font-size:clamp(.9375rem,.88rem + .15vw,1.0625rem);line-height:1.6}
/* Ba ô Tâm · Tín · Trí (07/11/2026, trang chủ web): ba ô cao bằng nhau, nội dung nằm giữa ô theo chiều dọc (không dồn lên trên),
   có vạch nhấn ngắn dưới chữ TÂM/TÍN/TRÍ để chia rõ tiêu đề và lời mô tả, chữ mô tả giới hạn bề ngang cho dòng đều nhau */
html:not(.app-mode) .valgrid{align-items:stretch}
html:not(.app-mode) .valcard2{justify-content:center;gap:12px;padding:28px 22px;min-height:clamp(220px,15vw,250px)}
html:not(.app-mode) .valcard2 .vc-t::after{content:"";display:block;width:30px;height:3px;margin:8px auto 0;border-radius:3px;background:var(--blue);opacity:.75}
html:not(.app-mode) .valcard2.vc-teal .vc-t::after{background:#2DD4BF}
html:not(.app-mode) .valcard2 .vc-d{max-width:30ch;margin:0 auto}
@media (max-width:600px){html:not(.app-mode) .step,html:not(.app-mode) .valcard2{min-height:0}}
/* Phần “Về Doki” trên trang chủ web (07/11/2026, chủ shop chốt: mở web to thấy chữ nhỏ quá): mọi cỡ chữ CO GIÃN theo bề rộng màn hình —
   màn hình to thì chữ to, rõ; thu nhỏ cửa sổ hay xem trên điện thoại thì chữ tự nhỏ dần nhưng không dưới mức dễ đọc.
   Đoạn giới thiệu 16→20px (chữ đậm hơn một chút để rõ), tiêu đề Tâm·Tín·Trí 26→40px, nhãn VỀ DOKI 13→15px, ba ô Tâm/Tín/Trí và thẻ người quản lý to theo. */
html:not(.app-mode) .about-right{gap:clamp(16px,1.4vw,24px)}
html:not(.app-mode) .about-right .tag{padding:7px 16px;font-size:clamp(.8125rem,.74rem + .22vw,.9375rem)}
html:not(.app-mode) .about-right h2{font-size:clamp(1.625rem,1.05rem + 1.35vw,2.5rem);line-height:1.22}
html:not(.app-mode) .about-right p{color:var(--ink2);font-size:clamp(1rem,.88rem + .4vw,1.25rem);line-height:1.75}
html:not(.app-mode) .about-right p b{font-weight:800}
html:not(.app-mode) .valcard2 .vc-t{font-size:clamp(1.25rem,1.05rem + .5vw,1.625rem)}
html:not(.app-mode) .valcard2 .vc-d{font-size:clamp(.9375rem,.84rem + .28vw,1.125rem)}
html:not(.app-mode) .vc-ic{width:clamp(52px,3.6vw,62px);height:clamp(52px,3.6vw,62px)}
html:not(.app-mode) .mgr-chip{padding:12px 22px 12px 12px}
html:not(.app-mode) .mgr-chip img{width:clamp(52px,3.6vw,62px);height:clamp(52px,3.6vw,62px)}
html:not(.app-mode) .mgr-1{font-size:clamp(1.375rem,1.1rem + .6vw,1.75rem)}
html:not(.app-mode) .mgr-2{font-size:clamp(.8125rem,.74rem + .22vw,.9375rem)}
html:not(.app-mode) .mgr-msg{font-size:clamp(.9375rem,.85rem + .28vw,1.125rem);max-width:380px}
/* Nội dung “Về Doki” sửa trong admin (07/11/2026): phần nào để trống thì ẩn hẳn (thuộc tính hidden thắng display của các lớp ở trên);
   ẩn bớt ô Tâm/Tín/Trí thì các ô còn lại dàn đều cả hàng (data-n do js/pagecontent.js đặt). Điện thoại vẫn 1 cột như cũ. */
.about-right .tag[hidden],#aboutH2[hidden],#aboutH2 [hidden],.valgrid[hidden],.valcard2[hidden],.valcard2 .vc-t[hidden],.valcard2 .vc-d[hidden]{display:none!important}
@media (min-width:601px){.valgrid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.valgrid[data-n="1"]{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto;width:100%}}

/* ---------- Chân trang ---------- */
.footer{background:var(--footer-bg);backdrop-filter:blur(2px);border-top:4px solid var(--blue);padding:56px 0 28px}
.footwrap{display:flex;flex-direction:column;gap:36px}
.footgrid{gap:32px}
.fcol-brand{display:flex;flex-direction:column;gap:12px}
.fcol-brand img{width:80px;height:79px;object-fit:contain}
.foot-brand{font-family:'Lobster',cursive;font-size:34px;line-height:1;color:var(--accent-ink);text-shadow:2px 2px 0 #2DD4BF}
.foot-line{color:var(--ink2);font-size:var(--fs-sm)}
.foot-sub{color:var(--muted);font-size:var(--fs-sm);font-weight:600}
.fcol{display:flex;flex-direction:column;gap:10px;align-items:flex-start;font-size:var(--fs-sm)}
.fcol-t{color:var(--ink);font-size:var(--fs-md);font-weight:700}
.flink{background:none;border:0;padding:0;text-align:left;color:var(--blue);transition:color .2s,transform .2s;font-size:var(--fs-sm)}
.flink:hover{color:var(--deep-ink);transform:translateX(3px)}
:root.dark .flink{color:#A5C0FF}
.foot-social{display:flex;gap:8px;padding-top:8px}
.foot-social a{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;color:var(--ink);transition:transform .2s;font-size:var(--fs-xs);font-weight:600}
.foot-social a:hover{transform:translateY(-3px);color:var(--ink)}
.fs-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 6px 16px rgba(15,27,61,.2),0 0 0 1px var(--line)}
.fs-ic svg{display:block}
.copyright{color:var(--muted);border-top:1px solid var(--line);padding-top:20px;text-align:center;font-size:var(--fs-xs)}
@media (min-width:1201px){.footwrap{padding-right:104px}}

/* ---------- Hộp thoại & thông báo ---------- */
.modal{border:0;padding:0;border-radius:24px;width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);background:var(--surface);color:var(--ink);box-shadow:0 30px 80px rgba(15,27,61,.4);overflow:visible}
/* Mở hộp mượt (07/11/2026): KHÔNG làm mờ nền bằng backdrop-filter nữa — nền trang có nhiều hiệu ứng chạy liên tục nên mỗi khung hình trình duyệt phải làm mờ lại
   cả màn hình (giật khi mở hộp và khi chọn mục). Thay bằng lớp phủ tối đặc hơn một chút + hiện dần; hộp trượt lên nhẹ bằng transform/opacity (chạy trên GPU), không nảy. */
.modal::backdrop{background:rgba(10,18,44,.66)}
.modal[open]{animation:pop .22s cubic-bezier(.16,1,.3,1)}
.modal[open]::backdrop{animation:backdropIn .2s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
.modal-x{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:3px solid var(--surface);background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25);padding:0;font-size:var(--fs-lg);font-weight:700}
.modal-x svg{display:block;margin:auto;pointer-events:none}
/* Nút ✕ đóng hộp — trang chủ trên web (07/11/2026, chủ shop chốt: kiểu cũ “xấu”): nằm GỌN trong góc hộp (không lòi ra ngoài đè lên cột ảnh),
   tròn, nền cùng màu hộp + viền mảnh + bóng nhẹ, dấu ✕ vẽ bằng nét SVG cho sắc nét; rê chuột: xoay 90° và đổi sang nền xanh thương hiệu, chữ trắng. */
html.pg-home:not(.app-mode) .modal-x{top:14px;right:14px;z-index:3;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--ink2);box-shadow:0 6px 18px rgba(15,27,61,.18);font-size:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s,border-color .2s,box-shadow .2s}
html.pg-home:not(.app-mode) .modal-x svg{width:18px;height:18px}
html.pg-home:not(.app-mode) .modal-x:hover{transform:rotate(90deg);background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(42,82,217,.4)}
html.pg-home:not(.app-mode) .modal-x:active{transform:rotate(90deg) scale(.92)}
html.pg-home:not(.app-mode) .modal-x:focus-visible{outline:3px solid #F5B301;outline-offset:2px}
html.pg-home:not(.app-mode) .modal.svc .m-title{padding-right:52px}
@media (prefers-reduced-motion:reduce){html.pg-home:not(.app-mode) .modal-x,html.pg-home:not(.app-mode) .modal-x:hover{transition:none;transform:none}}
.modal-body{padding:34px 28px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-height:calc(100vh - 64px);overflow:auto}
.m-ic{width:72px;height:72px;border-radius:20px;background:var(--soft-blue);display:flex;align-items:center;justify-content:center}
.m-ic img{width:52px;height:52px}
.m-ic.emoji{font-size:36px}
.m-title{font-family:'Baloo 2',sans-serif;color:var(--ink);font-size:var(--fs-h2);font-weight:800;line-height:1.25}
.m-desc{margin:0;color:var(--muted);font-size:var(--fs-md);line-height:1.65}
.m-warn{width:100%;background:#FFF3D1;border:1px solid #F5C451;color:#7A4A00;border-radius:14px;padding:12px 14px;font-size:var(--fs-sm);font-weight:600;line-height:1.55}
:root.dark .m-warn{background:#4A3308;border-color:#8A6215;color:#FFE8B0}
.m-actions{display:grid;gap:10px;width:100%;padding-top:4px}
.m-btn{display:block;text-align:center;padding:15px 12px;border-radius:14px;border:0;transition:transform .2s,box-shadow .2s;font-size:var(--fs-lg);font-weight:700;line-height:1.3}
.m-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,27,61,.2)}
.m-btn.zalo{background:#0068FF;color:#fff}.m-btn.zalo:hover{color:#fff}
.m-btn.call{background:#2DD4BF;color:#053D3A}.m-btn.call:hover{color:#053D3A}
.m-btn.ghost{background:var(--bg);color:var(--ink);border:1.5px solid var(--line2)}
.m-btn.ghost:hover{color:var(--ink)}
.m-note{color:var(--muted);font-size:var(--fs-xs);font-weight:500;line-height:1.5}
.m-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;width:100%;text-align:left}
.m-list li{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--ink2);font-size:var(--fs-md);line-height:1.55}
.m-list li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:#2DD4BF;color:#053D3A;font-weight:600;font-size:var(--fs-xs);display:flex;align-items:center;justify-content:center;margin-top:1px}

.toast{position:fixed;left:50%;bottom:28px;z-index:100;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#0F1B3D;color:#fff;padding:13px 20px;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.35);max-width:min(440px,calc(100vw - 32px));text-align:center;transition:opacity .25s,transform .25s;font-size:var(--fs-md);font-weight:600;line-height:1.5}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Co theo màn hình ---------- */
@media (max-width:1499px) and (min-width:1201px){
  .navlinks{gap:4px;font-size:var(--fs-xl)}
  .navlink{padding:12px 11px}
  .hdrwrap{column-gap:28px}
}
@media (max-width:1280px) and (min-width:1201px){.navlinks{font-size:var(--fs-lg)}}
/* Logo Doki VN rộng hơn (thêm nhãn VN): màn 1201–1299px thu khoảng cách menu để nút "Nạp Tiền" không bị đẩy ra ngoài */
@media (max-width:1299px) and (min-width:1201px){.hdrwrap{column-gap:18px}.navlink{padding:12px 8px}}
@media (max-width:1599px) and (min-width:1500px){.navlink{padding:14px 14px}}
@media (max-width:1200px){
  :root{--hdr-h:128px}
  section[id],footer[id]{scroll-margin-top:calc(var(--hdr-h) + 4px)}
  .g3,.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-btns,.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Hero co giãn theo chiều rộng: bỏ giới hạn 760px để không chừa trống bên phải */
  .hero-sub,.hero-btns,.stats{max-width:none;width:100%}
  .hero-btns{gap:clamp(8px,1.4vw,16px)}
  .hero-btns>a{padding:clamp(13px,1.9vw,20px) 8px;font-size:var(--fs-lg)}
  .stats{gap:clamp(8px,1.4vw,16px)}
  .stat{padding:clamp(10px,1.6vw,18px) clamp(4px,1.2vw,16px)}
  .svcgrid{gap:12px}
  .hero{grid-template-columns:minmax(0,1fr)}
  .herosec{min-height:0;display:block}
  .navlinks,.hidem2{display:none!important}
  .menubtn{display:flex}
  .mobilemenu:not([hidden]){display:flex}
  .hdrwrap{display:flex;justify-content:space-between}
  .promo{align-self:center;white-space:normal;text-align:center;gap:12px;padding:10px 18px 10px 14px;max-width:92%;border-radius:18px;font-size:var(--fs-xs);font-weight:600;line-height:1.4}
  .promo-ico{font-size:30px}
  .promo-txt{flex:1}
  .aboutpanel{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .tb-right{display:none}
  .topbar-in{justify-content:center}
}
@media (max-width:600px){
  :root{--hdr-h:112px}
  .wrap{padding:0 16px}
  .g3,.g4{grid-template-columns:minmax(0,1fr)}
  .step{min-height:0}
  .svcgrid,.footgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-right h2 .ln{white-space:normal;overflow-wrap:anywhere}
  .about-right h2 .seg{display:block}
  .about-right h2 .dot{display:none}
  .about-right h2 .l1 .ed{display:none}
  .about-right h2 .seg::before{content:"· "}
  .about-right h2 .seg::after{content:" ·"}
  .sec{padding:52px 0}
  .topbar{padding:11px 0;font-size:var(--fs-xs)}
  .tb-sep,.tb-hours{display:none}
  .tb-left{gap:4px}
  .hdrwrap{padding-top:12px;padding-bottom:12px}
  .brandtxt{font-size:30px}
  .brandlogo{width:44px;height:43px}
  .brandword{gap:2px}
  .branddom{font-size:8px;letter-spacing:.12em;padding-left:.12em}
  .brandvn{margin:0 0 0 5px;padding:4px 6px 3px;border-radius:7px;font-size:11.5px;box-shadow:1.5px 1.5px 0 #2DD4BF}
  .themebtn{width:42px;height:42px}
  .floatcol{right:10px;bottom:14px;gap:8px}
  .floatcol>a{width:44px;height:44px}
  .floatcol>a>svg{width:38px;height:38px}
  .floatcol>a>svg.shake{width:22px;height:22px}
  .fl-zalo{font-size:var(--fs-xs);font-weight:600}
  .hero-btns,.stats{grid-template-columns:minmax(0,1fr)}
  .hero-btns{gap:10px}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .stat{padding:10px 2px}
  .svcgrid>.card{padding:18px 12px;gap:10px}
  .svcgrid .svc-ic{width:46px;height:46px}
  .svcgrid .svc-ic svg{width:24px;height:24px}
  .svcgrid .svc-t{font-size:var(--fs-md);line-height:1.3}
  .svcgrid .svc-d{font-size:var(--fs-xs);line-height:1.5}
  .svcgrid .cta{padding:9px 14px;font-size:var(--fs-xs);font-weight:600}
  .svcgrid .maint-badge{padding:3px 7px;top:6px;right:6px;font-size:var(--fs-xs)}
  .valgrid{grid-template-columns:minmax(0,1fr)}
  .footwrap{padding-left:52px;padding-right:52px}
  .footgrid{gap:26px 16px;font-size:var(--fs-sm)}
  .fcol-brand,.fcol-contact{grid-column:1/-1;align-items:center;text-align:center}
  .fcol-contact{padding-top:18px;border-top:1px solid var(--line)}
  .fcol-contact .flink{text-align:center}
  .fcol-contact .flink.fct{text-align:left}
  .foot-social{justify-content:center}
  .footgrid>.fcol:nth-child(2),.footgrid>.fcol:nth-child(3){padding-top:18px;border-top:1px solid var(--line)}
}
@media (max-width:360px){.tb-owner{display:none}}

/* Người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fall,.sway,.pulse-call,.ticker,.bounce,.shake,.wave,.wavez,.cta::after,.cta .arr,.modal[open],.modal[open]::backdrop,.mobilemenu{animation:none!important}
  .fall{display:none}
  .navlink,.navlink::after,.card,.valcard2{transition:none}
}
html.modal-open{overflow:hidden}
/* (07/11/2026, chủ shop chốt) Hình nền động phía sau VẪN CHẠY khi hộp dịch vụ / đăng nhập đang mở. Hộp vẫn nhẹ vì lớp phủ không còn làm mờ (backdrop-filter) cả màn hình. */

/* ---------- Tài khoản / đăng nhập / nạp tiền ---------- */
.m-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:5px}
.m-tab{border:0;background:none;border-radius:10px;padding:10px;color:var(--muted);font-size:var(--fs-md);font-weight:600;line-height:1.3}
.m-tab.on{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(42,82,217,.3)}
.m-form{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left}
.m-field{display:flex;flex-direction:column;gap:6px;color:var(--ink2);font-size:var(--fs-sm);font-weight:600;line-height:1.3}
.m-field input,.m-field select,.m-field textarea{padding:13px 14px;border-radius:13px;border:1.5px solid var(--line2);background:var(--bg);color:var(--ink);outline:none;width:100%;font-family:inherit;font-size:var(--fs-lg);font-weight:500;line-height:1.3}
.m-field input:focus,.m-field select:focus,.m-field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(42,82,217,.15)}
.m-err{background:#FDECEA;color:var(--danger);border-radius:12px;padding:10px 12px;font-size:var(--fs-sm);font-weight:600;line-height:1.5}
:root.dark .m-err{background:#4A1F1C;color:#FF9C94}
.m-btn:disabled{opacity:.6;pointer-events:none}
.m-bal{width:100%;background:linear-gradient(135deg,var(--soft-blue),var(--soft-teal));border-radius:18px;padding:16px}
.m-bal-l{color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.m-bal-n{font-family:'Baloo 2',sans-serif;color:var(--accent-ink);font-size:min(var(--fs-h1),2.25rem);font-weight:800;line-height:1.2}
.m-sec{width:100%;text-align:left;color:var(--muted);margin-bottom:-4px;font-size:var(--fs-xs);font-weight:600}
.m-hist{max-height:230px;overflow:auto}
.m-hist li::before{display:none}
.m-hist-row{display:block!important;padding:9px 12px!important}
.m-hist-row b{color:var(--teal-ink);font-size:var(--fs-md);font-weight:700}
.m-hist-row.neg b{color:var(--danger)}
.m-hist-row small{display:block;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums;font-size:var(--fs-xs);font-weight:500;line-height:1.5}
.m-hist-empty{color:var(--muted)!important;justify-content:center;font-size:var(--fs-sm)!important}
.m-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.m-chip{border:1.5px solid var(--line2);background:var(--surface);border-radius:999px;padding:7px 14px;color:var(--ink);font-size:var(--fs-md);font-weight:600;line-height:1.3}
.m-chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.m-qr{width:220px;height:220px;max-width:70vw;border-radius:16px;background:#fff;border:1px solid var(--line);padding:6px;object-fit:contain}
.m-rows{display:grid;gap:8px;width:100%;text-align:left}
.m-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.m-row.key{border-color:#2DD4BF;background:var(--soft-teal)}
.m-row-t{display:flex;flex-direction:column;min-width:0}
.m-row-t small{color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.m-row-t b{word-break:break-all;color:var(--ink);font-size:var(--fs-lg);font-weight:700}
.m-copy{flex:none;border:1.5px solid var(--line2);background:var(--surface);border-radius:10px;padding:7px 11px;color:var(--deep-ink);font-size:var(--fs-sm);font-weight:700;line-height:1.3}
.m-wait{width:100%;background:var(--soft-blue);border-radius:12px;padding:11px;color:var(--ink);font-size:var(--fs-sm);font-weight:600}
.m-wait.ok{background:#D7F5E3;color:#0B6B3A}
:root.dark .m-wait.ok{background:#14503A;color:#B9F5D3}
/* Phiếu nạp (08/11/2026): chỗ trống trước khi bấm "Tạo QR"; QR mờ + lời nhắn khi phiếu hết hạn 15 phút */
.m-qrph{width:100%;border:2px dashed var(--line);border-radius:16px;padding:24px 18px;text-align:center;color:var(--muted);font-size:var(--fs-sm);font-weight:500;line-height:1.6;background:var(--bg)}
.m-qr.exp{opacity:.35;filter:grayscale(1)}
.m-wait.exp{background:#FFF1DB;color:#7A4B00}
:root.dark .m-wait.exp{background:#4A3410;color:#FFE0A8}

/* ===== Hiệu ứng đổi màu khi rê chuột vào chỗ bấm được ===== */
.btn-login,.btn-topup,.themebtn,.menubtn,.hbtn,.m-btn,.card{transition:transform .2s,box-shadow .2s,background-color .25s,color .25s,border-color .25s}
.btn-login:hover{background:var(--soft-blue);border-color:#2A52D9;color:var(--accent-ink)}
.btn-topup:hover{background:#0E7C86;color:#fff}
.themebtn:hover,.menubtn:hover{background:var(--soft-blue);border-color:#2A52D9}
.hb-blue:hover{background:#0E7C86}
.hb-teal:hover{background:#2A52D9;color:#fff}
.hb-zalo:hover{background:#0050C8}
.m-btn.zalo:hover{background:#0050C8}
.m-btn.call:hover{background:#2A52D9;color:#fff}
.m-btn.ghost:hover{background:var(--soft-blue);border-color:#2A52D9;color:var(--accent-ink)}
.card:hover{background:var(--soft-blue)}
.card.c-teal:hover{background:var(--soft-teal)}
.flink:hover{color:#0E7C86}
:root.dark .flink:hover{color:#2DD4BF}
.tb-phone:hover{color:#A7F3E4}
.foot-social a:hover{color:#0E7C86}
:root.dark .foot-social a:hover{color:#2DD4BF}
.floatcol>a{transition:transform .2s,filter .2s}
.floatcol>a:hover{filter:brightness(1.15) saturate(1.25)}

/* ===== Đặt đơn: form, danh sách đơn ===== */
.m-field textarea{resize:vertical;min-height:84px;line-height:1.5}
.m-field select{appearance:auto}
.m-opt{font-style:normal;font-weight:500;color:var(--muted)}
.m-btn.order{background:linear-gradient(90deg,#2A52D9,#0E7C86);color:#fff;border:0}
.m-btn.order:hover{color:#fff;filter:brightness(1.12)}
.m-btn[disabled]{opacity:.6;pointer-events:none}
.m-orders{display:grid;gap:10px;width:100%;text-align:left;max-height:46vh;overflow:auto}
.m-order{background:var(--bg);border:1px solid var(--line);border-left:5px solid #2A52D9;border-radius:14px;padding:12px 14px;display:grid;gap:6px;font-size:var(--fs-sm)}
.m-order.st-processing{border-left-color:#E9A800}
.m-order.st-done{border-left-color:#1F9D61}
.m-order.st-cancelled{border-left-color:var(--line2);opacity:.75}
.m-order-h{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.m-order-h b{color:var(--ink);font-size:var(--fs-sm);font-weight:700}
.m-order small{color:var(--muted);font-size:var(--fs-xs)}
.m-chipst{flex:none;border-radius:999px;padding:3px 10px;background:var(--soft-blue);color:var(--accent-ink);white-space:nowrap;font-size:var(--fs-xs);font-weight:600;line-height:1.3}
.st-processing .m-chipst{background:#FFF3D1;color:#7A4A00}
.st-done .m-chipst{background:#D7F5E3;color:#0B6B3A}
.st-cancelled .m-chipst{background:var(--line);color:var(--muted)}
.m-order-r{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:var(--fs-sm)}
.m-order-r b{color:var(--ink);font-weight:700;text-align:right;word-break:break-word}
.m-order-note{background:var(--soft-teal);color:var(--ink);border-radius:10px;padding:8px 10px;font-size:var(--fs-sm);font-weight:500}
.m-link{justify-self:start;background:none;border:0;padding:0;color:var(--danger);text-decoration:underline;cursor:pointer;font-size:var(--fs-sm);font-weight:600}

.m-custom{display:flex;gap:8px;width:100%}
.m-custom input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line2);background:var(--bg);color:var(--ink);outline:none;font-family:inherit;font-size:var(--fs-lg);font-weight:500}
.m-custom input:focus{border-color:var(--blue)}
.m-custom .m-chip{flex:none}

/* ---------- Xu Doki: hình bay bấm được → đồng xu bay về Ví Doki (js/xu.js) ---------- */
.walletchip{display:inline-flex;align-items:stretch;border:1.5px solid #2DD4BF;border-radius:12px;background:var(--soft-teal);color:var(--ink);overflow:hidden;transition:transform .2s,box-shadow .2s}
.walletchip:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(14,124,134,.22)}
.walletchip.fit-off{display:none!important}
.walletchip button{border:0;background:none;color:inherit}
.walletchip .wc-main{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px}
.walletchip .wc-coin{flex:none;filter:drop-shadow(0 2px 3px rgba(120,80,0,.35))}
.walletchip .wc-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3}
.walletchip .wc-l{color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.walletchip b{color:var(--teal-ink);font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:700}
.walletchip .wc-top{padding:0 14px;background:#0E7C86;color:#fff;font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-sm);font-weight:700;transition:background-color .2s}
.walletchip .wc-top:hover{background:var(--blue)}
/* Khung ví trang chủ web kiểu thẻ ví viền vàng (mẫu 8B, chủ shop duyệt 07/11/2026); app giữ kiểu riêng */
html:not(.app-mode) .walletchip{align-items:center;padding:3px;border:2px solid transparent;border-radius:16px;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,#FCD34D,#F59E0B 45%,#2DD4BF) border-box;box-shadow:0 6px 18px rgba(245,158,11,.22)}
html:not(.app-mode) .walletchip:hover{box-shadow:0 10px 22px rgba(245,158,11,.32)}
html:not(.app-mode) .walletchip .wc-main{padding:2px 12px 2px 4px}
html:not(.app-mode) .walletchip b{color:var(--ink)}
html:not(.app-mode) .walletchip .wc-top{align-self:stretch;border-radius:12px;background:linear-gradient(135deg,#FFE58F,#F59E0B);color:#4A2A00;padding:0 15px;font-weight:800}
html:not(.app-mode) .walletchip .wc-top:hover{background:linear-gradient(135deg,#FDE68A,#FBBF24)}
.btn-topup.fold{display:none}
.xufront{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.xf{position:absolute;top:-80px;pointer-events:auto;cursor:var(--cur-click);animation:fall linear infinite;will-change:transform;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.xf *{cursor:var(--cur-click)}
.xfs{animation:sway 3.2s ease-in-out infinite alternate;transition:transform .15s,filter .15s}
.xf img{display:block;object-fit:contain;filter:drop-shadow(0 0 7px rgba(250,204,21,.85)) drop-shadow(0 5px 9px rgba(30,58,158,.25));-webkit-user-drag:none;user-select:none}
.xf .f-doki{display:inline-block;white-space:nowrap;font-family:'Lobster',cursive;line-height:1;text-shadow:0 0 10px rgba(250,204,21,.9),2px 2px 0 rgba(45,212,191,.5);user-select:none}
.xf:hover .xfs,.xf:focus-visible .xfs{filter:drop-shadow(0 0 10px #FACC15)}
.xf.busy{pointer-events:none;opacity:.55}
.xufront.noxu .xf{pointer-events:none;cursor:default;opacity:.35}
.xubox{position:fixed;left:14px;bottom:14px;z-index:60;display:flex;flex-direction:column;gap:8px;align-items:flex-start;max-width:calc(100vw - 28px)}
.xubadge{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;border:1.5px solid #F5C518;background:linear-gradient(135deg,#FFF8D6,#FFE27A);color:#5B4200;border-radius:999px;padding:7px 14px 7px 8px;font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 6px 18px rgba(120,90,0,.22)}
.xubadge::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:xushine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes xushine{0%,70%{left:-60%}100%{left:130%}}
.xubadge.full{background:linear-gradient(135deg,#EEF1F7,#D5DBE8);border-color:#B5BED0;color:#3B4660}
.xubadge.full::after{display:none}
.xuc{display:inline-block;width:22px;height:22px;flex:none}
.xuc svg{display:block;width:100%;height:100%}
.xuc.big{width:46px;height:46px;filter:drop-shadow(0 3px 5px rgba(120,80,0,.35))}
.xupnl{width:min(310px,calc(100vw - 28px));background:var(--surface);color:var(--ink);border:1.5px solid var(--line2);border-radius:16px;box-shadow:0 10px 30px rgba(15,27,61,.22);overflow:hidden;animation:xupop .18s ease-out}
@keyframes xupop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.xuph{display:flex;align-items:center;gap:16px;padding:18px 18px 16px;background:linear-gradient(135deg,#FFF3B8,#FFD65A 60%,#FFC02E);color:#4A3200}
.xupt{display:flex;flex-direction:column;gap:2px;line-height:1.25;min-width:0}
.xupt .xn{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums;font-size:1.875rem;font-weight:800;line-height:1.05;color:#3A2500}
.xupt .xus1{font-size:var(--fs-sm);font-weight:700;color:#5A3D00}
.xupt .xus2{font-size:var(--fs-xs);font-weight:500;color:#6B4A00;opacity:1}
.xubar{padding:12px 16px 2px;display:flex;flex-direction:column;gap:7px}
.xr{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm)}
.xr b{font-weight:700;color:var(--teal-ink);font-variant-numeric:tabular-nums}
.xbar{height:8px;border-radius:99px;background:var(--line2);overflow:hidden}
.xbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#F5C518,#FF9F1C);border-radius:99px;transform-origin:left center;transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.xupnl .xlogin{display:block;width:calc(100% - 32px);margin:12px 16px 0;border:0;border-radius:12px;padding:12px;background:var(--blue);color:#fff;font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-md);font-weight:700}
.xul{margin:0;padding:12px 16px 16px 32px;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
.xul b{font-weight:600;color:var(--ink)}
.xuhint{position:relative;background:#1B2559;color:#fff;border-radius:12px;padding:9px 13px;font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-xs);font-weight:600;box-shadow:0 8px 22px rgba(15,27,61,.3);max-width:230px;animation:xuhint 2.4s ease-in-out infinite}
.xuhint i{position:absolute;left:26px;bottom:-5px;width:10px;height:10px;background:#1B2559;transform:rotate(45deg)}
@keyframes xuhint{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.xufxl{position:fixed;inset:0;z-index:75;pointer-events:none;overflow:hidden}
.xufxl>*{position:absolute;will-change:transform,opacity}
.xufxl .xc{filter:drop-shadow(0 3px 5px rgba(120,80,0,.45))}
.xufxl .xp{font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-h3);font-weight:800;color:#FFE27A;-webkit-text-stroke:.6px #8A5A00;text-shadow:0 2px 0 #8A5A00,0 0 12px rgba(255,190,30,.95);white-space:nowrap}
.xufxl .xm{font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-lg);font-weight:700;color:#0E7C6B;text-shadow:0 0 6px #fff,0 0 10px #fff;white-space:nowrap}
.xufxl .xs{clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%)}
.xufxl .xg{border-radius:50%;border:2.5px solid #FFC928;box-shadow:0 0 12px rgba(255,200,40,.8)}
@media (max-width:600px){.xubox{left:10px;bottom:12px}}
@media (prefers-reduced-motion:reduce){
  .xf,.xfs{animation:none!important}
  .xubadge::after,.xuhint,.xupnl{animation:none}
  .xbar i{transition:none}
}
.m-hist-note{margin:0 0 8px;color:var(--muted);font-size:var(--fs-xs);font-weight:500;line-height:1.5}
/* Nút “Tải lịch sử” trong ghi chú lịch sử ví (07/11/2026): lịch sử tự xóa sau 72 giờ nên khách tải về để lưu */
.m-hist-dl{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:5px 12px;border-radius:999px;border:1.5px solid var(--blue);background:var(--soft-blue);color:var(--accent-ink);font-size:var(--fs-xs);font-weight:600;line-height:1.3}
.m-hist-dl:hover{background:var(--blue);color:#fff}

/* ---------- Cửa sổ dịch vụ: 2 cột (ảnh minh họa trái, nội dung phải) + mục con + ảnh ---------- */
.modal.svc{width:min(940px,calc(100vw - 32px))}
.modal.svc .modal-body{padding:0;display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);gap:0;align-items:stretch;text-align:left;border-radius:inherit}
/* Cột trái: nền phủ kín CẢ chiều cao cửa sổ (kể cả khi cuộn); hình căn giữa phần đang nhìn thấy */
.m-pic{position:relative;min-width:0;background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.55),transparent 46%),linear-gradient(160deg,var(--soft-blue) 0%,var(--soft-teal) 100%)}
:root.dark .m-pic{background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.1),transparent 46%),linear-gradient(160deg,var(--soft-blue) 0%,var(--soft-teal) 100%)}
.m-pic-in{position:sticky;top:0;height:min(100%,calc(100vh - 64px));display:flex;align-items:center;justify-content:center;padding:28px}
.m-pic-in img{display:block;width:min(100%,210px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(30,58,158,.22))}
.m-main{display:flex;flex-direction:column;gap:14px;padding:34px 32px 28px;min-width:0}
.modal.svc .m-title{padding-right:6px;font-size:var(--fs-h2);padding-right:6px}
.modal.svc .m-note{text-align:center}
.m-main .m-actions{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.m-main .m-actions .m-btn.order{grid-column:1/-1}
/* Trang chủ trên web (07/11/2026): hộp dịch vụ chỉ còn “Đặt Qua Zalo” (ưu tiên: rộng hơn, ánh sáng chạy + rung nhẹ theo nhịp) và “Gọi Hotline”.
   Hai nút NẰM CÙNG MỘT HÀNG (Zalo rộng gấp rưỡi), cao bằng nhau; màn hình điện thoại (≤760px, hộp chuyển 1 cột) thì xuống 2 dòng.
   Hiệu ứng chỉ dùng transform/opacity (chạy trên GPU) nên không làm hộp giật; người dùng tắt chuyển động thì đứng yên. */
.m-main .m-actions:has(> .m-hotline){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
.m-actions .m-btn.m-hot,.m-actions .m-btn.m-hotline{grid-column:auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;font-size:var(--fs-lg);font-weight:700;line-height:1.25}
@media (max-width:760px){.m-main .m-actions:has(> .m-hotline){grid-template-columns:minmax(0,1fr)}}
.m-btn.m-hot{position:relative;overflow:hidden;isolation:isolate;padding:17px 24px;border-radius:16px;background:linear-gradient(90deg,#0057E0,#1A85FF 50%,#0057E0);color:#fff;font-size:var(--fs-lg);letter-spacing:.2px;box-shadow:0 12px 26px rgba(0,104,255,.38);animation:hotNudge 3.2s ease-in-out infinite}
.m-btn.m-hot:hover{color:#fff;filter:brightness(1.07)}
.m-btn.m-hot::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-130%) skewX(-18deg);animation:hotShine 2.6s ease-in-out infinite;pointer-events:none}
@keyframes hotShine{0%{transform:translateX(-130%) skewX(-18deg)}60%,100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes hotNudge{0%,76%,100%{translate:0 0;scale:1}80%{scale:1.035}84%{translate:-4px 0}88%{translate:4px 0}92%{translate:-3px 0}96%{translate:2px 0;scale:1.01}}
.m-btn.m-hotline{padding:15px 20px;border-radius:16px;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink)}
.m-btn.m-hotline:hover{border-color:var(--blue);background:var(--soft-blue);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.m-btn.m-hot,.m-btn.m-hot::after{animation:none}}
.m-subwrap{min-width:0}
.m-sub{display:flex;flex-direction:column;gap:12px;min-width:0}
.m-sub-lbl{color:var(--ink);font-size:var(--fs-sm);font-weight:600}
.m-sub-chips{display:flex;flex-wrap:wrap;gap:8px}
.m-subchip{min-height:40px;max-width:100%;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:12px;padding:8px 13px;font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-md);font-weight:600;line-height:1.3;text-align:left;overflow-wrap:anywhere;transition:background-color .12s ease-out,border-color .12s ease-out,color .12s ease-out,transform .12s ease-out;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.m-subchip:hover{background:var(--soft-blue);border-color:var(--blue)}
.m-subchip:active{transform:scale(.96)}
.m-subchip.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 14px rgba(42,82,217,.28)}
.m-subchip:focus-visible,.m-subim:focus-visible,.m-zoom button:focus-visible{outline:3px solid #F5B301;outline-offset:2px}
.m-subbox{display:flex;flex-direction:column;gap:5px;padding:13px 15px;border-radius:14px;background:var(--soft-blue);box-shadow:inset 0 0 0 1px var(--line2);min-width:0}
.m-subbox b{color:var(--deep-ink);overflow-wrap:anywhere;font-size:var(--fs-md);font-weight:700;line-height:1.3}
.m-subbox p{margin:0;color:var(--ink2);overflow-wrap:anywhere;font-size:var(--fs-sm);line-height:1.6}
.m-subbox small{color:var(--accent-ink);overflow-wrap:anywhere;font-size:var(--fs-xs);font-weight:500;line-height:1.5}
.m-subcopied{color:#0B6B3A;font-size:var(--fs-xs);font-weight:600;line-height:1.5}
:root.dark .m-subcopied{color:#B9F5D3}
/* Lưới ảnh: 1 ảnh full ngang · 2 ảnh chia đôi · 3 ảnh: ảnh đầu to ở trên, 2 ảnh còn lại hàng dưới. Tỉ lệ cố định + cover */
.m-subimgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.m-subimgs.n1{grid-template-columns:minmax(0,1fr)}
.m-subimgs.n3 .m-subim:first-child{grid-column:1/-1;aspect-ratio:16/8}
.m-subim{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--soft-blue);aspect-ratio:16/10;transition:transform .2s,box-shadow .2s}
.m-subim:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(42,82,217,.2)}
.m-subim img{display:block;width:100%;height:100%;object-fit:cover}
.m-subim::after{content:'🔍';position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(15,27,61,.72);font-size:14px;line-height:1}
/* Phóng to ảnh */
.m-zoom{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:#fff;overflow:hidden}
.m-zoom[open]{display:flex;align-items:center;justify-content:center}
.m-zoom::backdrop{background:rgba(10,18,52,.86)}
.m-zoom-img{display:block;max-width:min(1100px,100%);max-height:calc(100vh - 110px);width:auto;height:auto;object-fit:contain;border-radius:16px;background:var(--surface);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.m-zoom-x{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#0F1B3D;font-size:18px;font-weight:700;padding:0;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.m-zoom-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:56px;border-radius:14px;border:0;background:rgba(255,255,255,.92);color:#0F1B3D;font-size:34px;line-height:1;padding:0 0 4px}
.m-zoom-nav.prev{left:12px}.m-zoom-nav.next{right:12px}
.m-zoom-n{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:4px 14px;border-radius:999px;background:rgba(15,27,61,.75);font-size:var(--fs-sm);font-weight:600}
.m-zoom-n:empty{display:none}
@media (max-width:760px){
  .modal.svc{width:min(480px,calc(100vw - 32px))}
  .modal.svc .modal-body{display:flex;flex-direction:column}
  .m-pic-in{position:static;height:auto;padding:18px 18px 14px}
  .m-pic-in img{width:84px}
  .m-main{padding:20px 18px 22px}
  .m-main .m-actions{grid-template-columns:minmax(0,1fr)}
  .m-zoom{padding:12px}
  .m-zoom-nav{width:40px;height:52px}
}

/* ---- Đợt 4a: nội dung do admin sửa (dùng thang chữ type.css) ---- */
.svc-ic.emoji{font-size:var(--fs-h2);line-height:1}
.hero-sub{white-space:pre-line}
.faq{display:flex;flex-direction:column;gap:12px;width:100%;max-width:860px;margin:0 auto}
.faq-i{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 18px var(--card-shadow);overflow:hidden;transition:border-color .2s}
.faq-i[open]{border-color:#2A52D9}
.faq-q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;color:var(--ink);font-size:var(--fs-lg);font-weight:700;line-height:1.4}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:'+';flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--soft-blue);color:var(--accent-ink);font-size:var(--fs-xl);font-weight:700;transition:transform .2s}
.faq-i[open] .faq-q::after{content:'−'}
.faq-q:focus-visible{outline:3px solid #F5B301;outline-offset:-3px}
.faq-a{margin:0;padding:0 20px 18px;color:var(--muted);font-size:var(--fs-md);line-height:1.7;white-space:pre-line}
@media (max-width:600px){.faq-q{padding:14px 16px}.faq-a{padding:0 16px 16px}}

/* Thay cho thuộc tính style="" trong HTML: CSP không còn 'unsafe-inline' cho CSS (đợt 5, bảo mật) */
.u-abs{position:absolute}
.flink.u-break{word-break:break-all}
/* Mục Liên hệ đầy đủ (07/11/2026): mỗi dòng = biểu tượng + chữ, dùng ở chân trang trang chủ, Shop, Studio */
.toast-coin{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:6px}      /* đồng xu ở đầu thông báo nhận Xu (xu.js) */
.fct{display:flex;align-items:flex-start;gap:9px;text-align:left;line-height:1.45}
.fct[hidden]{display:none!important}
.fct.u-break{word-break:normal;overflow-wrap:anywhere}
.fct-i{flex:none;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1}
.fct-i svg{display:block;width:20px;height:20px}
.fct b{font-weight:700}
.fct-list{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:100%}
@media (max-width:1200px){.fcol-contact .fct-list{align-self:center;margin:0 auto 4px}}      /* điện thoại / máy tính bảng: cả khối nằm giữa, các dòng thẳng hàng trái */
.sh-fcontact,.st-fcontact{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sh-fcontact a,.st-fcontact a{color:var(--accent-ink);font-weight:600;text-decoration:none;margin:0}
.sh-fcontact a:hover,.st-fcontact a:hover{text-decoration:underline;text-underline-offset:3px}
.st-fcontact{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.st-fcontact>b{color:var(--ink)}
.m-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}   /* ô bẫy bot (đăng ký) */

/* ---- Đợt 6: xóa tài khoản + chế độ app Android ---- */
.m-btn.danger{background:#BE123C;color:#fff;border:0}
.m-btn.danger:hover{background:#9F0F32;color:#fff}
.m-btn.danger-ghost{color:var(--danger);border-color:var(--danger)}
.m-btn.danger-ghost:hover{background:var(--bg);border-color:var(--danger);color:var(--danger)}
.m-check{display:flex;align-items:flex-start;gap:10px;text-align:left;color:var(--ink2);font-size:var(--fs-sm);font-weight:600;line-height:1.5;cursor:pointer}
.m-check input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:#BE123C}
html.app-mode [data-web-only]{display:none!important}
html.app-mode:not(.app-ready) #svcGrid,html.app-mode:not(.app-ready) [data-open-service]{visibility:hidden}

/* ===== Đợt E: thanh thông báo, nút tải app (CH Play / App Store), lời chào (H9, H21) ===== */
.annbar{position:relative;z-index:11;background:#0B6B74;color:#fff}
.annbar[hidden]{display:none}
.annbar-in{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:8px;padding-bottom:8px;font-size:var(--fs-sm);font-weight:600;line-height:1.45;text-align:center}
.ann-ico{flex:none;font-size:1.2em;line-height:1}
.ann-txt{min-width:0;overflow-wrap:anywhere}
.ann-txt a.ann-link{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.ann-txt a.ann-link:hover{color:#CFF7F0}
.ann-x{flex:none;width:40px;height:40px;margin:-6px -8px -6px 0;border:0;border-radius:50%;background:transparent;color:#fff;font-size:var(--fs-md);font-weight:700;display:flex;align-items:center;justify-content:center;padding:0}
.ann-x:hover{background:rgba(255,255,255,.18)}
.ann-x:focus-visible,.ann-txt a.ann-link:focus-visible{outline:3px solid #fff;outline-offset:2px}

.applinks{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.applinks[hidden]{display:none}
.applinks-l{color:var(--muted);font-size:var(--fs-sm);font-weight:700}
.applink{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 16px 8px 12px;border-radius:14px;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);text-align:left;transition:transform .2s,box-shadow .2s,border-color .2s}
.applink[hidden]{display:none}
.applink:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,27,61,.16);border-color:var(--blue);color:var(--ink)}
.applink:focus-visible{outline:3px solid rgba(42,82,217,.5);outline-offset:2px}
.applink .al-ic{flex:none;color:var(--blue)}
:root.dark .applink .al-ic{color:#A5C0FF}
.al-t{display:flex;flex-direction:column;line-height:1.2}
.al-s{color:var(--muted);font-size:var(--fs-sm);font-weight:500}
.al-t b{font-size:var(--fs-lg);font-weight:700}
.applinks-foot{padding-top:8px}
.applinks-foot .applinks-l{flex:0 0 100%}
@media (max-width:1200px){.applinks{justify-content:center}.applinks-foot{justify-content:center}}

/* Lời chào khi vào trang (hộp thoại riêng, không dùng chung với #modal) */
.greet{border:0;padding:0;border-radius:28px;width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);background:var(--surface);color:var(--ink);box-shadow:0 30px 70px -20px rgba(5,10,40,.7);overflow:auto}
.greet::backdrop{background:rgba(10,18,52,.62)}
.greet[open]{animation:greetPop .35s cubic-bezier(.2,.9,.3,1.15)}
@keyframes greetPop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.greet-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 24px 22px;text-align:center}
.greet-in::before{content:'';position:absolute;left:0;right:0;top:0;height:128px;background:linear-gradient(135deg,rgba(42,82,217,.16),rgba(45,212,191,.22));pointer-events:none}
.greet-in>*{position:relative}
.greet-ic{width:84px;height:84px;border-radius:28px;background:linear-gradient(135deg,#2A52D9,#4C7DFF 55%,#2DD4BF);display:flex;align-items:center;justify-content:center;font-size:42px;line-height:1;box-shadow:0 16px 30px -12px rgba(42,82,217,.7)}
.greet-t{margin:6px 0 0;font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-size:var(--fs-h2);font-weight:800;line-height:1.2;text-wrap:balance}
.greet-p{margin:0;max-width:340px;color:var(--ink2);font-size:var(--fs-lg);line-height:1.6;text-wrap:pretty}
.greet-go{width:100%;margin-top:8px;border:0;border-radius:16px;padding:15px;background:linear-gradient(135deg,#2A52D9,#3B66F0);color:#fff;font-size:var(--fs-lg);font-weight:700;line-height:1.3;box-shadow:0 12px 22px -12px rgba(42,82,217,.8);display:block;text-align:center}
.greet-go:hover{color:#fff;filter:brightness(1.08)}
.greet-skip{border:0;background:none;padding:10px;color:var(--muted);font-size:var(--fs-sm);font-weight:600;text-decoration:underline}
.greet-x{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line2);font-size:var(--fs-md);font-weight:700;padding:0;display:flex;align-items:center;justify-content:center}
.greet-x:focus-visible,.greet-go:focus-visible,.greet-skip:focus-visible{outline:3px solid rgba(42,82,217,.55);outline-offset:2px}
/* Lời chào trong cửa sổ tài khoản */
.m-greet{display:flex;align-items:flex-start;gap:12px;width:100%;box-sizing:border-box;padding:12px 14px;border-radius:16px;background:var(--soft-teal);border:1px solid #2DD4BF;text-align:left}
.m-greet-ic{flex:none;font-size:30px;line-height:1.1}
.m-greet-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.m-greet-b b{font-size:var(--fs-lg);font-weight:700;line-height:1.3}
.m-greet-b span{color:var(--ink2);font-size:var(--fs-sm);line-height:1.5}
@media (prefers-reduced-motion:reduce){.greet[open]{animation:none}.applink{transition:none}}

/* ===== Hộp ưu đãi (đợt B) – dùng khung của hộp chào .greet ===== */
.greet.promo .greet-p{max-width:360px}
.promo-code{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;width:100%;border:2px dashed #2DD4BF;background:var(--soft-teal,#DDF7F3);border-radius:16px;padding:12px 14px}
.promo-code span{color:var(--ink2);font-size:var(--fs-sm);font-weight:600}
.promo-code b{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-h3);font-weight:800;letter-spacing:.08em;color:var(--accent-ink,#1E3A9E);overflow-wrap:anywhere}
.promo-copy{width:100%;border:1.5px solid var(--line2);background:var(--surface);color:var(--accent-ink,#1E3A9E);border-radius:14px;padding:12px;font-family:inherit;font-size:var(--fs-lg);font-weight:700;line-height:1.3;cursor:pointer}
.promo-copy:hover{background:var(--soft-blue)}
.promo-copy:focus-visible{outline:3px solid rgba(42,82,217,.55);outline-offset:2px}

/* ---------- Đợt J: banner bảo trì toàn web/app, cài đặt tài khoản, ẩn số dư, quên mật khẩu, thông báo ưu đãi ---------- */
.maintbar{position:relative;z-index:12;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;background:#FFE3B0;border-bottom:1px solid #E0A23A;color:#4A2C00;font-size:var(--fs-sm);font-weight:600;line-height:1.45;text-align:center}
:root.dark .maintbar{background:#4A3308;border-bottom-color:#8A6215;color:#FFE8B0}
.maintbar-ic{flex:none;font-size:1.2em;line-height:1}
.maintbar-t{min-width:0;overflow-wrap:anywhere}
.m-forgot{margin:0;text-align:center;font-size:var(--fs-sm);font-weight:500;line-height:1.5}
.m-forgot a{display:inline-block;padding:10px 6px;color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.m-forgot a:hover{color:var(--deep-ink)}
.m-forgot a:focus-visible{outline:3px solid rgba(42,82,217,.55);outline-offset:2px;border-radius:6px}
.m-bal-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.m-bal-eye{flex:none;min-height:40px;padding:0 14px;border:1.5px solid var(--line2);border-radius:999px;background:var(--surface);color:var(--accent-ink);font-family:inherit;font-size:var(--fs-sm);font-weight:700;line-height:1.2;cursor:pointer}
.m-bal-eye:hover{background:var(--soft-blue);border-color:var(--blue)}
.m-bal-eye:focus-visible,.m-sw:focus-visible,.m-set-b:focus-visible{outline:3px solid rgba(42,82,217,.55);outline-offset:2px}
.m-bal-n.is-hidden{letter-spacing:.14em}
.m-set{width:100%;display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--bg);padding:6px 14px}
.m-set-h{padding:8px 0 4px;color:var(--muted);font-size:var(--fs-sm);font-weight:600}
.m-set-r{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.m-set-h+.m-set-r{border-top:0}
.m-set-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.m-set-t b{color:var(--ink);font-size:var(--fs-md);font-weight:700;line-height:1.35}
.m-set-t span{color:var(--muted);font-size:var(--fs-sm);font-weight:500;line-height:1.5}
.m-set-name{overflow-wrap:anywhere}
.m-set-b{flex:none;min-height:44px;padding:0 16px;border:1.5px solid var(--line2);border-radius:12px;background:var(--surface);color:var(--accent-ink);font-family:inherit;font-size:var(--fs-sm);font-weight:700;line-height:1.2;cursor:pointer}
.m-set-b:hover{background:var(--soft-blue);border-color:var(--blue)}
.m-sw{flex:none;position:relative;width:56px;height:34px;padding:0;border:0;border-radius:999px;background:#66749A;cursor:pointer;transition:background-color .2s}
.m-sw::after{content:'';position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .2s}
.m-sw.on{background:var(--blue)}
.m-sw.on::after{transform:translateX(22px)}
.m-sw:disabled{opacity:.6}
:root.dark .m-sw{background:#8592B3}
:root.dark .m-sw.on{background:#4C7DFF}
.nt-ic.k-promo{background:#FFE6F0;color:#A01A4D}
:root.dark .nt-ic.k-promo{background:#4A1F33;color:#FFC2DA}
/* Ẩn số dư: chỗ do tệp khác vẽ (chip ví ở đầu trang, hộp xu, ví ở /shop) được làm mờ; thẻ của app.js / appshell.js tự đổi chữ thành •••••• */
html.bal-hidden #xuWalletN,html.bal-hidden #shWalletN,html.bal-hidden .xupnl .xr b{filter:blur(7px);-webkit-user-select:none;user-select:none}
@media (prefers-reduced-motion:reduce){.m-sw,.m-sw::after{transition:none}}

/* ---------- Đợt I: dùng thử (H20), bảo trì từng mục (H4) ---------- */
.trialbar{position:relative;z-index:11;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;padding:10px 16px;background:#FFF3D1;border-bottom:1px solid #F5C451;color:#5A3700;font-size:var(--fs-sm);font-weight:600;line-height:1.4;text-align:center}
:root.dark .trialbar{background:#4A3308;border-bottom-color:#8A6215;color:#FFE8B0}
.trialbar-b{min-height:40px;padding:8px 16px;border:0;border-radius:999px;background:var(--blue);color:#fff;font-family:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer}
.trialbar-b:hover{filter:brightness(1.08)}
.trialbar-b:focus-visible{outline:3px solid #F5B301;outline-offset:2px}
.m-try{display:flex;flex-direction:column;gap:10px;margin-top:6px;text-align:center}
.m-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:var(--fs-sm);font-weight:500}
.m-or::before,.m-or::after{content:"";flex:1;height:1px;background:var(--line2)}
.m-try-note{margin:0;color:var(--muted);font-size:var(--fs-sm);font-weight:500;line-height:1.5}
.m-ctx{font-size:var(--fs-sm);text-align:center;color:var(--ink2)}
.m-subchip.is-maint{border-style:dashed;background:#FFF8E5}
:root.dark .m-subchip.is-maint{background:#3A2A08}
.m-subchip.is-maint.on{background:var(--blue);border-style:solid}
.m-subtag{display:block;margin-top:2px;color:#7A4A00;font-size:var(--fs-sm);font-weight:600}
:root.dark .m-subtag{color:#FFE8B0}
.m-subchip.on .m-subtag{color:#fff}
.m-submaint{margin-top:8px}
.m-btn.order.is-off,.m-btn.order.is-off:disabled{opacity:1;background:var(--soft-blue);color:var(--ink2);border:1.5px dashed var(--line2);box-shadow:none}
:root.dark .m-subchip.is-maint.on{background:var(--blue)}

/* ---------- Đợt M: nội dung trang chủ sửa được từ admin ---------- */
.tickerbar[hidden]{display:none}
.foot-desc{color:var(--muted);font-size:var(--fs-sm)}
.foot-extra{display:contents}
.foot-extra[hidden]{display:none}
.mgr-msg{margin:0;max-width:340px;text-align:center;color:var(--ink2);font-size:var(--fs-md);line-height:1.6;font-style:italic}
.mgr-msg::before{content:'“'}
.mgr-msg::after{content:'”'}
.fcol[hidden]{display:none}
.m-note.m-range{font-size:var(--fs-sm);line-height:1.5}

/* ===== Đợt U1b (SH-18…SH-23, SH-D9): hộp đăng nhập / đăng ký / tài khoản 4 tab giống bản demo đã duyệt =====
   .modal.acc = hộp "phẳng" như demo: rộng 600px (370px ở điện thoại), tiêu đề căn trái, nút ✕ nằm trong hộp, nút gửi xanh thương hiệu #2A52D9 (không phải xanh Zalo). */
.m-btn.blue{background:#2A52D9;color:#fff}.m-btn.blue:hover{color:#fff}
.modal.acc{width:min(600px,calc(100vw - 20px));max-width:calc(100vw - 20px)}      /* max-width: bỏ mức tối đa mặc định của trình duyệt cho <dialog> (100% − 38px) để rộng ~370px ở điện thoại như demo */
.modal.acc .modal-x{top:14px;right:14px;width:42px;height:42px;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);box-shadow:none;font-size:var(--fs-h3);font-weight:600}
.modal.acc .modal-x:hover{background:var(--soft-blue)}
.modal.acc .modal-body{padding:28px 28px 26px;gap:16px;align-items:stretch;text-align:left}
.modal.acc .m-title{padding-right:48px;line-height:1.2}
.modal.acc .m-title .m-tab,.modal.acc .m-title .m-tab.on{padding:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit}
.modal.acc .m-desc{font-size:var(--fs-md);line-height:1.6}
.modal.acc .m-form{gap:16px}
.modal.acc .m-field{color:var(--ink)}
.modal.acc .m-field span{font-weight:700}
.modal.acc .m-field input{padding:12px 14px;border-radius:12px}
.modal.acc .m-btn{padding:15px 26px;border-radius:14px}
.modal.acc .m-actions{padding-top:0}
.modal.acc .m-actions .m-btn.ghost{background:var(--surface);color:var(--accent-ink)}
.modal.acc .m-actions .m-btn.ghost:hover{background:var(--soft-blue);border-color:var(--blue);color:var(--accent-ink)}
.modal.acc .m-note{text-align:left}
.modal.acc .m-orders{max-height:none;overflow:visible}
.modal.acc .m-sec{text-align:left;color:var(--ink);font-size:var(--fs-md);font-weight:700;margin-bottom:0}
/* Tài Khoản Thử (như demo: nút viền đứt) + lời giải thích */
.modal.acc .m-try{margin-top:-8px;gap:0;text-align:left}
.m-trybtn{background:var(--soft-blue);color:var(--accent-ink);border:1.5px dashed var(--blue);margin-top:8px;width:100%}
/* Nút “Tiếp tục với Google” (07/11/2026) — theo hướng dẫn thương hiệu của Google: nền trắng, viền xám, logo chữ G nhiều màu, chữ đen; giữ nền trắng cả khi web ở giao diện tối */
.m-gauth{display:flex;flex-direction:column;gap:14px;width:100%}
.m-gauth[hidden],.m-glink[hidden]{display:none}
.m-soc2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.m-soc2 .m-btn.gbtn,.m-soc2 .m-btn.fbbtn,.modal.acc .m-gauth .m-soc2 .m-btn.gbtn,.modal.acc .m-gauth .m-soc2 .m-btn.fbbtn{padding:14px 8px;gap:9px;min-width:0}
.m-btn.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:13px 20px;border-radius:14px;border:1px solid #DADCE0;background:#fff;color:#1F1F1F;box-shadow:0 1px 2px rgba(60,64,67,.18);font-family:'Be Vietnam Pro',Roboto,Arial,sans-serif;font-size:var(--fs-lg);font-weight:600;line-height:1.3;text-decoration:none}
.m-btn.gbtn:hover{background:#F8FAFF;border-color:#C6CBD3;color:#1F1F1F;box-shadow:0 2px 6px rgba(60,64,67,.25)}
.m-btn.gbtn:focus-visible{outline:3px solid #F5B301;outline-offset:2px}
.m-btn.gbtn svg{flex:none}
.modal.acc .m-gauth .m-btn.gbtn{padding:14px 20px}
.m-glink{width:100%;display:flex;flex-direction:column;gap:10px}
/* Nút “Tiếp tục với Facebook” (07/11/2026) — theo hướng dẫn thương hiệu của Meta: nền xanh #1877F2, chữ f trắng, chữ trắng */
.m-btn.fbbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:13px 20px;border-radius:14px;border:1px solid #1877F2;background:#1877F2;color:#fff;box-shadow:0 1px 2px rgba(24,119,242,.25);font-family:'Be Vietnam Pro',Helvetica,Arial,sans-serif;font-size:var(--fs-lg);font-weight:600;line-height:1.3;text-decoration:none}
.m-btn.fbbtn:hover{background:#166FE5;border-color:#166FE5;color:#fff;box-shadow:0 2px 6px rgba(24,119,242,.35)}
.m-btn.fbbtn:focus-visible{outline:3px solid #F5B301;outline-offset:2px}
.m-btn.fbbtn svg{flex:none}
.modal.acc .m-gauth .m-btn.fbbtn{padding:14px 20px}
.m-trybtn:hover{background:var(--soft-teal);color:var(--accent-ink)}
.modal.acc .m-try-note{text-align:center;text-wrap:balance;margin:8px 0 4px;line-height:1.5}      /* chủ shop chốt 07/11/2026: lời giải thích Tài Khoản Thử căn giữa dưới nút */
/* liên kết dạng chữ gạch chân: "Chưa có tài khoản? Đăng ký" · "Quên mật khẩu?" · các lối phụ của tài khoản */
.m-links{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2px 16px;width:100%}
.m-links.stack{justify-content:flex-start;gap:2px 20px}
.alink,.m-tab.alink{border:0;border-radius:0;background:none;color:var(--accent-ink);font-family:inherit;font-size:var(--fs-sm);font-weight:700;line-height:1.5;padding:6px 0;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.alink:hover,.m-tab.alink:hover{color:var(--deep-ink);background:none}
.alink:focus-visible,.m-tab.alink:focus-visible{outline:3px solid rgba(42,82,217,.55);outline-offset:2px;border-radius:6px}
.alink.danger{color:#B42318}
:root.dark .alink.danger{color:#FFB4AB}
.m-links .m-forgot{margin:0;text-align:right}
.m-links .m-forgot a{padding:6px 0;font-weight:700}
/* đầu hộp tài khoản: ảnh chữ cái + tên + số điện thoại */
.ahead{display:flex;align-items:center;gap:14px;padding-right:48px;min-width:0}
.ahead-t{min-width:0}
.modal.acc .ahead .m-title{padding-right:0;overflow-wrap:anywhere;font-size:1.5rem}
.ahead-p{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-sm);font-weight:600}
.avatar{flex:none;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#2A52D9,#0E7C86);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif;font-size:var(--fs-h2);font-weight:800;line-height:1}
.atabs{display:flex;flex-wrap:wrap;gap:8px}
.atab{border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:999px;padding:9px 16px;font-family:inherit;font-size:var(--fs-sm);font-weight:700;line-height:1.3;cursor:pointer;transition:background .2s,border-color .2s}
.atab:hover{background:var(--soft-blue);border-color:var(--blue)}
.atab.on{background:#2A52D9;color:#fff;border-color:#2A52D9}
.atab:focus-visible{outline:3px solid rgba(42,82,217,.55);outline-offset:2px}
.apanel{display:flex;flex-direction:column;gap:16px;min-width:0}
.ro{display:flex;flex-direction:column;gap:6px}
.ro-l{font-size:var(--fs-sm);font-weight:700}
.ro-v{border:1.5px dashed var(--line2);background:var(--soft-blue);color:var(--muted);border-radius:12px;padding:12px 14px;font-size:var(--fs-lg);font-weight:700;overflow-wrap:anywhere}
@media (max-width:600px){
  .modal.acc .modal-body{padding:22px 18px 20px}
  .m-links .m-forgot{text-align:left}
  .avatar{width:48px;height:48px}
}
/* ===== hết đợt U1b (hộp đăng nhập / tài khoản) ===== */