/* =====================================================================
   THEME "MẶC ĐỊNH" v2 — Shop.donloc
   Màu chủ đạo / màu nhấn / bo góc / phông đọc từ cài đặt theme (layout/theme.liquid đặt biến CSS).
   Thứ tự: token → nền tảng → nút, nhãn → đầu trang → ngăn kéo, giỏ mini, nav dưới, nút nổi → trang chủ
   → lưới & thẻ sản phẩm → danh mục/tìm kiếm → chi tiết → giỏ → thanh toán → đơn → chân trang → di động.
   ===================================================================== */
:root {
  --nen: #f4f6f9; --the: #ffffff; --chu: #0f172a; --chu-2: #475569; --chu-mo: #8b95a5; --vien: #e6e9ef; --vien-dam: #d3d9e2;
  --bong-1: 0 1px 2px rgba(15,23,42,.05), 0 2px 6px -2px rgba(15,23,42,.06);
  --bong-2: 0 14px 34px -14px rgba(15,23,42,.22);
  --bong-3: 0 28px 60px -22px rgba(15,23,42,.32);
  --chinh-nhat: color-mix(in srgb, var(--mau-chinh) 10%, #fff);
  --chinh-dam: color-mix(in srgb, var(--mau-chinh) 82%, #000);
  --nhan-nhat: color-mix(in srgb, var(--mau-nhan) 12%, #fff);
  --xanh: #16a34a; --do: #dc2626; --vang: #d97706;
  --dau-cao: 128px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--chu); background: var(--nen); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--mau-chinh); }
button { font-family: inherit; color: inherit; }
input, select, textarea { font-family: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0 0 .8em; }
ul { margin: 0; padding: 0; list-style: none; }
.bao { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.mo { color: var(--chu-mo); font-size: 13.5px; }
.mono { font-family: ui-monospace, Consolas, 'SF Mono', monospace; }
.xanh { color: var(--xanh) !important; }
.nhan-mau { color: var(--mau-nhan) !important; }
.i { width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px; }
.noi-dung { min-height: 60vh; padding-bottom: 56px; }
[hidden] { display: none !important; }
.an-di-dong { }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--mau-chinh) 45%, transparent); outline-offset: 2px; border-radius: 4px; }

