/* Cầu v3 -> v4: giữ thân trang cũ (bài viết, chính sách, Khắc tên, Clicker), đổi token và các thành phần chung. */
:root{
  --coban:var(--xanh);--phien:var(--sua);--giay:#fff;--son:var(--dao);
  --mo:rgba(21,32,107,.62);--mo2:rgba(21,32,107,.8);
  --dis:'Paytone One','Nunito',system-ui,sans-serif;
  --body:'Nunito',system-ui,sans-serif;
  --tech:'Nunito',system-ui,sans-serif;
  --lech:clamp(1rem,4vw,3.5rem);--rong:90rem;
}
body{font-weight:500}
h1,h2,.dis{font-weight:400;font-variation-settings:normal;letter-spacing:0;text-transform:none}
.cu-v3 h1{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.18}
.cu-v3 h2{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.22}
.cu-v3 h3,.cu-v3 h4{font-family:var(--f-than);font-weight:800;font-variation-settings:normal;letter-spacing:0}
.cu-v3 .tech,.cu-v3 .tech-s,.cu-v3 .label,.cu-v3 .news-meta,.cu-v3 .ctlt-num,.cu-v3 .news-read,.cu-v3 .ctlt-read,.cu-v3 .story-date,.cu-v3 .pp-chip,.cu-v3 .van-ban .toc a,.cu-v3 .van-ban th{
  font-family:var(--f-than);font-size:.9375rem;font-weight:700;letter-spacing:0;text-transform:none}

/* dấu góc ống ngắm của v3 không dùng nữa */
.moc{display:none}
.phien{border-radius:var(--r-the);background:var(--sua)}
.cu-v3 .dai:has(>.khung>.tech){display:none}

