/* ===========================================================
shop.css — cửa hàng · giỏ hàng · thanh toán
Tách khỏi style.css để hai agent không đè lên nhau.
Biến màu/chữ lấy từ :root của style.css.
=========================================================== */
/* ---------- 1. TRANG CỬA HÀNG ---------- */
.ch-dau{padding:64px 0 38px;text-align:center}
.ch-dau h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,46px);
margin:0 0 14px;letter-spacing:-.01em}
.ch-dau .phu{margin-bottom:0;max-width:560px}
/* Bộ khám phá — dải ngang, đặt trước lưới vì đây là đường vào rẻ nhất. */
.ch-bo{background:var(--nen-2);border-top:1px solid var(--vien);
border-bottom:1px solid var(--vien);padding:52px 0}
.ch-bo-l{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
gap:46px;align-items:center}
.ch-bo-anh{aspect-ratio:4/3;background:var(--nen);border:1px solid var(--vien);
display:flex;align-items:center;justify-content:center;overflow:hidden}
.ch-bo-anh a{display:block;width:100%;height:100%}
.ch-bo-anh img{width:100%;height:100%;object-fit:cover}
.ch-bo-anh span{font-family:var(--serif);font-size:26px;letter-spacing:.14em;color:var(--nhan)}
.ch-bo-chu .mao{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
color:var(--nhan);margin:0 0 12px}
.ch-bo-chu h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.2vw,34px);
margin:0 0 14px;text-align:left}
.ch-bo-chu p{color:var(--muc-nhat);font-size:15.5px;margin:0 0 16px;max-width:520px}
.ch-bo-gia{font-size:20px !important;color:var(--muc) !important;margin-bottom:24px !important}
.ch-bo-gia span{display:block;font-size:13px;color:var(--muc-nhat);
letter-spacing:.02em;margin-top:5px}
.ch-luoi{padding-top:66px}
.ch-luoi h2{font-family:var(--serif);font-weight:400;text-align:center}
/* Thẻ sản phẩm trên trang cửa hàng: thêm hàng sao/đánh giá (DỮ LIỆU MẪU)
và nhãn dung tích, dùng lại .the/.dg/.ho-the/.gia có sẵn ở style.css. */
.luoi-ch .the .dg{flex-wrap:wrap;row-gap:4px}
.luoi-ch .the .gia-dong{margin-bottom:2px}
.luoi-ch .the .gia-dong .gia{font-size:14px;letter-spacing:.03em}
.luoi-ch .the .dung-tich{font-size:12px;color:var(--muc-nhat);margin:0 0 10px}
.ch-cuoi{border-top:1px solid var(--vien);padding:34px 0 64px;text-align:center}
.ch-cuoi p{margin:0;font-size:14.5px;color:var(--muc-nhat)}
.ch-cuoi a{color:var(--muc);text-underline-offset:4px}
@media(max-width:860px){
.ch-bo-l{grid-template-columns:1fr;gap:28px}
.ch-bo-chu h2{text-align:left}
}
/* ---------- 2. NỀN CHUNG GIỎ / THANH TOÁN ----------
Khối Woo dựng bằng JS ⇒ tên lớp là wc-block-*, grep HTML tĩnh KHÔNG thấy.
Danh sách lớp dưới đây lấy bằng --dump-dom trên trang thật. */
.woocommerce-cart main, .woocommerce-checkout main{padding-bottom:20px}
/* .trang giới hạn 720px — đúng cho trang chữ, quá hẹp cho giỏ 2 cột.
Nới riêng cho 2 trang này, và căn giữa lại. */
.woocommerce-cart .b.trang,
.woocommerce-checkout .b.trang{max-width:1120px;margin-left:auto;margin-right:auto}
/* ⛔ KHÔNG đặt width ở đây: khối này đã nằm trong .b.trang (đã giới hạn bề ngang).
Thêm width nữa sinh ra hộp hẹp lồng trong hộp hẹp, và bố cục 2 cột của Woo
(is-large) tụt xuống 1 cột — đã dính ở vòng 1, nghiệm bằng ảnh. */
.wp-block-woocommerce-cart, .wc-block-checkout{padding:16px 0 64px}
/* Ép 2 cột: danh sách hàng bên trái, cột tiền bên phải. */
.wc-block-components-sidebar-layout{
display:grid !important;grid-template-columns:minmax(0,1fr) minmax(300px,380px);
gap:52px;align-items:start}
.wc-block-components-sidebar-layout .wc-block-components-main{width:auto !important;padding:0 !important}
.wc-block-components-sidebar-layout .wc-block-components-sidebar{width:auto !important;padding:0 !important}
/* Tiêu đề trang do khối Woo tự in */
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text,
.wc-block-cart-items__header{
font-family:var(--sans) !important;font-size:10.5px !important;
letter-spacing:.22em !important;text-transform:uppercase !important;
color:var(--nhan) !important;font-weight:500 !important}
.wc-block-components-checkout-step__title{
font-family:var(--serif) !important;font-weight:400 !important;
font-size:22px !important;letter-spacing:.01em;color:var(--muc) !important}
.wc-block-components-title{font-family:var(--serif) !important;font-weight:400 !important}
/* ---------- 3. NÚT ---------- */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
background:var(--muc) !important;color:var(--nen) !important;
border:1px solid var(--muc) !important;border-radius:0 !important;
font-family:var(--sans) !important;font-size:13px !important;
letter-spacing:.13em !important;text-transform:uppercase !important;
font-weight:400 !important;padding:15px 34px !important;
box-shadow:none !important;transition:.18s}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
background:transparent !important;color:var(--muc) !important}
.wc-block-components-button__text,
.wc-block-components-checkout-place-order-button__text{
color:inherit !important}
/* Nút nhỏ dạng chữ (sửa địa chỉ, gỡ hàng…) giữ kiểu chữ gạch chân của theme */
.wc-block-components-button.is-link,
.wc-block-cart-item__remove-link,
.wc-block-components-address-card__edit{
color:var(--muc-nhat) !important;font-size:12.5px !important;
text-underline-offset:3px;background:none !important;border:0 !important}
.wc-block-components-button.is-link:hover,
.wc-block-cart-item__remove-link:hover{color:var(--muc) !important}
/* ---------- 4. Ô NHẬP ---------- */
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=number],
.wc-block-components-combobox input,
.wc-block-components-textarea,
.wc-block-components-country-input input,
.wc-block-components-state-input input{
border:1px solid var(--vien) !important;border-radius:0 !important;
background:var(--nen) !important;color:var(--muc) !important;
font-family:var(--sans) !important;font-size:15px !important;
box-shadow:none !important}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-textarea:focus{
border-color:var(--muc) !important;outline:0 !important;box-shadow:none !important}
.wc-block-components-text-input label,
.wc-block-components-combobox label{
color:var(--nhan) !important;font-family:var(--sans) !important}
/* Ô chọn (giao hàng / thanh toán) */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option{
border-radius:0 !important;font-family:var(--sans)}
.wc-block-components-radio-control-accordion-option{
border:1px solid var(--vien) !important}
.wc-block-components-radio-control--highlight-checked
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted{
border-color:var(--muc) !important;box-shadow:0 0 0 1px var(--muc) inset !important}
/* ⛔ Không tô đặc nền ô chọn: Woo vẽ chấm/dấu tick BẰNG ::before cùng màu,
tô nền đen làm chấm biến mất, thành cục đen đặc. Chỉ đổi màu viền + chấm. */
.wc-block-components-radio-control__input{
border-color:var(--vien) !important;background:var(--nen) !important}
.wc-block-components-radio-control__input:checked{
border-color:var(--muc) !important;background:var(--nen) !important}
.wc-block-components-radio-control__input:checked::before{
background:var(--muc) !important}
.wc-block-components-checkbox__input{
border-color:var(--vien) !important;background:var(--nen) !important;border-radius:0 !important}
.wc-block-components-checkbox__input:checked{
background:var(--muc) !important;border-color:var(--muc) !important}
.wc-block-components-checkbox__mark{fill:var(--nen) !important;color:var(--nen) !important}
.wc-block-components-checkbox__label{color:var(--muc-nhat)}
/* Ô số lượng */
.wc-block-components-quantity-selector{
border:1px solid var(--vien) !important;border-radius:0 !important;background:var(--nen)}
.wc-block-components-quantity-selector::after{display:none !important}
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button{
color:var(--muc) !important;background:transparent !important;font-family:var(--sans)}
/* ---------- 5. BẢNG HÀNG TRONG GIỎ ---------- */
.wc-block-cart-items{border-collapse:collapse}
.wc-block-cart-items__header th{
border-bottom:1px solid var(--vien) !important;padding-bottom:12px}
.wc-block-cart-items__row td{
border-bottom:1px solid var(--vien) !important;padding-top:22px;padding-bottom:22px}
.wc-block-cart-items__header-image,.wc-block-cart-item__image{width:88px}
.wc-block-cart-item__image img{border:1px solid var(--vien);background:var(--nen-2);width:78px}
/* Cột giá bên phải: cố định hẹp + căn phải, nếu không tên sản phẩm bị giá đâm vào. */
.wc-block-cart-items__header-total,.wc-block-cart-item__total{
width:130px;text-align:right;vertical-align:top}
.wc-block-cart-item__prices{display:block}
.wc-block-cart-item__wrap{padding-right:16px}
.wc-block-components-product-name{
font-family:var(--serif) !important;font-size:18px !important;
font-weight:500 !important;letter-spacing:.05em;color:var(--muc) !important;
text-decoration:none !important}
.wc-block-components-product-name:hover{text-decoration:underline !important;
text-underline-offset:4px}
/* Mô tả ngắn bị cắt giữa chừng làm rối cột — ẩn đi, tên + giá là đủ. */
.wc-block-components-product-metadata__description{display:none !important}
.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount{
font-family:var(--sans);letter-spacing:.02em;color:var(--muc)}
/* ---------- 6. CỘT TỔNG TIỀN ---------- */
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-totals-wrapper{border-color:var(--vien) !important}
.wc-block-components-totals-item__label{color:var(--muc-nhat);font-size:14px}
.wc-block-components-totals-item__value{color:var(--muc);font-size:14px}
.wc-block-components-totals-footer-item{
font-family:var(--serif) !important;border-top:1px solid var(--vien)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
font-family:var(--serif) !important;font-size:19px !important;color:var(--muc)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
font-family:var(--serif) !important;font-size:23px !important;color:var(--muc)}
.wc-block-components-panel__button{
color:var(--muc-nhat) !important;font-family:var(--sans) !important;font-size:14px}
.wc-block-components-panel__button:hover{color:var(--muc) !important}
/* Khung tóm tắt đơn ở trang thanh toán */
.wc-block-checkout__sidebar .wc-block-components-sidebar{
background:var(--nen-2);border:1px solid var(--vien);border-radius:0}
.wc-block-components-checkout-order-summary__content{border-radius:0}
/* ---------- 7. THÔNG BÁO ---------- */
.wc-block-components-notice-banner{
border-radius:0 !important;background:var(--nen-2) !important;
border:1px solid var(--vien) !important;color:var(--muc) !important;
font-family:var(--sans)}
.wc-block-components-notice-banner>svg{fill:var(--muc-nhat) !important}
/* Thông báo cũ dạng woocommerce-message (do wc_print_notices in ra) */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
background:var(--nen-2);border:1px solid var(--vien);border-top:0;
color:var(--muc);padding:16px 20px;list-style:none;margin:0 0 28px;
font-size:14.5px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.woocommerce-message .button,.woocommerce-info .button{
background:var(--muc);color:var(--nen);border:1px solid var(--muc);
padding:11px 24px;text-decoration:none;font-size:12px;
letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;border-radius:0}
.woocommerce-message .button:hover{background:transparent;color:var(--muc)}
/* Giỏ rỗng */
.wp-block-woocommerce-empty-cart-block{text-align:center;padding:20px 0 40px}
@media(max-width:860px){
.wp-block-woocommerce-cart,.wc-block-checkout{padding:8px 0 48px}
.wc-block-components-sidebar-layout{grid-template-columns:1fr !important;gap:30px}
}
/* ===========================================================
8. TRANG SẢN PHẨM — các khối dựng thêm
Bảng so sánh (.so-sanh/.bang-ss) dùng lại CSS sẵn có trong style.css,
nên phần này chỉ có CSS của khối THẬT SỰ MỚI.
⛔ Mọi khối .mau-nhan gắn với DỮ LIỆU GIẢ — xoá cùng số khi mở bán thật.
=========================================================== */
/* Tiêu đề căn giữa dùng chung — thay cho style="" nội tuyến. */
.tieu-giua{font-family:var(--serif);font-weight:400;
font-size:clamp(25px,3.3vw,34px);text-align:center;margin:0 0 8px}
/* ---------- 8.1 Đoạn giáo dục trong khối hồ sơ mùi ---------- */
.gd-not{max-width:66ch;margin:30px auto 6px;padding:24px 28px;
background:var(--nen-2);border:1px solid var(--vien)}
.gd-mao{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
color:var(--nhan);margin-bottom:11px}
.gd-not p{margin:0 0 11px;font-size:14.5px;line-height:1.72;color:var(--muc-nhat)}
.gd-not p:last-child{margin-bottom:0}
/* ---------- 8.2 Ba bước có ảnh + nút ---------- */
.cd-sp{border-top:1px solid var(--vien)}
.cd-sp .cd-l{margin-top:42px}
/* .cd-l là grid 3 cột (style.css). min-width:0 để con không đẩy tràn ngang. */
.cd-sp .cd-l>div{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
/* Số bước ở đây là CHỮ ("Bước một") chứ không phải số — chỉnh lại cỡ cho khỏi to lố. */
.cd-sp .cd-l .so{font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;
text-transform:uppercase;color:var(--nhan);margin:16px 0 7px}
.cd-sp .cd-l .anh-b{width:100%}
.cd-nut{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.1em;
text-transform:uppercase;color:var(--muc);text-decoration:none;
border-bottom:1px solid var(--vien);padding-bottom:4px;transition:.18s}
.cd-nut:hover{border-bottom-color:var(--muc)}
/* ---------- 8.3 Băng chữ chạy ngang ---------- */
/* Hai cụm giống hệt nhau nối đuôi; dịch đúng 50% rồi lặp lại ⇒ liền mạch. */
.bang-chay{overflow:hidden;background:var(--nen-2);color:var(--muc);
padding:15px 0;border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)}
.bc-ray{display:flex;width:max-content;animation:bc-troi 34s linear infinite}
.bc-cum{display:flex;align-items:center;flex:0 0 auto}
.bc-muc{font-family:var(--serif);font-size:clamp(14px,1.8vw,19px);
letter-spacing:.04em;white-space:nowrap;padding:0 4px;color:var(--muc)}
.bc-cham{color:var(--nhan);font-size:8px;padding:0 26px;transform:translateY(-2px)}
@keyframes bc-troi{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bang-chay:hover .bc-ray{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
.bc-ray{animation:none;width:100%;overflow-x:auto}
.bc-cum:nth-child(2){display:none}
}
.dg-chua{font-size:13px;color:var(--muc-nhat);text-decoration:none;
border-bottom:1px solid var(--vien);padding-bottom:2px}
.dg-chua:hover{color:var(--muc)}
/* ---------- 8.3b Khoi "Mui nay hop voi ai" (thay khoi sao GIA) ---------- */
.dg-dan{text-align:center;color:var(--muc-nhat);font-size:15px;max-width:560px;
margin:0 auto 36px;line-height:1.6}
.hva{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;margin-bottom:34px}
.hva-o{border:1px solid var(--vien);border-radius:10px;padding:22px 24px;background:var(--nen)}
.hva-hop{border-left:2px solid var(--muc)}
.hva-khong{border-left:2px solid var(--muc-nhat)}
.hva-nhan{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
color:var(--nhan);margin-bottom:10px}
.hva-hop .hva-nhan{color:var(--muc)}
.hva-o p{margin:0;font-family:var(--serif);font-size:18px;line-height:1.5}
.hva-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:1px;background:var(--vien);border:1px solid var(--vien);border-radius:10px;
overflow:hidden;margin-bottom:26px}
.hva-so>div{background:var(--nen);padding:15px 18px}
.hva-so span{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--nhan);margin-bottom:5px}
.hva-so b{font-weight:400;font-family:var(--serif);font-size:17px}
.hva-thu{text-align:center;font-size:14.5px;color:var(--muc-nhat);margin:0}
.hva-thu a{color:var(--muc)}
@media(max-width:700px){
.hva-o{padding:18px 19px}
.hva-o p{font-size:16.5px}
.dg-dan{font-size:14px;margin-bottom:26px}
}
/* ---------- 8.4 Khối đánh giá (DỮ LIỆU MẪU) ---------- */
.dg{padding:70px 0;border-top:1px solid var(--vien)}
.dg .mau-luoi{text-align:center;margin:0 0 34px}
.dg-tren{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
gap:44px;align-items:center;padding:26px 0 32px;border-bottom:1px solid var(--vien)}
.dg-diem{text-align:center;min-width:0}
.dg-so-lon{font-family:var(--serif);font-size:58px;line-height:1;color:var(--muc)}
.dg-diem .sao{margin:10px 0 7px;font-size:15px}
.dg-dem{font-size:13px;color:var(--muc-nhat)}
.dg-diem .mau-nhan{margin-top:9px}
.dg-vach{min-width:0;display:flex;flex-direction:column;gap:9px}
.dg-hang{display:grid;grid-template-columns:52px minmax(0,1fr) 40px;
gap:13px;align-items:center}
.dg-nhan-sao{font-size:12.5px;color:var(--muc-nhat);white-space:nowrap}
.dg-thanh{display:block;height:6px;background:var(--nen-2);
border:1px solid var(--vien);min-width:0}
.dg-thanh i{display:block;height:100%;background:var(--nhan)}
.dg-pt{font-size:12.5px;color:var(--muc-nhat);text-align:right}
.dg-loi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:26px;margin-top:34px}
.dg-the{min-width:0;margin:0;padding:24px 24px 20px;
background:var(--nen-2);border:1px solid var(--vien)}
.dg-the .sao{font-size:13px;margin-bottom:12px}
.dg-the p{margin:0 0 16px;font-size:14.5px;line-height:1.7;color:var(--muc)}
.dg-the footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding-top:13px;border-top:1px solid var(--vien)}
.dg-ten{font-size:13px;color:var(--muc)}
.dg-ngay{font-size:12.5px;color:var(--muc-nhat)}
/* ---------- 8.5 Cần biết trước khi mua ---------- */
.cb{padding:70px 0;border-top:1px solid var(--vien);background:var(--nen-2)}
.cb-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:30px 40px;margin-top:40px}
.cb-o{min-width:0}
.cb-o h4{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 9px;
padding-top:13px;border-top:1px solid var(--vien)}
.cb-o p{margin:0;font-size:14.5px;line-height:1.72;color:var(--muc-nhat)}
/* Bảng so sánh đặt ở trang sản phẩm: nền .ss đã là nen-2, .cb cũng vậy
⇒ đổi nền bảng so sánh sang nền trắng cho hai khối không dính làm một. */
.single-product .so-sanh{background:var(--nen)}
/* ---------- 8.6 Điện thoại ---------- */
@media(max-width:860px){
.dg-tren{grid-template-columns:1fr;gap:26px;text-align:center}
.dg-vach{max-width:420px;margin:0 auto;width:100%}
.dg-loi{grid-template-columns:1fr;gap:18px}
.cb-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px}
.gd-not{padding:20px 20px;margin-top:26px}
.bc-muc{font-size:15px}
.bc-cham{padding:0 18px}
}
@media(max-width:560px){
.cb-l{grid-template-columns:1fr}
.dg,.cb{padding:52px 0}
.dg-so-lon{font-size:48px}
}
/* ---------- 8.7 Dải "Nhảy tới" khi có nhiều mục ----------
Thêm 3 mục mới ⇒ ở 390px dải xuống 3 hàng, trông rối.
Trên điện thoại đổi thành MỘT hàng trượt ngang (đúng kiểu thanh nhảy mục).
Trượt nằm TRONG dải, không phải tràn trang: đã đo scrollWidth = clientWidth. */
@media(max-width:720px){
.nhay-toi{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nhay-toi::-webkit-scrollbar{display:none}
.nhay-toi>*{flex:0 0 auto}
.nhay-toi span{position:sticky;left:0;background:var(--nen);
padding-right:8px;z-index:1}
}
/* ---------- 8.8 Hàng "GREEN · TOẢ GẦN · sao · đánh giá · Dữ liệu mẫu" tràn ở 390px ----------
.tieu-hang la flex hang-ngang (.ho + .dg-sp) khong wrap; o man hep .dg-sp
khong co cho co lai nen nhan "Du lieu mau" bi day ra ngoai vung nhin.
Vá bằng min-width:0 tren item flex + cho .tieu-hang tu xuong hang, KHONG dung overflow:hidden.
⛔ shop.css nạp TRƯỚC style.css trong ⇒ rule cùng cấp bị style.css (nạp sau) đè.
Tăng độ đặc hiệu bằng .the-mua thay vì !important. */
@media(max-width:560px){
.sp .the-mua .tieu-hang{flex-wrap:wrap;row-gap:6px}
.sp .the-mua .tieu-hang .ho,
.sp .the-mua .tieu-hang .dg-sp{min-width:0}
.sp .the-mua .dg-sp{flex-wrap:wrap}
}
/* ---------- 9. FORM ĐÁNH GIÁ THẬT (khách tự gửi) ----------
Phía trên là DỮ LIỆU MẪU (sẽ xoá trước khi mở bán).
Khối này là chỗ khách THẬT gửi đánh giá — Woo tự lo phần lưu.
Woo in markup riêng nên phải phủ giao diện cho khớp theme. */
.dg-that{max-width:760px;margin:0 auto;padding-top:8px}
.dg-that-vach{height:1px;background:var(--vien);margin:0 0 40px}
.dg-that #reviews h2,
.dg-that .comment-reply-title{font-family:var(--serif);font-weight:400;
font-size:22px;color:var(--muc);margin:0 0 14px;letter-spacing:.01em}
.dg-that .woocommerce-noreviews,
.dg-that .comment-notes{color:var(--muc-nhat);font-size:14.5px;margin:0 0 22px;line-height:1.7}
/* hàng sao: Woo in xếp ngang — biến thành 5 ngôi sao bấm được */
.dg-that .comment-form-rating{margin:0 0 22px}
.dg-that .comment-form-rating label{display:block;font-size:13px;
letter-spacing:.08em;text-transform:uppercase;color:var(--muc-nhat);margin:0 0 10px}
.dg-that .stars{display:flex;gap:6px;margin:0}
/* Woo boc 5 the trong MOT — phai cho span cung thanh flex,
neu khong flex chi dan hang cai span va 5 sao van xep DOC. */
.dg-that .stars > span{display:flex;gap:6px;align-items:center}
.dg-that .stars a{position:relative;width:26px;height:26px;display:block;
text-indent:-9999px;overflow:hidden;text-decoration:none}
.dg-that .stars a::before{content:"★";position:absolute;inset:0;
text-indent:0;font-size:24px;line-height:26px;color:var(--vien);
transition:color .15s ease}
.dg-that .stars a:hover::before,
.dg-that .stars.selected a.active::before,
.dg-that .stars.selected a:not(.active)::before{color:var(--dong)}
.dg-that .stars.selected a.active~a::before{color:var(--vien)}
/* ô nhập */
.dg-that .comment-form label{display:block;font-size:13px;letter-spacing:.08em;
text-transform:uppercase;color:var(--muc-nhat);margin:0 0 8px}
.dg-that .comment-form input[type=text],
.dg-that .comment-form input[type=email],
.dg-that .comment-form textarea{width:100%;box-sizing:border-box;
background:var(--nen);border:1px solid var(--vien);border-radius:2px;
padding:12px 14px;font-family:inherit;font-size:15px;color:var(--muc);
transition:border-color .15s ease}
.dg-that .comment-form input:focus,
.dg-that .comment-form textarea:focus{outline:none;border-color:var(--dong)}
.dg-that .comment-form textarea{min-height:130px;resize:vertical;line-height:1.7}
.dg-that .comment-form p{margin:0 0 18px;min-width:0}
.dg-that .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:9px}
.dg-that .comment-form-cookies-consent label{text-transform:none;letter-spacing:0;
font-size:14px;margin:0;color:var(--muc-nhat)}
.dg-that .comment-form-cookies-consent input{margin-top:2px;flex:0 0 auto}
/* nút gửi — cùng kiểu nút mua của theme */
.dg-that .form-submit input[type=submit]{appearance:none;cursor:pointer;
background:var(--muc);color:var(--nen);border:0;border-radius:2px;
padding:14px 30px;font-family:inherit;font-size:13.5px;letter-spacing:.1em;
text-transform:uppercase;transition:opacity .15s ease}
.dg-that .form-submit input[type=submit]:hover{opacity:.85}
/* danh sách đánh giá khi đã có */
.dg-that .commentlist{list-style:none;margin:0 0 34px;padding:0}
.dg-that .commentlist li{border:1px solid var(--vien);background:var(--nen-2);
border-radius:3px;padding:18px 20px;margin:0 0 12px}
.dg-that .commentlist .meta{font-size:13px;color:var(--muc-nhat);margin:0 0 8px}
.dg-that .commentlist .description p{margin:0;line-height:1.75;font-size:15px}
.dg-that .avatar{display:none}
@media (max-width:600px){
.dg-that{padding:0 4px}
.dg-that .form-submit input[type=submit]{width:100%}
}
/* ---------- 10. LƯỚI "MÙI KHÁC" 4 CỘT ----------
🔴 Bọ: `.luoi` mặc định 3 cột (style.css) mà khối này có 4 mùi
⇒ mùi thứ tư rớt xuống dòng hai, để trống 2 ô. */
.pt .luoi-4{grid-template-columns:repeat(4,1fr);gap:32px 22px}
@media(max-width:1000px){.pt .luoi-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pt .luoi-4{grid-template-columns:1fr}}
/* con cua grid phai co min-width:0, neu khong chu dai keo o rong ra */
.pt .luoi-4 > .the{min-width:0}
/* ---------- 11. DẢI CUỘN NGANG (dùng chung trang chủ + trang SP) ----------
🔴 Bọ: `front-page.php` in `.bch-dai` từ lâu nhưng CSS CHƯA HỀ CÓ
⇒ thẻ xếp dọc thành cột dài thay vì cuộn ngang.
Cũng dùng cho khối «Năm mùi trong bộ» (5 mùi — lưới 3 cột để lệch 3/2). */
.bch-dai{display:flex;flex-direction:row;flex-wrap:nowrap;gap:20px;
overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
padding:4px 2px 16px;margin:0 -2px;
scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.bch-the{flex:0 0 auto;width:264px;min-width:0;scroll-snap-align:start;
display:flex;flex-direction:column}
.bch-lk{display:block;text-decoration:none;color:inherit}
.bch-anh{aspect-ratio:3/4;background:var(--nen-2);border:1px solid var(--vien);
overflow:hidden;display:flex;align-items:center;justify-content:center;margin:0 0 14px}
.bch-anh img{width:100%;height:100%;object-fit:cover;display:block}
.bch-anh span{font-family:var(--serif);font-size:26px;letter-spacing:.12em;color:var(--nhan)}
.bch-the h3{font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.1em;
margin:0 0 6px;color:var(--muc)}
.bch-gia{font-size:14px;color:var(--muc-nhat);margin:0 0 12px}
.bch-nut{display:block;text-align:center;text-decoration:none;
border:1px solid var(--muc);color:var(--muc);background:transparent;
padding:11px 14px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
margin-top:auto;transition:background .15s ease,color .15s ease}
.bch-nut:hover{background:var(--muc);color:var(--nen)}
.bch-lk:hover .bch-anh{border-color:var(--nhan)}
/* gợi ý còn nội dung bên phải */
.bch .b{position:relative}
@media(max-width:860px){
.bch-the{width:214px}
.bch-anh{margin-bottom:11px}
}
@media(max-width:480px){.bch-the{width:78vw;max-width:280px}}
/* ---------- 12. CHỌN DUNG TÍCH (bậc giá 10ml ⇄ 20ml) ----------
Bảng giá: 2ml 150K · bộ 5×2ml 490K · 10ml 750K · 20ml 1.290K
🔴 Phiếu 490K CHỈ áp lọ 20ml — dòng .cc-luu nói rõ, đừng xoá. */
.chon-co{margin:0 0 20px}
.cc-nhan{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
color:var(--muc-nhat);margin:0 0 9px}
.cc-hang{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cc-o{display:flex;flex-direction:column;gap:3px;min-width:0;
border:1px solid var(--vien);border-radius:3px;padding:11px 13px;
text-decoration:none;color:var(--muc);background:var(--nen);
transition:border-color .15s ease,box-shadow .15s ease}
.cc-o:hover{border-color:var(--nhan)}
.cc-chon{border-color:var(--muc);box-shadow:inset 0 0 0 1px var(--muc)}
.cc-co{font-size:15px;font-weight:500;letter-spacing:.04em}
.cc-gia{font-size:14.5px;color:var(--muc)}
.cc-phu{font-size:12px;color:var(--muc-nhat)}
.cc-luu{font-size:12.5px;color:var(--muc-nhat);margin:9px 0 0;line-height:1.55}
@media(max-width:420px){.cc-hang{grid-template-columns:1fr}}
/* ---------- 13. KHỐI VIDEO trang sản phẩm ----------
🔴 Trang SP CHỈ nạp shop.css (style.css không nạp) ⇒ luật video
phải có ở CẢ HAI file, nếu không video hiện trần không khung. */
.vid{padding:56px 0;border-top:1px solid var(--vien)}
.vid-khung{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
background:var(--muc);border:1px solid var(--vien)}
.vid-the{width:100%;height:100%;object-fit:cover;display:block}
.vid-chu{text-align:center;color:var(--muc-nhat);font-size:14.5px;
margin:16px 0 0;line-height:1.6}
@media(max-width:700px){.vid{padding:40px 0}}
/* nut mua hang: nau nhan cho dong bo voi toan web (nen ngà tren nau = 6,47) */
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
button.single_add_to_cart_button,
.sp button[type=submit]{background:var(--dong) !important;border-color:var(--dong) !important;color:var(--nen) !important}
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover{background:var(--dong-dam) !important;border-color:var(--dong-dam) !important}
/* ── Dai cuon KHONG LECH khi it the ────────────────────────────
Bo: the rong CUNG 264px. Khoi "Mui khac" chi co 4 the
=> 4x264 + 3x20 = 1.116px trong khung 1.120px, thua ben phai
=> ca hang don sang TRAI, trong nhu lech. (CEO bat 14/09)
Sua: tren man rong, the GIAN DEU lap kin khung; chi khi
nhieu the (tran khung) moi quay ve cuon ngang. */
@media(min-width:861px){
.bch-dai{justify-content:flex-start}
/* the co the gian ra, nhung khong bao gio hep hon 240px */
.bch-dai > .bch-the{flex:1 1 240px;width:auto;max-width:320px}
}
/* SUA BOI HOI QUY 14/09: "flex:1 1 240px" cho phep CO NHO hon 240px
(so thu 2 la flex-shrink=1) => trang chu 6 the bi bop con 204px,
MAT HAN dai cuon ngang. Dung "flex:1 0 240px" + min-width:240px
=> gian duoc khi it the, nhung KHONG BAO GIO co duoi 240. */
@media(min-width:861px){
.bch-dai > .bch-the{flex:1 0 240px;min-width:240px;width:auto;max-width:320px}
}
/* ---------- 11b. NUT TIEN/LUI cho dai cuon (CEO bat 14/09) ----------
Boi: dai cuon duoc nhung KHONG CO GI BAO cho khach biet la cuon duoc.
Tren may tinh khong co ngon tay vuot => the cuoi bi cat trong nhu LOI.
Nut do JS gan (soglia_dai_cuon), an han khi khong con cho de cuon. */
.bch-vo{position:relative}
.bch-nutx{position:absolute;top:34%;z-index:5;
width:44px;height:44px;border-radius:50%;
background:var(--nen);border:1px solid var(--vien);color:var(--muc);
display:flex;align-items:center;justify-content:center;
cursor:pointer;padding:0;font-size:17px;line-height:1;
box-shadow:0 2px 10px rgba(33,28,23,.10);
transition:opacity .18s ease,background .15s ease,border-color .15s ease}
.bch-nutx:hover{background:var(--muc);border-color:var(--muc);color:var(--nen)}
.bch-nutx[hidden]{display:none}
.bch-nutx.truoc{left:-20px}
.bch-nutx.sau{right:-20px}
/* tren dien thoai: vuot bang tay, khong can nut */
@media(max-width:860px){.bch-nutx{display:none}}
/* vet mo ben phai: dau hieu con noi dung, ngay ca khi chua bam nut */
.bch-vo::after{content:"";position:absolute;top:0;bottom:16px;right:0;width:48px;
pointer-events:none;opacity:0;transition:opacity .2s ease}
.bch-vo.con-phai::after{opacity:1;
background:linear-gradient(90deg,transparent,var(--nen-2))}