/* ---------- nút ---------- */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--goc-nho); font-weight: 700; font-size: 14.5px; border: 1.5px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, filter .2s; white-space: nowrap; line-height: 1.2; text-decoration: none !important; }
.nut:active { transform: translateY(1px); }
.nut .i { width: 17px; height: 17px; }
.nut--nhan { background: var(--mau-nhan); color: #fff; box-shadow: 0 10px 22px -12px var(--mau-nhan); }
.nut--nhan:hover { filter: brightness(1.07); color: #fff; box-shadow: 0 14px 28px -12px var(--mau-nhan); }
.nut--chinh { background: var(--mau-chinh); color: #fff; }
.nut--chinh:hover { filter: brightness(1.07); color: #fff; }
.nut--vien { background: #fff; color: var(--mau-chinh); border-color: var(--mau-chinh); }
.nut--vien:hover { background: var(--chinh-nhat); color: var(--mau-chinh); }
.nut--sang { background: var(--chinh-nhat); color: var(--mau-chinh); }
.nut--sang:hover { background: color-mix(in srgb, var(--mau-chinh) 18%, #fff); color: var(--mau-chinh); }
.nut--lon { padding: 14px 26px; font-size: 15.5px; }
.nut--nho { padding: 7px 13px; font-size: 13px; }
.nut--rong { width: 100%; }
.nut[disabled] { opacity: .6; cursor: wait; }
.nut-dong { width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--nen); display: grid; place-items: center; cursor: pointer; }
.nut-dong:hover { background: var(--vien); }

/* ---------- nhãn, thông báo, toast ---------- */
.nhan { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; color: #fff; letter-spacing: .03em; text-transform: uppercase; }
.nhan--hot { background: var(--mau-nhan); }
.nhan--moi { background: var(--mau-chinh); }
.tb { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--goc-nho); margin: 14px 0; font-weight: 500; line-height: 1.5; }
.tb .i { margin-top: 2px; }
.tb--ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.tb--loi { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.thong-bao-bao { padding-top: 14px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: #0f172a; color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: .25s; z-index: 200; box-shadow: var(--bong-3); max-width: calc(100% - 32px); }
.toast.hien { opacity: 1; transform: translate(-50%, 0); }
body.co-nav-duoi .toast { bottom: 84px; }

/* ---------- thanh trên cùng ---------- */
.thanh-tren { background: var(--mau-chinh); color: rgba(255,255,255,.92); font-size: 12.5px; }
.thanh-tren__hang { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 34px; }
.thanh-tren a, .thanh-tren span { display: inline-flex; align-items: center; gap: 6px; color: inherit; white-space: nowrap; }
.thanh-tren a:hover { color: #fff; }
.thanh-tren .i { width: 15px; height: 15px; }
.thanh-tren__trai { display: flex; gap: 18px; }
.thanh-tren__giua { flex: 1; text-align: center; overflow: hidden; }
.thanh-tren__tb { font-weight: 600; color: #fff; }
.thanh-tb { background: var(--mau-chinh); color: #fff; text-align: center; font-size: 13px; padding: 8px 16px; font-weight: 600; }

/* ---------- đầu trang ---------- */
.dau { background: var(--the); position: sticky; top: 0; z-index: 60; transition: box-shadow .2s; }
.dau.cuon { box-shadow: 0 6px 24px -14px rgba(15,23,42,.35); }
.dau__hang { display: flex; align-items: center; gap: 22px; height: 78px; }
.dau__menu { display: none; border: 0; background: transparent; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; place-items: center; }
.dau__menu .i { width: 26px; height: 26px; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none !important; }
.logo img { height: 46px; width: auto; max-width: 200px; object-fit: contain; }
.logo__mark { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--mau-chinh), var(--chinh-dam)); color: #fff; font-weight: 800; font-size: 20px; display: grid; place-items: center; box-shadow: 0 8px 18px -10px var(--mau-chinh); }
.logo__chu { font-weight: 800; font-size: 21px; color: var(--chu); letter-spacing: -.02em; white-space: nowrap; }
.logo:hover .logo__chu { color: var(--mau-chinh); }
.tim { flex: 1; position: relative; max-width: 620px; margin: 0 auto; }
.tim__form { display: flex; align-items: center; background: var(--nen); border: 1.5px solid var(--vien); border-radius: 999px; padding: 4px 4px 4px 16px; transition: .2s; }
.tim__form:focus-within { border-color: var(--mau-chinh); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--mau-chinh) 12%, transparent); }
.tim__icon { color: var(--chu-mo); width: 20px; height: 20px; }
.tim input { flex: 1; border: 0; background: transparent; padding: 9px 12px; font: inherit; font-size: 14.5px; outline: none; min-width: 0; }
.tim input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tim__nut { border: 0; background: var(--mau-chinh); color: #fff; font-weight: 700; padding: 9px 20px; border-radius: 999px; cursor: pointer; font-size: 14px; }
.tim__nut:hover { filter: brightness(1.07); }
.tim__goi-y { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--vien); border-radius: var(--goc-nho); box-shadow: var(--bong-3); z-index: 70; overflow: hidden; }
.tim__goi-y a { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--vien); }
.tim__goi-y a:last-child { border-bottom: 0; }
.tim__goi-y a:hover { background: var(--chinh-nhat); }
.tim__goi-y img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--nen); flex-shrink: 0; }
.tim__goi-y .goi-y__ten { flex: 1; font-size: 14px; color: var(--chu); }
.tim__goi-y .goi-y__gia { font-weight: 700; color: var(--mau-nhan); font-size: 13.5px; }
.tim__goi-y .goi-y__nhom { padding: 8px 14px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--chu-mo); background: #fafbfc; }
.tim__goi-y .goi-y__dm { color: var(--mau-chinh); font-weight: 600; }
.tim--trang { max-width: 720px; margin: 0 0 22px; }
.tim--trang .tim__form { background: #fff; padding: 6px 6px 6px 18px; }
.dau__phai { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.dau__ho-tro { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--chu); }
.dau__ho-tro-icon { width: 42px; height: 42px; border-radius: 999px; background: var(--chinh-nhat); color: var(--mau-chinh); display: grid; place-items: center; }
.dau__ho-tro-icon .i { width: 22px; height: 22px; }
.dau__ho-tro small { display: block; font-size: 11.5px; color: var(--chu-mo); line-height: 1.2; }
.dau__ho-tro b { font-size: 15px; letter-spacing: -.01em; }
.dau__gio { position: relative; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--vien); background: #fff; padding: 9px 14px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 14px; transition: .2s; }
.dau__gio:hover { border-color: var(--mau-chinh); color: var(--mau-chinh); }
.dau__gio .i { width: 22px; height: 22px; }
.dau__gio-so { position: absolute; top: -6px; left: 26px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--mau-nhan); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; transition: transform .2s; }
.dau__gio-so.nhay { animation: nhay .45s ease; }
@keyframes nhay { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.dau__nav-bao { border-top: 1px solid var(--vien); border-bottom: 1px solid var(--vien); }
.dau__nav { display: flex; align-items: center; gap: 8px; height: 50px; }
.dm-menu { position: relative; flex-shrink: 0; }
.dm-menu__nut { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; border: 0; background: var(--chinh-nhat); color: var(--mau-chinh); font-weight: 700; font-size: 14px; cursor: pointer; margin-left: -20px; padding-left: 20px; border-right: 1px solid color-mix(in srgb, var(--mau-chinh) 18%, transparent); }
.dm-menu__nut:hover, .dm-menu.mo .dm-menu__nut { background: color-mix(in srgb, var(--mau-chinh) 16%, #fff); }
.dm-menu__nut .i { width: 20px; height: 20px; }
.dm-menu__mui { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s; }
.dm-menu.mo .dm-menu__mui { transform: rotate(-90deg); }
.dm-menu__bang { position: absolute; top: 100%; left: -20px; min-width: 760px; max-width: calc(100vw - 40px); background: #fff; border: 1px solid var(--vien); border-radius: 0 0 var(--goc) var(--goc); box-shadow: var(--bong-3); padding: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; z-index: 65; }
.dm-menu__trong { color: var(--chu-mo); padding: 10px; }
.dm-menu__cot { min-width: 0; }
.dm-menu__cha { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--chu); padding: 6px 8px; border-radius: 10px; }
.dm-menu__cha:hover { background: var(--chinh-nhat); color: var(--mau-chinh); }
.dm-menu__cha small { display: block; font-weight: 400; font-size: 11.5px; color: var(--chu-mo); }
.dm-menu__anh { width: 40px; height: 40px; border-radius: 10px; background: var(--nen); overflow: hidden; display: grid; place-items: center; flex-shrink: 0; }
.dm-menu__anh img { width: 100%; height: 100%; object-fit: cover; }
.dm-menu__anh i { font-style: normal; font-weight: 800; color: var(--mau-chinh); }
.dm-menu__cot ul { padding: 4px 0 0 58px; display: flex; flex-direction: column; gap: 2px; }
.dm-menu__cot li a { display: block; font-size: 13px; color: var(--chu-2); padding: 3px 0; }
.dm-menu__cot li a:hover { color: var(--mau-chinh); }
.nav-chinh { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.nav-chinh::-webkit-scrollbar { display: none; }
.nav-chinh a { display: block; padding: 8px 14px; font-weight: 600; font-size: 14px; color: var(--chu-2); border-radius: 999px; white-space: nowrap; }
.nav-chinh a:hover { background: var(--nen); color: var(--chu); }
.nav-chinh a.dang-chon { color: var(--mau-chinh); background: var(--chinh-nhat); }
.dau__nav-phai { margin-left: auto; flex-shrink: 0; }
.nav-lien-ket { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--chu-2); }
.nav-lien-ket:hover { color: var(--mau-chinh); }

/* ---------- ngăn kéo menu di động ---------- */
.ngan-keo { position: fixed; inset: 0; z-index: 120; }
.ngan-keo__nen, .gio-mini__nen { position: absolute; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); animation: hien .2s; }
@keyframes hien { from { opacity: 0; } }
.ngan-keo__hop { position: absolute; top: 0; left: 0; bottom: 0; width: min(340px, 88vw); background: #fff; box-shadow: var(--bong-3); display: flex; flex-direction: column; animation: truot-trai .22s ease-out; }
@keyframes truot-trai { from { transform: translateX(-100%); } }
.ngan-keo__dau { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--vien); font-size: 16px; }
.ngan-keo__than { overflow-y: auto; padding: 8px 10px 24px; flex: 1; }
.ngan-keo__nhom { padding: 16px 10px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--chu-mo); font-weight: 700; }
.ngan-keo li > a { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 10px; font-weight: 600; font-size: 14.5px; }
.ngan-keo li > a:hover { background: var(--nen); }
.ngan-keo li > a small { margin-left: auto; color: var(--chu-mo); font-weight: 400; }
.ngan-keo__anh { width: 36px; height: 36px; border-radius: 9px; background: var(--nen); overflow: hidden; display: grid; place-items: center; flex-shrink: 0; }
.ngan-keo__anh img { width: 100%; height: 100%; object-fit: cover; }
.ngan-keo__anh i { font-style: normal; font-weight: 800; color: var(--mau-chinh); }
.ngan-keo__con { padding-left: 58px; }
.ngan-keo__con a { display: block; padding: 6px 0; font-size: 13.5px; color: var(--chu-2); }

/* ---------- giỏ mini ---------- */
.gio-mini { position: fixed; inset: 0; z-index: 130; }
.gio-mini__hop { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #fff; box-shadow: var(--bong-3); display: flex; flex-direction: column; animation: truot-phai .22s ease-out; }
@keyframes truot-phai { from { transform: translateX(100%); } }
.gio-mini__dau { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--vien); font-size: 17px; }
.gio-mini__dem { color: var(--chu-mo); font-weight: 500; font-size: 14px; }
.gio-mini__than { flex: 1; overflow-y: auto; padding: 8px 20px; }
.gio-mini__trong { text-align: center; padding: 60px 10px; color: var(--chu-mo); }
.gio-mini__trong .i { width: 52px; height: 52px; color: var(--vien-dam); margin-bottom: 8px; }
.gm-dong { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--vien); align-items: center; }
.gm-dong img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--nen); }
.gm-dong__ten { font-weight: 600; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-dong__gia { font-size: 13px; color: var(--chu-mo); margin-top: 2px; }
.gm-dong__duoi { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.gm-dong__tong { font-weight: 800; font-size: 14px; text-align: right; }
.gm-dong__xoa { border: 0; background: transparent; color: var(--chu-mo); cursor: pointer; padding: 4px; margin-top: 6px; }
.gm-dong__xoa:hover { color: var(--do); }
.gio-mini__chan { border-top: 1px solid var(--vien); padding: 16px 20px 20px; background: #fff; }
.gio-mini__tong { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 12px; }
.gio-mini__tong b { font-size: 18px; color: var(--mau-nhan); }
.gio-mini__nut { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gio-mini__nut .nut { padding: 12px; }

/* ---------- thanh điều hướng dưới (di động) ---------- */
.nav-duoi { display: none; position: fixed; left: 0; right: 0; bottom: 0; height: 64px; background: #fff; border-top: 1px solid var(--vien); z-index: 110; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px -18px rgba(15,23,42,.35); }
.nav-duoi a, .nav-duoi button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--chu-2); border: 0; background: transparent; position: relative; cursor: pointer; }
.nav-duoi .i { width: 23px; height: 23px; }
.nav-duoi a.dang-chon, .nav-duoi button:active { color: var(--mau-chinh); }
.nav-duoi__so { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mau-nhan); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
body.co-nav-duoi .noi-dung { padding-bottom: 56px; }

/* ---------- nút liên hệ nổi ---------- */
.lien-he-noi { position: fixed; right: 18px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 100; }
body.co-nav-duoi .lien-he-noi { bottom: 80px; }
.lien-he-noi__nut { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 999px; color: #fff; box-shadow: var(--bong-2); transition: transform .15s; text-decoration: none !important; }
.lien-he-noi__nut:hover { transform: translateY(-2px) scale(1.04); color: #fff; }
.lien-he-noi__nut .i { width: 24px; height: 24px; }
.lien-he-noi__nut span { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); background: #0f172a; color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.lien-he-noi__nut:hover span { opacity: 1; }
.lien-he-noi__nut--zalo { background: #0068ff; }
.lien-he-noi__nut--goi { background: var(--xanh); }
.lien-he-noi__nut--goi .i { animation: rung 2.4s infinite; }
@keyframes rung { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(14deg); } 88% { transform: rotate(-12deg); } 92% { transform: rotate(10deg); } 96% { transform: rotate(-6deg); } }

/* ---------- trang chủ: hero ---------- */
.hero-vung { margin-top: 20px; }
.hero { position: relative; }
.hero__ray { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--goc); box-shadow: var(--bong-2); }
.hero__ray::-webkit-scrollbar { display: none; }
.hero__the { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 21/8; background: var(--nen) center/cover no-repeat; display: flex; align-items: flex-end; }
.hero__chu { padding: 36px 44px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0)); width: 100%; }
.hero__chu h2 { font-size: clamp(22px, 3.6vw, 42px); font-weight: 800; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.hero__chu p { margin: 8px 0 16px; font-size: clamp(14px, 1.5vw, 18px); max-width: 600px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hero__mui { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255,255,255,.9); color: var(--chu); box-shadow: var(--bong-2); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: .2s; }
.hero:hover .hero__mui { opacity: 1; }
.hero__mui--trai { left: 14px; } .hero__mui--trai .i { transform: rotate(180deg); }
.hero__mui--phai { right: 14px; }
.hero__cham { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.hero__cham button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; transition: .2s; }
.hero__cham button.dang-chon { background: #fff; width: 26px; }
.hero-md { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; background: radial-gradient(900px 400px at 0% 0%, var(--chinh-nhat), transparent 60%), radial-gradient(600px 300px at 100% 100%, var(--nhan-nhat), transparent 60%), #fff; border-radius: var(--goc); padding: 48px 48px; border: 1px solid var(--vien); box-shadow: var(--bong-1); }
.hero-md__nhan { display: inline-flex; align-items: center; gap: 6px; background: var(--nhan-nhat); color: color-mix(in srgb, var(--mau-nhan) 80%, #000); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; }
.hero-md__chu h1 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.hero-md__chu p { font-size: 16.5px; color: var(--chu-2); margin: 16px 0 24px; max-width: 520px; }
.hero-md__nut { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-md__diem { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.hero-md__diem li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--chu-2); font-weight: 500; }
.hero-md__diem .i { color: var(--xanh); width: 16px; height: 16px; }
.hero-md__anh-lon { border-radius: var(--goc); box-shadow: var(--bong-3); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.hero-md__luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-md__o { background: #fff; border-radius: var(--goc-nho); overflow: hidden; box-shadow: var(--bong-2); border: 1px solid var(--vien); display: flex; flex-direction: column; transition: transform .2s; }
.hero-md__o:hover { transform: translateY(-3px); }
.hero-md__o img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--nen); }
.hero-md__o span { display: block; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--chu); }
.hero-md__o span b { display: block; color: var(--mau-nhan); font-size: 13px; }
.hero-md__luoi--trong .hero-md__o { aspect-ratio: 1; background: var(--nen); }

/* ---------- cam kết ---------- */
.cam-ket { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 16px; }
.cam-ket__o { display: flex; align-items: center; gap: 12px; background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc-nho); padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: var(--chu); box-shadow: var(--bong-1); }
.cam-ket__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--chinh-nhat); color: var(--mau-chinh); display: grid; place-items: center; flex-shrink: 0; }
.cam-ket__icon .i { width: 22px; height: 22px; }

/* ---------- khối ---------- */
.khoi { margin-top: 44px; }
.khoi__dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.khoi__dau h2 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.khoi__dau--giua { justify-content: center; text-align: center; }
.khoi__icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--chinh-nhat); color: var(--mau-chinh); font-size: 16px; }
.khoi__icon--nhan { background: var(--nhan-nhat); color: var(--mau-nhan); }
.khoi__xem { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--mau-chinh); font-size: 14px; white-space: nowrap; }
.khoi__xem .i { width: 16px; height: 16px; }
.dm-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.dm-o { background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); padding: 18px 12px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: .2s; box-shadow: var(--bong-1); }
.dm-o:hover { border-color: var(--mau-chinh); box-shadow: var(--bong-2); transform: translateY(-3px); }
.dm-o__anh { width: 76px; height: 76px; border-radius: 999px; background: var(--chinh-nhat); display: grid; place-items: center; overflow: hidden; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--vien); }
.dm-o__anh img { width: 100%; height: 100%; object-fit: cover; }
.dm-o__anh i { font-style: normal; font-weight: 800; font-size: 28px; color: var(--mau-chinh); }
.dm-o__ten { font-weight: 700; font-size: 14px; color: var(--chu); margin-top: 4px; }
.dm-o small { color: var(--chu-mo); font-size: 12px; }
.dai-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 40px; }
.dai-banner a { position: relative; border-radius: var(--goc); overflow: hidden; box-shadow: var(--bong-2); display: block; }
.dai-banner img { width: 100%; aspect-ratio: 3/1; object-fit: cover; transition: transform .5s; }
.dai-banner a:hover img { transform: scale(1.04); }
.dai-banner__chu { position: absolute; left: 22px; bottom: 18px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.dai-banner__chu b { display: block; font-size: 20px; font-weight: 800; }
.dai-banner__chu small { font-size: 13px; }
.vi-sao__luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vi-sao__o { background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); padding: 24px 20px; text-align: center; box-shadow: var(--bong-1); }
.vi-sao__icon { width: 56px; height: 56px; border-radius: 16px; background: var(--chinh-nhat); color: var(--mau-chinh); display: grid; place-items: center; margin: 0 auto 12px; }
.vi-sao__icon .i { width: 28px; height: 28px; }
.vi-sao__o b { display: block; font-size: 15.5px; margin-bottom: 6px; }
.vi-sao__o p { margin: 0; color: var(--chu-2); font-size: 13.5px; }