/* nút v3 */
.cu-v3 .nut,.cu-v3 .btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.6rem 1.75rem;border:0;border-radius:var(--r-nut);background:var(--dao);color:#fff;font:800 1rem/1.2 var(--f-than);letter-spacing:0;text-transform:none;box-shadow:0 .25rem 0 #A3134F}
.cu-v3 .nut.vien,.cu-v3 .btn-phu{background:#fff;color:var(--muc);box-shadow:inset 0 0 0 2px var(--muc)}
.cu-v3 .nut:hover,.cu-v3 .btn:hover{background:var(--dao);color:#fff;transform:translateY(-1px)}
.cu-v3 .nut.vien:hover{background:var(--sua);color:var(--muc)}

/* khối dùng chung ở trang giữ thân cũ */
.cu-v3 .muc-dau{border-top:0;padding-top:0;margin-bottom:1.5rem}
.cu-v3 .products-head{border:0;margin-bottom:1.5rem}
.cu-v3 .mo{padding-block:clamp(2rem,5vw,4rem)}
.cu-v3 .nang-luc{gap:.75rem;background:none;border:0}
.cu-v3 .nang-luc>div{background:var(--sua);border:0;border-radius:var(--r-the)}
.cu-v3 .nang-luc strong{font-family:var(--f-hien);font-weight:400;font-variation-settings:normal}
.cu-v3 .ts th,.cu-v3 .ts td{border-color:var(--net)}
.cu-v3 .ts th{font-family:var(--f-than);font-weight:700;letter-spacing:0;text-transform:none;font-size:.9375rem}
.cu-v3 .dai-anh{border:0;background:none;gap:.5rem}
.cu-v3 .dai-anh figure{border-radius:var(--r-the)}
.cu-v3 .cta{border-top:0}
.cu-v3 .contact-card{border-radius:var(--r-khung);background:var(--sua);border:0}
.cu-v3 .contact{border-top:0}

/* danh sách bài */
.cu-v3 .news-row{border:0;border-radius:var(--r-the);background:var(--sua);padding:1rem;margin-bottom:.75rem}
.cu-v3 .news-thumb,.cu-v3 .ctlt-block{border-radius:var(--r-nho);overflow:hidden;background:#fff}
.cu-v3 .kt-row{border-radius:var(--r-the);padding:1rem;background:var(--sua);border:0;margin-bottom:.75rem}

/* văn bản chính sách */
.cu-v3 .van-ban h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.cu-v3 .van-ban h2{font-size:1.25rem;font-family:var(--f-hien)}
.cu-v3 .van-ban .toc a{border-radius:var(--r-nut)}
.cu-v3 .van-ban .toc a:hover{background:var(--muc);border-color:var(--muc)}

/* giỏ */
#cnhdGioBar .cgb-nut{border-radius:var(--r-nut);background:var(--dao);color:#fff;font-family:var(--f-than);font-weight:800;letter-spacing:0;text-transform:none}
.cgp-dat{border-radius:var(--r-nut)!important;background:var(--dao)!important;color:#fff!important;font-family:var(--f-than)!important;font-weight:800!important;letter-spacing:0!important;text-transform:none!important}
/* 11/11/2026 chốt đơn nhanh: trong giỏ chỉ "Đặt hàng" là nút hồng, các nút khác (Mời bạn mua chung…) là nút phụ viền */
.cgp-dat.cgp-phu{background:#fff!important;color:var(--muc)!important;box-shadow:inset 0 0 0 2px var(--muc)}
#cnhdGioPop .cgp-fs{margin:8px 0 14px;font-size:.875rem;color:var(--muc)}
.cgp-fs .fs-con,.cgp-fs .fs-xong{display:block}
.cgp-fs .fs-xong{color:#16693a;font-weight:800}
.cgp-fs .fs-thanh{display:block;height:8px;margin-top:6px;border-radius:999px;background:var(--sua,#F3EEFF);overflow:hidden}
.cgp-fs .fs-thanh i{display:block;height:100%;border-radius:999px;background:var(--dao)}
#cnhdGioBar .cgb-fs{display:block;font-size:.75rem;letter-spacing:0;opacity:.9}
#cnhdGioBar .cgb-fs:empty{display:none}
/* Dòng freeship dài không được đẩy nút xuống hàng dưới: nút giữ nguyên bên phải, chữ tự xuống dòng trong cột trái */
#cnhdGioBar .cgb-in{flex-wrap:nowrap}
#cnhdGioBar .cgb-so{flex:1 1 auto;min-width:0}
#cnhdGioBar .cgb-nut{flex:none;white-space:nowrap}
/* Mua ngay: hai nút cạnh nhau. Thanh mua dính đáy trên điện thoại bỏ giá (đã có ngay trên trang) để đủ chỗ hai nút */
.co-mua-ngay .nut-mua-ngay{flex:1 1 auto}
.mua-dinh.co-mua-ngay .gia4{display:none}
.mua-dinh.co-mua-ngay .nut4{flex:1 1 0;padding:.6rem .75rem;white-space:nowrap}

/* trang đặt hàng */
.trang-dat .dieu{display:none}

/* trang dựng lại */
.duong{margin-bottom:1rem;color:var(--phu);font-size:.875rem;font-weight:700}
.duong a{color:inherit;text-underline-offset:.2em}
.dm-dau{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;margin-bottom:1rem}
.chon4{margin-bottom:1.75rem}
.khoi-dm{margin-bottom:clamp(2.5rem,5vw,4rem)}
.the-chu{background:var(--nhat);text-align:center}
.the-chu span{padding:.75rem;font:400 clamp(1.4rem,2.6vw,2.2rem)/1.2 var(--f-hien);color:var(--dam)}
.luoi-bst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.25rem)}
.bst{position:relative;display:grid;align-content:end;gap:.25rem;min-height:clamp(18rem,30vw,26rem);padding:1.5rem;border-radius:var(--r-khung);text-decoration:none;font-weight:800}
.bst h2{font-size:clamp(1.6rem,3vw,2.6rem)}
.bst-sao{position:absolute;inset:1rem 1rem 6rem;display:flex;justify-content:center;align-items:center;gap:.5rem}
.bst-sao img{min-width:0;max-width:32%;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(var(--bong-dan))}
.nen-may{background:var(--may) 0 0/300px 220px,var(--nhat,var(--bo))}
.ke-mau{padding-block:1.5rem clamp(2rem,5vw,3.5rem)}
.hv4{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.hv4-mot{grid-template-columns:minmax(0,1fr)}
.hv4-chu{display:grid;gap:.75rem;max-width:40rem}
.hv4-chu p{font-size:1.0625rem;font-weight:600}
.hv4-sticker{height:clamp(12rem,26vw,22rem);width:auto;transform:rotate(-3deg);filter:drop-shadow(var(--bong-dan))}
.tag-lt{font-weight:800;color:var(--dam,var(--muc))}
.luoi-bien{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,46%),1fr));gap:clamp(.75rem,1.6vw,1.25rem)}
.bien{display:grid;gap:.25rem;text-decoration:none}
.bien span{color:var(--phu);font-size:.9375rem;font-weight:700}
.nghia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.25rem,4vw,3rem);padding:clamp(1.5rem,4vw,3rem);border-radius:var(--r-khung);background:var(--nhat)}
.nghia>div{display:grid;gap:.75rem;justify-items:start;align-content:start}
.nghia blockquote{margin:0;align-self:center;font:400 clamp(1.15rem,1.9vw,1.5rem)/1.45 var(--f-hien);color:var(--dam)}
.bang-ts{width:100%;max-width:44rem;border-collapse:collapse}
.bang-ts th,.bang-ts td{padding:.65rem 0;border-bottom:1px solid var(--net);text-align:left;vertical-align:top}
.bang-ts th{width:38%;color:var(--phu);font-weight:700}
.mua-hinh{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:.75rem}
.v4 figure{margin:0}
.mua-chu{position:sticky;top:6rem}
.nut-hang{align-items:center}
.nut-phu4{background:#fff;color:var(--muc);box-shadow:inset 0 0 0 2px var(--muc)}
.tam-dai{grid-template-columns:repeat(8,minmax(0,1fr))}
.tam-dai .sticker img{height:clamp(4rem,7vw,6.5rem);transform:none}
.da-lien{text-decoration:none;align-content:start;min-height:0}
.da-lien img{margin-bottom:.5rem}
.da-lien h3{font:400 1.375rem/1.2 var(--f-hien)}
.da-lien p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:.9375rem}
.the4-anh .nhan4{z-index:1}

@media (max-width:60rem){
  .luoi-bst,.nghia{grid-template-columns:minmax(0,1fr)}
  .hv4{grid-template-columns:minmax(0,1fr);justify-items:center}
  .hv4-mot{justify-items:start}
  .tam-dai{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cu-v3 .news-row{grid-template-columns:minmax(0,1fr)}
}

/* bài đọc */
.cu-v3 .products,.cu-v3 .stories{padding-top:clamp(1.5rem,4vw,3rem)}
.cu-v3 .story-article{max-width:46rem;margin-inline:auto;padding-top:clamp(1.5rem,4vw,3rem)}
.cu-v3 .story-article h1{font-size:clamp(2rem,4vw,3rem)}
.cu-v3 .kt-bai h1,.cu-v3 article h1{font-size:clamp(2rem,4vw,3rem)}
.cu-v3 .kt-kicker,.cu-v3 .kt-tacgia{font-family:var(--f-than);font-size:.9375rem;font-weight:700;letter-spacing:0;text-transform:none}
.cu-v3 .kt-the,.cu-v3 .news-tag{border-radius:var(--r-nut);letter-spacing:0;text-transform:none}
.cu-v3 main>section{border-top:0}
.cu-v3 .mo img,.cu-v3 .phien.nen-that{border-radius:var(--r-khung)}

/* liên hệ */
.cu-v3 .contact-card{padding:clamp(1.25rem,3vw,2rem)}
.cu-v3 .contact-btns a+a{background:#fff;color:var(--muc);box-shadow:inset 0 0 0 2px var(--muc)}
.dieu{margin-top:clamp(2rem,5vw,3.5rem)}

/* bộ sưu tập dựng bằng site.js */
#collectionPage .pp-hero{padding-block:clamp(1.5rem,4vw,3rem)}
#collectionPage .breadcrumb{margin-bottom:1rem;font-size:.875rem;font-weight:700}
#collectionPage .pp-chip{border-radius:var(--r-nut);font-size:.9375rem}
#collectionPage .pp-price .price{font:400 1.75rem/1.3 var(--f-hien);color:var(--dao)}
#collectionPage .pp-cta{margin-block:1rem}
#collectionPage .pp-cta .btn+.btn{margin-left:.5rem}

/* vỏ trang giữ nguyên ở mọi trang, kể cả trang có CSS riêng */
html body{font-family:var(--f-than)}
.bao4{margin:0;line-height:1.6}

/* Clicker */
#moi,#moi *{letter-spacing:0!important;text-transform:none!important}
#moi button,#moi .chi-keo{font-family:var(--f-than)}
#moi .chi-keo,#moi .cua .dang button,#moi .cua .hai button,#moi .ngau,#moi .khung-xem button,#moi .mat button{border-radius:var(--r-nho);font-weight:800}
#moi .ba-loi,#moi .ban h2 small{font-family:var(--f-than);letter-spacing:0;text-transform:none}
#moi #them{min-height:3rem;border:0;border-radius:var(--r-nut);background:var(--dao);color:#fff;font:800 1rem/1.2 var(--f-than);letter-spacing:0;text-transform:none;box-shadow:0 .25rem 0 #A3134F}

/* Khắc tên */
.kt-dau h1{font-family:var(--f-hien);font-weight:400;font-stretch:100%;letter-spacing:0;text-transform:none}
.kt-muc>h2{font:400 1.125rem/1.3 var(--f-hien);font-stretch:100%}
#ktTen{border-radius:var(--r-nho)}
.kt-mau-nut,.kt-loai button,.kt-cta button{border-radius:var(--r-nho)}
#ktThem{min-height:3rem;border:0;border-radius:var(--r-nut);font:800 1rem/1.2 var(--f-than)}
#ktThem:not(:disabled){background:var(--dao);color:#fff;box-shadow:0 .25rem 0 #A3134F}

/* ảnh hàng đã nền trong suốt: nền nằm sau, không hòa màu vào sản phẩm */
.phien.nen-trang img,.pc-img,.cgp-anh{mix-blend-mode:normal}

/* đầu trang danh sách bài: ba lớp đệm của v3 chồng nhau */
.cu-v3 .stories{padding-top:0}
.cu-v3 .products-head{padding-top:0}
.cu-v3 .products-head .label{white-space:nowrap}

/* tiêu đề dài ở cột hẹp */
.cu-v3 .mo-luoi h1{font-size:clamp(2.1rem,3.5vw,3.1rem)}

/* phần đầu trang danh sách: tiêu đề trái, lời dẫn phải */
.dau-dm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem clamp(2rem,6vw,6rem);align-items:start;margin-bottom:clamp(2rem,4vw,3rem)}
.dau-dm h1,.cu-v3 .dau-dm h1{font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.18;margin:0}
.dau-dm-chu{display:grid;gap:.75rem;min-width:0;max-width:44rem;padding-top:.5rem}
.dau-dm-chu>p{margin:0;font-size:1.0625rem;line-height:1.7;color:var(--muc)}
.dau-dm-chu .contact-card{margin:0}
@media (max-width:60rem){.dau-dm{grid-template-columns:minmax(0,1fr)}}

.cu-v3 .contact-page{padding-top:clamp(2rem,5vw,3.5rem)}
.cu-v3 .kt-the{border-radius:var(--r-the)}
.ng-trang .dau-dm,.van-ban .dau-dm{grid-template-columns:minmax(0,1fr)}

/* thanh sự kiện chạy ngang: rê hoặc tab vào thì dừng */
.bao4{overflow:hidden;padding:.3rem 0;text-align:left}
.bao-chay{display:flex;width:max-content;animation:bao-chay 48s linear infinite}
.bao4:hover .bao-chay,.bao4:focus-within .bao-chay{animation-play-state:paused}
.bao-nhom{display:flex;flex:none;align-items:center;justify-content:space-around;gap:3rem;min-width:100vw;margin:0;padding:0 1.5rem;list-style:none}
.bao-nhom li{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.bao-nhom img{flex:none;width:auto;height:1.5rem}
.bao-nhom a{color:#fff;text-underline-offset:.2em}
@keyframes bao-chay{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .bao-chay{display:block;width:auto;animation:none}
  .bao-nhom{min-width:0;justify-content:center;min-height:1.6rem}
  .bao-nhom[aria-hidden]{display:none}
  .bao-nhom li{display:none;justify-content:center;white-space:normal;text-align:center}
  .bao-nhom li.hien{display:flex}
}
@media (prefers-reduced-motion:reduce) and (max-width:60rem){
  .bao-nhom{min-height:3.2rem}
}

/* thẻ sản phẩm: tên canh trái, giá canh phải theo mép hình */
.the4{grid-template-columns:minmax(0,1fr) auto;gap:.6rem .75rem;align-items:baseline}
.the4-anh{grid-column:1/-1}
.the4 .gia4{white-space:nowrap;text-align:right}
.tha-sp .the4{grid-template-columns:minmax(0,1fr)}
.tha-sp .the4 .gia4{text-align:left}
@media (max-width:30rem){
  .the4{grid-template-columns:minmax(0,1fr)}
  .the4 .gia4{text-align:left}
}

/* bài dự án + album */
.da-anh{text-decoration:none}
.da-anh img{align-self:stretch;width:100%;height:clamp(11rem,19vw,17rem);margin-bottom:auto;object-fit:cover;border-radius:var(--r-the);transform:none;filter:none}
.bai-dau{margin:0 0 1.5rem}
.bai-dau img{width:100%;height:auto;border-radius:var(--r-khung)}
.da-ts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem 1.5rem;margin:0 0 clamp(2rem,5vw,3.5rem);padding-block:1rem;border-block:1px solid var(--net)}
.da-ts dt{color:var(--phu);font-size:.9375rem;font-weight:700}
.da-ts dd{margin:0;font-weight:800}
.album{columns:3 16rem;column-gap:.75rem}
.album-o{display:block;width:100%;margin:0 0 .75rem;padding:0;border:0;border-radius:var(--r-the);background:var(--sua);overflow:hidden;cursor:zoom-in;break-inside:avoid}
.album-o img{width:100%;height:auto;transition:transform .2s}
.album-o:hover img{transform:scale(1.03)}
.album-xem{width:min(100vw,72rem);max-width:100vw;height:100dvh;max-height:100dvh;margin:auto;padding:1rem;border:0;background:rgba(10,14,48,.96);color:#fff}
.album-xem::backdrop{background:rgba(10,14,48,.8)}
.album-xem[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.5rem}
.album-xem figure{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.5rem;min-height:0;margin:0;justify-items:center}
.album-xem img{width:auto;height:auto;max-width:100%;max-height:100%;min-height:0;align-self:center}
.album-xem figcaption{text-align:center;font-weight:600}
.album-dong{justify-self:end}
.album-dk{display:flex;align-items:center;justify-content:center;gap:1rem}
.album-xem button{min-height:2.75rem;padding:.4rem 1.1rem;border:0;border-radius:var(--r-nut);background:#fff;color:var(--muc);font:800 .9375rem/1.2 var(--f-than);cursor:pointer}
@media (max-width:40rem){.da-ts{grid-template-columns:minmax(0,1fr)}}

.bai-da .dau-muc4{margin-bottom:1rem}

/* 11/11/2026 bước đặt hàng (#checkoutPop, cả /dat-hang/ lẫn popup trong Clicker) theo v4 chế độ yên tĩnh:
   chữ Nunito, nhãn chữ thường, ô bo góc, MỘT nút đào (B1). style.css nạp sau ⇒ mọi luật neo #checkoutPop để thắng. */
#checkoutPop .modal-box{border-radius:var(--r-the);font-family:var(--f-than);color:var(--muc)}
.trang-dat #checkoutPop .modal-box{border:1px solid var(--net)}
#checkoutPop h3{margin:0;font-family:var(--f-hien);font-weight:400;font-variation-settings:normal;font-size:1.5rem;color:var(--muc)}
#checkoutPop .lbl-sm,#checkoutPop .field label{display:block;margin:.75rem 0 .375rem;font-family:var(--f-than);font-size:.9375rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--muc)}
#checkoutPop .hint,#checkoutPop .lbl-opt{font-size:.875rem;font-weight:500;color:var(--phu);opacity:1}
#checkoutPop .field input,#checkoutPop .field select,#checkoutPop .field textarea{border:1.5px solid var(--net);border-radius:var(--r-nho);font-family:var(--f-than);color:var(--muc);background-color:#fff}
#checkoutPop .field input:focus,#checkoutPop .field select:focus,#checkoutPop .field textarea:focus{border-color:var(--xanh)}
#checkoutPop .field select:disabled{background-color:var(--sua)}
#checkoutPop .name-row{align-items:stretch}   /* .row căn giữa ⇒ màn hẹp xếp dọc thì 2 ô co lại, thụt vào giữa */
#checkoutPop .field .inv-chk{display:flex;margin:0;font-weight:700;color:var(--muc)}
#checkoutPop .field .inv-chk input{min-height:0;accent-color:var(--dao)}
#checkoutPop .price-box{border:0;border-radius:var(--r-the);background:var(--sua);padding:.25rem 1rem}
#checkoutPop .price-row{font-size:.9375rem;color:var(--muc);border-bottom:1px solid var(--net)}
#checkoutPop .price-row small{color:var(--phu)}
#checkoutPop .price-row.total{font-family:var(--f-hien);font-weight:400;font-size:1.125rem}
#checkoutPop .price-row.total span:last-child{color:var(--dao)}
#checkoutPop .them-tt{border-top-color:var(--net)}
#checkoutPop .them-tt summary{font-weight:700;color:var(--muc)}
#checkoutPop .them-tt summary::before{font-family:var(--f-than);font-weight:800;color:var(--xanh)}
#checkoutPop .form-chan{border-top-color:var(--net)}
#checkoutPop #submitOrder{min-height:3rem;border:0;border-radius:var(--r-nut);background:var(--dao);color:#fff;font:800 1rem/1.2 var(--f-than);letter-spacing:0;box-shadow:0 .25rem 0 #A3134F;transition:transform .12s,box-shadow .12s}
#checkoutPop #submitOrder:hover{background:var(--dao);color:#fff;transform:translateY(-1px)}
#checkoutPop #submitOrder:active{transform:translateY(.2rem);box-shadow:0 .05rem 0 #A3134F}
#checkoutPop #submitOrder:disabled{opacity:.6;transform:none}
#checkoutPop .tra-truoc{font-size:.875rem;color:var(--phu)}
#checkoutPop .err{border-radius:var(--r-nho);font-size:.9375rem}
/* danh sách món: cùng khuôn dòng với popup giỏ, sửa được số lượng / bỏ món */
#checkoutPop .mini-summary{margin:.5rem 0 .25rem;padding:0;border:0;background:none;white-space:normal;font-size:1rem}
#checkoutPop .dh-dong{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto auto;gap:.75rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--net)}
#checkoutPop .dh-anh{width:3.5rem;height:3.5rem;border-radius:var(--r-nho);object-fit:cover;background:var(--sua)}
#checkoutPop .dh-ten{display:flex;flex-direction:column;gap:.125rem;min-width:0;font-size:.9375rem;line-height:1.35}
#checkoutPop .dh-ten b{font-weight:800}
#checkoutPop .dh-ten small{font-size:.875rem;color:var(--phu)}
#checkoutPop .dh-ten span{font-weight:800;color:var(--muc)}
#checkoutPop .dh-sl{display:flex;align-items:center;gap:.5rem}
#checkoutPop .dh-sl b{min-width:1.25rem;text-align:center}
#checkoutPop .dh-sl button,#checkoutPop .dh-xoa{width:2.25rem;height:2.25rem;padding:0;border:1.5px solid var(--net);border-radius:var(--r-nut);background:#fff;color:var(--muc);font:800 1rem/1 var(--f-than);cursor:pointer}
#checkoutPop .dh-xoa{border:0;color:var(--phu)}
#checkoutPop .dh-sl button:hover,#checkoutPop .dh-xoa:hover{border-color:var(--muc);color:var(--muc)}
/* 11/11/2026 bước THANH TOÁN QR (#payPop) + màn kết quả (#donePop) theo v4: cùng chữ, màu, bo góc với bước đặt hàng.
   Một nút đào mỗi màn (B1): QR = "Lưu ảnh QR" (chỉ điện thoại), kết quả = "Xong"; "Chép" là nút viền nhỏ, "Hủy đơn" là chữ. */
#payPop .modal-box,#donePop .modal-box{border-radius:var(--r-the);font-family:var(--f-than);color:var(--muc)}
#payPop h3,#donePop h3{margin:0;font-family:var(--f-hien);font-weight:400;font-variation-settings:normal;font-size:1.5rem;color:var(--muc)}
#payPop .pay-timer{padding:.35rem .8rem;border:0;border-radius:var(--r-nut);background:var(--sua);font:700 .875rem var(--f-than);color:var(--phu)}
#payPop .pay-timer b{color:var(--muc);font-weight:800}
#payPop .pay-timer.gap{background:#FFF1F2;color:#B42318}#payPop .pay-timer.gap b{color:#B42318}
#payPop .pay-tien{border-bottom-color:var(--net)}
#payPop .pay-tien span{font-size:.9375rem;color:var(--phu)}
#payPop .pay-tien b{font:400 1.75rem/1.1 var(--f-hien);letter-spacing:0;color:var(--dao)}
#payPop .pay-tien button,#payPop .qr-chep button{min-height:2.25rem;padding:0 .9rem;border:1.5px solid var(--net);border-radius:var(--r-nut);background:#fff;color:var(--xanh);font:800 .875rem var(--f-than)}
#payPop .pay-tien button:hover,#payPop .qr-chep button:hover{border-color:var(--xanh)}
#payPop .pay-tien button:active,#payPop .qr-chep button:active{background:var(--xanh);border-color:var(--xanh);color:#fff}
#payPop .qr-img{padding:.75rem;border-radius:var(--r-the);background:#fff;box-shadow:inset 0 0 0 1.5px var(--net);image-rendering:auto}
#payPop .qr-luu{min-height:3rem;border:0;border-radius:var(--r-nut);background:var(--dao);color:#fff;font:800 1rem/1.2 var(--f-than);box-shadow:0 .25rem 0 #A3134F}
#payPop .qr-luu:active{transform:translateY(.2rem);box-shadow:0 .05rem 0 #A3134F}
#payPop .qr-chep{border:0;border-radius:var(--r-the);background:var(--sua);overflow:hidden}
#payPop .qr-chep>div{padding:.6rem 1rem;border-top:1px solid var(--net)}
#payPop .qr-chep>div:first-child{border-top:0}
#payPop .qr-chep span{font-size:.875rem;color:var(--phu)}
#payPop .qr-chep b{font:800 1rem var(--f-than);color:var(--muc)}
#payPop .qr-chep .qr-nd{background:#E9ECFF}
#payPop .qr-hd{border:0;border-radius:var(--r-nho);background:var(--sua);font-size:.875rem;color:var(--muc)}
#payPop .qr-hd b{font-size:.875rem;letter-spacing:0;color:var(--phu)}
#payPop .qr-hd div span:first-child{color:var(--phu)}
#payPop .qr-note{font-size:.875rem;color:var(--phu)}
#payPop .lien-he,#donePop .lien-he{font-size:.9375rem;color:var(--phu)}
#payPop .lien-he b,#donePop .lien-he b{color:var(--xanh);font-weight:800}
#payPop .btn-ghost.huy-don{border:0;border-radius:var(--r-nut);background:none;color:var(--phu);font:700 .9375rem var(--f-than);text-decoration:underline;text-underline-offset:.2em}
#payPop .btn-ghost.huy-don:hover{color:#B42318}
#payPop .err,#donePop .err{border-radius:var(--r-nho);font-size:.9375rem}
#donePop .done-dau{width:4rem;height:4rem;border:0;border-radius:50%;background:var(--sua);color:var(--xanh)}
#donePop .done-dau.huy{color:var(--phu)}
#donePop #doneMsg{font-size:1rem;color:var(--muc)}
#donePop .btn-primary{min-height:3rem;border:0;border-radius:var(--r-nut);background:var(--dao);color:#fff;font:800 1rem/1.2 var(--f-than);box-shadow:0 .25rem 0 #A3134F}
#donePop .btn-primary:hover{background:var(--dao);color:#fff}
#donePop .btn-primary:active{transform:translateY(.2rem);box-shadow:0 .05rem 0 #A3134F}
@media (max-width:600px){#payPop .modal-box{border-radius:0}}   /* điện thoại: màn QR phủ kín (style.css), khỏi bo góc */

@media (max-width:26rem){
  #checkoutPop .dh-dong{grid-template-columns:3rem minmax(0,1fr) auto;row-gap:.5rem}
  #checkoutPop .dh-anh{width:3rem;height:3rem;grid-row:span 2;align-self:start}
  #checkoutPop .dh-sl{grid-column:2;grid-row:2}
  #checkoutPop .dh-xoa{grid-column:3;grid-row:1}
}