/* ==================================================================
   BẢN VẼ ĐIỆN THOẠI 28/10/2026 — "DishwasherHub: hành trình mua hàng"
   Anh Mừng: "Tạo lại bản mobile theo 100% như này" (thiet-ke-2810/).
   Viết bằng px ĐÚNG bản vẽ khổ 390. Lúc dựng (theme3.mjs → dvPx) mọi Npx
   thành calc(N * var(--r)); 1px/1.5px giữ nguyên. Tệp chỉ nạp ở ≤calc(767 * var(--r)).
   Màu: navy #10294A · đất nung #B4532A · nền kem #F2EFEA · chữ #15191F.
   ================================================================== */

@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/jbmono-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/jbmono-500-vietnamese.woff2') format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

@media (max-width: 767px) {

:root { --r: calc(min(100vw, 520px) / 390); /* nopx */ }

/* ---------- 0. Chung ---------- */
body { background:#F2EFEA !important; color:#15191F; font-variant-numeric:tabular-nums; }
[data-dv], [data-dv] * { font-family:Montserrat, system-ui, sans-serif; box-sizing:border-box; }
.dv-mono { font-family:'JetBrains Mono', ui-monospace, monospace !important; font-weight:500; }

/* ---------- 1. Đầu trang (bản vẽ màn 05) ---------- */
.dh4-dai, .dh4-dai-dm, .dh4-phai, .dh4-nav, .dh4-hotline { display:none !important; }
.dh4-dt { position:sticky !important; top:0; z-index:60; background:#FFFFFF !important; border-bottom:1px solid #ECE8E1 !important; box-shadow:none !important; }
.dh4-thanh { display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; gap:calc(8 * var(--r)) !important; padding:calc(10 * var(--r)) calc(12 * var(--r)) calc(10 * var(--r)) calc(16 * var(--r)) !important; margin:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; }
.dh4-logo, .dv-logo { display:flex !important; align-items:center !important; gap:calc(8 * var(--r)) !important; text-decoration:none !important; color:#15191F !important; background:none !important; padding:0 !important; box-shadow:none !important; min-width:0; }
.dh4-logo-o, .dv-logo-o { width:calc(30 * var(--r)) !important; height:calc(30 * var(--r)) !important; flex:none; border-radius:calc(9 * var(--r)) !important; background:#10294A !important; color:#FFFFFF !important; font-size:calc(13 * var(--r)) !important; line-height:1 !important; font-weight:800 !important; display:flex !important; align-items:center; justify-content:center; }
.dh4-logo-chu, .dv-logo-chu { font-size:calc(14 * var(--r)) !important; line-height:1.2 !important; font-weight:800 !important; letter-spacing:-.01em !important; color:#15191F !important; white-space:nowrap; text-transform:none !important; }
.dh4-logo-chu span, .dv-logo-chu span { color:#B4532A !important; }
.dh4-tim { display:none !important; }
.dv-dt-nut { display:flex !important; gap:calc(4 * var(--r)); flex:none; }
.dv-dt-o { width:calc(40 * var(--r)); height:calc(40 * var(--r)); display:flex; align-items:center; justify-content:center; border:0; background:transparent; color:#15191F; padding:0; border-radius:calc(12 * var(--r)); cursor:pointer; }
.dv-dt-o svg { width:calc(18 * var(--r)); height:calc(18 * var(--r)); }
.dv-dt-o[aria-expanded="true"] { background:#F4F1EC; }
body.dv-mo-tim .dh4-thanh { flex-wrap:wrap !important; }
body.dv-mo-tim .dh4-tim { display:flex !important; order:3; flex:1 0 100% !important; gap:calc(8 * var(--r)); margin:calc(2 * var(--r)) 0 0 !important; padding:0 !important; max-width:none !important; background:none !important; border:0 !important; }
body.dv-mo-tim .dh4-tim input { flex:1; min-width:0; height:calc(42 * var(--r)) !important; border:1px solid #DCD6CD !important; border-radius:calc(12 * var(--r)) !important; padding:0 calc(14 * var(--r)) !important; font:500 calc(13 * var(--r)) Montserrat, sans-serif !important; color:#15191F !important; background:#FBFAF8 !important; outline:none; }
body.dv-mo-tim .dh4-tim button { height:calc(42 * var(--r)) !important; padding:0 calc(18 * var(--r)) !important; border:0 !important; border-radius:calc(12 * var(--r)) !important; background:#10294A !important; color:#FFFFFF !important; font:700 calc(13 * var(--r)) Montserrat, sans-serif !important; text-transform:none !important; letter-spacing:0 !important; }

/* Ngăn danh mục (nút ☰) */
.dv-menu:not([hidden]) { display:block !important; background:#FFFFFF; border-top:1px solid #ECE8E1; padding:calc(6 * var(--r)) calc(16 * var(--r)) calc(16 * var(--r)); max-height:calc(100vh - calc(60 * var(--r))); overflow:auto; box-shadow:0 calc(14 * var(--r)) calc(30 * var(--r)) calc(-14 * var(--r)) rgba(20,25,31,.25); }
.dv-menu-nhan { font-size:calc(10 * var(--r)); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8A8F96; padding:calc(12 * var(--r)) 0 calc(6 * var(--r)); }
.dv-menu-dm { display:grid; grid-template-columns:1fr 1fr; gap:calc(8 * var(--r)); }
.dv-menu-dm a { display:flex; align-items:center; justify-content:space-between; gap:calc(6 * var(--r)); height:calc(44 * var(--r)); padding:0 calc(12 * var(--r)); border-radius:calc(12 * var(--r)); background:#F7F5F1; color:#15191F; text-decoration:none; font-size:calc(12 * var(--r)); font-weight:600; }
.dv-menu-dm b { font-size:calc(10 * var(--r)); font-weight:700; color:#8A8F96; }
.dv-menu-loi a { display:flex; align-items:center; justify-content:space-between; height:calc(44 * var(--r)); border-top:1px solid #F0ECE6; color:#15191F; text-decoration:none; font-size:calc(12 * var(--r)); font-weight:600; }
.dv-menu-loi a:first-child { border-top:0; }
.dv-menu-loi svg { width:calc(14 * var(--r)); height:calc(14 * var(--r)); color:#8A8F96; }
.dv-menu-goi { margin-top:calc(10 * var(--r)); display:flex; flex-direction:column; gap:calc(3 * var(--r)); padding:calc(12 * var(--r)); border-radius:calc(14 * var(--r)); background:#10294A; color:#FFFFFF; text-decoration:none; }
.dv-menu-goi span { font-size:calc(10 * var(--r)); opacity:.7; }
.dv-menu-goi b { font-size:calc(13 * var(--r)); font-weight:700; }

/* ---------- 2. Thanh đáy 5 nút (bản vẽ màn 03/04/05) ---------- */
.dh4-day { display:grid !important; grid-template-columns:repeat(5, 1fr) !important; height:auto !important; padding:calc(6 * var(--r)) calc(6 * var(--r)) calc(calc(14 * var(--r)) + env(safe-area-inset-bottom)) !important; background:#FFFFFF !important; border-top:1px solid #ECE8E1 !important; box-shadow:none !important; }
.dh4-day a { position:relative; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; gap:calc(3 * var(--r)) !important; padding:calc(4 * var(--r)) 0 !important; color:#8A8F96 !important; font-size:calc(10 * var(--r)) !important; line-height:1.3 !important; font-weight:600 !important; text-decoration:none !important; letter-spacing:0 !important; text-transform:none !important; }
.dh4-day a[aria-current] { color:#10294A !important; font-weight:600 !important; }
.dh4-day-ic { position:static !important; width:calc(21 * var(--r)) !important; height:calc(21 * var(--r)) !important; }
.dh4-day-ic svg { width:calc(21 * var(--r)) !important; height:calc(21 * var(--r)) !important; stroke-width:1.6 !important; }
.dh4-day a[aria-current] svg { stroke-width:1.6 !important; }
.dh4-day a[aria-current] .dh4-day-ic::before { display:none !important; content:none !important; }
.dh4-day-so { position:absolute !important; top:0 !important; left:50% !important; right:auto !important; margin-left:calc(5 * var(--r)); min-width:calc(15 * var(--r)) !important; height:calc(15 * var(--r)) !important; padding:0 calc(4 * var(--r)) !important; border-radius:calc(8 * var(--r)) !important; border:0 !important; background:#B4532A !important; color:#FFFFFF !important; font-size:calc(9 * var(--r)) !important; line-height:calc(15 * var(--r)) !important; font-weight:700 !important; box-sizing:border-box !important; }

/* ---------- 3. Chân trang (bản vẽ màn 05) ---------- */
.dh4-ct { background:#15191F !important; margin-top:0 !important; padding:0 !important; }
.dh4-ct-tren, .dh4-ct-duoi { display:none !important; }
.dv-ct { display:flex !important; flex-direction:column; gap:calc(6 * var(--r)); background:#15191F; color:#B9B4AA; padding:calc(16 * var(--r)) calc(16 * var(--r)) calc(14 * var(--r)); font-size:calc(10 * var(--r)); line-height:1.6; }
.dv-ct a { color:inherit; text-decoration:none; }
.dv-ct-logo { font-size:calc(13 * var(--r)); font-weight:800; color:#FFFFFF; }
.dv-ct-logo span { color:#D98A62; }
.dv-ct-link { display:flex; flex-wrap:wrap; gap:calc(14 * var(--r)); color:#E9E4DA; font-weight:600; }
.dv-ct-link a { color:#E9E4DA; padding:calc(4 * var(--r)) 0; }
.dv-ct-bct { margin-top:calc(4 * var(--r)); align-self:flex-start; }
.dv-ct-bct img { display:block; width:calc(96 * var(--r)); height:auto; }

/* ---------- 4. Trang sản phẩm (bản vẽ màn 01) ---------- */
body.dh-spm { background:#F2EFEA !important; padding-bottom:calc(calc(58 * var(--r)) + env(safe-area-inset-bottom)) !important; }
body.dh-spm .dh4-dt, body.dh-spm .dh4-dai, body.dh-spm > section[data-m],
body.dh-spm .dhm-bar, body.dh-spm .dhm-len, body.dh-spm .dh4-sp-chot { display:none !important; }
.dv-sp { display:block !important; position:relative; background:#F2EFEA; color:#15191F; }
.dv-sp-dau { position:absolute; top:calc(12 * var(--r)); left:calc(12 * var(--r)); right:calc(12 * var(--r)); z-index:2; display:flex; justify-content:space-between; align-items:center; }
.dv-logo-noi { height:calc(38 * var(--r)); padding:0 calc(12 * var(--r)) 0 calc(5 * var(--r)) !important; border-radius:calc(999 * var(--r)); background:rgba(255,255,255,.94) !important; box-shadow:0 calc(2 * var(--r)) calc(10 * var(--r)) rgba(0,0,0,.06) !important; }
.dv-logo-noi .dv-logo-o { width:calc(28 * var(--r)) !important; height:calc(28 * var(--r)) !important; }
.dv-sp-gio { position:relative; width:calc(38 * var(--r)); height:calc(38 * var(--r)); border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; box-shadow:0 calc(2 * var(--r)) calc(10 * var(--r)) rgba(0,0,0,.06); color:#15191F; }
.dv-sp-gio svg { width:calc(18 * var(--r)); height:calc(18 * var(--r)); }
.dv-sp-gio b { position:absolute; top:calc(-3 * var(--r)); right:calc(-3 * var(--r)); min-width:calc(18 * var(--r)); height:calc(18 * var(--r)); border-radius:calc(9 * var(--r)); background:#B4532A; color:#FFFFFF; font-size:calc(10 * var(--r)); font-weight:700; display:flex; align-items:center; justify-content:center; border:calc(2 * var(--r)) solid #FFFFFF; padding:0 calc(3 * var(--r)); }
.dv-sp-gio b[hidden] { display:none; }

.dv-sp-anh { position:relative; height:calc(300 * var(--r)); background:#FFFFFF; }
.dv-sp-ray { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.dv-sp-ray::-webkit-scrollbar { display:none; }
.dv-sp-o { flex:0 0 100%; scroll-snap-align:center; display:flex; align-items:center; justify-content:center; }
.dv-sp-o img { width:calc(250 * var(--r)); height:calc(250 * var(--r)); object-fit:contain; margin-top:calc(24 * var(--r)); }
.dv-sp-dem { position:absolute; bottom:calc(12 * var(--r)); right:calc(14 * var(--r)); font:500 calc(11 * var(--r)) 'JetBrains Mono', ui-monospace, monospace !important; color:#5D636C; background:#F4F1EC; padding:calc(3 * var(--r)) calc(8 * var(--r)); border-radius:calc(999 * var(--r)); }
.dv-sp-dem span { font:inherit !important; }

.dv-sp-tt { background:#FFFFFF; padding:calc(14 * var(--r)) calc(16 * var(--r)) calc(14 * var(--r)); display:flex; flex-direction:column; gap:calc(8 * var(--r)); border-top:1px solid #F0ECE6; }
.dv-sp-meta { display:flex; align-items:center; gap:calc(8 * var(--r)); font-size:calc(11 * var(--r)); color:#8A8F96; }
.dv-sp-nhan { font-size:calc(10 * var(--r)); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#10294A; background:#EEF1F6; padding:calc(3 * var(--r)) calc(7 * var(--r)); border-radius:calc(5 * var(--r)); }
.dv-cham { width:calc(3 * var(--r)); height:calc(3 * var(--r)); border-radius:50%; background:#C9C3B9; flex:none; }
.dv-sp-ten { font-size:calc(18 * var(--r)); font-weight:700; line-height:1.3; color:#15191F; margin:0; }
.dv-sp-gia { display:flex; align-items:baseline; gap:calc(8 * var(--r)); flex-wrap:wrap; }
.dv-sp-gia b { font-size:calc(24 * var(--r)); font-weight:800; letter-spacing:-.02em; color:#10294A; }
.dv-sp-gia s { font-size:calc(13 * var(--r)); color:#8A8F96; }
.dv-sp-giam { font-size:calc(11 * var(--r)); font-weight:700; color:#B4532A; background:#F7EDE7; padding:calc(2 * var(--r)) calc(7 * var(--r)); border-radius:calc(999 * var(--r)); }
.dv-sp-vat { font-size:calc(11 * var(--r)); color:#8A8F96; margin-left:auto; }
.dv-sp-nguon { margin-top:calc(4 * var(--r)); font-size:calc(11 * var(--r)); font-weight:600; color:#2E6A4E; }
.dv-sp-han { margin-top:calc(4 * var(--r)); font-size:calc(11 * var(--r)); font-weight:600; color:#B4532A; } /* 01/11 giảm giá theo đợt */
.dv-sp-loi { display:grid; grid-template-columns:1fr 1fr; gap:calc(6 * var(--r)) calc(10 * var(--r)); padding-top:calc(6 * var(--r)); border-top:1px solid #F0ECE6; margin-top:calc(2 * var(--r)); }
.dv-sp-loi div { display:flex; align-items:center; gap:calc(7 * var(--r)); font-size:calc(11 * var(--r)); font-weight:500; color:#3A4049; white-space:nowrap; }
.dv-sp-loi svg { width:calc(15 * var(--r)); height:calc(15 * var(--r)); flex:none; color:#10294A; }

.dv-sp-tab { margin-top:calc(6 * var(--r)); background:#FFFFFF; padding:0 calc(16 * var(--r)) calc(14 * var(--r)); }
.dv-sp-tab-dau { display:flex; gap:calc(18 * var(--r)); border-bottom:1px solid #F0ECE6; }
.dv-sp-tab-dau button { cursor:pointer; padding:calc(13 * var(--r)) 0 calc(11 * var(--r)); font-size:calc(12 * var(--r)); font-weight:500; color:#8A8F96; border:0; border-bottom:calc(2 * var(--r)) solid transparent; margin-bottom:-1px; background:none; border-radius:0; text-transform:none; letter-spacing:0; }
.dv-sp-tab-dau button[aria-selected="true"] { font-weight:700; color:#10294A; border-bottom-color:#10294A; }
.dv-sp-mota { padding-top:calc(12 * var(--r)); font-size:calc(13 * var(--r)); line-height:1.65; color:#3A4049; }
.dv-sp-mota p, .dv-sp-mota li { font-size:calc(13 * var(--r)); line-height:1.65; color:#3A4049; margin:0 0 calc(8 * var(--r)); }
.dv-sp-mota h2, .dv-sp-mota h3 { font-size:calc(13 * var(--r)); font-weight:700; margin:calc(10 * var(--r)) 0 calc(4 * var(--r)); text-transform:none; color:#15191F; }
.dv-sp-mota > :last-child { margin-bottom:0; }
.dv-sp-buoc { padding-top:calc(10 * var(--r)); display:flex; flex-direction:column; gap:calc(8 * var(--r)); }
.dv-sp-buoc[hidden], .dv-sp-ts[hidden], .dv-sp-mota[hidden] { display:none; }
.dv-sp-buoc div { display:grid; grid-template-columns:calc(20 * var(--r)) 1fr; gap:calc(8 * var(--r)); font-size:calc(12 * var(--r)); line-height:1.55; color:#3A4049; }
.dv-sp-buoc div span:first-child { font-weight:700; color:#10294A; }
.dv-sp-ts { padding-top:calc(6 * var(--r)); display:grid; grid-template-columns:1fr 1fr; gap:0 calc(12 * var(--r)); }
.dv-sp-ts div { padding:calc(8 * var(--r)) 0; border-bottom:1px solid #F0ECE6; display:flex; flex-direction:column; gap:calc(2 * var(--r)); min-width:0; }
.dv-sp-ts div span:first-child { font-size:calc(10 * var(--r)); color:#8A8F96; }
.dv-sp-ts div.dv-ts-rong { grid-column:1 / -1; } /* 01/11 nhãn phụ: tên nhà SX, nhập khẩu, thành phần dài → cả hàng */
.dv-sp-ts div.dv-ts-rong span:last-child { white-space:pre-line; line-height:1.5; }
.dv-sp-ts div span:last-child { font-size:calc(12 * var(--r)); font-weight:600; overflow-wrap:anywhere; }

.dv-sp-kem { margin-top:calc(6 * var(--r)); background:#FFFFFF; padding:calc(12 * var(--r)) 0 calc(14 * var(--r)) calc(16 * var(--r)); display:flex; flex-direction:column; gap:calc(10 * var(--r)); }
.dv-sp-kem-ten { font-size:calc(11 * var(--r)); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8A8F96; }
.dv-sp-kem-ray { display:flex; gap:calc(8 * var(--r)); overflow-x:auto; padding-right:calc(16 * var(--r)); scrollbar-width:none; scroll-snap-type:x mandatory; }
.dv-sp-kem-ray::-webkit-scrollbar { display:none; }
.dv-sp-kem-o { flex:none; width:calc(250 * var(--r)); border:1px solid #ECE8E1; border-radius:calc(14 * var(--r)); padding:calc(8 * var(--r)); display:flex; align-items:center; gap:calc(10 * var(--r)); scroll-snap-align:start; }
.dv-sp-kem-anh { flex:none; width:calc(52 * var(--r)); height:calc(52 * var(--r)); display:block; }
.dv-sp-kem-anh img { width:calc(52 * var(--r)); height:calc(52 * var(--r)); object-fit:contain; display:block; }
.dv-sp-kem-chu { flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(4 * var(--r)); text-decoration:none; color:#15191F; }
.dv-sp-kem-chu span { font-size:calc(11 * var(--r)); font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dv-sp-kem-chu b { font-size:calc(12 * var(--r)); font-weight:700; color:#10294A; }
.dv-sp-kem-them { width:calc(30 * var(--r)); height:calc(30 * var(--r)); flex:none; border-radius:50%; background:#10294A; color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-size:calc(16 * var(--r)); text-decoration:none; line-height:1; }
.dv-sp-bar { position:fixed; left:0; right:0; bottom:0; z-index:70; background:#FFFFFF; border-top:1px solid #ECE8E1; padding:0 0 env(safe-area-inset-bottom); display:grid; grid-template-columns:22% 24% 1fr; height:calc(calc(58 * var(--r)) + env(safe-area-inset-bottom)); box-shadow:0 calc(-4 * var(--r)) calc(14 * var(--r)) rgba(20,25,31,.05); }
.dv-sp-bar-o { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(3 * var(--r)); color:#15191F; text-decoration:none; background:#FFFFFF; height:calc(58 * var(--r)); }
.dv-sp-bar-zalo { border-right:1px solid #ECE8E1; }
.dv-sp-bar-o span { font-size:calc(11 * var(--r)); font-weight:500; line-height:1.2; color:#15191F; white-space:nowrap; }
.dv-sp-bar-gio svg { width:calc(26 * var(--r)); height:calc(26 * var(--r)); color:#B4532A; }
.dv-sp-bar-zalo .dh-zalo-logo { width:calc(26 * var(--r)) !important; height:calc(26 * var(--r)) !important; border-radius:calc(7 * var(--r)); display:block; }
.dv-sp-bar-zalo .dh-zalo-anh { display:none !important; }
.dv-sp-bar-mua { height:calc(58 * var(--r)); background:#B4532A; color:#FFFFFF; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(2 * var(--r)); text-decoration:none; }
.dv-sp-bar-mua b { font-size:calc(13 * var(--r)); font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1.25; }
.dv-sp-bar-mua span { font-size:calc(13 * var(--r)); font-weight:700; line-height:1.25; }


}

/* Biểu tượng nét dùng làm mặt nạ (mask) cho các nút giả. */
@media (max-width: 767px) {
:root {
  --dvi-lui: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
  --dvi-khoa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --dvi-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21zM12 7a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5'/%3E%3C/svg%3E");
  --dvi-phai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --dvi-xuong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --dvi-len: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
  --dvi-the: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8zM7.5 7a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3'/%3E%3C/svg%3E");
  --dvi-ghi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E");
  --dvi-hd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6zM9 13h7M9 17h5'/%3E%3C/svg%3E");
  --dvi-xe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 10h4l3 3v3h-7M6 16a2 2 0 1 0 0 4a2 2 0 1 0 0-4M17 16a2 2 0 1 0 0 4a2 2 0 1 0 0-4'/%3E%3C/svg%3E");
  --dvi-nh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6M5 10v8M9 10v8M15 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E");
  --dvi-tien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h20v12H2zM12 9a3 3 0 1 0 0 6a3 3 0 1 0 0-6'/%3E%3C/svg%3E");
  --dvi-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --dvi-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
}

/* ==================================================================
   5. GIỎ + THANH TOÁN MỘT TRANG (bản vẽ màn 02, 02a, 02b, 02c — "Thanh Toan.dc.html")
   Chỉ đổi giao diện; logic Woo + JS cũ (thanh-toan-mot-trang.*) giữ nguyên.
   ================================================================== */
@media (max-width: 767px) {

/* Sửa thanh đáy chung: ô icon cũ có viền calc(2 * var(--r)). */
.dh4-day-ic { border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; }

body.dh-tt-gon { background:#F2EFEA !important; padding-bottom:calc(calc(76 * var(--r)) + env(safe-area-inset-bottom)) !important; }
body.dh-tt-gon .dh-ruot, body.dh-tt-gon .woocommerce { background:#F2EFEA !important; padding:0 !important; margin:0 !important; max-width:none !important; }
body.dh-tt-gon form.checkout, body.dh-tt-gon #order_review { background:transparent !important; padding:0 !important; margin:0 !important; border:0 !important; box-shadow:none !important; }

/* Thanh đầu: ‹ · Thanh toán + khoá */
body.dh-tt-gon .dh-tt-thanh-dau { height:calc(52 * var(--r)) !important; display:grid !important; grid-template-columns:calc(40 * var(--r)) 1fr calc(40 * var(--r)) !important; align-items:center !important; padding:0 calc(12 * var(--r)) !important; background:#FFFFFF !important; border-bottom:1px solid #ECE8E1 !important; box-shadow:none !important; gap:0 !important; position:sticky; top:0; z-index:40; }
body.dh-tt-gon .dh-tt-logo, body.dh-tt-gon .dh-tt-tro-giup { display:none !important; }
body.dh-tt-gon .dh-tt-lui { width:calc(40 * var(--r)) !important; height:calc(40 * var(--r)) !important; border:0 !important; border-radius:calc(12 * var(--r)) !important; background:none !important; display:flex !important; align-items:center; justify-content:center; font-size:0 !important; color:#15191F !important; padding:0 !important; box-shadow:none !important; }
body.dh-tt-gon .dh-tt-lui::before { content:""; width:calc(18 * var(--r)); height:calc(18 * var(--r)); background:currentColor; -webkit-mask:var(--dvi-lui) center / contain no-repeat; mask:var(--dvi-lui) center / contain no-repeat; }
body.dh-tt-gon .dh-tt-thanh-ten { grid-column:2; display:flex !important; align-items:center; justify-content:center; gap:calc(6 * var(--r)); font-size:calc(14 * var(--r)) !important; font-weight:700 !important; color:#15191F !important; text-transform:none !important; letter-spacing:0 !important; }
body.dh-tt-gon .dh-tt-thanh-ten::after { content:""; width:calc(12 * var(--r)); height:calc(12 * var(--r)); background:#2E6A4E; -webkit-mask:var(--dvi-khoa) center / contain no-repeat; mask:var(--dvi-khoa) center / contain no-repeat; }

/* Thẻ nhận hàng + sọc phong bì */
body.dh-tt-gon .dh-tt-the { position:relative; display:flex !important; align-items:center !important; gap:calc(12 * var(--r)) !important; width:100% !important; margin:0 0 calc(3 * var(--r)) !important; padding:calc(12 * var(--r)) calc(16 * var(--r)) !important; background:#FFFFFF !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; text-align:left; }
body.dh-tt-gon .dh-tt-the::after { content:"" !important; display:block !important; position:absolute !important; left:0 !important; right:0 !important; bottom:calc(-3 * var(--r)) !important; top:auto !important; height:calc(3 * var(--r)) !important; width:auto !important; background:repeating-linear-gradient(90deg, #B4532A 0 calc(14 * var(--r)), transparent calc(14 * var(--r)) calc(20 * var(--r)), #10294A calc(20 * var(--r)) calc(34 * var(--r)), transparent calc(34 * var(--r)) calc(40 * var(--r))) !important; opacity:.85; border:0 !important; }
body.dh-tt-gon .dh-tt-the-icon { width:calc(34 * var(--r)) !important; height:calc(34 * var(--r)) !important; flex:none; border-radius:50% !important; background:#F7EDE7 !important; color:#B4532A !important; display:flex !important; align-items:center; justify-content:center; font-size:0 !important; }
body.dh-tt-gon .dh-tt-the-icon svg { width:calc(17 * var(--r)) !important; height:calc(17 * var(--r)) !important; display:block; color:#B4532A !important; }
body.dh-tt-gon .dh-tt-the-chu { flex:1; min-width:0; display:flex !important; flex-direction:column; gap:calc(2 * var(--r)) !important; }
body.dh-tt-gon .dh-tt-the-1, body.dh-tt-gon .dh-tt-the-1 * { font-size:calc(13 * var(--r)) !important; font-weight:700 !important; color:#15191F !important; line-height:1.35 !important; }
body.dh-tt-gon .dh-tt-the-1 .dh-tt-the-sdt { font-weight:500 !important; color:#8A8F96 !important; margin-left:calc(6 * var(--r)); }
body.dh-tt-gon .dh-tt-the-2 { font-size:calc(11 * var(--r)) !important; font-weight:400 !important; color:#5D636C !important; line-height:1.45 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.dh-tt-gon .dh-tt-the-mui { font-size:0 !important; width:calc(16 * var(--r)) !important; height:calc(16 * var(--r)) !important; flex:none; background:#B4532A !important; -webkit-mask:var(--dvi-phai) center / contain no-repeat; mask:var(--dvi-phai) center / contain no-repeat; }

/* Món trong đơn */
body.dh-tt-gon #order_review table.dh-bang-don { display:block !important; width:auto !important; margin:calc(6 * var(--r)) 0 0 !important; padding:calc(2 * var(--r)) calc(16 * var(--r)) !important; background:#FFFFFF !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
body.dh-tt-gon #order_review table.dh-bang-don thead, body.dh-tt-gon #order_review table.dh-bang-don tfoot { display:none !important; }
body.dh-tt-gon #order_review table.dh-bang-don tbody { display:block !important; padding:0 !important; }
body.dh-tt-gon #order_review tr.cart_item { display:grid !important; grid-template-columns:calc(56 * var(--r)) auto auto 1fr auto !important; grid-template-rows:auto auto !important; column-gap:calc(6 * var(--r)) !important; row-gap:calc(4 * var(--r)) !important; align-items:center !important; padding:calc(10 * var(--r)) 0 !important; margin:0 !important; border:0 !important; border-top:1px solid #F0ECE6 !important; background:none !important; }
body.dh-tt-gon #order_review tr.cart_item:first-child { border-top:0 !important; }
body.dh-tt-gon #order_review tr.cart_item td { display:block !important; padding:0 !important; margin:0 !important; border:0 !important; width:auto !important; background:none !important; }
body.dh-tt-gon #order_review tr.cart_item td.product-name { display:contents !important; }
body.dh-tt-gon #order_review span.dh-anh-don { grid-row:1 / 3 !important; grid-column:1 !important; width:calc(56 * var(--r)) !important; height:calc(56 * var(--r)) !important; margin:0 calc(6 * var(--r)) 0 0 !important; border:1px solid #ECE8E1 !important; border-radius:calc(10 * var(--r)) !important; display:flex !important; align-items:center; justify-content:center; background:#FFFFFF !important; overflow:hidden; position:static !important; }
body.dh-tt-gon #order_review img.dh-anh-don { width:calc(48 * var(--r)) !important; height:calc(48 * var(--r)) !important; object-fit:contain !important; border:0 !important; border-radius:0 !important; margin:0 !important; }
body.dh-tt-gon #order_review .dh-tt-sp-ten { grid-row:1 !important; grid-column:2 / 6 !important; align-self:end; font-size:calc(12 * var(--r)) !important; font-weight:600 !important; line-height:1.35 !important; color:#15191F !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:block !important; -webkit-line-clamp:unset !important; }
body.dh-tt-gon #order_review td.product-total { grid-row:2 !important; grid-column:2 !important; display:flex !important; align-items:baseline !important; gap:calc(6 * var(--r)) !important; text-align:left !important; }
body.dh-tt-gon #order_review td.product-total > .amount, body.dh-tt-gon #order_review td.product-total > .woocommerce-Price-amount, body.dh-tt-gon #order_review td.product-total > .amount * { font-size:calc(13 * var(--r)) !important; font-weight:700 !important; color:#15191F !important; }
body.dh-tt-gon #order_review td.product-total s, body.dh-tt-gon #order_review td.product-total s * { font-size:calc(11 * var(--r)) !important; font-weight:400 !important; color:#8A8F96 !important; }
body.dh-tt-gon #order_review .dh-tt-sp-quy { grid-row:2 !important; grid-column:3 !important; font-size:calc(11 * var(--r)) !important; color:#8A8F96 !important; font-weight:400 !important; align-self:baseline; display:block !important; margin:0 !important; }
body.dh-tt-gon #order_review td.product-qty { grid-row:2 !important; grid-column:5 !important; }
body.dh-tt-gon #order_review .dh-sl-mob, body.dh-tt-gon #order_review .dh-tt-xoa { display:none !important; }
body.dh-tt-gon #order_review .dh-tt-sl { display:flex !important; align-items:center !important; height:calc(28 * var(--r)) !important; border:1px solid #E3DED6 !important; border-radius:calc(999 * var(--r)) !important; background:#FFFFFF !important; padding:0 !important; gap:0 !important; overflow:hidden; }
body.dh-tt-gon #order_review .dh-tt-sl button { width:calc(28 * var(--r)) !important; height:calc(28 * var(--r)) !important; min-width:0 !important; padding:0 !important; border:0 !important; background:none !important; font-size:calc(15 * var(--r)) !important; line-height:1 !important; color:#5D636C !important; box-shadow:none !important; border-radius:0 !important; }
body.dh-tt-gon #order_review .dh-tt-sl .dh-tt-cong { color:#10294A !important; }
body.dh-tt-gon #order_review .dh-tt-sl .product-quantity { min-width:calc(16 * var(--r)) !important; text-align:center; font-size:calc(12 * var(--r)) !important; font-weight:700 !important; color:#15191F !important; background:none !important; padding:0 !important; }

/* Mã giảm giá · Ghi chú cho shop · Hoá đơn công ty */
body.dh-tt-gon .dh-tt-3dong { display:grid !important; grid-template-columns:1fr 1fr !important; gap:0 calc(8 * var(--r)) !important; margin:calc(6 * var(--r)) 0 0 !important; padding:0 calc(16 * var(--r)) calc(12 * var(--r)) !important; background:#FFFFFF !important; border:0 !important; }
body.dh-tt-gon .dh-tt-3dong > a { text-decoration:none !important; color:#15191F !important; border:0 !important; margin:0 !important; }
body.dh-tt-gon .dh-tt-3dong > a::after { display:none !important; content:none !important; }
body.dh-tt-gon a.dh-tt-3d-ma { grid-column:1 / -1 !important; display:flex !important; align-items:center !important; gap:calc(10 * var(--r)) !important; height:calc(46 * var(--r)) !important; padding:0 !important; }
body.dh-tt-gon a.dh-tt-3d-ma::before { content:"" !important; display:block !important; width:calc(17 * var(--r)); height:calc(17 * var(--r)); flex:none; background:#10294A !important; -webkit-mask:var(--dvi-the) center / contain no-repeat; mask:var(--dvi-the) center / contain no-repeat; position:static !important; border:0 !important; }
body.dh-tt-gon a.dh-tt-3d-ma > span { flex:1; font-size:calc(13 * var(--r)) !important; font-weight:500 !important; color:#15191F !important; }
body.dh-tt-gon a.dh-tt-3d-ma > em { font-style:normal !important; font-size:calc(12 * var(--r)) !important; color:#8A8F96 !important; font-weight:400 !important; }
body.dh-tt-gon a.dh-tt-3d-ma > i.dv-mui { display:block; width:calc(14 * var(--r)); height:calc(14 * var(--r)); flex:none; background:#8A8F96; -webkit-mask:var(--dvi-phai) center / contain no-repeat; mask:var(--dvi-phai) center / contain no-repeat; }
body.dh-tt-gon a.dh-tt-3d-ma.dv-mo > i.dv-mui { -webkit-mask-image:var(--dvi-xuong); mask-image:var(--dvi-xuong); }
body.dh-tt-gon .dh-tt-3dong .dh-tt-ma-o { grid-column:1 / -1 !important; display:flex !important; gap:calc(8 * var(--r)) !important; padding:0 0 calc(12 * var(--r)) !important; margin:0 !important; background:none !important; border:0 !important; }
body.dh-tt-gon .dh-tt-3dong .dh-tt-ma-o[hidden] { display:none !important; }
body.dh-tt-gon .dh-tt-ma-nhap { flex:1; min-width:0; height:calc(42 * var(--r)) !important; border:1px solid #DCD6CD !important; border-radius:calc(12 * var(--r)) !important; padding:0 calc(14 * var(--r)) !important; font:500 calc(13 * var(--r)) Montserrat, sans-serif !important; letter-spacing:.06em !important; text-transform:uppercase; color:#15191F !important; background:#FBFAF8 !important; box-shadow:none !important; }
body.dh-tt-gon .dh-tt-ma-ap { height:calc(42 * var(--r)) !important; padding:0 calc(18 * var(--r)) !important; border:0 !important; border-radius:calc(12 * var(--r)) !important; background:#10294A !important; color:#FFFFFF !important; font:700 calc(13 * var(--r)) Montserrat, sans-serif !important; text-transform:none !important; letter-spacing:0 !important; }
body.dh-tt-gon .dh-tt-3dong .dh-tt-ma-bao { grid-column:1 / -1 !important; font-size:calc(11 * var(--r)) !important; margin:calc(-6 * var(--r)) 0 calc(10 * var(--r)) !important; }
body.dh-tt-gon a.dh-tt-3d-yc, body.dh-tt-gon a.dh-tt-3d-hd { display:flex !important; align-items:center !important; gap:calc(8 * var(--r)) !important; height:calc(36 * var(--r)) !important; padding:0 calc(12 * var(--r)) !important; border-radius:calc(10 * var(--r)) !important; background:#F7F5F1 !important; margin-top:calc(2 * var(--r)) !important; }
body.dh-tt-gon a.dh-tt-3d-yc::before, body.dh-tt-gon a.dh-tt-3d-hd::before { content:"" !important; display:block !important; width:calc(15 * var(--r)); height:calc(15 * var(--r)); flex:none; background:#10294A !important; -webkit-mask:var(--dvi-ghi) center / contain no-repeat; mask:var(--dvi-ghi) center / contain no-repeat; position:static !important; border:0 !important; }
body.dh-tt-gon a.dh-tt-3d-hd::before { -webkit-mask-image:var(--dvi-hd); mask-image:var(--dvi-hd); }
body.dh-tt-gon a.dh-tt-3d-yc > span, body.dh-tt-gon a.dh-tt-3d-hd > span { font-size:calc(12 * var(--r)) !important; font-weight:500 !important; color:#15191F !important; white-space:nowrap; }
body.dh-tt-gon a.dh-tt-3d-yc > em, body.dh-tt-gon a.dh-tt-3d-hd > em { display:none !important; }
body.dh-tt-gon .dh-tt-khoi.dh-tt-ma { display:none !important; }

/* Vận chuyển + thanh toán: một khối trắng */
body.dh-tt-gon .dh-tt-ngoai-vc { margin:calc(6 * var(--r)) 0 0 !important; padding:calc(12 * var(--r)) calc(16 * var(--r)) 0 !important; background:#FFFFFF !important; border:0 !important; }
body.dh-tt-gon .dh-tt-ngoai-vc .dh-tt-mkhoi { padding:0 !important; margin:0 !important; border:0 !important; background:none !important; }
body.dh-tt-gon .dh-tt-ngoai-vc .dh-tt-mdau, body.dh-tt-gon .dh-tt-msotien { display:none !important; }
body.dh-tt-gon .dh-tt-vc-the { display:flex !important; align-items:center !important; gap:calc(10 * var(--r)) !important; height:calc(44 * var(--r)) !important; padding:0 calc(12 * var(--r)) !important; border:1px solid #CFE0D5 !important; background:#F3F8F4 !important; border-radius:calc(12 * var(--r)) !important; cursor:pointer; margin:0 !important; }
body.dh-tt-gon .dh-tt-vc-the::before { content:""; width:calc(17 * var(--r)); height:calc(17 * var(--r)); flex:none; background:#2E6A4E; -webkit-mask:var(--dvi-xe) center / contain no-repeat; mask:var(--dvi-xe) center / contain no-repeat; }
body.dh-tt-gon .dh-tt-vc-ten { flex:1; font-size:calc(12 * var(--r)) !important; font-weight:600 !important; color:#15191F !important; }
body.dh-tt-gon .dh-tt-vc-gia, body.dh-tt-gon .dh-tt-vc-gia * { font-size:calc(12 * var(--r)) !important; font-weight:700 !important; color:#2E6A4E !important; }
body.dh-tt-gon .dh-tt-vc-mui { width:calc(14 * var(--r)) !important; height:calc(14 * var(--r)) !important; flex:none; background:#2E6A4E !important; border:0 !important; transform:none !important; -webkit-mask:var(--dvi-phai) center / contain no-repeat; mask:var(--dvi-phai) center / contain no-repeat; }
body.dh-tt-gon #payment { background:#FFFFFF !important; margin:0 !important; padding:calc(10 * var(--r)) calc(16 * var(--r)) calc(12 * var(--r)) !important; border:0 !important; border-radius:0 !important; }
body.dh-tt-gon #payment > .dh-tt-mdau, body.dh-tt-gon #payment > h3 { display:none !important; }
body.dh-tt-gon #payment ul.wc_payment_methods { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:calc(8 * var(--r)) !important; margin:0 !important; padding:calc(8 * var(--r)) 0 0 !important; border:0 !important; list-style:none !important; background:none !important; }
body.dh-tt-gon #payment ul.wc_payment_methods > li { position:relative !important; display:flex !important; align-items:center !important; height:calc(52 * var(--r)) !important; margin:0 !important; padding:0 calc(10 * var(--r)) !important; border:1px solid #ECE8E1 !important; border-radius:calc(12 * var(--r)) !important; background:#FFFFFF !important; list-style:none !important; box-sizing:border-box !important; }
body.dh-tt-gon #payment ul.wc_payment_methods > li:has(input:checked) { border:1.5px solid #10294A !important; background:#F4F6FA !important; }
body.dh-tt-gon #payment ul.wc_payment_methods > li > input { position:absolute !important; opacity:0 !important; width:1px !important; height:1px !important; margin:0 !important; pointer-events:none; }
body.dh-tt-gon #payment ul.wc_payment_methods > li > label { flex:1 !important; display:flex !important; align-items:center !important; gap:calc(8 * var(--r)) !important; margin:0 !important; padding:0 !important; font-size:calc(12 * var(--r)) !important; font-weight:600 !important; line-height:1.3 !important; color:#15191F !important; cursor:pointer; min-height:0 !important; }
body.dh-tt-gon #payment ul.wc_payment_methods > li > label::before { content:"" !important; display:block !important; width:calc(18 * var(--r)) !important; height:calc(18 * var(--r)) !important; flex:none !important; background:#10294A !important; background-image:none !important; -webkit-mask:var(--dvi-nh) center / contain no-repeat; mask:var(--dvi-nh) center / contain no-repeat; margin:0 !important; }
body.dh-tt-gon #payment li.payment_method_cod > label::before { -webkit-mask-image:var(--dvi-tien) !important; mask-image:var(--dvi-tien) !important; }
body.dh-tt-gon #payment ul.wc_payment_methods > li > label::after { content:"" !important; display:block !important; width:calc(16 * var(--r)) !important; height:calc(16 * var(--r)) !important; flex:none; margin-left:auto !important; border-radius:50% !important; border:1.5px solid #C9C3B9 !important; box-sizing:border-box !important; background:#FFFFFF !important; }
body.dh-tt-gon #payment ul.wc_payment_methods > li:has(input:checked) > label::after { border:calc(5 * var(--r)) solid #10294A !important; }
body.dh-tt-gon #payment .dh-tt-khuyen { position:absolute !important; top:calc(-8 * var(--r)) !important; left:calc(10 * var(--r)) !important; margin:0 !important; font-size:calc(9 * var(--r)) !important; font-weight:700 !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:#FFFFFF !important; background:#B4532A !important; padding:calc(2 * var(--r)) calc(6 * var(--r)) !important; border-radius:calc(999 * var(--r)) !important; border:0 !important; line-height:1.3 !important; }
body.dh-tt-gon #payment .payment_box { display:none !important; }

/* Chi tiết thanh toán (gập) + ô đồng ý */
body.dh-tt-gon #payment .form-row.place-order { margin:0 !important; padding:0 !important; background:none !important; border:0 !important; }
body.dh-tt-gon .dh-tt-dong-y { margin:calc(6 * var(--r)) calc(-16 * var(--r)) 0 !important; padding:calc(12 * var(--r)) calc(16 * var(--r)) !important; background:#FFFFFF !important; display:flex !important; flex-direction:column !important; gap:calc(8 * var(--r)) !important; border:0 !important; }
body.dh-tt-gon .dh-tt-ngoai-ct, body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-mkhoi { margin:0 !important; padding:0 !important; background:none !important; border:0 !important; display:flex !important; flex-direction:column !important; gap:calc(6 * var(--r)) !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-mdau { display:flex !important; justify-content:space-between !important; align-items:center !important; margin:0 !important; padding:0 !important; border:0 !important; order:0; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-mdau > span { font-size:calc(12 * var(--r)) !important; font-weight:400 !important; color:#5D636C !important; text-transform:none !important; }
.dv-ct-nut { display:flex; align-items:center; gap:calc(4 * var(--r)); border:0; background:none; padding:0; font:600 calc(12 * var(--r)) Montserrat, sans-serif; color:#10294A; cursor:pointer; }
.dv-ct-nut i { display:block; width:calc(12 * var(--r)); height:calc(12 * var(--r)); background:currentColor; -webkit-mask:var(--dvi-xuong) center / contain no-repeat; mask:var(--dvi-xuong) center / contain no-repeat; }
.dv-mo .dv-ct-nut i { -webkit-mask-image:var(--dvi-len); mask-image:var(--dvi-len); }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-hang { display:none !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-mkhoi.dv-mo .dh-tt-ct-hang { display:flex !important; justify-content:space-between !important; font-size:calc(12 * var(--r)) !important; margin:0 !important; padding:0 !important; border:0 !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-mkhoi.dv-mo .dh-tt-ct-hang.dv-r5 { display:none !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-hang > span:first-child { color:#8A8F96 !important; font-size:calc(12 * var(--r)) !important; font-weight:400 !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-hang > :last-child, body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-hang > :last-child * { color:#15191F !important; font-size:calc(12 * var(--r)) !important; font-weight:400 !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dv-r1 { order:1; } body.dh-tt-gon .dh-tt-ngoai-ct .dv-r2 { order:2; } body.dh-tt-gon .dh-tt-ngoai-ct .dv-r3 { order:3; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-mkhoi.dv-mo .dv-r4 { order:4; padding-bottom:calc(6 * var(--r)) !important; border-bottom:1px solid #F0ECE6 !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dv-r2 > :last-child, body.dh-tt-gon .dh-tt-ngoai-ct .dv-r2 > :last-child * { color:#B4532A !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dv-r4 > :last-child, body.dh-tt-gon .dh-tt-ngoai-ct .dv-r4 > :last-child * { color:#2E6A4E !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-thue, body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-ban, body.dh-tt-gon .dh-tt-tietkiem { display:none !important; }
body.dh-tt-gon label.dh-tt-o-dong-y { display:flex !important; gap:calc(10 * var(--r)) !important; align-items:center !important; margin:0 !important; padding:0 !important; background:none !important; border:0 !important; border-radius:0 !important; cursor:pointer; }
body.dh-tt-gon label.dh-tt-o-dong-y input { -webkit-appearance:none; appearance:none; width:calc(18 * var(--r)) !important; height:calc(18 * var(--r)) !important; flex:none; margin:0 !important; border-radius:calc(5 * var(--r)) !important; border:1.5px solid #C9C3B9 !important; background:#FFFFFF !important; box-sizing:border-box; position:relative; }
body.dh-tt-gon label.dh-tt-o-dong-y input:checked { border:0 !important; background:#10294A !important; }
body.dh-tt-gon label.dh-tt-o-dong-y input:checked::after { content:""; position:absolute; inset:calc(3 * var(--r)); background:#FFFFFF; -webkit-mask:var(--dvi-tick) center / contain no-repeat; mask:var(--dvi-tick) center / contain no-repeat; }
body.dh-tt-gon label.dh-tt-o-dong-y > span, body.dh-tt-gon label.dh-tt-o-dong-y > span * { font-size:calc(11 * var(--r)) !important; line-height:1.5 !important; color:#5D636C !important; font-weight:400 !important; }
body.dh-tt-gon label.dh-tt-o-dong-y a { color:#10294A !important; font-weight:600 !important; text-decoration:none !important; }

/* Thanh đáy: tổng + Đặt hàng */
body.dh-tt-gon .dh-tt-chot { position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:60; display:flex !important; align-items:center !important; gap:calc(12 * var(--r)) !important; height:auto !important; padding:calc(10 * var(--r)) calc(16 * var(--r)) calc(calc(16 * var(--r)) + env(safe-area-inset-bottom)) !important; background:rgba(255,255,255,.97) !important; -webkit-backdrop-filter:blur(calc(12 * var(--r))); backdrop-filter:blur(calc(12 * var(--r))); border-top:1px solid #ECE8E1 !important; box-shadow:none !important; }
body.dh-tt-gon .dh-tt-chot-tien { flex:1 !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:calc(2 * var(--r)) !important; text-align:left !important; }
body.dh-tt-gon .dh-tt-chot-nhan { display:none !important; }
body.dh-tt-gon .dh-tt-tong-so { font-size:calc(18 * var(--r)) !important; font-weight:800 !important; color:#10294A !important; line-height:1.2 !important; }
body.dh-tt-gon .dh-tt-chot-phu, body.dh-tt-gon .dh-tt-chot-phu * { font-size:calc(11 * var(--r)) !important; color:#8A8F96 !important; font-weight:400 !important; line-height:1.4 !important; }
body.dh-tt-gon .dh-tt-chot-phu b { color:#B4532A !important; font-weight:600 !important; }
body.dh-tt-gon .dh-tt-chot-nut { flex:none !important; width:auto !important; height:calc(48 * var(--r)) !important; padding:0 calc(28 * var(--r)) !important; border:0 !important; border-radius:calc(14 * var(--r)) !important; background:#10294A !important; color:#FFFFFF !important; font:700 calc(14 * var(--r)) Montserrat, sans-serif !important; text-transform:none !important; letter-spacing:0 !important; box-shadow:0 calc(8 * var(--r)) calc(20 * var(--r)) rgba(16,41,74,.25) !important; }

/* Ngăn kéo (địa chỉ, vận chuyển, hoá đơn) */
body.dh-tt-gon .dh-tt-modal { background:rgba(14,20,30,.5) !important; }
body.dh-tt-gon .dh-tt-modal-hop { background:#FFFFFF !important; border-radius:calc(22 * var(--r)) calc(22 * var(--r)) 0 0 !important; box-shadow:0 calc(-12 * var(--r)) calc(40 * var(--r)) rgba(0,0,0,.18) !important; padding:0 !important; }
body.dh-tt-gon .dh-tt-modal-hop::before { content:""; display:block; width:calc(36 * var(--r)); height:calc(4 * var(--r)); border-radius:calc(2 * var(--r)); background:#DCD6CD; margin:calc(8 * var(--r)) auto 0; }
body.dh-tt-gon .dh-tt-modal-dau { display:flex !important; align-items:center !important; justify-content:space-between !important; padding:calc(8 * var(--r)) calc(16 * var(--r)) calc(10 * var(--r)) !important; border:0 !important; background:none !important; }
body.dh-tt-gon .dh-tt-modal-dau > span { font-size:calc(16 * var(--r)) !important; font-weight:700 !important; color:#15191F !important; text-transform:none !important; letter-spacing:0 !important; }
body.dh-tt-gon .dh-tt-dong { width:calc(32 * var(--r)) !important; height:calc(32 * var(--r)) !important; border-radius:50% !important; background:#F4F1EC !important; border:0 !important; font-size:0 !important; display:flex !important; align-items:center; justify-content:center; padding:0 !important; color:#15191F !important; }
body.dh-tt-gon .dh-tt-dong::before { content:""; width:calc(14 * var(--r)); height:calc(14 * var(--r)); background:currentColor; -webkit-mask:var(--dvi-x) center / contain no-repeat; mask:var(--dvi-x) center / contain no-repeat; }
body.dh-tt-gon .dh-tt-modal-than { padding:calc(4 * var(--r)) calc(16 * var(--r)) 0 !important; }
body.dh-tt-gon .dh-tt-modal-than h3, body.dh-tt-gon .dh-tt-modal-than .dh-tt-nhac-hc, body.dh-tt-gon .dh-tt-modal-than .optional, body.dh-tt-gon #billing_country_field { display:none !important; }
body.dh-tt-gon .woocommerce-billing-fields__field-wrapper { display:flex !important; flex-wrap:wrap !important; gap:calc(8 * var(--r)) !important; }
body.dh-tt-gon .woocommerce-billing-fields__field-wrapper > p.form-row { margin:0 !important; padding:0 !important; float:none !important; width:auto !important; flex:1 1 100% !important; min-width:0; position:relative; }
body.dh-tt-gon .woocommerce-billing-fields__field-wrapper > p.form-row > label { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap; }
body.dh-tt-gon #billing_xung_ho_field { order:1; flex:0 0 auto !important; }
body.dh-tt-gon #billing_last_name_field { order:2; flex:1 1 0 !important; }
body.dh-tt-gon #billing_phone_field { order:3; }
body.dh-tt-gon #billing_state_field { order:4; flex:1 1 calc(50% - calc(4 * var(--r))) !important; }
body.dh-tt-gon #billing_city_field { order:5; flex:1 1 calc(50% - calc(4 * var(--r))) !important; }
body.dh-tt-gon #billing_address_1_field { order:6; }
body.dh-tt-gon #billing_email_field { order:7; }
body.dh-tt-gon .dh-tt-modal-than input.input-text, body.dh-tt-gon .dh-tt-modal-than select, body.dh-tt-gon .dh-tt-modal-than textarea { width:100% !important; height:calc(44 * var(--r)) !important; border:1px solid #DCD6CD !important; border-radius:calc(12 * var(--r)) !important; padding:0 calc(14 * var(--r)) !important; font:500 calc(13 * var(--r)) Montserrat, sans-serif !important; color:#15191F !important; background-color:#FFFFFF !important; box-shadow:none !important; outline:none; }
body.dh-tt-gon .dh-tt-modal-than select { -webkit-appearance:none; appearance:none; padding-right:calc(34 * var(--r)) !important; background-image:var(--dvi-xuong) !important; background-repeat:no-repeat !important; background-position:right calc(12 * var(--r)) center !important; background-size:calc(13 * var(--r)) calc(13 * var(--r)) !important; }
body.dh-tt-gon .dh-tt-modal-than textarea { height:calc(88 * var(--r)) !important; padding:calc(12 * var(--r)) calc(14 * var(--r)) !important; }
body.dh-tt-gon #billing_xung_ho_field .woocommerce-input-wrapper { display:flex !important; height:calc(44 * var(--r)) !important; border:1px solid #DCD6CD !important; border-radius:calc(12 * var(--r)) !important; overflow:hidden !important; }
body.dh-tt-gon #billing_xung_ho_field input[type=radio] { position:absolute !important; opacity:0 !important; width:1px !important; height:1px !important; margin:0 !important; }
body.dh-tt-gon #billing_xung_ho_field label.radio { position:static !important; width:auto !important; height:auto !important; clip:auto !important; display:flex !important; align-items:center; padding:0 calc(14 * var(--r)) !important; margin:0 !important; font-size:calc(12 * var(--r)) !important; font-weight:600 !important; color:#15191F !important; background:#FFFFFF !important; cursor:pointer; }
body.dh-tt-gon #billing_xung_ho_field input:checked + label.radio { background:#10294A !important; color:#FFFFFF !important; }
body.dh-tt-gon .dh-tt-modal-than #ship-to-different-address, body.dh-tt-gon .dh-tt-modal-than .woocommerce-form__label-for-checkbox { font-size:calc(12 * var(--r)) !important; font-weight:500 !important; color:#15191F !important; }
body.dh-tt-gon .dh-tt-modal-than input[type=checkbox] { width:calc(18 * var(--r)) !important; height:calc(18 * var(--r)) !important; accent-color:#10294A; }
body.dh-tt-gon .dh-tt-modal-chan { padding:calc(10 * var(--r)) calc(16 * var(--r)) calc(calc(16 * var(--r)) + env(safe-area-inset-bottom)) !important; border:0 !important; background:#FFFFFF !important; }
body.dh-tt-gon .dh-tt-xac-nhan, body.dh-tt-gon .dh-tt-modal-chan button { width:100% !important; height:calc(48 * var(--r)) !important; border:0 !important; border-radius:calc(14 * var(--r)) !important; background:#10294A !important; color:#FFFFFF !important; font:700 calc(14 * var(--r)) Montserrat, sans-serif !important; text-transform:none !important; letter-spacing:0 !important; box-shadow:none !important; }
body.dh-tt-gon .dh-tt-modal-vc .dh-tt-modal-than { padding:0 calc(16 * var(--r)) calc(16 * var(--r)) !important; }
body.dh-tt-gon .dh-tt-modal-vc #shipping_method { margin:0 !important; padding:0 !important; list-style:none !important; }
body.dh-tt-gon .dh-tt-modal-vc #shipping_method li { display:grid !important; grid-template-columns:calc(18 * var(--r)) 1fr auto !important; column-gap:calc(12 * var(--r)) !important; row-gap:calc(2 * var(--r)) !important; align-items:center !important; padding:calc(12 * var(--r)) 0 !important; margin:0 !important; border:0 !important; border-top:1px solid #F0ECE6 !important; list-style:none !important; }
body.dh-tt-gon .dh-tt-modal-vc #shipping_method li::before, body.dh-tt-gon .dh-tt-modal-vc #shipping_method li::after { display:none !important; content:none !important; }
body.dh-tt-gon .dh-tt-modal-vc #shipping_method li input { grid-row:1 / 3; grid-column:1; -webkit-appearance:none; appearance:none; width:calc(18 * var(--r)) !important; height:calc(18 * var(--r)) !important; margin:0 !important; border-radius:50% !important; border:1.5px solid #C9C3B9 !important; box-sizing:border-box; background:#FFFFFF; }
body.dh-tt-gon .dh-tt-modal-vc #shipping_method li input:checked { border:calc(5 * var(--r)) solid #10294A !important; }
body.dh-tt-gon .dh-tt-modal-vc #shipping_method li label { grid-row:1; grid-column:2; margin:0 !important; padding:0 !important; font-size:calc(13 * var(--r)) !important; font-weight:600 !important; color:#15191F !important; }
body.dh-tt-gon .dh-tt-modal-vc #shipping_method li .dv-vc-mo { grid-row:2; grid-column:2; font-size:calc(11 * var(--r)); color:#5D636C; }
body.dh-tt-gon .dh-tt-modal-vc #shipping_method li .dv-vc-mp { grid-row:1 / 3; grid-column:3; font-size:calc(12 * var(--r)); font-weight:700; color:#2E6A4E; }
/* Tắt tiêu đề giả + clearfix của Woo (chiếm một ô lưới, làm lệch hai thẻ thanh toán). */
body.dh-tt-gon .woocommerce-checkout-payment::before, body.dh-tt-gon #payment::before, body.dh-tt-gon #payment::after { display:none !important; content:none !important; }
body.dh-tt-gon #payment ul.wc_payment_methods::before, body.dh-tt-gon #payment ul.wc_payment_methods::after { display:none !important; content:none !important; }
body.dh-tt-gon #order_review td.product-total, body.dh-tt-gon #order_review .dh-tt-sp-quy, body.dh-tt-gon #order_review td.product-qty { align-self:center !important; }
body.dh-tt-gon #payment ul.wc_payment_methods > li > label { min-width:0 !important; }
body.dh-tt-gon .dh-tt-modal-vc #shipping_method li label::after, body.dh-tt-gon .dh-tt-modal-vc #shipping_method li label::before { display:none !important; content:none !important; }
}

/* ==================================================================
   6. ĐẶT HÀNG THÀNH CÔNG (màn 03) · CHỜ CHUYỂN KHOẢN QR (03b)
      · CHI TIẾT ĐƠN (04) · LIÊN HỆ + TRA CỨU (05)
   ================================================================== */
@media (max-width: 767px) {

.dv-xong, .dv-don, .dv-lh { display:block !important; color:#15191F; }

/* Khung chung: dải navy + thẻ nổi + hai nút */
.dv-dai { background:#10294A; color:#FFFFFF; padding:calc(22 * var(--r)) calc(20 * var(--r)) calc(52 * var(--r)); display:flex; align-items:center; gap:calc(14 * var(--r)); }
.dv-dai-qr { padding:calc(20 * var(--r)) calc(20 * var(--r)) calc(50 * var(--r)); justify-content:space-between; gap:calc(12 * var(--r)); }
.dv-dai-tick { width:calc(46 * var(--r)); height:calc(46 * var(--r)); flex:none; border-radius:50%; background:#FFFFFF; color:#10294A; display:flex; align-items:center; justify-content:center; }
.dv-dai-tick svg { width:calc(22 * var(--r)); height:calc(22 * var(--r)); }
.dv-dai-huy { color:#A63A32; }
body.dh-xong .woocommerce-notices-wrapper { display:none !important; }
.dv-xong-cho-khoi .dv-don-huy { margin:calc(-2 * var(--r)) calc(12 * var(--r)) calc(16 * var(--r)); }
.dv-dai-trai { display:flex; flex-direction:column; gap:calc(3 * var(--r)); min-width:0; }
.dv-dai-ten { font-size:calc(18 * var(--r)); font-weight:700; line-height:1.3; }
.dv-dai-qr .dv-dai-ten { font-size:calc(17 * var(--r)); }
.dv-dai-phu { font-size:calc(12 * var(--r)); opacity:.75; line-height:1.45; }
.dv-dai-phu b { font-weight:700; opacity:1; }
.dv-dai-nho { font-size:calc(11 * var(--r)); letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.dv-dai-phai { display:flex; flex-direction:column; align-items:flex-end; gap:calc(2 * var(--r)); flex:none; }
.dv-dai-phai > span:first-child { font-size:calc(10 * var(--r)); opacity:.7; }
.dv-dem { font-size:calc(20 * var(--r)) !important; line-height:1.2; }
.dv-noi { margin:calc(-36 * var(--r)) calc(12 * var(--r)) 0; background:#FFFFFF; border-radius:calc(18 * var(--r)); box-shadow:0 calc(14 * var(--r)) calc(30 * var(--r)) calc(-14 * var(--r)) rgba(20,25,31,.2); overflow:hidden; position:relative; }
.dv-hai-nut { padding:calc(12 * var(--r)) calc(12 * var(--r)) calc(14 * var(--r)); display:grid; grid-template-columns:1fr 2fr; gap:calc(8 * var(--r)); }
.dv-hai-deu { grid-template-columns:1fr 1fr; }
.dv-nut-phu, .dv-nut-chinh { height:calc(46 * var(--r)); border-radius:calc(14 * var(--r)); display:flex; align-items:center; justify-content:center; gap:calc(8 * var(--r)); font-size:calc(13 * var(--r)); text-decoration:none !important; cursor:pointer; padding:0 calc(10 * var(--r)); text-align:center; line-height:1.2; }
.dv-nut-phu { background:#FFFFFF; border:1px solid #E3DED6; color:#15191F !important; font-weight:600; }
.dv-nut-chinh { background:#10294A; border:0; color:#FFFFFF !important; font-weight:700; font-family:Montserrat, sans-serif; }
.dv-nut-phu .dh-zalo-logo { width:calc(20 * var(--r)) !important; height:calc(20 * var(--r)) !important; border-radius:calc(6 * var(--r)); display:block; }
.dv-nut-phu .dh-zalo-anh { display:none !important; }
.dv-bao { margin:0 calc(12 * var(--r)) calc(14 * var(--r)); padding:calc(10 * var(--r)) calc(12 * var(--r)); border-radius:calc(12 * var(--r)); background:#EEF1F6; color:#10294A; font-size:calc(12 * var(--r)); line-height:1.5; }
.dv-bao[hidden] { display:none; }

/* Trang cảm ơn: ẩn toàn bộ khối cũ, giữ trong DOM */
body.dh-xong { background:#F2EFEA !important; padding-bottom:calc(calc(66 * var(--r)) + env(safe-area-inset-bottom)) !important; }
body.dh-xong .dh4-dt, body.dh-xong .dh4-dai, body.dh-xong .dh4-ct, body.dh-xong .dh-ruot > h1 { display:none !important; }
body.dh-xong .dh4-day { display:grid !important; }
body.dh-xong .dh-ruot, body.dh-xong .dh-ruot > .woocommerce, body.dh-xong .woocommerce-order { padding:0 !important; margin:0 !important; max-width:none !important; background:none !important; border:0 !important; }
body.dh-xong .woocommerce-order > :not(.dv-xong) { display:none !important; }
.dv-xong-cho-khoi { display:none; }
.dv-xong.dv-xong-cho .dv-xong-cho-khoi { display:block; }
.dv-xong.dv-xong-cho .dv-xong-xong-khoi { display:none; }
.dv-xong-mon { padding:calc(12 * var(--r)) calc(14 * var(--r)); display:flex; align-items:center; gap:calc(10 * var(--r)); border-bottom:1px solid #F0ECE6; }
.dv-xong-mon img { width:calc(40 * var(--r)); height:calc(40 * var(--r)); object-fit:contain; flex:none; }
.dv-xong-mon span { flex:1; font-size:calc(12 * var(--r)); font-weight:600; line-height:1.35; }
.dv-xong-mon em { font-style:normal; font-size:calc(12 * var(--r)); color:#8A8F96; }
.dv-xong-nguoi { padding:calc(10 * var(--r)) calc(14 * var(--r)); display:flex; flex-direction:column; gap:calc(3 * var(--r)); border-bottom:1px solid #F0ECE6; }
.dv-xong-nguoi b { font-size:calc(12 * var(--r)); font-weight:600; }
.dv-xong-nguoi span { font-size:calc(11 * var(--r)); color:#5D636C; line-height:1.45; }
.dv-xong-hang { padding:calc(10 * var(--r)) calc(14 * var(--r)); display:flex; justify-content:space-between; gap:calc(10 * var(--r)); font-size:calc(11 * var(--r)); color:#5D636C; border-bottom:1px solid #F0ECE6; }
.dv-xong-tong, .dv-don-tong { background:#F7F5F1; padding:calc(12 * var(--r)) calc(14 * var(--r)); display:flex; justify-content:space-between; align-items:baseline; }
.dv-xong-tong span, .dv-don-tong span { font-size:calc(12 * var(--r)); font-weight:600; }
.dv-xong-tong b, .dv-xong-tong b *, .dv-don-tong b, .dv-don-tong b * { font-size:calc(17 * var(--r)); font-weight:800; color:#10294A; }

/* Thẻ mã QR */
.dv-xong-cho-khoi .dv-noi { margin-top:calc(-34 * var(--r)); }
.dv-qr-the { padding:calc(14 * var(--r)); display:grid; grid-template-columns:calc(132 * var(--r)) 1fr; gap:calc(14 * var(--r)); align-items:center; }
.dv-qr-anh { width:calc(132 * var(--r)); height:calc(132 * var(--r)); border-radius:calc(12 * var(--r)); border:1px solid #ECE8E1; background:#FFFFFF; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dv-qr-anh img { width:calc(120 * var(--r)); height:calc(120 * var(--r)); object-fit:contain; display:block; }
.dv-qr-tt { display:flex; flex-direction:column; gap:calc(8 * var(--r)); min-width:0; }
.dv-qr-nhan { font-size:calc(10 * var(--r)); color:#8A8F96; }
.dv-qr-tien, .dv-qr-tien * { font-size:calc(20 * var(--r)); font-weight:800; color:#10294A; letter-spacing:-.02em; }
.dv-qr-nd { display:flex; align-items:center; gap:calc(6 * var(--r)); flex-wrap:wrap; }
.dv-qr-nd .dv-mono { font-size:calc(13 * var(--r)); color:#B4532A; }
.dv-chep { font:700 calc(10 * var(--r)) Montserrat, sans-serif; color:#10294A; border:1px solid #D7DDE7; background:#FFFFFF; padding:calc(2 * var(--r)) calc(7 * var(--r)); border-radius:calc(999 * var(--r)); cursor:pointer; }
.dv-qr-nh { font-size:calc(10 * var(--r)); color:#5D636C; line-height:1.45; }
.dv-qr-ghi, .dv-qr-het { grid-column:1 / -1; font-size:calc(11 * var(--r)); line-height:1.5; color:#5D636C; padding-top:calc(10 * var(--r)); border-top:1px solid #F0ECE6; }
.dv-qr-het { color:#A63A32; }
.dv-qr-het[hidden] { display:none; }

/* Chi tiết đơn */
body.dh-xem-don { background:#F2EFEA !important; padding-bottom:calc(calc(66 * var(--r)) + env(safe-area-inset-bottom)) !important; }
body.dh-xem-don .dh4-dt, body.dh-xem-don .dh4-dai, body.dh-xem-don .dh4-ct, body.dh-xem-don .dh-ruot > h1, body.dh-xem-don .woocommerce-MyAccount-navigation { display:none !important; }
body.dh-xem-don .dh4-day { display:grid !important; }
body.dh-xem-don .dh-ruot, body.dh-xem-don .dh-ruot > .woocommerce, body.dh-xem-don .woocommerce-MyAccount-content { padding:0 !important; margin:0 !important; max-width:none !important; width:auto !important; float:none !important; background:none !important; border:0 !important; }
body.dh-xem-don .woocommerce-MyAccount-content > :not(.dv-don) { display:none !important; }
.dv-thanh-dau { height:calc(52 * var(--r)); display:grid; grid-template-columns:calc(40 * var(--r)) 1fr calc(40 * var(--r)); align-items:center; padding:0 calc(12 * var(--r)); background:#FFFFFF; border-bottom:1px solid #ECE8E1; }
.dv-thanh-dau > span:nth-child(2) { text-align:center; font-size:calc(14 * var(--r)); font-weight:700; }
.dv-thanh-lui { width:calc(40 * var(--r)); height:calc(40 * var(--r)); display:flex; align-items:center; justify-content:center; color:#15191F; }
.dv-thanh-lui svg { width:calc(18 * var(--r)); height:calc(18 * var(--r)); }
.dv-don-tt { background:#FFFFFF; padding:calc(12 * var(--r)) calc(16 * var(--r)) calc(14 * var(--r)); display:flex; flex-direction:column; gap:calc(12 * var(--r)); }
.dv-don-tt-dong { display:flex; align-items:center; gap:calc(10 * var(--r)); }
.dv-don-tt-ic { width:calc(32 * var(--r)); height:calc(32 * var(--r)); border-radius:50%; background:var(--dv-nen); color:var(--dv-mau); display:flex; align-items:center; justify-content:center; flex:none; }
.dv-don-tt-ic svg { width:calc(16 * var(--r)); height:calc(16 * var(--r)); }
.dv-don-tt-ten { font-size:calc(13 * var(--r)); font-weight:700; color:var(--dv-mau); }
.dv-don-tt-mo { font-size:calc(11 * var(--r)); color:#5D636C; line-height:1.45; }
.dv-don-buoc { display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(4 * var(--r)); }
.dv-don-buoc > div { display:flex; flex-direction:column; gap:calc(5 * var(--r)); }
.dv-don-buoc i { display:block; height:calc(3 * var(--r)); border-radius:calc(2 * var(--r)); background:#ECE8E1; }
.dv-don-buoc span { font-size:calc(10 * var(--r)); font-weight:600; color:#8A8F96; }
.dv-don-buoc .dv-b-xong i { background:#10294A; }
.dv-don-buoc .dv-b-xong span { color:#15191F; }
.dv-don-buoc .dv-b-huy i { background:#A63A32; }
.dv-don-buoc .dv-b-huy span { color:#15191F; }
.dv-don-tt:has(.dv-b-huy) .dv-don-buoc div:not(.dv-b-huy) span { color:#B9B4AA; }
.dv-don-qr { margin-top:calc(6 * var(--r)); background:#FFFFFF; }
.dv-don-qr[hidden] { display:none; }
.dv-don-than { margin-top:calc(6 * var(--r)); background:#FFFFFF; padding:0 calc(16 * var(--r)); }
.dv-don-nguoi { display:flex; gap:calc(10 * var(--r)); padding:calc(12 * var(--r)) 0; border-bottom:1px solid #F0ECE6; }
.dv-don-nguoi > svg { width:calc(16 * var(--r)); height:calc(16 * var(--r)); flex:none; margin-top:1px; color:#B4532A; }
.dv-don-nguoi > div { display:flex; flex-direction:column; gap:calc(2 * var(--r)); }
.dv-don-ten { font-size:calc(12 * var(--r)); font-weight:600; }
.dv-don-ten span { font-weight:500; color:#8A8F96; margin-left:calc(4 * var(--r)); }
.dv-don-dc { font-size:calc(11 * var(--r)); color:#5D636C; line-height:1.45; }
.dv-don-mon { display:flex; align-items:center; gap:calc(10 * var(--r)); padding:calc(10 * var(--r)) 0; border-bottom:1px solid #F0ECE6; }
.dv-don-mon img { width:calc(44 * var(--r)); height:calc(44 * var(--r)); object-fit:contain; flex:none; }
.dv-don-mon > div { flex:1; font-size:calc(12 * var(--r)); font-weight:600; line-height:1.35; }
.dv-don-mon > div span { font-weight:500; color:#8A8F96; }
.dv-don-mon b, .dv-don-mon b * { font-size:calc(12 * var(--r)); font-weight:700; }
.dv-don-luoi { display:grid; grid-template-columns:1fr 1fr; gap:0 calc(12 * var(--r)); padding:calc(4 * var(--r)) 0 calc(8 * var(--r)); }
.dv-don-luoi > div { padding:calc(6 * var(--r)) 0; display:flex; flex-direction:column; gap:1px; min-width:0; }
.dv-don-luoi > div > span:first-child { font-size:calc(10 * var(--r)); color:#8A8F96; }
.dv-don-luoi > div > span:last-child, .dv-don-luoi > div > span:last-child * { font-size:calc(12 * var(--r)); font-weight:600; color:#15191F; }
.dv-don-tong { padding:calc(12 * var(--r)) calc(16 * var(--r)); border-top:1px solid #ECE8E1; }
.dv-don-huy { display:block; text-align:center; margin:calc(-4 * var(--r)) calc(12 * var(--r)) calc(14 * var(--r)); font-size:calc(11 * var(--r)); color:#8A8F96 !important; text-decoration:underline; }

/* Liên hệ + tra cứu */
body.dv-lh-trang > section { display:none !important; }
.dv-lh { padding:calc(16 * var(--r)) calc(12 * var(--r)) calc(12 * var(--r)); display:flex !important; flex-direction:column; gap:calc(10 * var(--r)); background:#F2EFEA; }
.dv-lh-ten { padding:0 calc(4 * var(--r)); font-size:calc(20 * var(--r)); font-weight:800; letter-spacing:-.015em; line-height:1.25; }
.dv-lh-tra { padding:calc(16 * var(--r)); border-radius:calc(18 * var(--r)); background:#10294A; color:#FFFFFF; display:flex; flex-direction:column; gap:calc(10 * var(--r)); margin:0; scroll-margin-top:calc(70 * var(--r)); }
.dv-lh-tra-dau { display:flex; justify-content:space-between; align-items:baseline; gap:calc(8 * var(--r)); }
.dv-lh-tra-dau b { font-size:calc(14 * var(--r)); font-weight:700; }
.dv-lh-tra-dau span { font-size:calc(11 * var(--r)); opacity:.7; }
.dv-lh-tra-o { display:grid; grid-template-columns:1fr 1.3fr; gap:calc(8 * var(--r)); }
.dv-lh-tra input { min-width:0; height:calc(44 * var(--r)); border:1px solid rgba(255,255,255,.18) !important; border-radius:calc(12 * var(--r)) !important; padding:0 calc(12 * var(--r)) !important; font:500 calc(13 * var(--r)) Montserrat, sans-serif !important; color:#FFFFFF !important; background:rgba(255,255,255,.08) !important; outline:none; box-shadow:none !important; width:100%; }
.dv-lh-tra input::placeholder { color:rgba(255,255,255,.6); }
.dv-lh-tra button { height:calc(44 * var(--r)); border:0; border-radius:calc(12 * var(--r)); background:#FFFFFF; color:#10294A; font:700 calc(13 * var(--r)) Montserrat, sans-serif; cursor:pointer; text-transform:none; letter-spacing:0; }
.dv-lh-loi { margin:0; font-size:calc(12 * var(--r)); color:#F7C9B5; }
.dv-lh-kq { background:#FFFFFF; color:#15191F; border-radius:calc(14 * var(--r)); padding:calc(12 * var(--r)); display:flex; flex-direction:column; gap:calc(6 * var(--r)); }
.dv-lh-kq-dau { display:flex; align-items:center; gap:calc(8 * var(--r)); flex-wrap:wrap; }
.dv-lh-kq-dau b { font-size:calc(13 * var(--r)); font-weight:700; }
.dv-lh-kq-dau span { font-size:calc(11 * var(--r)); color:#8A8F96; }
.dv-lh-kq-dau em { margin-left:auto; font-style:normal; font-size:calc(10 * var(--r)); font-weight:700; color:#10294A; background:#EEF1F6; padding:calc(3 * var(--r)) calc(8 * var(--r)); border-radius:calc(999 * var(--r)); }
.dv-lh-kq-mon { font-size:calc(12 * var(--r)); color:#3A4049; line-height:1.5; }
.dv-lh-kq-tong, .dv-lh-kq-tong * { font-size:calc(12 * var(--r)); }
.dv-lh-kq-tong b, .dv-lh-kq-tong b * { font-weight:800; color:#10294A; }
.dv-lh-kq a { align-self:flex-start; height:calc(36 * var(--r)); padding:0 calc(14 * var(--r)); border-radius:calc(10 * var(--r)); background:#10294A; color:#FFFFFF; font-size:calc(12 * var(--r)); font-weight:700; display:flex; align-items:center; text-decoration:none; }
.dv-lh-luoi { display:grid; grid-template-columns:1fr 1fr; gap:calc(8 * var(--r)); }
.dv-lh-luoi > a, .dv-lh-kho { background:#FFFFFF; border-radius:calc(14 * var(--r)); padding:calc(12 * var(--r)); display:flex; flex-direction:column; gap:calc(3 * var(--r)); text-decoration:none; color:#15191F; }
.dv-lh-luoi span { font-size:calc(10 * var(--r)); color:#8A8F96; }
.dv-lh-luoi > a b { font-size:calc(13 * var(--r)); font-weight:700; color:#10294A; }
.dv-lh-kho { grid-column:1 / -1; }
.dv-lh-kho b { font-size:calc(12 * var(--r)); font-weight:600; line-height:1.45; }
.dv-lh-cs { background:#FFFFFF; border-radius:calc(14 * var(--r)); padding:0 calc(14 * var(--r)); }
.dv-lh-cs details { border-top:1px solid #F0ECE6; }
.dv-lh-cs details:first-child { border-top:0; }
.dv-lh-cs summary { cursor:pointer; height:calc(44 * var(--r)); display:flex; align-items:center; justify-content:space-between; gap:calc(8 * var(--r)); font-size:calc(12 * var(--r)); font-weight:600; list-style:none; }
.dv-lh-cs summary::-webkit-details-marker { display:none; }
.dv-lh-cs summary svg { width:calc(14 * var(--r)); height:calc(14 * var(--r)); color:#8A8F96; flex:none; transition:transform .15s; }
.dv-lh-cs details[open] summary svg { transform:rotate(180deg); }
.dv-lh-cs details > div { padding:0 0 calc(12 * var(--r)); }
.dv-lh-cs details p { margin:0 0 calc(6 * var(--r)); font-size:calc(12 * var(--r)); line-height:1.6; color:#5D636C; }
.dv-lh-cs details p:last-child { margin:0; }
}

/* ==================================================================
   7. ĐỒNG BỘ MÀU NÚT (anh Mừng 28/10 tối: "các nút phải đồng bộ màu với nhau, nút đặt hàng phải
      đồng bộ với mua ngay"). Nút chính + ô chọn = đất nung #B4532A như ô MUA NGAY trang sản phẩm.
      Navy giữ cho chữ số tiền, dải đầu trang, thẻ tra cứu. + Căn giữa tiêu đề "Thanh toán".
   ================================================================== */
@media (max-width: 767px) {
body.dh-tt-gon .dh-tt-thanh-ten { justify-self:center !important; margin:0 !important; width:auto !important; }
/* Anh 28/10 tối "bỏ khoảng trống này": đệm đáy đúng bằng thanh Đặt hàng (58), và khi trang ngắn hơn
   màn hình thì phần dưới khối trắng cuối là nền trắng của html (không còn dải kem trống). */
html:has(body.dh-tt-gon) { background:#FFFFFF !important; }
body.dh-tt-gon { min-height:0 !important; padding-bottom:calc(calc(58 * var(--r)) + env(safe-area-inset-bottom)) !important; background:#FFFFFF !important; }

/* Thanh đáy thanh toán = cùng khuôn thanh mua trang sản phẩm */
body.dh-tt-gon .dh-tt-chot { align-items:flex-start !important; gap:calc(12 * var(--r)) !important; height:calc(calc(58 * var(--r)) + env(safe-area-inset-bottom)) !important; padding:0 0 env(safe-area-inset-bottom) calc(16 * var(--r)) !important; background:#FFFFFF !important; box-shadow:0 calc(-4 * var(--r)) calc(14 * var(--r)) rgba(20,25,31,.05) !important; }
body.dh-tt-gon .dh-tt-chot-tien { height:calc(58 * var(--r)) !important; justify-content:center !important; flex-wrap:nowrap !important; align-items:flex-start !important; min-width:0 !important; }
body.dh-tt-gon .dh-tt-chot-phu { flex-basis:auto !important; text-align:left !important; max-width:100%; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; }
body.dh-tt-gon .dh-tt-chot-phu[hidden] { display:none !important; }
body.dh-tt-gon .dh-tt-chot-nut { flex:0 0 46% !important; width:46% !important; height:calc(58 * var(--r)) !important; padding:0 calc(8 * var(--r)) !important; border-radius:0 !important; background:#B4532A !important; box-shadow:none !important; font:700 calc(13 * var(--r)) Montserrat, sans-serif !important; text-transform:uppercase !important; letter-spacing:.02em !important; }

/* Nút chính khác */
body.dh-tt-gon .dh-tt-ma-ap, body.dh-tt-gon .dh-tt-xac-nhan, body.dh-tt-gon .dh-tt-modal-chan button,
.dv-nut-chinh, .dv-sp-kem-them, .dv-lh-tra button { background:#B4532A !important; color:#FFFFFF !important; border:0 !important; }

/* Ô chọn: thẻ thanh toán, nút tròn, ô đồng ý, xưng hô */
body.dh-tt-gon #payment ul.wc_payment_methods > li:has(input:checked) { border:1.5px solid #B4532A !important; background:#FBF3EE !important; }
body.dh-tt-gon #payment ul.wc_payment_methods > li:has(input:checked) > label::after { border:calc(5 * var(--r)) solid #B4532A !important; }
body.dh-tt-gon label.dh-tt-o-dong-y input:checked { background:#B4532A !important; }
body.dh-tt-gon .dh-tt-modal-vc #shipping_method li input:checked { border:calc(5 * var(--r)) solid #B4532A !important; }
body.dh-tt-gon #billing_xung_ho_field input:checked + label.radio { background:#B4532A !important; }
body.dh-tt-gon .dh-tt-modal-than input[type=checkbox] { accent-color:#B4532A; }
}

/* ==================================================================
   8. PHẦN ĐỒNG Ý — VỀ BẢN CŨ (anh Mừng 28/10 tối: "chỗ này cần quay về bản cũ hợp lý hơn").
      Dòng thuế + "Người bán" 3 dòng hiện lại, câu đồng ý gốc trong ô viền riêng; màu theo bảng mới.
   ================================================================== */
@media (max-width: 767px) {
/* 28/10 tối anh: "thông tin bị trùng nhiều" → bỏ dòng thuế (đã có "Gồm VAT 8%" ở thanh đáy + ô đồng ý). */
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-thue { display:none !important; order:6; margin:calc(4 * var(--r)) 0 0 !important; padding:0 !important; font-size:calc(11 * var(--r)) !important; line-height:1.55 !important; color:#5D636C !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-thue * { font-size:calc(11 * var(--r)) !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-thue b { color:#15191F !important; font-weight:700 !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-thue a { color:#10294A !important; font-weight:600 !important; text-decoration:underline !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-ban { display:block !important; order:7; margin:calc(2 * var(--r)) 0 0 !important; padding:0 !important; border-top:0 !important; font-size:calc(11 * var(--r)) !important; line-height:1.6 !important; color:#5D636C !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-ban * { font-size:calc(11 * var(--r)) !important; }
body.dh-tt-gon .dh-tt-ngoai-ct .dh-tt-ct-ban b { color:#15191F !important; font-weight:700 !important; }
body.dh-tt-gon label.dh-tt-o-dong-y { align-items:flex-start !important; padding:calc(12 * var(--r)) !important; border:1px solid #E3DED6 !important; border-radius:calc(12 * var(--r)) !important; background:#FBFAF8 !important; margin-top:calc(4 * var(--r)) !important; }
body.dh-tt-gon label.dh-tt-o-dong-y input { margin-top:1px !important; }
body.dh-tt-gon label.dh-tt-o-dong-y > span, body.dh-tt-gon label.dh-tt-o-dong-y > span * { font-size:calc(12 * var(--r)) !important; line-height:1.5 !important; color:#3A4049 !important; }
body.dh-tt-gon label.dh-tt-o-dong-y a { color:#10294A !important; font-weight:600 !important; text-decoration:underline !important; }
}

/* 28/10 tối anh "xóa khoảng trống này" (dưới ô đồng ý): nút Đặt hàng gốc của Woo vẫn chiếm calc(26 * var(--r)) dù
   thanh đáy đã có nút riêng (bấm qua JS) → cho nó không chiếm chỗ nhưng VẪN trong DOM, bấm được;
   bỏ đệm đáy calc(12 * var(--r)) của #payment. */
@media (max-width: 767px) {
body.dh-tt-gon #payment #place_order { position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; opacity:0 !important; overflow:hidden !important; pointer-events:none !important; }
body.dh-tt-gon #payment .form-row.place-order { position:relative !important; }
body.dh-tt-gon #payment { padding-bottom:0 !important; }
}

/* ==================================================================
   9. QUÉT KHOẢNG TRỐNG CÁC TRANG (anh Mừng 28/10 tối: "check các trang khác xem còn khoảng trống
      nào không, còn thì xử lý luôn").
   ================================================================== */
@media (max-width: 767px) {
/* Tìm kiếm: thẻ bài viết KHÔNG có ảnh bìa nhưng ăn lưới 2 cột (calc(116 * var(--r))) của thẻ Cẩm nang → chữ dồn cột
   trái hẹp, cột phải trống. Không ảnh thì 1 cột. */
a.dh-the:not(:has(img)) { grid-template-columns:1fr !important; }
a.dh-the:not(:has(img)) > * { grid-column:1 / -1 !important; }
/* Bài viết: khối "Hỏi thêm trong cộng đồng" cách FAQ 32 + calc(20 * var(--r)) → gọn lại. */
body.single-post article div:has(> a.dh-nut-chinh) { margin-top:calc(12 * var(--r)) !important; padding-top:calc(14 * var(--r)) !important; }
}

/* ==================================================================
   10. TRANG TÌM KIẾM — ĐẦU TRANG GỌN (anh Mừng 28/10 tối: "gọn hơn"). "Tìm nhanh" 1 hàng vuốt ngang,
       tiêu đề 16, 4 nút lọc 1 hàng (đang chọn = đất nung như các nút khác).
   ================================================================== */
@media (max-width: 767px) {
section.dh-tim-s1 { padding:calc(10 * var(--r)) calc(16 * var(--r)) 0 !important; }
.dh-tim-nhanh { flex-wrap:nowrap !important; overflow-x:auto; margin:0 calc(-16 * var(--r)) !important; padding:0 calc(16 * var(--r)) calc(2 * var(--r)) !important; gap:calc(6 * var(--r)) !important; scrollbar-width:none; font-size:calc(11 * var(--r)) !important; }
.dh-tim-nhanh::-webkit-scrollbar { display:none; }
.dh-tim-nhanh > span { flex:none; font-size:calc(11 * var(--r)); color:#8A8F96; }
.dh-tim-nhanh > a { flex:none; white-space:nowrap; padding:calc(5 * var(--r)) calc(12 * var(--r)) !important; font-size:calc(12 * var(--r)) !important; line-height:1.3; border-color:#E3DED6 !important; color:#15191F !important; }
section.dh-tim-s2 { padding:calc(14 * var(--r)) calc(16 * var(--r)) 0 !important; }
.dh-tim-ten { font-size:calc(16 * var(--r)) !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:-.01em; }
.dh-tim-loc { flex-wrap:nowrap !important; overflow-x:auto; margin:calc(10 * var(--r)) calc(-16 * var(--r)) 0 !important; padding:0 calc(16 * var(--r)) calc(2 * var(--r)) !important; gap:calc(6 * var(--r)) !important; scrollbar-width:none; }
.dh-tim-loc::-webkit-scrollbar { display:none; }
.dh-tim-loc > a { flex:none; white-space:nowrap; height:calc(32 * var(--r)); padding:0 calc(12 * var(--r)) !important; gap:calc(5 * var(--r)) !important; font-size:calc(12 * var(--r)) !important; font-weight:600 !important; border-color:#E3DED6 !important; background:#FFFFFF !important; color:#15191F !important; }
.dh-tim-loc > a span { font-size:calc(11 * var(--r)) !important; }
.dh-tim-loc > a.dh-tim-dang { background:#B4532A !important; border-color:#B4532A !important; color:#FFFFFF !important; }
}

/* ==================================================================
   11. TÀI KHOẢN (anh 28/10 tối "sửa lại" trang Đơn hàng): menu = 1 hàng tab vuốt ngang, hộp
       xác nhận email gọn, danh sách đơn = thẻ. Bảng Woo ẩn khi có thẻ.
   ================================================================== */
@media (max-width: 767px) {
body.woocommerce-account:not(.dh-xem-don) .dh-ruot { padding:0 !important; margin:0 !important; max-width:none !important; }
body.woocommerce-account:not(.dh-xem-don) .dh-ruot > h1 { padding:calc(14 * var(--r)) calc(16 * var(--r)) 0 !important; margin:0 !important; font-size:calc(18 * var(--r)) !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation { float:none !important; width:auto !important; margin:calc(10 * var(--r)) 0 0 !important; padding:0 !important; background:#FFFFFF !important; border-bottom:1px solid #ECE8E1; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul { display:flex !important; flex-wrap:nowrap !important; gap:calc(18 * var(--r)) !important; overflow-x:auto; margin:0 !important; padding:0 calc(16 * var(--r)) !important; list-style:none !important; scrollbar-width:none; grid-template-columns:none !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display:none; }
body.woocommerce-account .woocommerce-MyAccount-navigation li { flex:none !important; margin:0 !important; padding:0 !important; border:0 !important; background:none !important; width:auto !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a { display:block !important; padding:calc(13 * var(--r)) 0 calc(11 * var(--r)) !important; margin:0 !important; border:0 !important; border-bottom:calc(2 * var(--r)) solid transparent !important; border-radius:0 !important; background:none !important; box-shadow:none !important; font-size:calc(12 * var(--r)) !important; font-weight:500 !important; color:#8A8F96 !important; text-decoration:none !important; white-space:nowrap; text-transform:none !important; letter-spacing:0 !important; height:auto !important; min-height:0 !important; text-align:left !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { font-weight:700 !important; color:#10294A !important; border-bottom-color:#10294A !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads { display:none !important; }
body.woocommerce-account .woocommerce-MyAccount-content { float:none !important; width:auto !important; margin:0 !important; padding:calc(10 * var(--r)) calc(12 * var(--r)) calc(16 * var(--r)) !important; }
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info { display:flex !important; flex-direction:column; align-items:flex-start; gap:calc(8 * var(--r)); margin:0 0 calc(10 * var(--r)) !important; padding:calc(12 * var(--r)) calc(14 * var(--r)) !important; background:#FFFFFF !important; border:1px solid #ECE8E1 !important; border-left:0 !important; border-radius:calc(14 * var(--r)) !important; font-size:calc(12 * var(--r)) !important; line-height:1.5 !important; color:#5D636C !important; box-shadow:none !important; }
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info::before { display:none !important; content:none !important; }
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info .button { order:2; float:none !important; margin:0 !important; height:calc(34 * var(--r)) !important; padding:0 calc(14 * var(--r)) !important; border-radius:calc(10 * var(--r)) !important; background:#B4532A !important; color:#FFFFFF !important; font:700 calc(12 * var(--r)) Montserrat, sans-serif !important; text-transform:none !important; letter-spacing:0 !important; display:inline-flex !important; align-items:center; box-shadow:none !important; border:0 !important; width:auto !important; min-height:0 !important; }
.woocommerce-MyAccount-content:has(.dv-ds-don) table.woocommerce-orders-table { display:none !important; }
.dv-ds-don { display:flex !important; flex-direction:column; gap:calc(8 * var(--r)); }
.dv-dd { display:flex; flex-direction:column; gap:calc(10 * var(--r)); padding:calc(12 * var(--r)) calc(14 * var(--r)); background:#FFFFFF; border-radius:calc(14 * var(--r)); border:1px solid #ECE8E1; text-decoration:none !important; color:#15191F !important; }
.dv-dd-dau { display:flex; align-items:center; gap:calc(8 * var(--r)); }
.dv-dd-dau b { font-size:calc(13 * var(--r)); font-weight:700; }
.dv-dd-dau > span { font-size:calc(11 * var(--r)); color:#8A8F96; }
.dv-dd-dau em { margin-left:auto; font-style:normal; font-size:calc(10 * var(--r)); font-weight:700; padding:calc(3 * var(--r)) calc(8 * var(--r)); border-radius:calc(999 * var(--r)); white-space:nowrap; }
.dv-dd-mon { display:flex; align-items:center; gap:calc(10 * var(--r)); min-width:0; }
.dv-dd-anh { display:flex; flex:none; }
.dv-dd-anh img { width:calc(36 * var(--r)); height:calc(36 * var(--r)); object-fit:contain; border:1px solid #ECE8E1; border-radius:calc(8 * var(--r)); background:#FFFFFF; padding:calc(2 * var(--r)); margin-left:calc(-6 * var(--r)); }
.dv-dd-anh img:first-child { margin-left:0; }
.dv-dd-ten { flex:1; min-width:0; font-size:calc(12 * var(--r)); font-weight:600; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dv-dd-ten i { font-style:normal; font-weight:500; color:#8A8F96; }
.dv-dd-cuoi { display:flex; align-items:center; justify-content:space-between; gap:calc(10 * var(--r)); padding-top:calc(10 * var(--r)); border-top:1px solid #F0ECE6; }
.dv-dd-cuoi > span:first-child { display:flex; align-items:baseline; gap:calc(6 * var(--r)); }
.dv-dd-cuoi b, .dv-dd-cuoi b * { font-size:calc(14 * var(--r)); font-weight:800; color:#10294A; }
.dv-dd-cuoi i { font-style:normal; font-size:calc(11 * var(--r)); color:#8A8F96; }
.dv-dd-xem { height:calc(32 * var(--r)); padding:0 calc(16 * var(--r)); border-radius:calc(10 * var(--r)); background:#B4532A; color:#FFFFFF; font-size:calc(12 * var(--r)); font-weight:700; display:flex; align-items:center; }
body.woocommerce-account .woocommerce-pagination { display:flex !important; gap:calc(8 * var(--r)); justify-content:space-between; margin:calc(10 * var(--r)) 0 0 !important; }
body.woocommerce-account .woocommerce-pagination .button { height:calc(36 * var(--r)) !important; padding:0 calc(14 * var(--r)) !important; border-radius:calc(10 * var(--r)) !important; background:#FFFFFF !important; border:1px solid #E3DED6 !important; color:#15191F !important; font:600 calc(12 * var(--r)) Montserrat, sans-serif !important; text-transform:none !important; display:inline-flex !important; align-items:center; box-shadow:none !important; }
}


/* ==================================================================
   12. TÀI KHOẢN — ĐỊA CHỈ · ĐĂNG NHẬP · THÔNG TIN TÀI KHOẢN (anh 28/10 tối: "sửa lại").
       Thẻ trắng bo 14, ô nhập 44 viền mảnh, nút chính đất nung chữ thường, bỏ chữ nghiêng, lề đều.
   ================================================================== */
@media (max-width: 767px) {
/* Trang đăng nhập (chưa đăng nhập: không có menu tài khoản) */
body.woocommerce-account:not(.logged-in) .dh-ruot > .woocommerce { padding:calc(10 * var(--r)) calc(12 * var(--r)) calc(16 * var(--r)) !important; margin:0 !important; max-width:none !important; }
body.woocommerce-account:not(.logged-in) .dh-ruot > .woocommerce > h2 { margin:calc(4 * var(--r)) calc(4 * var(--r)) calc(8 * var(--r)) !important; padding:0 !important; font-size:calc(11 * var(--r)) !important; font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:#8A8F96 !important; }
body.woocommerce-account:not(.logged-in) .dh-ruot > p, body.woocommerce-account:not(.logged-in) .dh-ruot > .woocommerce > p { margin:calc(10 * var(--r)) calc(4 * var(--r)) 0 !important; padding:0 calc(12 * var(--r)) !important; font-size:calc(12 * var(--r)) !important; line-height:1.55 !important; color:#5D636C !important; }
body.woocommerce-account:not(.logged-in) .dh-ruot > p a, body.woocommerce-account:not(.logged-in) .dh-ruot > .woocommerce > p a { color:#10294A !important; font-weight:600 !important; }

/* Thẻ form chung */
body.woocommerce-account form.woocommerce-form-login, body.woocommerce-account .woocommerce-MyAccount-content form { background:#FFFFFF !important; border:1px solid #ECE8E1 !important; border-radius:calc(14 * var(--r)) !important; padding:calc(14 * var(--r)) !important; margin:0 !important; box-shadow:none !important; }
body.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper { display:flex !important; flex-wrap:wrap !important; gap:0 calc(8 * var(--r)) !important; }
body.woocommerce-account .woocommerce form .form-row { float:none !important; width:100% !important; flex:1 1 100%; margin:0 0 calc(10 * var(--r)) !important; padding:0 !important; }
body.woocommerce-account .woocommerce form .form-row-first, body.woocommerce-account .woocommerce form .form-row-last { flex:1 1 calc(50% - calc(4 * var(--r))) !important; width:auto !important; min-width:0; }
body.woocommerce-account .woocommerce form .clear { display:none !important; }
body.woocommerce-account .woocommerce form label { display:block !important; margin:0 0 calc(6 * var(--r)) !important; font-size:calc(12 * var(--r)) !important; font-weight:600 !important; color:#15191F !important; line-height:1.4 !important; text-transform:none !important; }
body.woocommerce-account .woocommerce form label .required { color:#B4532A !important; text-decoration:none !important; }
body.woocommerce-account .woocommerce form .input-text, body.woocommerce-account .woocommerce form input[type=text], body.woocommerce-account .woocommerce form input[type=email], body.woocommerce-account .woocommerce form input[type=password], body.woocommerce-account .woocommerce form input[type=tel], body.woocommerce-account .woocommerce form select:not(.select2-hidden-accessible) { width:100% !important; height:calc(44 * var(--r)) !important; border:1px solid #DCD6CD !important; border-radius:calc(12 * var(--r)) !important; padding:0 calc(14 * var(--r)) !important; font:500 calc(13 * var(--r)) Montserrat, sans-serif !important; color:#15191F !important; background:#FFFFFF !important; box-shadow:none !important; outline:none; }
body.woocommerce-account .woocommerce form .password-input { display:block !important; position:relative !important; }
body.woocommerce-account .woocommerce form .password-input input { padding-right:calc(44 * var(--r)) !important; }
body.woocommerce-account .woocommerce form .show-password-input { position:absolute !important; right:calc(6 * var(--r)) !important; top:50% !important; transform:translateY(-50%) !important; width:calc(32 * var(--r)) !important; height:calc(32 * var(--r)) !important; margin:0 !important; }
body.woocommerce-account .woocommerce form em, body.woocommerce-account .woocommerce form .description { display:block; margin-top:calc(4 * var(--r)); font-style:normal !important; font-size:calc(11 * var(--r)) !important; line-height:1.45 !important; color:#8A8F96 !important; }
body.woocommerce-account .woocommerce form fieldset { flex:1 1 100%; margin:calc(4 * var(--r)) 0 calc(12 * var(--r)) !important; padding:calc(10 * var(--r)) calc(12 * var(--r)) calc(2 * var(--r)) !important; border:1px solid #ECE8E1 !important; border-radius:calc(14 * var(--r)) !important; background:#FBFAF8 !important; }
body.woocommerce-account .woocommerce form fieldset legend { padding:0 calc(6 * var(--r)) !important; font-size:calc(12 * var(--r)) !important; font-weight:700 !important; color:#15191F !important; }
body.woocommerce-account .woocommerce form button[type=submit], body.woocommerce-account .woocommerce form .woocommerce-Button, body.woocommerce-account .woocommerce form .woocommerce-form-login__submit { width:100% !important; height:calc(46 * var(--r)) !important; margin:calc(4 * var(--r)) 0 0 !important; padding:0 calc(16 * var(--r)) !important; border:0 !important; border-radius:calc(14 * var(--r)) !important; background:#B4532A !important; color:#FFFFFF !important; font:700 calc(14 * var(--r)) Montserrat, sans-serif !important; text-transform:none !important; letter-spacing:0 !important; box-shadow:none !important; float:none !important; }
body.woocommerce-account form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:calc(12 * var(--r)) !important; margin-bottom:calc(6 * var(--r)) !important; }
body.woocommerce-account .woocommerce-form-login__rememberme { display:flex !important; align-items:center !important; gap:calc(8 * var(--r)) !important; margin:0 !important; font-size:calc(12 * var(--r)) !important; font-weight:500 !important; }
body.woocommerce-account .woocommerce-form-login__rememberme input { width:calc(18 * var(--r)) !important; height:calc(18 * var(--r)) !important; margin:0 !important; accent-color:#B4532A; }
body.woocommerce-account .woocommerce-LostPassword, body.woocommerce-account .lost_password { margin:calc(4 * var(--r)) 0 0 !important; font-size:calc(12 * var(--r)) !important; }
body.woocommerce-account .woocommerce-LostPassword a, body.woocommerce-account .lost_password a { color:#10294A !important; font-weight:600 !important; text-decoration:underline !important; }

/* Địa chỉ */
body.woocommerce-account .woocommerce-MyAccount-content > p { margin:0 calc(4 * var(--r)) calc(10 * var(--r)) !important; font-size:calc(12 * var(--r)) !important; line-height:1.55 !important; color:#5D636C !important; }
body.woocommerce-account .woocommerce-Addresses { display:flex !important; flex-direction:column !important; gap:calc(8 * var(--r)) !important; margin:0 !important; }
body.woocommerce-account .woocommerce-Addresses::before, body.woocommerce-account .woocommerce-Addresses::after { display:none !important; content:none !important; }
body.woocommerce-account .woocommerce-Address { float:none !important; width:auto !important; max-width:none !important; margin:0 !important; padding:calc(12 * var(--r)) calc(14 * var(--r)) !important; background:#FFFFFF !important; border:1px solid #ECE8E1 !important; border-radius:calc(14 * var(--r)) !important; }
body.woocommerce-account .woocommerce-Address-title { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:calc(8 * var(--r)) !important; margin:0 0 calc(8 * var(--r)) !important; }
body.woocommerce-account .woocommerce-Address-title::before, body.woocommerce-account .woocommerce-Address-title::after { display:none !important; content:none !important; }
body.woocommerce-account .woocommerce .woocommerce-Address-title h2, body.woocommerce-account .woocommerce .woocommerce-Address-title h3 { margin:0 !important; font-size:calc(13 * var(--r)) !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; color:#15191F !important; }
body.woocommerce-account .woocommerce-Address-title a.edit { float:none !important; flex:none; height:calc(28 * var(--r)) !important; padding:0 calc(12 * var(--r)) !important; border-radius:calc(999 * var(--r)) !important; border:1px solid #E3DED6 !important; display:inline-flex !important; align-items:center; font-size:calc(12 * var(--r)) !important; font-weight:600 !important; color:#B4532A !important; text-decoration:none !important; background:#FFFFFF !important; }
body.woocommerce-account .woocommerce-Address address { margin:0 !important; font-style:normal !important; font-size:calc(12 * var(--r)) !important; line-height:1.6 !important; color:#3A4049 !important; }
/* Quên mật khẩu, form trong trang con, dòng nút */
body.woocommerce-account form.woocommerce-ResetPassword { background:#FFFFFF !important; border:1px solid #ECE8E1 !important; border-radius:calc(14 * var(--r)) !important; padding:calc(14 * var(--r)) !important; margin:0 !important; }
body.woocommerce-account form.woocommerce-ResetPassword > p:first-child { margin:0 0 calc(12 * var(--r)) !important; font-size:calc(12 * var(--r)) !important; line-height:1.55 !important; color:#5D636C !important; }
body.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > p:not(.form-row), body.woocommerce-account .woocommerce-MyAccount-content form > p:last-of-type { flex:1 1 100% !important; width:100% !important; margin:0 !important; }
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content form > h2, body.woocommerce-account .woocommerce .woocommerce-MyAccount-content form > h3 { margin:0 0 calc(12 * var(--r)) !important; font-size:calc(14 * var(--r)) !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; color:#15191F !important; }
body.woocommerce-account .woocommerce form .select2-container .select2-selection--single { height:calc(44 * var(--r)) !important; border:1px solid #DCD6CD !important; border-radius:calc(12 * var(--r)) !important; display:flex !important; align-items:center; }
body.woocommerce-account .woocommerce form .select2-container .select2-selection__rendered { padding:0 calc(14 * var(--r)) !important; font-size:calc(13 * var(--r)) !important; color:#15191F !important; line-height:calc(44 * var(--r)) !important; }
body.woocommerce-account .woocommerce form .select2-container .select2-selection__arrow { height:calc(42 * var(--r)) !important; right:calc(8 * var(--r)) !important; }
}

/* ==================================================================
   13. TÀI KHOẢN — TỔNG QUAN (anh 01/11 "sửa theo đề xuất": trang này còn kiểu cũ xanh #10294A,
       tiêu đề viết hoa). Cùng khuôn mục 11–12: thẻ trắng bo 14 viền #ECE8E1, chữ navy, nút/link
       đất nung, thẻ đơn = .dv-dd của trang Đơn hàng. Mẫu: woocommerce/myaccount/dashboard.php.
   ================================================================== */
@media (max-width: 767px) {
.dv-tq { display:flex; flex-direction:column; gap:calc(8 * var(--r)); font-family:Montserrat, sans-serif; color:#15191F; }
/* lặp .dv-tq để thắng luật chung body:not(.dh-tt-gon) h2:not(.dh-bai h2) { uppercase } */
.dv-tq.dv-tq.dv-tq h2, .dv-tq.dv-tq.dv-tq h3 { margin:0 !important; padding:0 !important; font-family:Montserrat, sans-serif !important; text-transform:none !important; letter-spacing:0 !important; color:#15191F !important; line-height:1.3 !important; }
.dv-tq-chao { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:calc(12 * var(--r)); padding:calc(14 * var(--r)); background:#FFFFFF; border:1px solid #ECE8E1; border-radius:calc(14 * var(--r)); }
.dv-tq-chu { width:calc(44 * var(--r)); height:calc(44 * var(--r)); border-radius:50%; background:#10294A; color:#FFFFFF; display:grid; place-items:center; font-size:calc(18 * var(--r)); font-weight:800; }
.dv-tq-ai { display:flex; flex-direction:column; gap:calc(2 * var(--r)); min-width:0; }
.dv-tq-ai b { font-size:calc(14 * var(--r)); font-weight:700; color:#10294A; }
.dv-tq-ai span { font-size:calc(12 * var(--r)); color:#8A8F96; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dv-tq-ke { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; height:calc(40 * var(--r)); padding:0 calc(12 * var(--r)) 0 calc(14 * var(--r)); border:1px solid #E3DED6; border-radius:calc(12 * var(--r)); font-size:calc(13 * var(--r)); font-weight:700; color:#B4532A !important; text-decoration:none !important; background:#FBFAF8; }
.dv-tq-ke svg { width:calc(16 * var(--r)); height:calc(16 * var(--r)); }
.dv-tq-so { display:grid; grid-template-columns:1fr 1fr; gap:calc(8 * var(--r)); }
.dv-tq-so > div { display:flex; flex-direction:column; gap:calc(2 * var(--r)); padding:calc(12 * var(--r)) calc(14 * var(--r)); background:#FFFFFF; border:1px solid #ECE8E1; border-radius:calc(14 * var(--r)); min-width:0; }
.dv-tq-so span { font-size:calc(12 * var(--r)); font-weight:600; color:#5D636C; }
.dv-tq-so b { font-size:calc(18 * var(--r)); font-weight:800; color:#10294A; line-height:1.25; }
.dv-tq-so i { font-style:normal; font-size:calc(11 * var(--r)); line-height:1.4; color:#8A8F96; }
.dv-tq-dau { display:flex; align-items:baseline; justify-content:space-between; gap:calc(8 * var(--r)); margin:calc(8 * var(--r)) calc(4 * var(--r)) 0; }
.dv-tq.dv-tq .dv-tq-dau h2 { font-size:calc(14 * var(--r)) !important; font-weight:700 !important; }
.dv-tq-dau a, .dv-tq-tde a { font-size:calc(12 * var(--r)); font-weight:600; color:#B4532A !important; text-decoration:none !important; }
.dv-tq-the { display:flex; flex-direction:column; gap:calc(8 * var(--r)); padding:calc(12 * var(--r)) calc(14 * var(--r)); background:#FFFFFF; border:1px solid #ECE8E1; border-radius:calc(14 * var(--r)); }
.dv-tq-the p { margin:0 !important; font-size:calc(12 * var(--r)) !important; line-height:1.6 !important; color:#3A4049 !important; }
.dv-tq-tde { display:flex; align-items:center; justify-content:space-between; gap:calc(8 * var(--r)); }
.dv-tq.dv-tq .dv-tq-tde h3 { font-size:calc(13 * var(--r)) !important; font-weight:700 !important; }
.dv-tq-tde a { height:calc(28 * var(--r)); padding:0 calc(12 * var(--r)); border-radius:calc(999 * var(--r)); border:1px solid #E3DED6; display:inline-flex; align-items:center; background:#FFFFFF; }
.dv-tq-nut { display:flex; gap:calc(8 * var(--r)); }
.dv-tq-nut a { flex:1; height:calc(40 * var(--r)); border-radius:calc(12 * var(--r)); display:flex; align-items:center; justify-content:center; font-size:calc(13 * var(--r)); font-weight:700; text-decoration:none !important; }
.dv-tq-chinh { background:#B4532A; color:#FFFFFF !important; }
.dv-tq-phu { background:#FFFFFF; border:1px solid #E3DED6; color:#15191F !important; }
}

/* 28/10 khuya — ngăn ☰ thành tấm phủ kín (anh gửi 2 ảnh trang Tôi: menu chỉ phủ một phần, ô đăng nhập + nút ĐĂNG NHẬP lộ ra
   và chồng lên đáy menu). Cố định từ đáy đầu trang (JS đặt --dv-menu-top) xuống đáy màn; thanh đáy 5 nút (z 60) vẫn nằm trên;
   khoá cuộn trang phía sau khi menu mở. */
.dv-menu:not([hidden]) { position:fixed !important; left:0 !important; right:0 !important; top:var(--dv-menu-top, calc(60 * var(--r))) !important; bottom:0 !important; z-index:55 !important; max-height:none !important; overflow:auto !important; overscroll-behavior:contain; padding-bottom:calc(84 * var(--r)) !important; box-shadow:none !important; }
body.dv-mo-menu { overflow:hidden !important; }