/* Giao diện mới C — nhóm trang "tai-khoan" (07/10/2026). Nạp sau giao-dien-c.css, CHỈ khi ?giao-dien=moi.
   Mọi luật phải bắt đầu bằng html[data-giao-dien="moi"] để bản cũ không bị ảnh hưởng. */

/* ============================================================
   A. ĐĂNG NHẬP / ĐĂNG KÝ (/login, /register) — khung 2 cột .auth-card
   Login: form = .auth-left, khối chào = .auth-right. Register thì ngược lại (khối chào = .auth-left).
   Nên tô khối chào bằng :has(.auth-brand) thay vì theo tên trái/phải.
   ============================================================ */

/* Nền trang: bỏ gradient kem/teal cũ, dùng nền #f3f7f6 để khung trắng nổi lên bằng viền mảnh */
html[data-giao-dien="moi"] .auth-wrap{background:var(--c-nen)!important;padding:48px 16px}
html[data-giao-dien="moi"] .auth-card{border:1px solid var(--c-ke);border-radius:20px;box-shadow:none;background:#fff}

/* Khối chào nền xanh rêu: phẳng, bỏ 2 quầng sáng ::before/::after */
html[data-giao-dien="moi"] .auth-card > :has(.auth-brand){background:var(--c-xanh)!important;color:#fff}
html[data-giao-dien="moi"] .auth-card > :has(.auth-brand)::before,
html[data-giao-dien="moi"] .auth-card > :has(.auth-brand)::after{display:none}
html[data-giao-dien="moi"] .auth-brand-mark{background:var(--c-vang);color:var(--c-xanh);box-shadow:none;border-radius:12px;font-weight:800}
html[data-giao-dien="moi"] .auth-brand-name{font-weight:800;letter-spacing:-.01em}
html[data-giao-dien="moi"] .auth-brand-tag{font-size:12px;letter-spacing:.12em;opacity:1;color:rgba(255,255,255,.75)}
html[data-giao-dien="moi"] .auth-hero-title{font-weight:800;letter-spacing:-.02em}
html[data-giao-dien="moi"] .auth-hero-title span{color:var(--c-vang)}
html[data-giao-dien="moi"] .auth-hero-sub{opacity:1;color:rgba(255,255,255,.88)}
html[data-giao-dien="moi"] .auth-card .perk-icon{background:rgba(38,179,180,.18);color:var(--c-ngoc);border-radius:12px}
html[data-giao-dien="moi"] .auth-card .perk-sub{font-size:12px;opacity:1;color:rgba(255,255,255,.78)}
html[data-giao-dien="moi"] .auth-card .trust-row{flex-wrap:wrap;gap:6px 12px;font-size:12px;opacity:1;color:rgba(255,255,255,.85);border-top-color:rgba(255,255,255,.18)}
html[data-giao-dien="moi"] .auth-card .trust-row b{color:var(--c-vang)}

/* Register: 4 thẻ hạng trong khối chào — phẳng, chữ ≥12px, ngưỡng hạng màu vàng */
html[data-giao-dien="moi"] .tier-chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:14px;backdrop-filter:none;padding:12px 6px}
html[data-giao-dien="moi"] .tier-chip:hover{transform:none;background:rgba(255,255,255,.12)}
html[data-giao-dien="moi"] .tier-name{font-size:13px;font-weight:800;letter-spacing:0}
html[data-giao-dien="moi"] .tier-mult{font-size:12px;opacity:1;color:rgba(255,255,255,.8)}
html[data-giao-dien="moi"] .tier-thr{font-size:12px;color:var(--c-vang)}

/* Cột form */
html[data-giao-dien="moi"] .auth-h{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--c-muc)}
html[data-giao-dien="moi"] .auth-s{font-size:14px;color:var(--c-chu-2)}
html[data-giao-dien="moi"] .auth-card .auth-err{font-size:13px;border-radius:12px;border:1px solid #fecaca;border-left:3px solid #dc2626}

/* Tab Mật khẩu / Mã OTP (style="" viết thẳng): đổi gạch chân sang nút viên thuốc, tab đang chọn nền xanh rêu */
html[data-giao-dien="moi"] .auth-left > div:has(> a[href*="otpStep=send"]){border-bottom:0!important;background:var(--c-nen);border-radius:999px;padding:4px;gap:4px!important;margin-bottom:20px!important}
html[data-giao-dien="moi"] .auth-left > div:has(> a[href*="otpStep=send"]) > a{display:flex!important;align-items:center;justify-content:center;gap:6px;min-height:44px;
  border:0!important;margin:0!important;border-radius:999px;font-size:14px!important;font-weight:700!important;color:var(--c-chu-2)!important}
html[data-giao-dien="moi"] .auth-left > div:has(> a[href*="otpStep=send"]) > a[style*="solid var(--t)"]{background:var(--c-xanh);color:#fff!important}

/* Nhãn + ô nhập: ô cao 48px, viền 1px, bo 12px, nền trắng; icon xanh ngọc */
html[data-giao-dien="moi"] .auth-wrap .fld{margin-bottom:16px}
html[data-giao-dien="moi"] .auth-wrap .fld-lbl{font-size:13px;font-weight:700;color:var(--c-muc);text-transform:none;letter-spacing:0}
html[data-giao-dien="moi"] .auth-wrap .fld-lbl span{font-size:12px!important}
html[data-giao-dien="moi"] .auth-wrap .fld-row a{font-size:13px;color:var(--c-xanh)}
html[data-giao-dien="moi"] .auth-wrap .fld-icon{left:16px;color:var(--c-ngoc)}
html[data-giao-dien="moi"] .auth-wrap .fld-icon svg{width:18px;height:18px}
html[data-giao-dien="moi"] .auth-wrap .auth-inp{min-height:48px;padding:12px 16px 12px 46px;border:1px solid var(--c-ke);border-radius:12px;background:#fff;font-size:15px;color:var(--c-muc)}
html[data-giao-dien="moi"] .auth-wrap .auth-inp::placeholder{color:var(--c-chu-3)}
html[data-giao-dien="moi"] .auth-wrap .auth-inp[readonly]{background:var(--c-nen)}
html[data-giao-dien="moi"] .auth-wrap .pw-toggle{font-size:12px;color:var(--c-xanh);min-height:40px;min-width:44px;border-radius:999px}
html[data-giao-dien="moi"] .auth-wrap .pw-toggle:hover{background:var(--c-nen);color:var(--c-xanh)}
html[data-giao-dien="moi"] .auth-wrap .fld-hint{font-size:12px!important;color:var(--c-chu-3)!important}
html[data-giao-dien="moi"] .auth-wrap .fld-hint a{color:var(--c-xanh)!important}
html[data-giao-dien="moi"] .remember-row{font-size:13px;color:var(--c-chu-2);min-height:44px;margin:4px 0 12px}
html[data-giao-dien="moi"] .remember-row input{width:18px;height:18px;accent-color:var(--c-xanh)}

/* Nút chính: cam, bo tròn, rộng hết khung, không bóng, không viết hoa ép */
html[data-giao-dien="moi"] .auth-wrap .auth-cta{min-height:52px;padding:12px 20px;border-radius:999px;background:var(--c-cam);box-shadow:none;
  font-size:15px;font-weight:800;letter-spacing:0;text-transform:none}
html[data-giao-dien="moi"] .auth-wrap .auth-cta:hover{background:var(--c-cam-dam);transform:none;box-shadow:none}
html[data-giao-dien="moi"] .auth-wrap .auth-cta svg{width:18px;height:18px}
/* OTP: 2 nút gửi viết gradient thẳng trong style="" — Email = cam (chính), WhatsApp = xanh rêu (phụ) */
html[data-giao-dien="moi"] .auth-wrap .auth-cta[onclick*="'email'"]{background:var(--c-cam)!important;font-size:14px!important}
html[data-giao-dien="moi"] .auth-wrap .auth-cta[onclick*="'whatsapp'"]{background:var(--c-xanh)!important;font-size:14px!important}

/* Dải "Hoặc đăng nhập nhanh" + nút mạng xã hội viền mảnh bo tròn */
html[data-giao-dien="moi"] .auth-divider{font-size:12px;color:var(--c-chu-3);margin:20px 0}
html[data-giao-dien="moi"] .auth-divider::before,html[data-giao-dien="moi"] .auth-divider::after{background:var(--c-ke)}
html[data-giao-dien="moi"] .auth-social-btn{min-height:48px;border:1px solid var(--c-ke)!important;border-radius:999px!important;font-size:14px!important;color:var(--c-muc)!important}
html[data-giao-dien="moi"] .auth-social-btn:hover{border-color:var(--c-ngoc)!important;transform:none!important}

/* "Mua hàng không cần đăng nhập": bỏ nền kem + viền vàng đứt, thành nút viền mảnh */
html[data-giao-dien="moi"] .guest-cta{min-height:48px;background:#fff;border:1px solid var(--c-ke);border-radius:999px;color:var(--c-xanh);font-weight:700;font-size:14px}
html[data-giao-dien="moi"] .guest-cta svg{color:var(--c-cam)}
html[data-giao-dien="moi"] .guest-cta:hover{background:#fff;border:1px solid var(--c-ngoc);transform:none}
html[data-giao-dien="moi"] .auth-wrap .auth-foot{font-size:14px;color:var(--c-chu-2)}
html[data-giao-dien="moi"] .auth-wrap .auth-legal{font-size:12px;color:var(--c-chu-3)}
html[data-giao-dien="moi"] .auth-wrap .auth-legal a{color:var(--c-xanh)}
/* Register: dải "Bạn được giới thiệu bởi…" (nền kem viết thẳng) */
html[data-giao-dien="moi"] .auth-wrap form > div[style*="#fff8e5"]{background:var(--c-vang-nhat)!important;border-left-color:var(--c-vang)!important;color:var(--c-muc)!important;border-radius:12px!important;font-size:13px!important}

/* Điện thoại: form lên TRƯỚC khối chào (khách vào để đăng nhập, khối chào xuống dưới) */
@media (max-width:880px){
  html[data-giao-dien="moi"] .auth-wrap{padding:24px 16px 40px}
  html[data-giao-dien="moi"] .auth-card > :has(.auth-brand){order:2}
  html[data-giao-dien="moi"] .auth-card > :not(:has(.auth-brand)){order:1}
  html[data-giao-dien="moi"] .auth-h{font-size:24px}
}
@media (max-width:600px){
  html[data-giao-dien="moi"] .auth-card > :not(:has(.auth-brand)){padding:28px 20px}
  html[data-giao-dien="moi"] .auth-card > :has(.auth-brand){padding:24px 20px}
  html[data-giao-dien="moi"] .auth-wrap .auth-inp{font-size:16px}
  html[data-giao-dien="moi"] .auth-wrap .pw-toggle{min-height:44px}
  html[data-giao-dien="moi"] .auth-left > div:has(> a[href*="otpStep=send"]) > a{font-size:13px!important;gap:4px;padding:6px 4px!important;white-space:nowrap}
  html[data-giao-dien="moi"] .tier-rail{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  html[data-giao-dien="moi"] .tier-chip{padding:10px 6px!important}
  html[data-giao-dien="moi"] .tier-name{font-size:13px!important}
  html[data-giao-dien="moi"] :is(.tier-mult,.tier-thr){font-size:12px!important}
}

/* ============================================================
   B. KHUNG NHỎ 1 CỘT .auth-mini (/forgot-password, /reset-password, /verify-email)
   (cùng lớp với /account/change-password — trang đó cần tài khoản thử mới soi được)
   ============================================================ */
html[data-giao-dien="moi"] .auth-mini{border:1px solid var(--c-ke);border-radius:20px;box-shadow:none}
html[data-giao-dien="moi"] :is(.auth-mini-top,.auth-mini .auth-top){background:var(--c-xanh)!important}
html[data-giao-dien="moi"] :is(.auth-mini-top,.auth-mini .auth-top)::after{display:none}
html[data-giao-dien="moi"] .auth-mini .auth-top.err{background:#b42318!important}
html[data-giao-dien="moi"] .auth-mini-icon{background:rgba(248,193,28,.16);border-radius:14px}
html[data-giao-dien="moi"] .auth-mini-icon svg{color:var(--c-vang)}
html[data-giao-dien="moi"] .auth-mini-h,html[data-giao-dien="moi"] .auth-mini .auth-h{font-size:24px;font-weight:800;letter-spacing:-.02em}
html[data-giao-dien="moi"] .auth-mini-s,html[data-giao-dien="moi"] .auth-mini .auth-s{font-size:14px;opacity:1;color:rgba(255,255,255,.88)}
html[data-giao-dien="moi"] .auth-mini .auth-top.ok .big-emoji{color:var(--c-vang)}
/* Dải 3 bước: chữ 12px, cho xuống dòng ở khổ hẹp */
html[data-giao-dien="moi"] .step-rail{font-size:12px;flex-wrap:wrap;row-gap:6px;color:var(--c-chu-3)}
html[data-giao-dien="moi"] .step-rail b{color:var(--c-muc)}
html[data-giao-dien="moi"] .step-rail .dot{background:var(--c-ke)}
html[data-giao-dien="moi"] .step-rail .dot.active{background:var(--c-cam);box-shadow:none}
html[data-giao-dien="moi"] .auth-mini .auth-err{font-size:13px;border-radius:12px}
/* Mẹo: bỏ nền kem */
html[data-giao-dien="moi"] .help-strip{background:var(--c-nen);color:var(--c-chu-2);font-size:13px;border-radius:12px;padding:12px 14px}
html[data-giao-dien="moi"] .help-strip b{color:var(--c-muc)}
html[data-giao-dien="moi"] .auth-mini .auth-ok{border-radius:14px}
html[data-giao-dien="moi"] .auth-mini .auth-ok-h{font-weight:800}
/* Verify email: nội dung + nút (nút là thẻ <a>, không phải form) */
html[data-giao-dien="moi"] .auth-mini .auth-msg{font-size:14px;color:var(--c-chu-2)}
html[data-giao-dien="moi"] .auth-mini a.auth-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;
  background:var(--c-cam);box-shadow:none;font-size:14px;font-weight:800;letter-spacing:0;text-transform:none}
html[data-giao-dien="moi"] .auth-mini a.auth-cta:hover{background:var(--c-cam-dam);transform:none}
html[data-giao-dien="moi"] .auth-mini a.auth-cta.alt{background:#fff;color:var(--c-xanh);border:1px solid var(--c-xanh)}
html[data-giao-dien="moi"] .auth-mini a.auth-cta.alt:hover{background:var(--c-nen)}
html[data-giao-dien="moi"] .auth-perks .perk{background:var(--c-nen);border-radius:14px}
html[data-giao-dien="moi"] .auth-perks .perk-t{font-size:12px}
html[data-giao-dien="moi"] .auth-perks .perk-em svg{color:var(--c-xanh)}

/* ============================================================
   C. HUỶ NHẬN THƯ (/unsubscribe) — khung trắng viền mảnh, bỏ viền be + bóng
   ============================================================ */
html[data-giao-dien="moi"] .unsub-card{border:1px solid var(--c-ke);border-radius:20px;box-shadow:none;padding:40px 32px}
html[data-giao-dien="moi"] .unsub-card h2{font-weight:800;letter-spacing:-.02em}
html[data-giao-dien="moi"] .unsub-card .icon:not([style]){color:var(--c-xanh)}
html[data-giao-dien="moi"] .unsub-card a:not(.btn){color:var(--c-xanh)!important;font-weight:700;text-decoration:underline;text-underline-offset:2px}
html[data-giao-dien="moi"] .unsub-card > div[style*="font-size:11px"]{font-size:12px!important;color:var(--c-chu-3)!important}
html[data-giao-dien="moi"] .unsub-card > div[style*="font-size:11px"] a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:600px){
  html[data-giao-dien="moi"] .unsub-wrap{margin:32px auto;padding:0 16px}
  html[data-giao-dien="moi"] .unsub-card{padding:32px 20px}
}

/* ============================================================
   D. HẠNG THÀNH VIÊN (/membership)
   ============================================================ */
/* Hero phẳng xanh rêu. Bản cũ cho .mb-tiers kéo lên -66px nên che mất dải "Cam kết với khách hàng"
   nằm giữa hero và thẻ hạng → bản C bỏ kéo lên để dải đó hiện ra (không ẩn bớt thông tin). */
html[data-giao-dien="moi"] .mb-hero{background:var(--c-xanh);padding:56px 24px 48px}
html[data-giao-dien="moi"] .mb-hero::before{display:none}
html[data-giao-dien="moi"] .mb-hero h1{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
html[data-giao-dien="moi"] .mb-hero h1 .acc{color:var(--c-vang)}
html[data-giao-dien="moi"] .mb-hero p.tag{font-size:15px;font-weight:500;color:rgba(255,255,255,.88)}
html[data-giao-dien="moi"] .mb-prog-step .nm{font-size:12px;font-weight:800}
html[data-giao-dien="moi"] .mb-prog-step .ic{border-width:1px;border-color:rgba(255,255,255,.3)}
html[data-giao-dien="moi"] .mb-prog-arr{color:var(--c-vang)}
/* Dải cam kết (style="" gradient xanh lá + bóng) → nền ngọc nhạt, viền mảnh */
html[data-giao-dien="moi"] a[href*="cam-ket-voi-khach-hang"]:has(.rcx-trust){background:var(--c-ngoc-nhat)!important;border:1px solid var(--c-ke)!important;
  border-radius:20px!important;box-shadow:none!important;color:var(--c-xanh)!important;min-height:64px}
html[data-giao-dien="moi"] a[href*="cam-ket-voi-khach-hang"]:has(.rcx-trust) :is(span,div){color:var(--c-xanh)!important}
html[data-giao-dien="moi"] a[href*="cam-ket-voi-khach-hang"]:has(.rcx-trust) > div > div:first-child{font-weight:800!important;color:var(--c-muc)!important}
html[data-giao-dien="moi"] a[href*="cam-ket-voi-khach-hang"]:has(.rcx-trust) > div > div + div{color:var(--c-chu-2)!important;font-size:13px!important}
html[data-giao-dien="moi"] a[href*="cam-ket-voi-khach-hang"]:has(.rcx-trust):hover{border-color:var(--c-ngoc)!important}

/* 4 thẻ hạng: phẳng, viền mảnh, không bóng. Đầu thẻ (style="" gradient) đổi theo 4 màu logo, đậm dần:
   Member ngọc nhạt → Silver xanh ngọc → Gold vàng → Diamond xanh rêu. */
html[data-giao-dien="moi"] .mb-tiers{margin-top:24px;gap:16px}
html[data-giao-dien="moi"] .mb-tier{border:1px solid var(--c-ke);border-radius:20px;box-shadow:none;transition:border-color .15s}
html[data-giao-dien="moi"] .mb-tier:hover{transform:none;box-shadow:none;border-color:var(--c-ngoc)}
html[data-giao-dien="moi"] .mb-tier.feat{border:2px solid var(--c-vang)}
html[data-giao-dien="moi"] .mb-tier.feat .feat-rib{top:12px;right:12px;transform:none;padding:4px 10px;border-radius:999px;background:var(--c-xanh);color:var(--c-vang);font-size:12px;font-weight:800;z-index:2}
html[data-giao-dien="moi"] .mb-tier-head::before{display:none}
html[data-giao-dien="moi"] .mb-tier-head{padding:20px 16px 18px}
html[data-giao-dien="moi"] .mb-tier:nth-child(1) .mb-tier-head{background:var(--c-ngoc-nhat)!important;color:var(--c-xanh)}
html[data-giao-dien="moi"] .mb-tier:nth-child(2) .mb-tier-head{background:var(--c-ngoc)!important;color:var(--c-dem)}
html[data-giao-dien="moi"] .mb-tier:nth-child(3) .mb-tier-head{background:var(--c-vang)!important;color:var(--c-dem)}
html[data-giao-dien="moi"] .mb-tier:nth-child(4) .mb-tier-head{background:var(--c-xanh)!important;color:#fff}
html[data-giao-dien="moi"] .mb-tier:nth-child(-n+3) .mb-tier-mult{background:rgba(7,43,40,.08);border-color:rgba(7,43,40,.22);color:var(--c-dem)}
html[data-giao-dien="moi"] .mb-tier:nth-child(4) .mb-tier-mult{background:var(--c-vang);border-color:var(--c-vang);color:var(--c-dem)}
html[data-giao-dien="moi"] .mb-tier-nm{font-weight:800;letter-spacing:-.02em;font-size:24px}
html[data-giao-dien="moi"] .mb-tier-th{font-size:12px;opacity:1}
html[data-giao-dien="moi"] .mb-tier-mult{font-size:13px;font-weight:800}
html[data-giao-dien="moi"] .mb-tier-perks li{font-size:13px;color:var(--c-muc)}
html[data-giao-dien="moi"] .mb-tier-perks li .chk{font-size:12px;width:20px;height:20px;background:var(--c-ngoc-nhat);color:var(--c-xanh)}
html[data-giao-dien="moi"] .mb-tier-cta{background:var(--c-nen);border:0;border-radius:12px;font-size:12px;color:var(--c-chu-2)}
html[data-giao-dien="moi"] .mb-tier-cta b{font-weight:800;color:var(--c-gia)}

/* Tab Quy tắc / Câu hỏi (lớp chung .pg-tabs — chỉ đổi ở trang này): viên thuốc, tab đang chọn xanh rêu */
html[data-giao-dien="moi"] .mb-tiers + .pg-tabs{margin:48px auto 0!important;padding:4px;gap:8px;border:0;box-shadow:none;background:#fff;justify-content:center;border-radius:0}
html[data-giao-dien="moi"] .mb-tiers + .pg-tabs .pg-tab{flex:none;min-width:0;min-height:44px;padding:0 22px;border:1px solid var(--c-ke);border-radius:999px;margin:0;
  font-size:14px;font-weight:700;color:var(--c-chu-2);background:#fff;display:inline-flex;align-items:center;gap:8px}
html[data-giao-dien="moi"] .mb-tiers + .pg-tabs .pg-tab:hover{border-color:var(--c-ngoc);color:var(--c-xanh);background:#fff}
html[data-giao-dien="moi"] .mb-tiers + .pg-tabs .pg-tab.active{background:var(--c-xanh);border-color:var(--c-xanh);color:#fff}
html[data-giao-dien="moi"] .mb-tiers + .pg-tabs .pg-tab svg{width:16px;height:16px}
html[data-giao-dien="moi"] .mb-tiers + .pg-tabs .pg-tab.active svg{color:var(--c-vang)}

/* Mục quy tắc / ví dụ / bảng so sánh / FAQ */
html[data-giao-dien="moi"] .mb-sect{margin-top:40px}
html[data-giao-dien="moi"] .mb-sect-h h2{font-size:32px;font-weight:800;letter-spacing:-.02em}
html[data-giao-dien="moi"] .mb-sect-h p{font-size:14px;font-weight:500;color:var(--c-chu-2)}
html[data-giao-dien="moi"] .mb-rule{border:1px solid var(--c-ke);border-radius:20px;padding:20px}
html[data-giao-dien="moi"] .mb-rule-ic{background:var(--c-ngoc-nhat);color:var(--c-xanh);border-radius:14px}
html[data-giao-dien="moi"] .mb-rule-text b{font-weight:800;letter-spacing:-.01em}
html[data-giao-dien="moi"] .mb-rule-text span{font-size:13px;color:var(--c-chu-2)}
html[data-giao-dien="moi"] .mb-example{background:var(--c-nen);border:1px solid var(--c-ke);border-radius:20px;padding:24px;margin-top:28px}
html[data-giao-dien="moi"] .mb-example .badge{background:var(--c-xanh);color:#fff;font-size:12px;font-weight:800;padding:4px 12px;top:-13px}
html[data-giao-dien="moi"] .mb-example .badge svg{color:var(--c-vang)}
html[data-giao-dien="moi"] .mb-example .row{font-size:14px}
html[data-giao-dien="moi"] .mb-example .row b{color:var(--c-xanh)}
html[data-giao-dien="moi"] .mb-example .row .or{color:var(--c-gia)}
html[data-giao-dien="moi"] .mb-cmp{border:1px solid var(--c-ke);border-radius:20px}
html[data-giao-dien="moi"] .mb-cmp th{background:var(--c-nen);font-size:12px;font-weight:800;color:var(--c-muc)}
/* .lbl là lớp chung của legacy.css (display:block; 10px; viết hoa) lọt vào ô bảng → hàng lệch. Trả về ô bảng thường. */
html[data-giao-dien="moi"] .mb-cmp td.lbl{display:table-cell;font-size:14px;font-weight:700;color:var(--c-muc);text-transform:none;letter-spacing:0;margin:0}
html[data-giao-dien="moi"] .mb-cmp td.feat{font-size:14px;color:var(--c-muc)}
html[data-giao-dien="moi"] .mb-cmp td.feat .no{color:#9aa6a4}
html[data-giao-dien="moi"] .mb-cmp td.feat .yes{color:var(--c-xanh);font-weight:800}
html[data-giao-dien="moi"] .mb-cmp tr:hover td{background:var(--c-nen)}
html[data-giao-dien="moi"] .mb-faq details{border:1px solid var(--c-ke);border-radius:16px}
html[data-giao-dien="moi"] .mb-faq details[open]{border-color:var(--c-ngoc)}
html[data-giao-dien="moi"] .mb-faq summary{font-weight:700;min-height:52px}
html[data-giao-dien="moi"] .mb-faq summary::after{color:var(--c-ngoc)}
html[data-giao-dien="moi"] .mb-faq p{font-size:14px;color:var(--c-chu-2)}

/* Khối kêu gọi cuối: phẳng xanh rêu, nút cam bo tròn */
html[data-giao-dien="moi"] .mb-cta{background:var(--c-xanh);border-radius:20px;padding:40px 24px}
html[data-giao-dien="moi"] .mb-cta::before{display:none}
html[data-giao-dien="moi"] .mb-cta h2{font-size:32px;font-weight:800;letter-spacing:-.02em}
html[data-giao-dien="moi"] .mb-cta p{font-size:14px;opacity:1;color:rgba(255,255,255,.88)}
html[data-giao-dien="moi"] .mb-cta a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;
  background:var(--c-cam);box-shadow:none;font-size:14px;font-weight:800}
html[data-giao-dien="moi"] .mb-cta a:hover{background:var(--c-cam-dam);transform:none}
html[data-giao-dien="moi"] .mb-cta a.ghost{background:transparent;border:1px solid rgba(255,255,255,.6)}
html[data-giao-dien="moi"] .mb-cta a.ghost:hover{background:rgba(255,255,255,.1)}

@media (max-width:980px){
  html[data-giao-dien="moi"] .mb-tiers{margin-top:20px}
}
@media (max-width:600px){
  html[data-giao-dien="moi"] .mb-hero{padding:40px 16px 36px}
  html[data-giao-dien="moi"] .mb-hero h1{font-size:28px}
  html[data-giao-dien="moi"] .mb-hero p.tag{font-size:14px}
  html[data-giao-dien="moi"] .mb-hero + div{padding:0 16px!important}
  html[data-giao-dien="moi"] a[href*="cam-ket-voi-khach-hang"]:has(.rcx-trust){flex-wrap:wrap;gap:6px 12px!important;padding:16px!important}
  html[data-giao-dien="moi"] a[href*="cam-ket-voi-khach-hang"]:has(.rcx-trust) > span:last-child{flex-basis:100%;padding-left:40px;min-height:24px}
  html[data-giao-dien="moi"] .mb-tiers{padding:0 16px;margin-top:16px}
  html[data-giao-dien="moi"] .mb-tiers + .pg-tabs{margin-top:32px!important;padding:8px 16px}
  html[data-giao-dien="moi"] .mb-tiers + .pg-tabs .pg-tab{flex:1;justify-content:center;padding:0 10px;font-size:13px;gap:6px;white-space:nowrap}
  html[data-giao-dien="moi"] .mb-rules{grid-template-columns:1fr}
  html[data-giao-dien="moi"] .mb-rule{flex-direction:row;gap:14px;padding:16px}
  html[data-giao-dien="moi"] .mb-sect{padding:0 16px}
  html[data-giao-dien="moi"] .mb-sect-h h2{font-size:24px}
  html[data-giao-dien="moi"] .mb-cta{margin:40px 16px;padding:32px 20px}
  html[data-giao-dien="moi"] .mb-cta h2{font-size:24px}
  html[data-giao-dien="moi"] .mb-cta .row a{width:100%}
}

/* ============================================================
   E. KHUNG TÀI KHOẢN .as-* (AccountShell) — soi được ở /yeu-thich (khách chưa đăng nhập thấy khung trống).
   Cùng khung với mọi trang /account/* → các trang đó cần tài khoản thử để soi lại.
   ============================================================ */
html[data-giao-dien="moi"] .as-card{border:1px solid var(--c-ke);border-radius:20px}
html[data-giao-dien="moi"] .as-prof-hero{background:var(--c-xanh)!important;padding:24px 16px 18px}
html[data-giao-dien="moi"] .as-avatar{color:var(--c-xanh);font-weight:800;border-color:rgba(255,255,255,.3)}
html[data-giao-dien="moi"] .as-name{font-weight:800;letter-spacing:-.01em}
html[data-giao-dien="moi"] .as-mail{font-size:12px;opacity:1;color:rgba(255,255,255,.75)}
html[data-giao-dien="moi"] .as-tier{font-size:12px;background:rgba(248,193,28,.16);color:var(--c-vang);padding:4px 12px}
html[data-giao-dien="moi"] .as-prof-meta{border-top-color:var(--c-ke)}
html[data-giao-dien="moi"] .as-meta-it + .as-meta-it{border-left-color:var(--c-ke)}
html[data-giao-dien="moi"] .as-meta-it .v{font-size:16px;color:var(--c-muc)}
html[data-giao-dien="moi"] .as-meta-it .l{font-size:12px;color:var(--c-chu-3);letter-spacing:.02em}
html[data-giao-dien="moi"] .as-meta-it .l svg{width:12px;height:12px;color:var(--c-ngoc);opacity:1}
/* Menu bên: mục đang chọn nền xanh rêu (bỏ vạch cam), vùng bấm 44px */
html[data-giao-dien="moi"] .as-menu{padding:8px;gap:2px}
html[data-giao-dien="moi"] .as-menu a{min-height:44px;border-radius:12px;font-size:14px;color:var(--c-muc)}
html[data-giao-dien="moi"] .as-menu a .ic{color:var(--c-ngoc);opacity:1}
html[data-giao-dien="moi"] .as-menu a:hover{background:var(--c-nen);color:var(--c-xanh)}
html[data-giao-dien="moi"] .as-menu a.ac{background:var(--c-xanh);color:#fff;font-weight:700}
html[data-giao-dien="moi"] .as-menu a.ac .ic{color:var(--c-vang)}
html[data-giao-dien="moi"] .as-menu a.ac::before{display:none}
html[data-giao-dien="moi"] .as-menu a .ct{background:var(--c-cam);font-size:12px;padding:1px 8px}
html[data-giao-dien="moi"] .as-menu a.ac .ct{background:var(--c-vang);color:var(--c-xanh)}
html[data-giao-dien="moi"] .as-menu .sep{background:var(--c-ke)}
html[data-giao-dien="moi"] .as-logout{padding:8px}
html[data-giao-dien="moi"] .as-logout button{min-height:44px;border:1px solid var(--c-ke);border-radius:999px;font-size:13px;color:var(--c-chu-2)}
html[data-giao-dien="moi"] .as-logout button:hover{background:var(--c-nen);color:var(--c-muc);border-color:var(--c-ngoc)}
/* Tiêu đề trang con */
html[data-giao-dien="moi"] .as-h{border-bottom-color:var(--c-ke)}
html[data-giao-dien="moi"] .as-h h1{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--c-muc)}
html[data-giao-dien="moi"] .as-h .sub{font-size:14px;color:var(--c-chu-2)}
@media (max-width:880px){
  html[data-giao-dien="moi"] .as-wrap{padding:0 16px}
  html[data-giao-dien="moi"] .as-menu a{font-size:13px}
  html[data-giao-dien="moi"] .as-h h1{font-size:24px}
}

/* Yêu thích — trạng thái trống (khách chưa đăng nhập/chưa lưu). Thẻ sản phẩm .wl-card cần tài khoản có dữ liệu mới soi được. */
html[data-giao-dien="moi"] .wl-empty{border:1px solid var(--c-ke);border-radius:20px;padding:48px 24px}
html[data-giao-dien="moi"] .wl-empty .ill{color:var(--c-cam);opacity:1}
html[data-giao-dien="moi"] .wl-empty h3{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--c-muc)}
html[data-giao-dien="moi"] .wl-empty p{font-size:14px;color:var(--c-chu-2)}
html[data-giao-dien="moi"] .wl-empty .cta{min-height:48px;padding:0 24px;border-radius:999px;background:var(--c-cam);font-size:14px;font-weight:800;align-items:center}
html[data-giao-dien="moi"] .wl-empty .cta:hover{background:var(--c-cam-dam)}

/* ============================================================
   F. MỜI BẠN BÈ (/customer-referral) — dùng chung khuôn CmsPage (.rcx) với các trang chính sách
   (nhóm nội dung). CHỈ đổi ở trang này: khoá theo link canonical .../customer-referral.
   ============================================================ */
html[data-giao-dien="moi"]:has(link[rel="canonical"][href$="/customer-referral"]) .rcx{
  --ink:#14211f; --teal:#0e544e; --teald:#072b28; --or2:#f16225; --gld:#f8c11c; --paper:#f3f7f6; --or-text:#b9481a;
  --cream:#ffffff; --ln:#e3e8e7; --mut:#5f6d6a; background:var(--c-nen)}
html[data-giao-dien="moi"]:has(link[rel="canonical"][href$="/customer-referral"]) .rcx .doc-hero{background:var(--c-xanh)}
html[data-giao-dien="moi"]:has(link[rel="canonical"][href$="/customer-referral"]) .rcx .eyebrow{font-size:12px;font-weight:700;color:var(--c-vang)}
html[data-giao-dien="moi"]:has(link[rel="canonical"][href$="/customer-referral"]) .rcx .doc-hero h1{font-weight:800;letter-spacing:-.02em}
html[data-giao-dien="moi"]:has(link[rel="canonical"][href$="/customer-referral"]) .rcx .doc-seal{font-size:12px;transform:none;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 16px}
html[data-giao-dien="moi"]:has(link[rel="canonical"][href$="/customer-referral"]) .rcx .doc{background:#fff;border:1px solid var(--c-ke);border-radius:20px;box-shadow:none;color:var(--c-muc)}
html[data-giao-dien="moi"]:has(link[rel="canonical"][href$="/customer-referral"]) .rcx .doc :is(h1,h2,h3,h4){font-weight:800;letter-spacing:-.02em}
html[data-giao-dien="moi"]:has(link[rel="canonical"][href$="/customer-referral"]) .rcx .doc blockquote{font-style:normal}
html[data-giao-dien="moi"]:has(link[rel="canonical"][href$="/customer-referral"]) .rcx .doc-mark .seal-ic{color:var(--c-ngoc);opacity:1}

/* ============================================================
   G. CỔNG ĐỐI TÁC (/partner-portal, /partner-prices) — CHỈ trạng thái chưa đăng nhập (khung 🔐 + nút Đăng nhập),
   phần soi được không cần tài khoản. Trang toàn style="" nên khoá theo link ?returnUrl=…partner-p….
   Phần sau khi đăng nhập (bảng giá đại lý, cổng B2B) chưa soi → không đổi.
   ============================================================ */
html[data-giao-dien="moi"] section:has(> div > a[href*="login?returnUrl="][href*="partner-p"]) > h1{font-weight:800!important;letter-spacing:-.02em;color:var(--c-muc)!important}
html[data-giao-dien="moi"] div:has(> a[href*="login?returnUrl="][href*="partner-p"]){border:1px solid var(--c-ke)!important;border-radius:20px!important}
html[data-giao-dien="moi"] div:has(> a[href*="login?returnUrl="][href*="partner-p"]) > h2{font-weight:800;color:var(--c-muc)!important}
html[data-giao-dien="moi"] a[href*="login?returnUrl="][href*="partner-p"]{display:inline-flex!important;align-items:center;justify-content:center;min-height:48px;padding:0 28px!important;
  border-radius:999px!important;background:var(--c-cam)!important;font-weight:800!important}
html[data-giao-dien="moi"] a[href*="login?returnUrl="][href*="partner-p"]:hover{background:var(--c-cam-dam)!important}