/* ============================================================ v2-detail.css - Trang CHI TIET SAN PHAM (giao dien v2) Chep tu layout-v2/nuochoaoto-chi-tiet-san-pham.html. Hai nguyen tac: 1. 43 rule dung chung (header, footer, logo, gio hang, the san pham...) da co trong v2-base.css -> KHONG chep lai. Mot module mot nguon CSS. 2. Phan con lai boc trong .v2-detail. Bat buoc, vi mockup dat lai y nghia cho vai ten lop da co: .buy o day la cot mua ben phai (v2-base: nut vang trong the), .pay la mot dong phuong thuc thanh toan (v2-base: hang icon). Khong boc thi hai trang de len nhau. ============================================================ */ :root{--navy:#12294F;--navy-2:#0B1B36;--navy-soft:#1E3B69; --gold:#F2A81D;--gold-2:#FFC94A;--gold-tint:#FFF6E0; --red:#D1131E;--red-2:#A50D17;--red-soft:#FFF0F0; --green:#137A4A;--green-tint:#E9F7F0; --ink:#1B2430;--ink-2:#4A5666;--ink-3:#7A8698; --line:#E4E7EC;--line-2:#EFF1F4; --page:#F2F4F7;--card:#FFFFFF;--chip:#F7F8FA; --shadow:0 1px 2px rgba(18,41,79,.06),0 6px 18px rgba(18,41,79,.06); --r:12px;--r-sm:8px;--w:1220px;} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]){--ink:#E8ECF3;--ink-2:#AEB8C7;--ink-3:#8590A1;--line:#2A3446;--line-2:#222B3A; --page:#0E1520;--card:#151E2C;--chip:#1B2434;--gold-tint:#2A2413;--red-soft:#2C1517;--green-tint:#12271E; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);} } :root[data-theme="dark"]{--ink:#E8ECF3;--ink-2:#AEB8C7;--ink-3:#8590A1;--line:#2A3446;--line-2:#222B3A;--page:#0E1520;--card:#151E2C;--chip:#1B2434;--gold-tint:#2A2413;--red-soft:#2C1517;--green-tint:#12271E} .v2-detail .panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:12px} .v2-detail .panel h2{margin:0 0 12px;font-size:16px;font-weight:700} .v2-detail .crumb{padding:12px 0 4px;font-size:12.5px;color:var(--ink-3)} .v2-detail .titlerow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px} .v2-detail .titlerow h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.25} .v2-detail .titlerow .meta{font-size:12.5px;color:var(--ink-3);display:flex;gap:12px;align-items:center} .v2-detail .titlerow .meta .st{color:#F3A712;font-weight:700} .v2-detail .titlerow .jump{margin-left:auto;display:flex;gap:14px;font-size:13px;color:var(--navy);font-weight:600} :root[data-theme="dark"] .titlerow .jump{color:var(--gold-2)} /* minmax(0,1fr) thay cho 1fr cua mockup: o grid, "1fr" co chieu rong toi thieu la auto nen o khong co lai duoi kich thuoc noi dung. Mockup khong lo vi noi dung la SVG tu co gian; ben nay la anh that va bang thong so nen o trai bi keo rong 982px o moi be ngang man hinh, ca trang tran ngang. Kich thuoc thiet ke (1fr | 388px) giu nguyen. */ .v2-detail .cols-dt{display:grid;grid-template-columns:minmax(0,1fr) 388px;gap:14px;align-items:start} .v2-detail .cols-dt>*{min-width:0} /* Desktop: dung bo cuc mockup - anh va noi dung cung cot trai, cot mua ben phai keo dai het trang. Luoi 2 cot, hang 1 = anh + cot mua (span 2 hang). */ .v2-detail .v2-stage-wrap{grid-column:1;grid-row:1} .v2-detail .v2-noidung{grid-column:1;grid-row:2} .v2-detail .buycol-v2{grid-column:2;grid-row:1/span 2} @media(max-width:980px){ /* Mobile: mot cot, thu tu ANH -> COT MUA -> NOI DUNG. Truoc day cot mua nam cuoi nen phai cuon 3.862px (gan 6 man hinh) moi thay gia. Dien May Xanh dat gia ngay duoi anh - lam theo. */ .v2-detail .cols-dt{grid-template-columns:minmax(0,1fr)} .v2-detail .v2-stage-wrap{grid-column:1;grid-row:auto;order:1} .v2-detail .buycol-v2{grid-column:1;grid-row:auto;order:2} .v2-detail .v2-noidung{grid-column:1;grid-row:auto;order:3} } .v2-detail .stage{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:12px;position:relative} .v2-detail .frame{aspect-ratio:4/3;border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(160deg,#EEF2F8,#DFE6F0)} :root[data-theme="dark"] .frame{background:linear-gradient(160deg,#1C2636,#131B27)} .v2-detail .frame svg{width:100%;height:100%;display:block} .v2-detail .counter{position:absolute;right:20px;bottom:20px;background:rgba(11,27,54,.72);color:#fff;font-size:11.5px;border-radius:999px;padding:4px 11px} .v2-detail .thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px} .v2-detail .thumbs button{flex:0 0 62px;height:62px;border-radius:9px;border:1.5px solid var(--line);background:var(--chip);overflow:hidden;padding:4px} .v2-detail .thumbs button.on{border-color:var(--gold);background:var(--gold-tint)} .v2-detail .thumbs svg{width:100%;height:100%} .v2-detail .commit{display:grid;grid-template-columns:1fr 1fr;gap:14px} .v2-detail .commit .c{display:flex;gap:10px;font-size:12.5px;color:var(--ink-2);line-height:1.5} .v2-detail .commit .c svg{flex:0 0 auto;color:var(--navy)} :root[data-theme="dark"] .commit .c svg{color:var(--gold-2)} .v2-detail .commit .c b{color:var(--ink)} .v2-detail .commit .c a{color:var(--navy);font-weight:600} :root[data-theme="dark"] .commit .c a{color:var(--gold-2)} @media(max-width:700px){ .v2-detail .commit{grid-template-columns:1fr} } .v2-detail .refbox{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px} .v2-detail .refbox .th{width:54px;height:62px;border-radius:8px;background:var(--chip);display:grid;place-items:center;flex:0 0 auto} .v2-detail .refbox .th svg{width:100%;height:100%} .v2-detail .refbox .nm{font-size:13px;font-weight:500} .v2-detail .refbox .pr{font-size:13px;margin-top:2px} .v2-detail .refbox .pr b{color:var(--red);font-weight:800} .v2-detail .refbox .pr .off{color:var(--red);font-weight:700} .v2-detail .refbox small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px} .v2-detail .spectabs{display:flex;gap:8px;justify-content:center;margin:14px 0} .v2-detail .spectabs button{border:1px solid var(--navy);color:var(--navy);border-radius:var(--r-sm);padding:9px 20px;font-size:13px;font-weight:600;background:var(--card)} .v2-detail .spectabs button.on{background:var(--navy);color:#fff} :root[data-theme="dark"] .spectabs button{color:var(--gold-2);border-color:var(--gold-2)} :root[data-theme="dark"] .spectabs button.on{background:var(--gold);color:var(--navy-2);border-color:var(--gold)} .v2-detail .acc details{border-bottom:1px solid var(--line-2)} .v2-detail .acc summary{padding:13px 2px;font-weight:700;font-size:14px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center} .v2-detail .acc summary::-webkit-details-marker{display:none} .v2-detail .acc summary::after{content:"⌄";color:var(--ink-3);font-size:17px;line-height:1} .v2-detail .acc details[open] summary::after{transform:rotate(180deg)} .v2-detail .acc table{width:100%;border-collapse:collapse;margin-bottom:10px} .v2-detail .acc td{padding:9px 4px;border-bottom:1px solid var(--line-2);font-size:13px;vertical-align:top} .v2-detail .acc td:first-child{width:44%;color:var(--navy);font-weight:500} :root[data-theme="dark"] .acc td:first-child{color:var(--gold-2)} .v2-detail .acc tr:nth-child(even) td:first-child{color:var(--ink);font-weight:600} /* ------------------------------------------------------------ Dinh dang noi dung CMS trong tab "Thong tin san pham". Mockup chi khai .prose p va .prose h3 - noi dung that tu TinyMCE co ca H2/H3/H4, ul/ol, bang, anh, trich dan. Khong khai thi cac the do roi ve mac dinh trinh duyet, nhin lac hoan toan voi phan con lai cua trang. Kieu chu bam theo .cc .article-body (cate-content.css) da dung cho trang danh muc: dau tron vang cho ul, so tron cho ol, H2 co gach vang, H3 co vien trai vang. Doi bien --cc-* sang bien cua v2 de dong bo mau. ------------------------------------------------------------ */ .v2-detail .prose{font-size:14.5px;line-height:1.85;color:var(--ink-2);overflow-wrap:anywhere} /* Gioi han 78ch de doc chu de hon. Doan CHI CHUA ANH thi khong gioi han - khung hep hon khoi bao (712 vs 758) nen anh can giua bi lech 23px sang trai. :has() duoc moi trinh duyet hien nay ho tro. */ .v2-detail .prose>p,.v2-detail .prose>ul,.v2-detail .prose>ol, .v2-detail .prose>h2,.v2-detail .prose>h3,.v2-detail .prose>h4{max-width:78ch} @media(max-width:700px){.v2-detail .prose{font-size:14px}.v2-detail .prose h2{font-size:18px} .v2-detail .prose h3{font-size:15.5px}} .v2-detail .prose>p:has(>img:only-child){max-width:none;text-align:center} /* Noi dung CMS co cho chen anh nham vao trong the H3 (loi nhap lieu). Xu ly de anh van can giua, khong de no an theo padding-left cua H3. */ .v2-detail .prose h2:has(>img:only-child), .v2-detail .prose h3:has(>img:only-child), .v2-detail .prose h4:has(>img:only-child){max-width:none;padding-left:0; border-left:0;text-align:center;margin:14px 0} .v2-detail .prose h2:has(>img:only-child)::after{display:none} .v2-detail .prose p{margin:0 0 14px} /* Tieu de */ .v2-detail .prose h2,.v2-detail .prose h3,.v2-detail .prose h4{color:var(--ink)} .v2-detail .prose h2,.v2-detail .prose h3,.v2-detail .prose h4, .v2-detail .prose h5,.v2-detail .prose h6{font-weight:800;letter-spacing:-.2px} /* H2 = moc lon cua bai: vach vang ben trai, giong trang bai viet v2 (v2-blog.css) */ .v2-detail .prose h2{font-size:20px;line-height:1.35;letter-spacing:-.4px; margin:30px 0 12px;padding-left:13px;border-left:4px solid var(--gold)} .v2-detail .prose h2:first-child{margin-top:4px} /* H3 = muc con: chu dam + gach vang ngan phia duoi, khong vien trai de khong nham voi H2 */ .v2-detail .prose h3{font-size:16.5px;line-height:1.45;margin:22px 0 9px} .v2-detail .prose h3::after{content:"";display:block;width:36px;height:2px; background:var(--gold);margin-top:6px;border-radius:2px} .v2-detail .prose h4{font-size:15px;font-weight:700;margin:18px 0 7px} .v2-detail .prose h5,.v2-detail .prose h6{font-size:14px;font-weight:700;margin:14px 0 6px; color:var(--gold-deep)} .v2-detail .prose h3:has(>img:only-child)::after{display:none} /* Danh sach: bo dau cham mac dinh, dung dau tron vang / so tron */ .v2-detail .prose ul,.v2-detail .prose ol{margin:0 0 16px;padding:0;list-style:none} .v2-detail .prose li{position:relative;padding-left:21px;margin-bottom:8px;line-height:1.8} .v2-detail .prose li>p{margin:0} .v2-detail .prose ul>li::before{content:"";position:absolute;left:4px;top:.72em; width:6px;height:6px;border-radius:50%;background:var(--gold)} .v2-detail .prose ol{counter-reset:v2ol} .v2-detail .prose ol>li{counter-increment:v2ol;padding-left:28px;margin-bottom:8px} .v2-detail .prose ol>li{padding-left:32px} .v2-detail .prose ol>li::before{content:counter(v2ol);position:absolute;left:0;top:.15em; width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff; font-size:11.5px;font-weight:800;display:grid;place-items:center} .v2-detail .prose li>ul,.v2-detail .prose li>ol{margin:8px 0 0} /* Danh sach long nhau: dau tron rong de phan biet cap */ .v2-detail .prose li ul>li::before{background:transparent;border:1.5px solid var(--gold); width:5px;height:5px} /* Chu dam, lien ket, anh */ .v2-detail .prose strong,.v2-detail .prose b{color:var(--ink);font-weight:700} .v2-detail .prose a{color:var(--gold-deep);font-weight:600;text-decoration:underline; text-underline-offset:3px} .v2-detail .prose a:hover{color:var(--gold)} /* Anh trong noi dung CMS: can GIUA. Chi nham anh trong .prose (noi dung TinyMCE) - khong dung selector chung cho .v2-detail img, vi trang con nhieu anh khac phai giu nguyen: anh thu vien (.v2-stage-img), thumbnail (#thumbs), the san pham lien quan, o loi thay the (.refbox .th). Cac anh do la icon/thumbnail, can giua se vo bo cuc. */ .v2-detail .prose img{max-width:100%;height:auto;border-radius:12px; margin:16px auto;display:block;box-shadow:0 2px 12px rgba(18,41,79,.08)} /* Anh kem chu thich (figure cua TinyMCE / WordPress) */ .v2-detail .prose figure,.v2-detail .prose .wp-caption{margin:16px auto;max-width:100%!important; text-align:center} .v2-detail .prose figure img,.v2-detail .prose .wp-caption img{margin:0 auto 8px} .v2-detail .prose figcaption,.v2-detail .prose .wp-caption-text{font-size:12.5px; color:var(--ink-3);font-style:italic;line-height:1.6} /* Video nhung (YouTube) giu dung ti le, khong tran khung */ .v2-detail .prose iframe,.v2-detail .prose video{display:block;max-width:100%;width:100%; height:auto;aspect-ratio:16/9;border:0;border-radius:12px;margin:16px 0} .v2-detail .prose hr{border:0;border-top:1px solid var(--line);margin:24px 0} /* TinyMCE tu gan aligncenter/alignleft/alignright - ton trong lua chon cua nguoi bien tap thay vi ep tat ca ve giua. */ .v2-detail .prose img.alignleft{margin-left:0;margin-right:auto} .v2-detail .prose img.alignright{margin-left:auto;margin-right:0} .v2-detail .prose img.aligncenter{margin-left:auto;margin-right:auto} /* Anh nho (icon chen trong cau) giu nguyen dong, khong tach khoi */ .v2-detail .prose p>img:only-child{margin-top:14px;margin-bottom:14px} /* Bang: noi dung CMS hay co bang thong so */ /* Trich dan */ .v2-detail .prose blockquote{margin:16px 0;padding:12px 18px;border-left:4px solid var(--gold); background:var(--gold-tint);border-radius:0 10px 10px 0;color:var(--ink);font-style:italic} .v2-detail .prose blockquote p:last-child{margin-bottom:0} /* Ten .collapse va .fade DUNG voi Bootstrap (bootstrap.min.css nap sau): ".collapse:not(.show){display:none}" an han khoi mo ta san pham - noi dung co 2983 ky tu ma khoi cao 0px. Mockup khong dung Bootstrap nen khong lo. Dat ten rieng .v2-thugon / .v2-mo-dan. Cung loai loi voi .box, .cols, .opt. */ .v2-detail .v2-thugon{max-height:230px;overflow:hidden;position:relative} .v2-detail .v2-thugon.open{max-height:none} .v2-detail .v2-thugon .v2-mo-dan{position:absolute;left:0;right:0;bottom:0;height:70px; background:linear-gradient(transparent,var(--card))} .v2-detail .showall{display:block;margin:10px auto 0;color:var(--navy);font-weight:600;font-size:13px} :root[data-theme="dark"] .showall{color:var(--gold-2)} .v2-detail .rv-head{display:flex;gap:26px;align-items:center;flex-wrap:wrap} .v2-detail .rv-score{text-align:center} .v2-detail .rv-score .n{font-size:40px;font-weight:800;line-height:1} .v2-detail .rv-score .n span{font-size:16px;color:var(--ink-3);font-weight:600} .v2-detail .rv-score small{color:var(--ink-3);font-size:12px} .v2-detail .rv-bars{flex:1;min-width:220px} .v2-detail .rv-bar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)} .v2-detail .rv-bar .tr{flex:1;height:7px;border-radius:99px;background:var(--line-2);overflow:hidden} .v2-detail .rv-bar .fl{height:100%;background:var(--gold)} .v2-detail .rv-write{border:1px solid var(--navy);color:var(--navy);border-radius:var(--r-sm);padding:10px 20px;font-weight:600;font-size:13px} :root[data-theme="dark"] .rv-write{color:var(--gold-2);border-color:var(--gold-2)} .v2-detail .rv-list{margin-top:16px;border-top:1px solid var(--line-2)} .v2-detail .rv{padding:13px 0;border-bottom:1px solid var(--line-2)} .v2-detail .rv .who{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600} .v2-detail .rv .who .av{width:28px;height:28px;border-radius:50%;background:var(--gold-tint);color:var(--navy);display:grid;place-items:center;font-size:12px;font-weight:800} .v2-detail .rv .who .ok{font-size:11px;color:var(--green);background:var(--green-tint);border-radius:5px;padding:2px 7px;font-weight:600} .v2-detail .rv .stars{color:#F3A712;font-size:12px;margin:4px 0 3px} .v2-detail .rv p{margin:0;font-size:13px;color:var(--ink-2);max-width:78ch} .v2-detail .rv .car{font-size:11.5px;color:var(--ink-3);margin-top:4px} .v2-detail .buycol-v2{position:sticky;top:74px;display:flex;flex-direction:column;gap:12px} .v2-detail .vbanner{background:linear-gradient(120deg,#C2101C,#F2A81D);border-radius:var(--r);padding:12px 14px;color:#fff} .v2-detail .vbanner .t{font-weight:800;font-size:16px;letter-spacing:-.3px} .v2-detail .vbanner .t small{display:block;font-weight:600;font-size:11px;color:#FFE6B8;letter-spacing:1px} .v2-detail .vouchers{display:flex;flex-direction:column;gap:7px;margin-top:10px} .v2-detail .vc{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border-radius:8px;padding:7px 9px} .v2-detail .vc .amt{background:var(--gold-2);color:var(--navy-2);font-weight:800;font-size:12.5px;border-radius:6px;padding:4px 9px;white-space:nowrap} .v2-detail .vc .cond{font-size:11.5px;color:#FFE9CF;flex:1;line-height:1.35} .v2-detail .vc .get{background:#fff;color:var(--red);font-weight:800;font-size:11px;border-radius:6px;padding:5px 10px;white-space:nowrap} .v2-detail .box{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px} .v2-detail .opt-lbl{font-size:12.5px;color:var(--ink-3);margin-bottom:7px} .v2-detail .opts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px} .v2-detail .opt{border:1px solid var(--line);border-radius:8px;padding:8px 13px;font-size:12.5px;color:var(--ink-2);text-align:left;line-height:1.3} .v2-detail .opt b{display:block;font-size:13px;color:var(--ink)} .v2-detail .opt small{color:var(--ink-3);font-size:11px} .v2-detail .opt.on{border-color:var(--navy);background:var(--gold-tint);color:var(--navy)} :root[data-theme="dark"] .opt.on{border-color:var(--gold-2);background:rgba(242,168,29,.12)} .v2-detail .opt.on b{color:var(--navy)} :root[data-theme="dark"] .opt.on b{color:var(--gold-2)} .v2-detail .opt:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through} .v2-detail .getvc{width:100%;border:1px dashed var(--red);color:var(--red);border-radius:8px;padding:9px;font-size:12.5px;font-weight:600;margin-bottom:10px} .v2-detail .loc{font-size:12.5px;color:var(--ink-2);margin-bottom:12px} .v2-detail .loc b{color:var(--navy);font-weight:600} :root[data-theme="dark"] .loc b{color:var(--gold-2)} .v2-detail .pricebox{border-top:1px solid var(--line-2);padding-top:12px} .v2-detail .cheap{color:var(--red);font-size:12.5px;font-weight:600} .v2-detail .pbig{font-size:29px;font-weight:800;color:var(--red);letter-spacing:-.8px;line-height:1.1} .v2-detail .pold{font-size:13px;color:var(--ink-3);margin-top:2px} .v2-detail .pold s{margin-right:7px} .v2-detail .pold .off{color:var(--red);font-weight:700} .v2-detail .save{display:inline-block;margin-top:8px;background:var(--red-soft);color:var(--red);font-size:12px;font-weight:700;border-radius:6px;padding:4px 9px} .v2-detail .urgency{margin-top:9px;font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:7px} .v2-detail .urgency .dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto} /* Gia theo dung tich: JS an/hien dong gia goc, tiet kiem, ton kho bang thuoc tinh hidden. Cac khoi tren tu dat display nen phai ep lai, khong thi hidden khong co tac dung. */ .v2-detail [hidden]{display:none !important} .v2-detail .cdline{margin-top:8px;background:var(--navy);color:#fff;border-radius:8px;padding:8px 11px;font-size:12px;display:flex;align-items:center;gap:7px} .v2-detail .cdline .num{background:var(--gold);color:var(--navy-2);font-weight:800;border-radius:5px;padding:2px 6px;font-variant-numeric:tabular-nums} .v2-detail .svc{border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:9px;display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left} .v2-detail .svc.on{border-color:var(--navy);background:var(--gold-tint)} :root[data-theme="dark"] .svc.on{border-color:var(--gold-2);background:rgba(242,168,29,.1)} .v2-detail .svc .radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink-3);flex:0 0 auto;margin-top:2px;display:grid;place-items:center} .v2-detail .svc.on .radio{border-color:var(--navy)} .v2-detail .svc.on .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--navy)} :root[data-theme="dark"] .svc.on .radio{border-color:var(--gold-2)} :root[data-theme="dark"] .svc.on .radio::after{background:var(--gold-2)} .v2-detail .svc .body{flex:1} .v2-detail .svc .row1{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:600} .v2-detail .svc .row1 .pr{color:var(--red);font-weight:800;white-space:nowrap} .v2-detail .svc .row1 .pr s{color:var(--ink-3);font-weight:400;font-size:11.5px;margin-right:5px} .v2-detail .svc .desc{font-size:11.5px;color:var(--ink-2);margin-top:3px;line-height:1.45} .v2-detail .km-title{font-weight:700;font-size:14px;margin:4px 0 2px} .v2-detail .km-note{font-size:11.5px;color:var(--ink-3);margin-bottom:8px} .v2-detail .km{counter-reset:k;list-style:none;margin:0;padding:0} .v2-detail .km li{counter-increment:k;position:relative;padding:6px 0 6px 25px;font-size:12.5px;color:var(--ink-2);line-height:1.5;border-bottom:1px dashed var(--line-2)} .v2-detail .km li::before{content:counter(k);position:absolute;left:0;top:7px;width:17px;height:17px;border-radius:50%;background:var(--gold-tint);color:var(--navy);font-size:10.5px;font-weight:800;display:grid;place-items:center} :root[data-theme="dark"] .km li::before{color:var(--gold-2)} .v2-detail .km li b{color:var(--ink)} .v2-detail .km-more{display:block;margin:9px auto 0;color:var(--navy);font-weight:600;font-size:12.5px} :root[data-theme="dark"] .km-more{color:var(--gold-2)} .v2-detail .km.short li:nth-child(n+4){display:none} .v2-detail .ship{border:1px solid var(--line);border-radius:10px;padding:11px;font-size:12.5px;color:var(--ink-2);line-height:1.6} .v2-detail .ship b{color:var(--ink)} .v2-detail .ship .pick{color:var(--navy);font-weight:600} :root[data-theme="dark"] .ship .pick{color:var(--gold-2)} .v2-detail .paylist{display:flex;flex-direction:column;gap:7px} .v2-detail .pay{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:12.5px;text-align:left;width:100%} .v2-detail .pay.on{border-color:var(--navy);background:var(--gold-tint)} :root[data-theme="dark"] .pay.on{border-color:var(--gold-2);background:rgba(242,168,29,.1)} .v2-detail .pay .radio{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--ink-3);flex:0 0 auto;display:grid;place-items:center} .v2-detail .pay.on .radio::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--navy)} :root[data-theme="dark"] .pay.on .radio::after{background:var(--gold-2)} .v2-detail .pay b{color:var(--red)} .v2-detail .pay small{display:block;color:var(--ink-3);font-size:11px} .v2-detail .points{background:var(--green-tint);color:var(--green);font-size:12.5px;font-weight:600;border-radius:8px;padding:9px 11px} .v2-detail .qty{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12.5px;color:var(--ink-2)} .v2-detail .qty .ctrl{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden} .v2-detail .qty .ctrl button{width:34px;height:34px;font-size:17px;color:var(--ink-2)} .v2-detail .qty .ctrl span{width:38px;text-align:center;font-weight:700;color:var(--ink)} .v2-detail .ctas{display:flex;gap:9px} .v2-detail .ctas button{flex:1;border-radius:10px;padding:13px 0;font-weight:800;font-size:14px} .v2-detail .cta-add{border:1.5px solid var(--navy);color:var(--navy);background:var(--card)} :root[data-theme="dark"] .cta-add{color:var(--gold-2);border-color:var(--gold-2)} .v2-detail .cta-buy{background:var(--red);color:#fff} .v2-detail .cta-buy small{display:block;font-weight:500;font-size:11px;opacity:.9} .v2-detail .installment{text-align:center;font-size:12px;color:var(--ink-2);margin-top:9px} .v2-detail .installment b{color:var(--navy)} :root[data-theme="dark"] .installment b{color:var(--gold-2)} .v2-detail .contact{border-top:1px solid var(--line-2);margin-top:12px;padding-top:11px;font-size:12.5px;color:var(--ink-2);line-height:1.9} .v2-detail .contact a{color:var(--navy);font-weight:600} :root[data-theme="dark"] .contact a{color:var(--gold-2)} /* Bang truot 3 the mot luot. Mockup xep 5 the tren mot hang nen the hep va ten bi cat gan het; chu dau tu yeu cau 3 the roi truot qua lai. Dung cuon ngang + scroll-snap: khong co JS van vuot/cuon duoc. */ .v2-detail .grid5{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;padding-bottom:2px} .v2-detail .grid5::-webkit-scrollbar{display:none} .v2-detail .grid5>*{flex:0 0 calc((100% - 20px) / 3);scroll-snap-align:start;min-width:0} /* Khung boc de dat hai nut dieu huong hai ben */ .v2-detail .slider{position:relative} /* padding:0 la bat buoc: rule button chung cua theme dat padding 1px 6px 1px 0 nen icon bi day lech 3px sang trai, khong nam giua o tron. Nen dung mau navy dam chu khong phai var(--card): the san pham cung nen trang, nut chim vao nen khong tach roi. */ .v2-detail .slider .nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:36px;height:36px;padding:0;border-radius:50%; background:var(--navy);border:2px solid #fff; box-shadow:0 2px 10px rgba(18,41,79,.28); display:grid;place-items:center;color:#fff;cursor:pointer;line-height:0} .v2-detail .slider .nav svg{display:block} .v2-detail .slider .nav:hover{background:var(--navy-2, #0B1B36)} /* Che do toi: nen trang cung mau navy dam nen nut navy chim vao. Doi sang vang. Phai khai ca hai dieu kien - theo cai dat trinh duyet (prefers-color-scheme) va theo nut chuyen tay ([data-theme]). */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .v2-detail .slider .nav{ background:var(--gold);color:var(--navy-2);border-color:var(--card)} } :root[data-theme="dark"] .v2-detail .slider .nav{background:var(--gold);color:var(--navy-2);border-color:var(--card)} .v2-detail .slider .nav:disabled{opacity:.3;cursor:default} .v2-detail .slider .prev{left:-10px} .v2-detail .slider .next{right:-10px} @media(max-width:760px){.v2-detail .slider .nav{display:none}} @media(max-width:1000px){ .v2-detail .grid5>*{flex-basis:calc((100% - 10px) / 2)} } @media(max-width:620px){ /* Man hinh nho: 1 the ruoi de nguoi dung thay ro con the ben canh. */ .v2-detail .grid5>*{flex-basis:72%} } .v2-detail .card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:8px 10px 12px;display:flex;flex-direction:column} .v2-detail .card:hover{box-shadow:var(--shadow)} .v2-detail .card .rib{font-size:10.5px;color:var(--ink-3);height:16px;line-height:16px;white-space:nowrap;overflow:hidden} .v2-detail .card .media{aspect-ratio:1/1;border-radius:10px;display:grid;place-items:center;margin-bottom:8px} .v2-detail .card .media svg{width:78%;height:78%} .v2-detail .card .nm{font-size:12.5px;line-height:1.35;min-height:34px} .v2-detail .card .pr{color:var(--red);font-weight:800;font-size:15px;margin-top:4px} .v2-detail .card .was{font-size:11.5px;color:var(--ink-3)} .v2-detail .card .was .off{color:var(--red);font-weight:700} .v2-detail .card .ft{margin-top:auto;padding-top:6px;font-size:11.5px;color:var(--ink-3)} .v2-detail .card .ft .st{color:#F3A712;font-weight:600} .v2-detail .addmini{margin-top:7px;background:var(--navy);color:#fff;border-radius:7px;padding:7px 0;font-size:12px;font-weight:700;text-align:center} .v2-detail .bundle{display:flex;gap:12px;align-items:center;background:var(--gold-tint);border-radius:10px;padding:11px 14px;margin-bottom:12px;flex-wrap:wrap} .v2-detail .bundle b{font-size:13.5px} .v2-detail .bundle p{margin:2px 0 0;font-size:12px;color:var(--ink-2)} .v2-detail .bundle .go{margin-left:auto;background:var(--navy);color:#fff;font-weight:700;border-radius:8px;padding:9px 18px;font-size:13px} :root[data-theme="dark"] .bundle{color:var(--ink)} .v2-detail .seen-card{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:7px 12px 7px 7px;min-width:230px} .v2-detail .footer{background:var(--card);border-top:1px solid var(--line);margin-top:18px;padding:26px 0 96px} .v2-detail .pay-i{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .v2-detail .pay-i i{font-style:normal;font-size:10.5px;border:1px solid var(--line);border-radius:5px;padding:3px 7px;color:var(--ink-3)} /* .mbuy nam NGOAI main.v2-detail (fixed o day man hinh) va tu mang class .v2-detail, nen quan he cha-con ".v2-detail .mbuy" khong khop - phai them ".mbuy.v2-detail". Thieu ve nay thi thanh mua hien ca tren desktop. */ /* bottom: 55px chu khong phai 0 - site da co thanh menu .stickybar cao 55px dinh day, cung z-index 70. De bottom:0 thi hai thanh chong len nhau, gia va nut mua bi che. z-index 71 de nam tren thanh menu do. Cac nut phai xep MOT HANG: truoc day flex-wrap mac dinh lam thanh cao 178px (27% man hinh iPhone 13), che mat noi dung. */ .v2-detail .mbuy, .mbuy.v2-detail{position:fixed;left:0;right:0;bottom:55px;z-index:71; background:var(--card);border-top:1px solid var(--line);display:none;gap:8px; align-items:center;flex-wrap:nowrap;padding:8px 10px; box-shadow:0 -4px 16px rgba(18,41,79,.1)} .v2-detail .mbuy .p, .mbuy.v2-detail .p{flex:0 0 auto} .v2-detail .mbuy .p b, .mbuy.v2-detail .p b{display:block;color:var(--red);font-weight:800;font-size:15px;line-height:1.1} .v2-detail .mbuy .p small, .mbuy.v2-detail .p small{color:var(--ink-3);font-size:11px;text-decoration:line-through} .v2-detail .mbuy .p, .mbuy.v2-detail .p{flex:0 0 auto;min-width:0} .v2-detail .mbuy .b1, .mbuy.v2-detail .b1{flex:0 0 auto;white-space:nowrap; border:1.5px solid var(--navy);color:var(--navy);border-radius:9px; padding:9px 12px;font-weight:700;font-size:12.5px} .v2-detail .mbuy .b2, .mbuy.v2-detail .b2{flex:1 1 auto;min-width:0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;background:var(--red);color:#fff; border-radius:9px;padding:10px 8px;font-weight:800;font-size:13px} @media(max-width:980px){ .v2-detail .mbuy, .mbuy.v2-detail{display:flex} .v2-detail .buycol-v2{position:static} } .v2-detail .toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:11px 18px;border-radius:999px;z-index:90;transition:opacity .18s,transform .18s;box-shadow:0 8px 24px rgba(0,0,0,.25)} /* ------------------------------------------------------------ Thay cho inline style cua mockup (rule B1 cam style="..."). ------------------------------------------------------------ */ .v2-detail .panel.mt12{margin-top:12px} .v2-detail .km-title.mb9{margin-bottom:9px} .v2-detail .points.mt10{margin-top:10px} .v2-detail .km-title .v2-red{color:var(--red)} .v2-detail .qty .v2-hint{color:var(--ink-3);font-size:11.5px} .v2-detail .v2-an{display:none} /* Anh that thay cho SVG ve tay cua mockup. Mockup dung lap day khung, o day la nen phai tu dat kich thuoc. */ .v2-detail .stage .frame{display:grid;place-items:center;overflow:hidden} .v2-detail .v2-stage-img{width:100%;height:100%;object-fit:contain;display:block} .v2-detail #thumbs button{overflow:hidden;padding:0} .v2-detail #thumbs button img{width:100%;height:100%;object-fit:cover;display:block} .v2-detail .v2-note-anh{font-size:12px;margin:6px 2px 0} /* Ma giam gia that: hien ma chu khong phai nut "Lay ma" cua mockup (mockup gia lap, chua co luong nhan ma that). */ .v2-detail .vc .v2-vc-code{background:#fff;color:var(--navy);border:1px dashed var(--navy); border-radius:7px;font-weight:800;font-size:11.5px;padding:5px 9px;letter-spacing:.4px} /* Trang thai khong mua duoc - lay tu ban cu */ .v2-detail .v2-presale,.v2-detail .v2-stopped{border:1px solid var(--line);border-radius:10px; padding:12px;text-align:center;font-size:13px;color:var(--ink-2)} .v2-detail .v2-stopped{font-weight:700;color:var(--red)} /* Form danh gia - dung lai ten lop cua ban cu */ .v2-detail .v2-rvform{display:flex;flex-direction:column;gap:9px;margin-top:12px} .v2-detail .rf-input{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;font-size:13px;width:100%} .v2-detail .rf-textarea{resize:vertical;min-height:88px} .v2-detail .rf-stars{display:flex;align-items:center;gap:4px} .v2-detail .rf-star{color:var(--line-2);font-size:22px;cursor:pointer;line-height:1} .v2-detail .rf-star.on{color:var(--gold-deep)} .v2-detail .rf-star-hint{margin-left:8px;font-size:12.5px;color:var(--ink-3)} .v2-detail .rf-submit{align-self:flex-start;background:var(--navy);color:#fff;border-radius:9px; font-weight:700;font-size:13px;padding:10px 20px} /* Kien thuc nuoc hoa - khoi cua ban cu, mockup khong co */ .v2-detail .v2-know{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .v2-detail .v2-know-it{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line); border-radius:10px;padding:10px 12px} .v2-detail .v2-know-it b{font-size:13px;line-height:1.35} .v2-detail .v2-know-it small{font-size:12px;color:var(--ink-3)} @media(max-width:900px){.v2-detail .v2-know{grid-template-columns:1fr}} /* Thanh ty le sao: mockup dat width bang inline style. */ .v2-detail .rv-bar .fl{width:0} .v2-detail .rv-bar .fl.w0{width:0%} .v2-detail .rv-bar .fl.w1{width:1%} .v2-detail .rv-bar .fl.w2{width:2%} .v2-detail .rv-bar .fl.w3{width:3%} .v2-detail .rv-bar .fl.w4{width:4%} .v2-detail .rv-bar .fl.w5{width:5%} .v2-detail .rv-bar .fl.w6{width:6%} .v2-detail .rv-bar .fl.w7{width:7%} .v2-detail .rv-bar .fl.w8{width:8%} .v2-detail .rv-bar .fl.w9{width:9%} .v2-detail .rv-bar .fl.w10{width:10%} .v2-detail .rv-bar .fl.w11{width:11%} .v2-detail .rv-bar .fl.w12{width:12%} .v2-detail .rv-bar .fl.w13{width:13%} .v2-detail .rv-bar .fl.w14{width:14%} .v2-detail .rv-bar .fl.w15{width:15%} .v2-detail .rv-bar .fl.w16{width:16%} .v2-detail .rv-bar .fl.w17{width:17%} .v2-detail .rv-bar .fl.w18{width:18%} .v2-detail .rv-bar .fl.w19{width:19%} .v2-detail .rv-bar .fl.w20{width:20%} .v2-detail .rv-bar .fl.w21{width:21%} .v2-detail .rv-bar .fl.w22{width:22%} .v2-detail .rv-bar .fl.w23{width:23%} .v2-detail .rv-bar .fl.w24{width:24%} .v2-detail .rv-bar .fl.w25{width:25%} .v2-detail .rv-bar .fl.w26{width:26%} .v2-detail .rv-bar .fl.w27{width:27%} .v2-detail .rv-bar .fl.w28{width:28%} .v2-detail .rv-bar .fl.w29{width:29%} .v2-detail .rv-bar .fl.w30{width:30%} .v2-detail .rv-bar .fl.w31{width:31%} .v2-detail .rv-bar .fl.w32{width:32%} .v2-detail .rv-bar .fl.w33{width:33%} .v2-detail .rv-bar .fl.w34{width:34%} .v2-detail .rv-bar .fl.w35{width:35%} .v2-detail .rv-bar .fl.w36{width:36%} .v2-detail .rv-bar .fl.w37{width:37%} .v2-detail .rv-bar .fl.w38{width:38%} .v2-detail .rv-bar .fl.w39{width:39%} .v2-detail .rv-bar .fl.w40{width:40%} .v2-detail .rv-bar .fl.w41{width:41%} .v2-detail .rv-bar .fl.w42{width:42%} .v2-detail .rv-bar .fl.w43{width:43%} .v2-detail .rv-bar .fl.w44{width:44%} .v2-detail .rv-bar .fl.w45{width:45%} .v2-detail .rv-bar .fl.w46{width:46%} .v2-detail .rv-bar .fl.w47{width:47%} .v2-detail .rv-bar .fl.w48{width:48%} .v2-detail .rv-bar .fl.w49{width:49%} .v2-detail .rv-bar .fl.w50{width:50%} .v2-detail .rv-bar .fl.w51{width:51%} .v2-detail .rv-bar .fl.w52{width:52%} .v2-detail .rv-bar .fl.w53{width:53%} .v2-detail .rv-bar .fl.w54{width:54%} .v2-detail .rv-bar .fl.w55{width:55%} .v2-detail .rv-bar .fl.w56{width:56%} .v2-detail .rv-bar .fl.w57{width:57%} .v2-detail .rv-bar .fl.w58{width:58%} .v2-detail .rv-bar .fl.w59{width:59%} .v2-detail .rv-bar .fl.w60{width:60%} .v2-detail .rv-bar .fl.w61{width:61%} .v2-detail .rv-bar .fl.w62{width:62%} .v2-detail .rv-bar .fl.w63{width:63%} .v2-detail .rv-bar .fl.w64{width:64%} .v2-detail .rv-bar .fl.w65{width:65%} .v2-detail .rv-bar .fl.w66{width:66%} .v2-detail .rv-bar .fl.w67{width:67%} .v2-detail .rv-bar .fl.w68{width:68%} .v2-detail .rv-bar .fl.w69{width:69%} .v2-detail .rv-bar .fl.w70{width:70%} .v2-detail .rv-bar .fl.w71{width:71%} .v2-detail .rv-bar .fl.w72{width:72%} .v2-detail .rv-bar .fl.w73{width:73%} .v2-detail .rv-bar .fl.w74{width:74%} .v2-detail .rv-bar .fl.w75{width:75%} .v2-detail .rv-bar .fl.w76{width:76%} .v2-detail .rv-bar .fl.w77{width:77%} .v2-detail .rv-bar .fl.w78{width:78%} .v2-detail .rv-bar .fl.w79{width:79%} .v2-detail .rv-bar .fl.w80{width:80%} .v2-detail .rv-bar .fl.w81{width:81%} .v2-detail .rv-bar .fl.w82{width:82%} .v2-detail .rv-bar .fl.w83{width:83%} .v2-detail .rv-bar .fl.w84{width:84%} .v2-detail .rv-bar .fl.w85{width:85%} .v2-detail .rv-bar .fl.w86{width:86%} .v2-detail .rv-bar .fl.w87{width:87%} .v2-detail .rv-bar .fl.w88{width:88%} .v2-detail .rv-bar .fl.w89{width:89%} .v2-detail .rv-bar .fl.w90{width:90%} .v2-detail .rv-bar .fl.w91{width:91%} .v2-detail .rv-bar .fl.w92{width:92%} .v2-detail .rv-bar .fl.w93{width:93%} .v2-detail .rv-bar .fl.w94{width:94%} .v2-detail .rv-bar .fl.w95{width:95%} .v2-detail .rv-bar .fl.w96{width:96%} .v2-detail .rv-bar .fl.w97{width:97%} .v2-detail .rv-bar .fl.w98{width:98%} .v2-detail .rv-bar .fl.w99{width:99%} .v2-detail .rv-bar .fl.w100{width:100%} /* Form mua hang boc quanh cac .box de giu nguyen ten truong cua ban cu (order_product.php gan su kien theo ".product-info ..."). Mockup khong co tang nay. display:contents cho form BIEN MAT khoi bo cuc: cac .box ben trong tro thanh con truc tiep cua .buycol-v2, rong dung 388px nhu mockup thay vi 356px. Form van hoat dong binh thuong. */ .v2-detail .v2-buyform{display:contents} /* Nut "Lay ma" - chep ma vao clipboard */ .v2-detail .v2-vc-get.on{background:var(--navy);color:#fff} /* O an dung de chep ma tren trinh duyet cu (khong dung duoc display:none vi trinh duyet khong select duoc noi dung bi an han). */ .v2-an-doc{position:fixed;left:-9999px;top:0;opacity:0} /* ------------------------------------------------------------ Khung anh: nhieu slide chong len nhau, bam thumbnail thi doi. Mockup thay ca noi dung #frame bang JS; ben nay in san moi slide de khong co anh thi trang van day du (khong phu thuoc JS). ------------------------------------------------------------ */ .v2-detail .stage .frame{display:block;position:relative} /* place-items:center lam con co lai theo noi dung; collage can chiem tron khung nen dat stretch cho no, chi anh don le moi can can giua. */ .v2-detail .v2-slide{position:absolute;inset:0;display:none;place-items:stretch} .v2-detail .v2-slide.on{display:grid} .v2-detail .v2-slide .v2-stage-img{width:100%;height:100%;object-fit:contain;display:block} /* Slide 1: collage 6 o thong so bao quanh anh san pham. Mockup ve bang SVG voi 3 chip tren - anh giua - 3 chip duoi, ti le 58/132/58 tren khung cao 300. Dung grid cho dung ti le do. */ /* Ti le hang lay tu SVG mockup: chip 58 / anh 132 / chip 58 tren khung cao 300 (da tru padding). Dung fr thay vi % de tong luon vua khung, khong tran. */ .v2-detail .v2-collage{min-width:0;min-height:0;padding:3.5%;display:grid; grid-template-rows:58fr 132fr 58fr;grid-template-columns:repeat(3,1fr); gap:3.2%;background:var(--page)} .v2-detail .v2-cchip{background:var(--card);border:1px solid var(--line);border-radius:11px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; text-align:center;padding:4px;min-width:0} .v2-detail .v2-cchip small{font-size:11px;color:var(--ink-3);line-height:1.2} .v2-detail .v2-cchip b{font-size:17px;font-weight:800;color:var(--navy);line-height:1.15; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} :root[data-theme="dark"] .v2-detail .v2-cchip b{color:var(--ink)} .v2-detail .v2-cmain{grid-column:1/-1;background:var(--card);border:1px solid var(--line); border-radius:11px;display:grid;grid-template-rows:minmax(0,1fr) auto; padding:8px 10px 10px;gap:4px;min-height:0;min-width:0;overflow:hidden} .v2-detail .v2-cmain img{width:100%;height:100%;object-fit:contain;display:block;min-height:0} .v2-detail .v2-cmain b{font-size:13px;font-weight:800;color:var(--navy);text-align:center; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} :root[data-theme="dark"] .v2-detail .v2-cmain b{color:var(--ink)} @media(max-width:620px){ .v2-detail .v2-cchip b{font-size:13px} .v2-detail .v2-cchip small{font-size:9.5px} .v2-detail .v2-cmain b{font-size:11px} } .v2-detail .refbox .th img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block} /* Anh that trong the .grid5. Mockup dung SVG (rule ".card .media svg" co san), anh can quy tac rieng - khong co thi anh tran khung va bi cat. */ .v2-detail .card .media{overflow:hidden;background:var(--chip)} .v2-detail .card .media img{width:100%;height:100%;object-fit:cover;display:block} /* Ten san pham: mockup 2 dong (min-height 34px). Ten that dai hon nhieu nen phai cat o 3 dong, khong thi the cao gap doi va luoi so le. */ .v2-detail .card .nm{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden;color:var(--ink)} /* ------------------------------------------------------------ Dem nguoc han qua tang (#clock) va han mo ban (#clockSell). JS cua ban cu (themes/js/main.js) do ra 4 the

NGAY/GIO/PHUT/GIAY. CSS ban cu boc trong .pi-gift-box - lop cua view cu, ben v2 khong co, nen 4 o do xep doc chiem tron cot mua (cao 260px). Style theo mockup: navy + vang, giong dong ho ".cdline". ------------------------------------------------------------ */ .v2-detail .countdown-circles{display:flex;gap:6px;margin:10px 0 0;padding:0; background:transparent;justify-content:flex-start} .v2-detail .countdown-circles p{flex:1;min-width:0;max-width:72px;margin:0; background:var(--navy);border-radius:8px;padding:7px 4px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:1px; font-size:9.5px;font-weight:600;color:#fff;letter-spacing:.06em;text-transform:uppercase} .v2-detail .countdown-circles p span{display:block;font-size:17px;font-weight:800; color:var(--gold);line-height:1.1;letter-spacing:0;text-transform:none} .v2-detail .countdown-circles p span:not(:first-of-type){font-size:9.5px; color:rgba(255,255,255,.72);font-weight:600} :root[data-theme="dark"] .v2-detail .countdown-circles p{background:var(--chip)} /* Noi dung qua tang do tu CMS: anh hong va inline style cua ban cu lam vo bo cuc. Gioi han kich thuoc anh, cho chu theo he chu cua trang. */ .v2-detail .km-note img{max-width:22px;height:auto;vertical-align:-4px} .v2-detail .km-note p{margin:0 0 4px} .v2-detail .km-note span,.v2-detail .km-note strong,.v2-detail .km-note em{ font-size:inherit !important;color:inherit !important} /* Muc qua tang THAT trong danh sach khuyen mai: noi dung la HTML nhap tay tu admin (co

, , inline style) nen phai ep ve he chu cua trang, khong thi chu to nho lung tung so voi cac muc con lai. */ .v2-detail .km .v2-km-that p{margin:0 0 3px} .v2-detail .km .v2-km-that p:last-child{margin-bottom:0} .v2-detail .km .v2-km-that span, .v2-detail .km .v2-km-that strong, .v2-detail .km .v2-km-that em{font-size:inherit !important;font-style:normal} /* ------------------------------------------------------------ Khoi ma uu dai: tach HAI NHOM theo type_apply. - 'product' : ap ngay tai trang nay -> co o nhap ma - 'ordercart': chi trung bay, nhap o buoc dat hang Bam theo cach ban cu phan biet (views/frontend/product/detail.php). ------------------------------------------------------------ */ /* Hai nhom phai NHIN RA NGAY la khac nhau, khong chi khac dong chu nho. Ban cu tach bang nen + vien rieng cho nhom don hang (main.css ~274: "tach 2 nhom bang nen + nhan, tranh nhin lien mot mach"). Lam tuong tu. */ .v2-detail .vgroup{margin-top:12px} .v2-detail .vgroup:first-of-type{margin-top:0} .v2-detail .vgroup-tag{display:flex;align-items:center;gap:6px; font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; margin-bottom:8px} .v2-detail .vgroup-tag::before{content:"";width:5px;height:5px;border-radius:50%;flex:0 0 auto} /* Nhom 1 - ap duoc ngay tai day: nen trang, noi bat */ .v2-detail .vgroup--now{background:rgba(255,255,255,.16);border-radius:10px;padding:10px} .v2-detail .vgroup--now .vgroup-tag{color:#fff} .v2-detail .vgroup--now .vgroup-tag::before{background:#7BE0A6} /* Nhom 2 - phai nhap o buoc dat hang: vien dut, nen chim hon, ro la khoi khac */ .v2-detail .vgroup--order{border:1px dashed rgba(255,255,255,.5);border-radius:10px; padding:10px;background:rgba(0,0,0,.1)} .v2-detail .vgroup--order .vgroup-tag{color:rgba(255,255,255,.9)} .v2-detail .vgroup--order .vgroup-tag::before{background:var(--gold)} /* The ma o nhom nay chim hon de khong tranh voi nhom ap duoc ngay */ .v2-detail .vgroup--order .vc{background:rgba(255,255,255,.12)} .v2-detail .vgroup--order .get{background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff} .v2-detail .vgroup-hint{font-size:11.5px;color:rgba(255,255,255,.82);margin:8px 0 0;line-height:1.45} /* O nhap ma - chi nhom 'product' moi co */ .v2-detail .v2-vc-form{display:flex;gap:6px;margin-top:8px} .v2-detail .v2-vc-input{flex:1;min-width:0;border:0;border-radius:8px;padding:8px 11px; font:inherit;font-size:12.5px;background:#fff;color:var(--ink)} .v2-detail .v2-vc-apply{flex:0 0 auto;background:var(--navy);color:#fff;border-radius:8px; padding:8px 14px;font-weight:700;font-size:12.5px} .v2-detail .v2-vc-apply:hover{background:var(--navy-2,#0B1B36)} .v2-detail .v2-vc-input.input_error{outline:2px solid var(--red)} .v2-detail .v2-vc-note{margin-top:7px;font-size:12px;font-weight:600;color:#fff; background:rgba(0,0,0,.18);border-radius:7px;padding:7px 10px;line-height:1.4} /* Khoi chinh sach giao hang: noi dung tu tbl_setting.info_all_product, la HTML TinyMCE gom cac cap tieu de + mo ta. Gom tung cap lai cho de doc thay vi de moi dong cach deu nhau. */ .v2-detail .ship strong{display:block;color:var(--ink);margin-top:9px} .v2-detail .ship strong:first-child{margin-top:0} .v2-detail .ship p{margin:0} .v2-detail .ship br+br{display:none} /* ------------------------------------------------------------ Khoi cam ket trong cot mua. Du lieu tu tbl_setting.info_all_product, dung