/* ---------- lưới + thẻ sản phẩm ---------- */
.luoi-sp { display: grid; grid-template-columns: repeat(var(--so-cot), minmax(0, 1fr)); gap: 16px; }
.sp { background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; box-shadow: var(--bong-1); }
.sp:hover { box-shadow: var(--bong-2); transform: translateY(-4px); border-color: transparent; }
.sp__anh { position: relative; aspect-ratio: 1; background: #fff; overflow: hidden; display: block; border-bottom: 1px solid var(--vien); }
.sp__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.sp:hover .sp__anh img { transform: scale(1.05); }
.sp__nhan { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.sp__het { position: absolute; inset: auto 0 0 0; background: rgba(15,23,42,.72); color: #fff; font-size: 12px; font-weight: 700; text-align: center; padding: 7px; }
.sp--het .sp__anh img { filter: grayscale(.6); opacity: .8; }
.sp__than { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sp__dm { font-size: 11.5px; color: var(--chu-mo); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.sp__ten { font-size: 14.5px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.sp__ten a:hover { color: var(--mau-chinh); }
.sp__gia { font-weight: 800; color: var(--mau-nhan); font-size: 17px; margin-top: 4px; letter-spacing: -.01em; }
.sp__gia small { font-weight: 500; color: var(--chu-mo); font-size: 12px; }
.sp__mua { margin: auto 0 0; padding-top: 10px; }
.sp__nut { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: var(--goc-nho); border: 1.5px solid var(--mau-chinh); background: #fff; color: var(--mau-chinh); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: .2s; text-decoration: none !important; }
.sp__nut:hover { background: var(--mau-chinh); color: #fff; }
.sp__nut .i { width: 17px; height: 17px; }
.sp__nut--mo { border-color: var(--vien); color: var(--chu-2); margin-top: 10px; }
.sp__nut--mo:hover { background: var(--nen); color: var(--chu); }

/* ---------- trang danh mục / tìm kiếm ---------- */
.duong-dan { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--chu-mo); padding: 16px 0 10px; flex-wrap: wrap; }
.duong-dan .i { width: 14px; height: 14px; }
.duong-dan a:hover { color: var(--mau-chinh); }
.duong-dan span { color: var(--chu-2); }
.trang-dau { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 4px 0 14px; }
.trang-dau h1, .tieu-de-trang { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 14px; }
.trang-dau h1 { margin: 0; }
.tieu-de-trang small { font-weight: 500; color: var(--chu-mo); font-size: 15px; margin-left: 6px; }
.trang-dau__mo-ta { color: var(--chu-2); max-width: 760px; margin: 6px 0 0; }
.trang-dau__anh { width: 88px; height: 88px; border-radius: var(--goc); object-fit: cover; box-shadow: var(--bong-2); }
.chip-dm { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip-dm--giua { justify-content: center; margin-top: 16px; }
.chip { padding: 8px 15px; border-radius: 999px; background: var(--the); border: 1.5px solid var(--vien); font-size: 13.5px; font-weight: 600; transition: .15s; color: var(--chu-2); }
.chip:hover { border-color: var(--mau-chinh); color: var(--mau-chinh); }
.chip.dang-chon { border-color: var(--mau-chinh); color: var(--mau-chinh); background: var(--chinh-nhat); }
.chip small { color: var(--chu-mo); font-weight: 500; }
.chip--nho { padding: 4px 11px; font-size: 12px; }
.sap-xep { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc-nho); padding: 10px 14px; }
.sap-xep__dem { color: var(--chu-2); font-size: 13.5px; }
.sap-xep__chon { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--chu-2); }
.sap-xep select { padding: 8px 12px; border-radius: 8px; border: 1.5px solid var(--vien); background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--chu); }
.phan-trang { display: flex; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.phan-trang__so, .phan-trang__nut { min-width: 40px; height: 40px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: var(--goc-nho); border: 1.5px solid var(--vien); background: #fff; font-weight: 700; font-size: 14px; }
.phan-trang__so:hover, .phan-trang__nut:hover { border-color: var(--mau-chinh); color: var(--mau-chinh); }
.phan-trang__so.hien-tai { background: var(--mau-chinh); color: #fff; border-color: var(--mau-chinh); }
.trong { text-align: center; padding: 56px 20px; background: var(--the); border: 1px dashed var(--vien-dam); border-radius: var(--goc); margin: 20px 0; }
.trong__icon { width: 72px; height: 72px; border-radius: 999px; background: var(--nen); color: var(--chu-mo); display: grid; place-items: center; margin: 0 auto 14px; }
.trong__icon .i { width: 34px; height: 34px; }
.trong h1, .trong h2 { font-size: 22px; margin-bottom: 8px; }
.trong p { color: var(--chu-2); max-width: 520px; margin: 0 auto 18px; }
.trong__nut { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.trong--cao { padding: 90px 20px; }
.so-404 { font-size: 88px; font-weight: 800; color: var(--mau-chinh); line-height: 1; margin-bottom: 8px; opacity: .2; letter-spacing: -.05em; }

/* ---------- chi tiết sản phẩm ---------- */
.ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); padding: 28px; margin-top: 6px; box-shadow: var(--bong-1); }
.ct__anh-lon { position: relative; aspect-ratio: 1; background: #fff; border-radius: var(--goc-nho); overflow: hidden; border: 1px solid var(--vien); }
.ct__anh-lon img { width: 100%; height: 100%; object-fit: contain; }
.ct__thumb { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.ct__thumb button { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--goc-xiu); border: 2px solid var(--vien); padding: 0; overflow: hidden; background: #fff; cursor: pointer; transition: .15s; }
.ct__thumb button:hover, .ct__thumb button.dang-chon { border-color: var(--mau-chinh); }
.ct__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ct__tren { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--chu-mo); }
.ct__dm { color: var(--mau-chinh); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.ct__ten { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 10px; line-height: 1.25; }
.ct__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--chu-mo); align-items: center; }
.tinh-trang { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.tinh-trang .i { width: 14px; height: 14px; }
.tinh-trang.con { background: #ecfdf5; color: #047857; }
.tinh-trang.het { background: #fef2f2; color: #b91c1c; }
.ct__gia-hop { background: var(--nen); border-radius: var(--goc-nho); padding: 16px 18px; margin: 18px 0 14px; }
.ct__gia { font-size: 32px; font-weight: 800; color: var(--mau-nhan); letter-spacing: -.02em; line-height: 1.1; }
.ct__gia small { font-size: 14px; color: var(--chu-mo); font-weight: 500; letter-spacing: 0; }
.ct__freeship { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--chu-2); font-weight: 500; }
.ct__freeship .i { color: var(--xanh); }
.ct__dac-diem { color: var(--chu-2); margin-bottom: 12px; }
/* Website nhiều cửa hàng (21/09/2026): món có ở nhiều nơi */
.ct__cua-hang { margin: 6px 0 16px; padding: 12px 14px; background: var(--nen); border-radius: var(--goc-nho); }
.ct__cua-hang .ct__nhan { display: inline-flex; align-items: center; gap: 6px; }
.ct__cua-hang .ct__nhan .i { width: 14px; height: 14px; }
.ct__cua-hang .chip-dm { margin-bottom: 6px; }
.ct__cua-hang-ghi { font-size: 12.5px; margin: 0; }
/* Lượt đặt tách thành nhiều đơn */
.don-nhom { background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); padding: 16px 20px; margin: 0 0 18px; box-shadow: var(--bong-1); }
.don-nhom__dau { display: flex; align-items: flex-start; gap: 8px; color: var(--chu-2); line-height: 1.5; }
.don-nhom__dau .i { flex-shrink: 0; margin-top: 3px; color: var(--mau-chinh); }
.don-nhom__ds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.don-nhom__o { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid var(--vien); border-radius: var(--goc-nho); text-decoration: none; color: inherit; min-width: 150px; }
.don-nhom__o small { color: var(--chu-mo); font-size: 12px; }
.don-nhom__o--hien { border-color: var(--mau-chinh); background: var(--chinh-nhat); }
a.don-nhom__o:hover { border-color: var(--mau-chinh); }
.ct__nhan { font-size: 12.5px; font-weight: 700; color: var(--chu-2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.ct__phan-loai { margin: 6px 0 16px; }
.ct__mua { margin: 6px 0 20px; }
.ct__so-luong { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.ct__so-luong .ct__nhan { margin: 0; }
.so-luong { display: inline-flex; align-items: center; border: 1.5px solid var(--vien-dam); border-radius: var(--goc-nho); overflow: hidden; background: #fff; }
.so-luong button { width: 42px; height: 44px; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: var(--chu); }
.so-luong button:hover { background: var(--nen); }
.so-luong input { width: 54px; height: 44px; border: 0; border-left: 1px solid var(--vien); border-right: 1px solid var(--vien); text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.so-luong input::-webkit-outer-spin-button, .so-luong input::-webkit-inner-spin-button { -webkit-appearance: none; }
.so-luong input:focus { outline: none; }
.so-luong--nho button { width: 32px; height: 36px; font-size: 17px; }
.so-luong--nho input { width: 44px; height: 36px; }
.ct__nut { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct__chinh-sach { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 14px 16px; background: var(--nen); border-radius: var(--goc-nho); font-size: 13px; color: var(--chu-2); }
.ct__chinh-sach li { display: flex; align-items: center; gap: 8px; }
.ct__chinh-sach .i { color: var(--mau-chinh); width: 18px; height: 18px; }
.ct__the { margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.ct__mo-ta { background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); padding: 28px; margin-top: 20px; box-shadow: var(--bong-1); position: relative; }
.ct__mo-ta-dau { border-bottom: 2px solid var(--vien); margin-bottom: 18px; }
.ct__mo-ta-dau h2 { display: inline-block; font-size: 17px; font-weight: 800; padding-bottom: 12px; margin-bottom: -2px; border-bottom: 2px solid var(--mau-chinh); }
.ct__mo-ta .van-ban.thu-gon { max-height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.ct__xem-them { display: flex; align-items: center; gap: 4px; margin: 8px auto 0; border: 1.5px solid var(--vien); background: #fff; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--mau-chinh); }
.ct__xem-them .i { transform: rotate(90deg); width: 16px; height: 16px; }
.van-ban { line-height: 1.75; color: #1f2937; max-width: 900px; font-size: 15px; }
.van-ban img { border-radius: var(--goc-nho); margin: 12px 0; }
.van-ban h2 { font-size: 20px; margin: 24px 0 8px; }
.van-ban h3 { font-size: 17px; margin: 18px 0 6px; }
.van-ban ul, .van-ban ol { padding-left: 22px; margin: 0 0 12px; list-style: disc; }
.van-ban ol { list-style: decimal; }
.van-ban iframe { max-width: 100%; border-radius: var(--goc-nho); }
.van-ban table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.van-ban td, .van-ban th { border: 1px solid var(--vien); padding: 8px 10px; }
.van-ban a { color: var(--mau-chinh); text-decoration: underline; }
.trang-tinh { background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); padding: 36px; max-width: 920px; box-shadow: var(--bong-1); }
.trang-tinh h1 { font-size: 30px; font-weight: 800; margin-bottom: 18px; letter-spacing: -.02em; }
.trang-tinh__chan { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--vien); }
.thanh-mua { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--vien); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px; align-items: center; z-index: 115; box-shadow: 0 -8px 24px -18px rgba(15,23,42,.35); }
.thanh-mua__gia { flex: 1; min-width: 0; }
.thanh-mua__gia small { display: block; font-size: 11.5px; color: var(--chu-mo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thanh-mua__gia b { color: var(--mau-nhan); font-size: 17px; }
.thanh-mua .nut { padding: 11px 14px; font-size: 13.5px; }

/* ---------- bước mua ---------- */
.buoc { display: flex; align-items: center; justify-content: center; gap: 0; margin: 6px 0 18px; padding: 0; list-style: none; counter-reset: b; }
.buoc li { display: flex; align-items: center; gap: 10px; color: var(--chu-mo); font-weight: 600; font-size: 13.5px; }
.buoc li + li::before { content: ''; width: 56px; height: 2px; background: var(--vien); margin: 0 14px; border-radius: 2px; }
.buoc li.xong + li::before { background: var(--mau-chinh); }
.buoc__so { width: 30px; height: 30px; border-radius: 999px; background: var(--vien); color: var(--chu-mo); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.buoc__so .i { width: 16px; height: 16px; }
.buoc li.xong .buoc__so { background: var(--mau-chinh); color: #fff; }
.buoc li.xong { color: var(--chu); }
.buoc li.hien-tai .buoc__so { box-shadow: 0 0 0 4px var(--chinh-nhat); }

/* ---------- giỏ hàng ---------- */
.gio { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.gio__dong { background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); overflow: hidden; box-shadow: var(--bong-1); }
.gio-dong { display: grid; grid-template-columns: 90px 1fr auto auto 40px; gap: 16px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--vien); }
.gio-dong.het { opacity: .75; }
.gio-dong__anh img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--goc-xiu); background: var(--nen); border: 1px solid var(--vien); }
.gio-dong__ten { font-weight: 600; display: block; line-height: 1.4; }
.gio-dong__ten:hover { color: var(--mau-chinh); }
.gio-dong__gia { color: var(--chu-mo); font-size: 13.5px; margin-top: 3px; }
.gio-dong__het { font-size: 12.5px; color: var(--do); margin-top: 4px; font-weight: 600; }
.gio-dong__sl { margin: 0; }
.gio-dong__tong { font-weight: 800; min-width: 100px; text-align: right; font-size: 15.5px; }
.gio-dong__xoa { margin: 0; }
.gio-dong__xoa button { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--vien); background: #fff; cursor: pointer; color: var(--chu-mo); display: grid; place-items: center; }
.gio-dong__xoa button:hover { color: var(--do); border-color: #fecaca; background: #fef2f2; }
.gio__tiep { display: inline-flex; align-items: center; gap: 6px; padding: 14px 18px; font-weight: 600; font-size: 14px; color: var(--chu-2); }
.gio__tiep .i { width: 16px; height: 16px; }
.tom-tat, .tt__phai, .don__phai { background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); padding: 22px; position: sticky; top: calc(var(--dau-cao) + 12px); box-shadow: var(--bong-1); }
.tom-tat h2, .tt__phai h2, .don__phai h2, .tt__khoi h2, .don__hang h2, .qr h2 { font-size: 17px; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.tt__phai h2 small { margin-left: auto; font-weight: 500; color: var(--chu-mo); font-size: 13px; }
.hang { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14.5px; align-items: baseline; }
.hang--tong { border-top: 1px solid var(--vien); margin-top: 8px; padding-top: 14px; font-size: 16px; font-weight: 700; }
.hang--tong b { color: var(--mau-nhan); font-size: 22px; letter-spacing: -.01em; }
.tom-tat .nut { margin-top: 14px; }
.tom-tat__freeship { display: flex; align-items: center; gap: 8px; background: var(--chinh-nhat); color: var(--chinh-dam); padding: 10px 12px; border-radius: var(--goc-xiu); font-size: 13px; margin: 8px 0; }
.tom-tat__freeship .i { color: var(--mau-chinh); }
.tom-tat__an-tam { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.tom-tat__an-tam li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--chu-mo); }
.tom-tat__an-tam .i { width: 16px; height: 16px; color: var(--mau-chinh); }

/* ---------- thanh toán ---------- */
.tt { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.tt__khoi { background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); padding: 24px; margin-bottom: 16px; box-shadow: var(--bong-1); }
.tt__so { width: 28px; height: 28px; border-radius: 999px; background: var(--mau-chinh); color: #fff; display: inline-grid; place-items: center; font-size: 13px; }
.o { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.o label { font-size: 13px; font-weight: 700; color: #334155; }
.o label i { color: var(--do); font-style: normal; }
.o label small { font-weight: 400; color: var(--chu-mo); }
.o input, .o textarea, .ma-gg input { padding: 12px 14px; border: 1.5px solid var(--vien-dam); border-radius: var(--goc-nho); font: inherit; font-size: 15px; background: #fff; width: 100%; transition: .15s; }
.o input::placeholder, .o textarea::placeholder { color: #b0b8c4; }
.o input:focus, .o textarea:focus, .ma-gg input:focus { outline: none; border-color: var(--mau-chinh); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mau-chinh) 12%, transparent); }
.o-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.lua-chon { display: grid; grid-template-columns: 22px 44px 1fr auto; grid-template-areas: 'o icon ten gia' 'o icon phu gia'; gap: 2px 12px; align-items: center; padding: 13px 16px; border: 1.5px solid var(--vien); border-radius: var(--goc-nho); margin-bottom: 10px; cursor: pointer; transition: .15s; background: #fff; }
.lua-chon:hover { border-color: var(--vien-dam); }
.lua-chon:has(input:checked) { border-color: var(--mau-chinh); background: var(--chinh-nhat); box-shadow: 0 0 0 1px var(--mau-chinh); }
.lua-chon input { grid-area: o; width: 18px; height: 18px; accent-color: var(--mau-chinh); margin: 0; }
.lua-chon__icon { grid-area: icon; width: 44px; height: 44px; border-radius: 12px; background: var(--nen); color: var(--mau-chinh); display: grid; place-items: center; }
.lua-chon__icon .i { width: 22px; height: 22px; }
.lua-chon__ten { grid-area: ten; font-weight: 700; }
.lua-chon__phu { grid-area: phu; font-size: 12.5px; color: var(--chu-mo); }
.lua-chon__gia { grid-area: gia; font-weight: 800; color: var(--mau-nhan); }
.dich-vu { margin: 4px 0 8px; padding: 14px 16px; background: var(--nen); border-radius: var(--goc-nho); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dich-vu__ds { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.dich-vu__ds label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; background: #fff; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--vien); }
.dich-vu__ds input { accent-color: var(--mau-chinh); }
.dich-vu__ds b { margin-left: auto; color: var(--mau-nhan); }
.dich-vu__tb { font-size: 12.5px; color: var(--chu-mo); }
.tt__dong { max-height: 320px; overflow-y: auto; margin-bottom: 8px; }
.tt__sp { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--vien); font-size: 13.5px; }
.tt__sp-anh { position: relative; flex-shrink: 0; }
.tt__sp-anh img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: var(--nen); border: 1px solid var(--vien); }
.tt__sp-anh i { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--chu-2); color: #fff; font-size: 11px; font-weight: 800; font-style: normal; display: grid; place-items: center; }
.tt__sp-ten { flex: 1; line-height: 1.35; }
.tt__sua { display: inline-block; font-size: 13px; color: var(--mau-chinh); font-weight: 600; margin-bottom: 12px; }
.ma-gg { display: flex; gap: 8px; margin-bottom: 4px; }
.ma-gg input { text-transform: uppercase; padding: 10px 12px; font-size: 14px; }
.ma-gg__tb { font-size: 12.5px; color: var(--xanh); min-height: 18px; margin-bottom: 8px; font-weight: 500; }
.ma-gg__tb.loi { color: var(--do); }
.tt__phai .nut { margin-top: 14px; }
.tt__ghi-chu { margin-top: 12px; display: flex; align-items: flex-start; gap: 6px; }
.tt__ghi-chu .i { width: 15px; height: 15px; margin-top: 2px; }

/* ---------- đơn hàng ---------- */
.thanh-cong { display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg, #ecfdf5, #fff); border: 1px solid #a7f3d0; border-radius: var(--goc); padding: 22px 26px; margin: 8px 0 18px; }
.thanh-cong__icon { width: 60px; height: 60px; border-radius: 999px; background: var(--xanh); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 10px 24px -10px var(--xanh); }
.thanh-cong__icon .i { width: 30px; height: 30px; }
.thanh-cong h1 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.thanh-cong p { margin: 0; color: var(--chu-2); }
.don { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin-top: 8px; }
.don__trai { display: flex; flex-direction: column; gap: 16px; }
.don__dau, .don__hang, .qr, .tien-trinh { background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); padding: 22px 24px; box-shadow: var(--bong-1); }
.don__dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.don__ma { font-size: 26px; font-weight: 800; font-family: ui-monospace, Consolas, monospace; letter-spacing: -.01em; }
.trang-thai { padding: 7px 16px; border-radius: 999px; font-weight: 800; font-size: 13px; background: #fef3c7; color: #92400e; }
.trang-thai--1, .trang-thai--2 { background: #dbeafe; color: #1d4ed8; }
.trang-thai--3 { background: #dcfce7; color: #166534; }
.trang-thai--4, .trang-thai--5 { background: #fee2e2; color: #b91c1c; }
.tien-trinh { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin: 0; counter-reset: b; padding: 24px 22px 18px; }
.tien-trinh li { position: relative; text-align: center; font-size: 13px; color: var(--chu-mo); padding-top: 38px; font-weight: 600; }
.tien-trinh li::before { counter-increment: b; content: counter(b); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 999px; background: var(--vien); color: var(--chu-mo); font-weight: 800; display: grid; place-items: center; font-size: 12px; z-index: 1; }
.tien-trinh li::after { content: ''; position: absolute; top: 14px; left: 50%; width: 100%; height: 2px; background: var(--vien); }
.tien-trinh li:last-child::after { display: none; }
.tien-trinh li.xong { color: var(--chu); }
.tien-trinh li.xong::before { background: var(--mau-chinh); color: #fff; content: '✓'; }
.tien-trinh li.xong::after { background: var(--mau-chinh); }
.qr__hop { display: grid; grid-template-columns: 230px 1fr; gap: 22px; align-items: start; }
.qr__ma svg { width: 100%; height: auto; border: 1px solid var(--vien); border-radius: var(--goc-nho); padding: 10px; background: #fff; }
.qr [data-chep] { cursor: copy; border-bottom: 1px dashed var(--vien-dam); }
.don__phai p { margin: 0 0 12px; }
.don__nguoi { line-height: 1.6; }
.don__phai .nut { margin-top: 10px; }
.hop-nho { max-width: 500px; margin: 24px auto; background: var(--the); border: 1px solid var(--vien); border-radius: var(--goc); padding: 32px; text-align: center; box-shadow: var(--bong-1); }
.hop-nho__icon { width: 64px; height: 64px; border-radius: 999px; background: var(--chinh-nhat); color: var(--mau-chinh); display: grid; place-items: center; margin: 0 auto 12px; }
.hop-nho__icon .i { width: 30px; height: 30px; }
.hop-nho h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.hop-nho .form-nho { text-align: left; margin-top: 18px; }
.hop-nho__chan { margin: 16px 0 0; }

/* ---------- chân trang ---------- */
.chan { background: #0f172a; color: #cbd5e1; margin-top: 56px; font-size: 14px; }
.chan__luoi { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; padding: 48px 20px 32px; }
.chan__ten { display: block; font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.chan__ten img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.chan__cot p { color: #94a3b8; line-height: 1.6; }
.chan__tieu-de { font-weight: 800; color: #fff; margin-bottom: 14px; text-transform: uppercase; font-size: 12.5px; letter-spacing: .08em; }
.chan__cot ul { display: flex; flex-direction: column; gap: 9px; }
.chan__cot a:hover { color: #fff; }
.chan__lien-he li { display: flex; gap: 10px; align-items: flex-start; }
.chan__lien-he .i { color: var(--mau-nhan); margin-top: 2px; width: 17px; height: 17px; }
.chan__mxh { display: flex; gap: 8px; margin-top: 16px; }
.chan__mxh a { width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; transition: .2s; }
.chan__mxh a:hover { background: var(--mau-chinh); }
.chan__mxh .i { width: 20px; height: 20px; }
.chan__cam-ket li { display: flex; align-items: center; gap: 8px; }
.chan__cam-ket .i { color: var(--xanh); width: 16px; height: 16px; }
.chan__tt { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chan__tt-o { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 6px 10px; border-radius: 8px; font-size: 12px; color: #e2e8f0; }
.chan__tt-o .i { width: 16px; height: 16px; }
.chan__duoi { border-top: 1px solid rgba(255,255,255,.08); }
.chan__duoi-hang { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; font-size: 12.5px; color: #94a3b8; flex-wrap: wrap; }
.chan__duoi a { color: #fff; font-weight: 600; }

/* ---------- di động & máy tính bảng ---------- */
@media (max-width: 1100px) { .luoi-sp { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vi-sao__luoi { grid-template-columns: 1fr 1fr; } .chan__luoi { grid-template-columns: 1fr 1fr; } .dm-menu__bang { grid-template-columns: 1fr 1fr; min-width: 560px; } .dau__nav-phai { display: none; } .nav-chinh { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); } }
@media (max-width: 900px) {
  :root { --dau-cao: 110px; }
  .thanh-tren__trai .an-di-dong, .dau__ho-tro, .dau__gio-chu, .dau__nav-bao, .thanh-tren__giua { display: none; }
  .thanh-tren__hang { justify-content: space-between; }
  .dau__menu { display: grid; }
  .dau__hang { height: auto; padding: 10px 0; gap: 10px; flex-wrap: wrap; }
  .logo { flex: 1; }
  .logo img { height: 38px; }
  .logo__chu { font-size: 18px; }
  .dau__gio { padding: 8px 10px; border: 0; }
  .dau__gio-so { left: 22px; }
  .tim { order: 3; flex-basis: 100%; max-width: none; }
  .tim__form { padding: 3px 3px 3px 14px; }
  .tim input { padding: 8px 10px; font-size: 14px; }
  .tim__nut { padding: 8px 16px; }
  .nav-duoi { display: flex; }
  .thanh-mua { display: flex; }
  body.co-nav-duoi .thanh-mua { bottom: 64px; }
  .hero-md { grid-template-columns: 1fr; padding: 28px 22px; gap: 22px; }
  .hero-md__chu h1 { font-size: 28px; }
  .hero__the { aspect-ratio: 16/9; }
  .hero__chu { padding: 18px 20px; }
  .hero__mui { display: none; }
  .ct, .gio, .tt, .don { grid-template-columns: 1fr; }
  .ct { padding: 16px; gap: 22px; }
  .tom-tat, .tt__phai, .don__phai { position: static; }
  .gio-dong { grid-template-columns: 72px 1fr 36px; grid-template-areas: 'anh tt xoa' 'anh sl tong'; gap: 10px 12px; padding: 14px; }
  .gio-dong__anh { grid-area: anh; } .gio-dong__anh img { width: 72px; height: 72px; } .gio-dong__tt { grid-area: tt; } .gio-dong__sl { grid-area: sl; } .gio-dong__tong { grid-area: tong; min-width: 0; } .gio-dong__xoa { grid-area: xoa; }
  .qr__hop { grid-template-columns: 1fr; }
  .qr__ma { max-width: 260px; margin: 0 auto; }
  .o-hang { grid-template-columns: 1fr; }
  .ct__nut { grid-template-columns: 1fr; }
  .ct__chinh-sach { grid-template-columns: 1fr; }
  .buoc li + li::before { width: 28px; margin: 0 8px; }
  .buoc__ten { display: none; }
  .buoc li.hien-tai .buoc__ten { display: inline; }
  .lien-he-noi__nut span { display: none; }
  .lien-he-noi__nut { width: 46px; height: 46px; }
  .lien-he-noi { right: 12px; }
  .tien-trinh li { font-size: 11.5px; }
  .thanh-cong { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
  .bao { padding: 0 14px; }
  .luoi-sp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sp__than { padding: 10px 11px 12px; }
  .sp__ten { font-size: 13.5px; }
  .sp__gia { font-size: 15.5px; }
  .sp__nut { height: 36px; font-size: 12.5px; }
  .khoi { margin-top: 30px; }
  .khoi__dau h2 { font-size: 19px; }
  .dm-luoi { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .dm-o { padding: 12px 8px; }
  .dm-o__anh { width: 60px; height: 60px; }
  .cam-ket { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cam-ket__o { font-size: 12.5px; padding: 10px; gap: 8px; }
  .cam-ket__icon { width: 34px; height: 34px; }
  .vi-sao__luoi { grid-template-columns: 1fr; }
  .chan__luoi { grid-template-columns: 1fr; gap: 24px; padding: 32px 14px 24px; }
  .trang-dau h1, .tieu-de-trang { font-size: 23px; }
  .ct__ten { font-size: 22px; }
  .ct__gia { font-size: 26px; }
  .thanh-tren__hang { height: 30px; font-size: 12px; }
  .hop-nho { padding: 24px 18px; }
  .trang-tinh { padding: 22px 18px; }
}

/* =====================================================================
   BIẾN THỂ PHONG CÁCH — lớp trên <body> đặt từ cài đặt theme (layout/theme.liquid):
   chu-*, dau-{sang|toi|gon}, hero-{truot|toan-man|tap-chi|hai-cot}, the-{khung|phang|noi},
   tieu-de-{trai|giua|hoa}, nut-{bo|pill|vuong}, toi (nền tối), anh-doc (ảnh 4:5).
   ===================================================================== */
:root { --nen-anh: #f3f4f6; }
h1, h2, .hero__chu h2, .hero-md__chu h1, .ct__ten, .trang-dau h1, .tieu-de-trang, .khoi__dau h2, .vi-sao__o b, .trang-tinh h1, .thanh-cong h1 { font-family: var(--font-tieu-de); }
body.chu-playfair .khoi__dau h2, body.chu-cormorant .khoi__dau h2, body.chu-lora .khoi__dau h2 { font-weight: 600; letter-spacing: 0; }
body.chu-cormorant .hero-md__chu h1, body.chu-cormorant .hero__chu h2, body.chu-cormorant .hero-tc__chu h1 { font-weight: 600; letter-spacing: -.01em; }
body.chu-playfair .hero-md__chu h1, body.chu-playfair .hero__chu h2, body.chu-playfair .hero-tc__chu h1, body.chu-lora .hero-md__chu h1 { font-weight: 600; }
body.chu-oswald .khoi__dau h2, body.chu-oswald .hero-md__chu h1, body.chu-oswald .hero__chu h2 { text-transform: uppercase; letter-spacing: .02em; font-weight: 600; }
body.chu-cormorant .khoi__dau h2 { font-size: 30px; }
body.chu-cormorant .sp__ten, body.chu-playfair .sp__ten { font-family: var(--font-tieu-de); font-size: 16px; }

/* ---------- nút ---------- */
body.nut-pill .nut, body.nut-pill .sp__nut, body.nut-pill .tim__nut, body.nut-pill .dau__gio, body.nut-pill .dm-menu__nut--gon, body.nut-pill .phan-trang__so, body.nut-pill .phan-trang__nut { border-radius: 999px; }
body.nut-vuong .nut, body.nut-vuong .sp__nut, body.nut-vuong .tim__form, body.nut-vuong .tim__nut, body.nut-vuong .dau__gio, body.nut-vuong .chip, body.nut-vuong .phan-trang__so, body.nut-vuong .phan-trang__nut, body.nut-vuong .so-luong, body.nut-vuong .o input, body.nut-vuong .o textarea, body.nut-vuong .lua-chon, body.nut-vuong .tinh-trang, body.nut-vuong .nhan, body.nut-vuong .cam-ket__icon, body.nut-vuong .dm-o__anh, body.nut-vuong .hero-md__nhan { border-radius: 2px; }
body.nut-vuong .nut { letter-spacing: .06em; text-transform: uppercase; font-size: 13px; font-weight: 700; }
body.nut-vuong .nut--lon { font-size: 13.5px; padding: 15px 28px; }

/* ---------- tiêu đề khối ---------- */
body.tieu-de-giua .khoi__dau { flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-bottom: 26px; }
body.tieu-de-giua .khoi__dau h2 { font-size: 30px; padding: 0; }
body.tieu-de-giua .khoi__dau h2::after { content: ''; display: block; width: 44px; height: 2px; background: var(--mau-nhan); margin: 12px auto 0; }
body.tieu-de-giua .khoi__icon { display: none; }
body.tieu-de-giua .khoi__xem { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
body.tieu-de-hoa .khoi__dau h2 { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--chu); }
body.tieu-de-hoa .khoi__icon { display: none; }
body.tieu-de-hoa .khoi__dau { border-bottom: 1px solid var(--vien); padding-bottom: 12px; }
body.tieu-de-hoa .khoi__xem { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- thẻ sản phẩm: phẳng ---------- */
body.the-phang .sp { border: 0; background: transparent; box-shadow: none; border-radius: 0; }
body.the-phang .sp:hover { transform: none; box-shadow: none; }
body.the-phang .sp__anh { border: 0; border-radius: var(--goc-xiu); background: var(--nen-anh); }
body.the-phang .sp__than { padding: 14px 0 0; text-align: center; align-items: center; }
body.the-phang .sp__dm { letter-spacing: .12em; font-size: 11px; }
body.the-phang .sp__ten { font-weight: 500; min-height: 0; }
body.the-phang .sp__gia { color: var(--chu); font-weight: 600; font-size: 15.5px; }
body.the-phang .sp__mua { width: 100%; }
body.the-phang .sp__nut { border: 1px solid var(--chu); color: var(--chu); background: transparent; height: 42px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: .2s; }
body.the-phang .sp:hover .sp__nut { opacity: 1; transform: none; }
body.the-phang .sp__nut:hover { background: var(--chu); color: var(--the); }
body.the-phang .nhan { border-radius: 2px; background: var(--chu); }
body.the-phang .nhan--hot { background: var(--mau-nhan); }
@media (hover: none) { body.the-phang .sp__nut { opacity: 1; transform: none; } }

/* ---------- thẻ sản phẩm: nổi ---------- */
body.the-noi .sp { border: 0; box-shadow: var(--bong-2); border-radius: 22px; }
body.the-noi .sp:hover { box-shadow: var(--bong-3); }
body.the-noi .sp__anh { padding: 12px 12px 0; border: 0; background: transparent; }
body.the-noi .sp__anh img { border-radius: 14px; }
body.the-noi .sp__nhan { top: 22px; left: 22px; }
body.the-noi .sp__het { left: 12px; right: 12px; border-radius: 0 0 14px 14px; }
body.the-noi .sp__nut { background: var(--mau-nhan); border-color: var(--mau-nhan); color: #fff; }
body.the-noi .sp__nut:hover { filter: brightness(1.07); }
body.the-noi .sp__than { padding: 14px 16px 16px; }
body.the-noi .dm-o { border: 0; box-shadow: var(--bong-2); }
body.the-noi .cam-ket__o { border: 0; box-shadow: var(--bong-2); }

/* ---------- ảnh dọc 4:5 ---------- */
body.anh-doc .sp__anh { aspect-ratio: 4/5; }
body.anh-doc .ct__anh-lon { aspect-ratio: 4/5; }
body.anh-doc .ct__anh-lon img { object-fit: cover; }
body.anh-doc .hero-md__o img { aspect-ratio: 4/5; }

/* ---------- đầu trang tối ---------- */
body.dau-toi .dau { background: #0f172a; color: #fff; }
body.dau-toi .dau.cuon { box-shadow: 0 6px 24px -14px rgba(0,0,0,.6); }
body.dau-toi .logo__chu { color: #fff; }
body.dau-toi .logo:hover .logo__chu { color: var(--mau-nhan); }
body.dau-toi .logo img { filter: brightness(0) invert(1); }
body.dau-toi .tim__form { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
body.dau-toi .tim__form:focus-within { background: rgba(255,255,255,.12); box-shadow: 0 0 0 4px rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
body.dau-toi .tim input { color: #fff; }
body.dau-toi .tim input::placeholder { color: rgba(255,255,255,.55); }
body.dau-toi .tim__icon { color: rgba(255,255,255,.6); }
body.dau-toi .tim__nut { background: var(--mau-nhan); }
body.dau-toi .dau__ho-tro { color: #fff; }
body.dau-toi .dau__ho-tro small { color: rgba(255,255,255,.6); }
body.dau-toi .dau__ho-tro-icon { background: rgba(255,255,255,.1); color: #fff; }
body.dau-toi .dau__gio { background: transparent; border-color: rgba(255,255,255,.2); color: #fff; }
body.dau-toi .dau__gio:hover { border-color: var(--mau-nhan); color: var(--mau-nhan); }
body.dau-toi .dau__gio-so { border-color: #0f172a; }
body.dau-toi .dau__menu, body.dau-toi .dau__icon { color: #fff; }
body.dau-toi .dau__nav-bao { border-color: rgba(255,255,255,.1); background: #0b1220; }
body.dau-toi .dm-menu__nut { background: var(--mau-nhan); color: #fff; border-right: 0; }
body.dau-toi .dm-menu__nut:hover, body.dau-toi .dm-menu.mo .dm-menu__nut { background: var(--mau-nhan); filter: brightness(1.08); }
body.dau-toi .nav-chinh a { color: rgba(255,255,255,.8); }
body.dau-toi .nav-chinh a:hover { background: rgba(255,255,255,.08); color: #fff; }
body.dau-toi .nav-chinh a.dang-chon { background: rgba(255,255,255,.12); color: #fff; }
body.dau-toi .nav-lien-ket { color: rgba(255,255,255,.75); }
body.dau-toi .nav-lien-ket:hover { color: #fff; }
body.dau-toi .thanh-tren { background: #000; }
body.dau-toi .dau__nav-gon .nav-chinh a { color: rgba(255,255,255,.85); }
body.dau-toi .dm-menu__nut--gon { color: #fff; }

/* ---------- đầu trang gọn (một hàng) ---------- */
body.dau-gon .dau__hang { height: 74px; gap: 28px; }
.dau__nav-gon { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.dau__nav-gon .nav-chinh { flex: 1; }
.dau__nav-gon .nav-chinh a { padding: 8px 12px; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; border-radius: 0; border-bottom: 2px solid transparent; }
.dau__nav-gon .nav-chinh a:hover, .dau__nav-gon .nav-chinh a.dang-chon { background: transparent; border-bottom-color: var(--mau-nhan); color: var(--chu); }
.dm-menu__nut--gon { height: auto; padding: 8px 12px; margin: 0; background: transparent; color: var(--chu); border: 0; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; }
.dm-menu__nut--gon:hover, .dm-menu.mo .dm-menu__nut--gon { background: transparent; color: var(--mau-nhan); }
body.dau-gon .dm-menu__bang { left: 0; top: calc(100% + 16px); border-radius: var(--goc-nho); }
.dau__icon { width: 42px; height: 42px; border-radius: 999px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--chu); }
.dau__icon:hover { background: var(--nen); }
.dau__icon .i { width: 22px; height: 22px; }
body.dau-gon .dau__gio { border: 0; padding: 8px 6px; }
body.dau-gon .dau__gio-chu { display: none; }
body.dau-gon .dau__gio-so { left: 22px; }
.dau__tim-hang { border-top: 1px solid var(--vien); padding: 12px 0; background: var(--the); }
.dau__tim-hang .tim { max-width: 720px; }
body.dau-toi .dau__tim-hang { background: #0b1220; border-color: rgba(255,255,255,.1); }
body.dau-gon .thanh-tren { font-size: 12px; letter-spacing: .04em; }

/* ---------- băng rôn: tràn màn hình ---------- */
.hero-vung--tran { margin-top: 0; }
.hero--toan-man .hero__ray { border-radius: 0; box-shadow: none; }
.hero--toan-man .hero__the { aspect-ratio: 21/9; min-height: 420px; align-items: center; justify-content: center; }
.hero--toan-man .hero__chu { text-align: center; max-width: 820px; padding: 40px 24px; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.25)); border-radius: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: none; }
.hero--toan-man .hero__chu h2 { font-size: clamp(30px, 5vw, 60px); line-height: 1.08; }
.hero--toan-man .hero__chu p { margin: 14px auto 22px; font-size: clamp(15px, 1.6vw, 19px); max-width: 640px; }
.hero--toan-man .hero__cham { bottom: 22px; }
.hero--toan-man .hero__mui { opacity: .9; }
body.hero-toan-man .cam-ket { margin-top: -28px; position: relative; z-index: 2; }

/* ---------- băng rôn: tạp chí ---------- */
.hero-tc { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; }
.hero-tc__anh { position: absolute; inset: 0; background: var(--nen-anh) center/cover no-repeat; }
.hero-tc__anh::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, transparent 100%); }
.hero-tc__chu { position: relative; color: #fff; padding: 0 20px 56px; width: 100%; }
.hero-tc__nhan { display: inline-block; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; opacity: .9; }
.hero-tc__chu h1 { font-size: clamp(36px, 7vw, 92px); line-height: .98; letter-spacing: -.02em; max-width: 900px; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.hero-tc__chu p { font-size: clamp(15px, 1.5vw, 19px); max-width: 560px; margin: 18px 0 24px; opacity: .95; }
.hero-tc__phu { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 18px; }
.hero-tc__o { position: relative; display: block; overflow: hidden; border-radius: var(--goc-xiu); }
.hero-tc__o img { width: 100%; aspect-ratio: 16/7; object-fit: cover; transition: transform .6s; }
.hero-tc__o:hover img { transform: scale(1.04); }
.hero-tc__o span { position: absolute; left: 20px; bottom: 16px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hero-tc__o b { display: block; font-size: 20px; font-family: var(--font-tieu-de); }
.hero-tc__o small { font-size: 13px; }
body.hero-tap-chi .cam-ket { margin-top: 28px; }

/* ---------- băng rôn: hai cột với banner ---------- */
.hero-md--banner .hero-md__anh img { aspect-ratio: 5/4; }

/* ---------- nền tối ---------- */
body.toi { --nen: #0b0f19; --the: #121826; --chu: #eef2f7; --chu-2: #b6c0cf; --chu-mo: #7c8798; --vien: #202a3a; --vien-dam: #2e394c; --nen-anh: #1a2233; --chinh-nhat: color-mix(in srgb, var(--mau-chinh) 22%, #121826); --nhan-nhat: color-mix(in srgb, var(--mau-nhan) 22%, #121826); --bong-1: 0 1px 2px rgba(0,0,0,.5); --bong-2: 0 14px 34px -14px rgba(0,0,0,.7); --bong-3: 0 28px 60px -22px rgba(0,0,0,.85); }
body.toi .dau { background: #0b0f19; color: #fff; }
body.toi .dau__nav-bao { background: #0b0f19; border-color: var(--vien); }
body.toi .logo__chu { color: #fff; }
body.toi .tim__form { background: var(--the); border-color: var(--vien-dam); }
body.toi .tim input { color: #fff; }
body.toi .tim input::placeholder { color: var(--chu-mo); }
body.toi .tim__goi-y { background: var(--the); border-color: var(--vien-dam); }
body.toi .tim__goi-y a:hover { background: var(--chinh-nhat); }
body.toi .tim__goi-y .goi-y__nhom { background: #0f1522; }
body.toi .dau__gio { background: transparent; color: #fff; border-color: var(--vien-dam); }
body.toi .dau__gio-so { border-color: #0b0f19; }
body.toi .dau__ho-tro { color: #fff; }
body.toi .dau__menu, body.toi .dau__icon { color: #fff; }
body.toi .dm-menu__nut { background: var(--chinh-nhat); color: #fff; border-color: var(--vien); }
body.toi .dm-menu__bang { background: var(--the); border-color: var(--vien-dam); }
body.toi .dm-menu__cha { color: var(--chu); }
body.toi .dm-menu__cha:hover { background: var(--chinh-nhat); color: #fff; }
body.toi .dm-menu__anh { background: var(--nen-anh); }
body.toi .nav-chinh a { color: var(--chu-2); }
body.toi .nav-chinh a:hover { background: var(--the); color: #fff; }
body.toi .nav-chinh a.dang-chon { background: var(--chinh-nhat); color: #fff; }
body.toi .nav-lien-ket { color: var(--chu-2); }
body.toi .dau__tim-hang { background: #0b0f19; border-color: var(--vien); }
body.toi .dm-menu__nut--gon { color: #fff; }
body.toi .dau__nav-gon .nav-chinh a:hover, body.toi .dau__nav-gon .nav-chinh a.dang-chon { color: #fff; }
body.toi .sp__anh { background: var(--nen-anh); border-color: var(--vien); }
body.toi .sp__nut { background: transparent; border-color: var(--mau-nhan); color: #fff; }
body.toi .sp__nut:hover { background: var(--mau-nhan); }
body.toi .the-phang .sp__nut, body.toi.the-phang .sp__nut { border-color: var(--chu); color: var(--chu); }
body.toi .cam-ket__o, body.toi .dm-o, body.toi .sp, body.toi .ct, body.toi .ct__mo-ta, body.toi .gio__dong, body.toi .tom-tat, body.toi .tt__khoi, body.toi .tt__phai, body.toi .don__dau, body.toi .don__hang, body.toi .qr, body.toi .tien-trinh, body.toi .don__phai, body.toi .trang-tinh, body.toi .hop-nho, body.toi .trong, body.toi .sap-xep, body.toi .vi-sao__o, body.toi .lua-chon, body.toi .dich-vu__ds label, body.toi .chip, body.toi .phan-trang__so, body.toi .phan-trang__nut, body.toi .so-luong, body.toi .gio-dong__xoa button { background: var(--the); border-color: var(--vien); color: var(--chu); }
body.toi .lua-chon:has(input:checked) { background: var(--chinh-nhat); }
body.toi .lua-chon__icon, body.toi .ct__gia-hop, body.toi .ct__chinh-sach, body.toi .dich-vu, body.toi .trong__icon, body.toi .hop-nho__icon { background: var(--nen-anh); }
body.toi .o input, body.toi .o textarea, body.toi .ma-gg input, body.toi .sap-xep select, body.toi .so-luong input { background: var(--nen-anh); border-color: var(--vien-dam); color: var(--chu); }
body.toi .ct__anh-lon { background: var(--nen-anh); border-color: var(--vien); }
body.toi .ct__anh-lon img { background: var(--nen-anh); }
body.toi .ct__thumb button { background: var(--nen-anh); border-color: var(--vien); }
body.toi .van-ban { color: var(--chu-2); }
body.toi .tb--ok { background: #052e1c; color: #86efac; border-color: #14532d; }
body.toi .tb--loi { background: #3b0a0a; color: #fca5a5; border-color: #7f1d1d; }
body.toi .tinh-trang.con { background: #052e1c; color: #86efac; }
body.toi .thanh-cong { background: linear-gradient(135deg, #052e1c, var(--the)); border-color: #14532d; }
body.toi .hero-md { background: radial-gradient(900px 400px at 0% 0%, var(--chinh-nhat), transparent 60%), var(--the); border-color: var(--vien); }
body.toi .hero-md__chu h1, body.toi .hero-md__chu p { color: var(--chu); }
body.toi .hero-md__o { background: var(--the); border-color: var(--vien); }
body.toi .hero-md__o span { color: var(--chu); }
body.toi .dm-o__anh { border-color: var(--the); background: var(--nen-anh); box-shadow: 0 0 0 1px var(--vien); }
body.toi .cam-ket__icon, body.toi .vi-sao__icon { background: var(--chinh-nhat); color: #fff; }
body.toi .tom-tat__freeship { color: var(--chu); }
body.toi .chan { background: #05080f; }
body.toi .nav-duoi { background: #0b0f19; border-color: var(--vien); }
body.toi .nav-duoi a, body.toi .nav-duoi button { color: var(--chu-2); }
body.toi .nav-duoi__so { border-color: #0b0f19; }
body.toi .thanh-mua { background: #0b0f19; border-color: var(--vien); }
body.toi .ngan-keo__hop, body.toi .gio-mini__hop, body.toi .gio-mini__chan { background: var(--the); color: var(--chu); }
body.toi .ngan-keo__dau, body.toi .gio-mini__dau, body.toi .gio-mini__chan, body.toi .gm-dong { border-color: var(--vien); }
body.toi .ngan-keo li > a:hover { background: var(--nen-anh); }
body.toi .ngan-keo__anh, body.toi .gm-dong img, body.toi .tt__sp-anh img, body.toi .gio-dong__anh img, body.toi .tim__goi-y img { background: var(--nen-anh); }
body.toi .nut-dong { background: var(--nen-anh); color: var(--chu); }
body.toi .nut--vien { background: transparent; color: #fff; border-color: var(--chu-2); }
body.toi .nut--vien:hover { background: rgba(255,255,255,.08); color: #fff; }
body.toi .nut--sang { background: var(--chinh-nhat); color: #fff; }
body.toi .toast { background: #fff; color: #0b0f19; }
body.toi .khoi__icon { background: var(--chinh-nhat); color: #fff; }
body.toi .duong-dan span { color: var(--chu-2); }
body.toi .sp__gia { color: var(--mau-nhan); }
body.toi .sp--het .sp__anh img { opacity: .6; }
body.toi .dau.cuon { box-shadow: 0 6px 24px -14px rgba(0,0,0,.9); }

@media (max-width: 900px) {
  .dau__nav-gon { display: none; }
  body.dau-gon .dau__hang { height: auto; }
  /* min-height 0: giữ min-height cùng aspect-ratio thì trình duyệt nới RỘNG tấm băng rôn (300 × 4/3 = 400px > màn 375px) và cắt mất mép phải. */
  .hero--toan-man .hero__the { min-height: 0; aspect-ratio: 4/3; }
  .hero--toan-man .hero__chu h2 { font-size: 28px; }
  .hero-tc { min-height: 420px; }
  .hero-tc__chu { padding-bottom: 32px; }
  .hero-tc__chu h1 { font-size: 34px; }
  .hero-tc__phu { grid-template-columns: 1fr; }
  body.the-phang .sp__nut { opacity: 1; transform: none; }
  .dau__tim-hang { padding: 8px 0; }
}