/* SU-BH-01-v2 PrintME - thành phần và bố cục.
   CHỈ đọc token vai trò (tầng 2) trong tokens.css, không đọc lá màu.
   Viết từ điện thoại 360 lên: mặc định là điện thoại, mốc min-width 768 · 1024 · 1200.
   Mỗi kiểu chữ trong <main> khớp đúng một trong 15 preset của bang-chu.json: lớp .t-* ở mục CHỮ ngay dưới
   là preset, phần tử không mang lớp nào thì là preset text (đoạn thường) của body.
   Giọng hình theo ảnh khách: nền trắng, khối xám rất nhạt, ô cam nhạt và ô đen; VỆT CỌ cam chéo ở phần đầu; NÉT VẼ TAY
   (gạch chân dưới chữ cam, bong bóng chữ, mũi tên) tối đa một nét mỗi khối; thẻ bo 8 đến 12, nút bo tròn hẳn. */

/* ============ NỀN ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--lh-body);font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.co-thanh-lien-he{padding-bottom:var(--contact-bar-h)}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:var(--link);text-decoration:none}
p,ul,ol,dl,dd,figure,blockquote,address{margin:0;padding:0}
ul,ol{list-style:none}
table{border-collapse:separate;border-spacing:0;width:100%}
th{text-align:left;font-weight:inherit}
button,input,select,textarea{font:inherit;color:inherit}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-ring);color:var(--text)}
input,select,textarea{caret-color:var(--primary);accent-color:var(--primary)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bo-qua{position:absolute;left:16px;top:-64px;z-index:200;background:var(--surface);color:var(--text);padding:12px 16px;border-radius:var(--radius-sm);box-shadow:var(--shadow-2);font-size:var(--text-small);line-height:var(--lh-lead)}
.bo-qua:focus{top:12px}
.khung{width:100%;max-width:calc(var(--container) + 2 * var(--margin));margin-inline:auto;padding-inline:var(--margin)}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text);text-wrap:balance}
p{text-wrap:pretty}
b,strong{font-weight:var(--fw-semibold)}
.khoi{padding-block:var(--section-y);background:var(--bg)}
/* Trang chủ bám khoảng thở của ảnh khách: các khối nối nhau sát, khoảng giữa hai khối khoảng 40px ở 1440 */
.trang-chu{--section-y:var(--space-8)}
@media (min-width:1200px){.trang-chu{--section-y:var(--space-8)}}
/* Con của lưới không được nở theo bảng cuộn ngang bên trong: thiếu dòng này thì bảng 760px đẩy cả trang tràn ở 360 */
.sp__luoi>*,.bac-gia__luoi>*,.gio__luoi>*,.chuan-bi__luoi>*,.size__luoi>*,.dat-dau__luoi>*,.cua-hang__luoi>*,.lh-dau__luoi>*,.sp-mo-ta__luoi>*,.ghe__luoi>*,.hai-o__o>*{min-width:0}
.chu-cam{color:var(--accent)}

/* ============ CHỮ: 15 preset ============ */
/* preset display (tiêu đề phần đầu trang chủ) */
.t-display{font-family:var(--font-heading);font-size:var(--text-display);font-weight:var(--fw-extrabold);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
/* preset primary (H1 trang con, dòng đáp lớn "Không sao.") */
.t-h1{font-family:var(--font-heading);font-size:var(--text-h1);font-weight:var(--fw-extrabold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
/* preset secondary (H2, số bước) */
.t-h2{font-family:var(--font-heading);font-size:var(--text-h2);font-weight:var(--fw-extrabold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
/* preset h3 */
.t-h3{font-family:var(--font-heading);font-size:var(--text-h3);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:0}
/* preset h4 (tên sản phẩm, tên bước) */
.t-h4{font-family:var(--font-heading);font-size:var(--text-h4);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:0}
/* preset h5 (20px cố định: chữ nút cam, bong bóng chữ) */
.t-h5{font-family:var(--font-heading);font-size:var(--text-h5);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:0}
/* preset h6 (đầu cột bảng, thông số ngắn): in hoa, giãn chữ nhẹ */
.t-h6,.bang thead th{font-family:var(--font-ui);font-size:var(--text-h6);font-weight:var(--fw-semibold);line-height:var(--lh-label);letter-spacing:var(--ls-caps);text-transform:uppercase}
/* preset accent (đoạn lớn) */
.t-lead{font-family:var(--font-ui);font-size:var(--text-lead);font-weight:var(--fw-regular);line-height:var(--lh-lead)}
/* preset text (đoạn thường) là mặc định của body: p, li, td, dd không mang lớp */
.t-body{font-family:var(--font-ui);font-size:var(--text-body);font-weight:var(--fw-regular);line-height:var(--lh-body)}
/* preset small (đoạn nhỏ) */
.t-small,.duong-dan,.buoc-mua,.sp__hen,.tom-tat__yen,.su-form__dong-y,.su-form__ban-quyen,.su-form__kq,.ghi-mau{font-family:var(--font-ui);font-size:var(--text-small);font-weight:var(--fw-regular);line-height:var(--lh-lead);letter-spacing:0}
/* preset caption (chú thích nhỏ nhất: số đếm giỏ hàng, tên tệp chỗ giữ ảnh, ghi chú bản đồ) */
.t-caption{font-family:var(--font-ui);font-size:var(--text-caption);font-weight:var(--fw-semibold);line-height:var(--lh-label)}
/* preset label (nhãn đậm 16: tên danh mục, giá trị thông số, tên lựa chọn) */
.t-label{font-family:var(--font-ui);font-size:var(--text-label);font-weight:var(--fw-semibold);line-height:var(--lh-label);letter-spacing:0}
/* preset button (chữ nút cỡ thường, ô chọn, thẻ chọn) */
.t-button,.chip,.su-cb a{font-family:var(--font-ui);font-size:var(--text-button);font-weight:var(--fw-semibold);line-height:1.25}
/* preset code (mã và số: số điện thoại, ô số lượng) */
.t-code{font-family:var(--font-mono);font-size:var(--text-code);font-weight:var(--fw-medium);line-height:var(--lh-label);font-variant-numeric:tabular-nums}
/* preset price (giá tiền) */
.t-price{font-family:var(--font-heading);font-size:var(--text-price);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:var(--ls-price);white-space:nowrap}

/* ============ BIỂU TƯỢNG, NÉT VẼ TAY ============ */
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.ic--lg{width:32px;height:32px}.ic--sm{width:20px;height:20px}.ic--xs{width:16px;height:16px}
.ic-dac{fill:currentColor;stroke:none}
/* Dấu Zalo dùng chung: _SU-wiki/tai-nguyen/README.md. Nút trong nội dung mang màu thương hiệu, không mang xanh Zalo */
.ic-zalo{width:32px;height:24px;flex:none;--zalo-bong:var(--zalo);--zalo-chu:var(--on-dark)}
.ic-zalo--sm{width:27px;height:20px}
.ic-zalo__bong{fill:var(--zalo-bong)}.ic-zalo__chu{fill:var(--zalo-chu)}
.su-btn--outline .ic-zalo,.su-btn--trang .ic-zalo{--zalo-bong:var(--text);--zalo-chu:var(--be-mat)}
.su-btn--primary .ic-zalo{--zalo-bong:var(--primary-text);--zalo-chu:var(--primary)}
.su-btn--primary:hover .ic-zalo{--zalo-chu:var(--primary-hover)}
.su-btn--accent .ic-zalo{--zalo-bong:var(--text-on-accent);--zalo-chu:var(--accent)}
.su-btn--accent:hover .ic-zalo{--zalo-chu:var(--accent-hover)}
.su-cb__zalo .ic-zalo,.zalo-noi .ic-zalo{--zalo-bong:var(--on-dark);--zalo-chu:var(--zalo)}
/* Gạch chân vẽ tay dưới chữ cam ở tiêu đề khối: hai nét lệch nhau như bút dạ, co giãn theo bề rộng chữ */
.gach{position:relative;display:inline-block;color:var(--accent);white-space:nowrap}
.gach__net{position:absolute;left:-2%;right:-2%;bottom:-.14em;width:104%;height:.3em;overflow:visible;fill:none;stroke:var(--net-tay);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gach__net path+path{stroke-width:1.8;opacity:.75}

/* ============ NÚT VÀ LIÊN KẾT ============ */
.su-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--control-h);padding:0 22px;border-radius:var(--radius-nut);border:var(--border-w) solid transparent;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.su-btn--lg{min-height:var(--control-h-lg);padding:0 26px}
.su-btn--sm{min-height:var(--control-h-sm);padding:0 16px}
.su-btn--full{width:100%}
/* Nút đặc cỡ thường (biểu mẫu, bộ lọc): cam đậm, chữ trắng 4,87:1 */
.su-btn--primary{background:var(--primary);color:var(--primary-text)}
.su-btn--primary:hover{background:var(--primary-hover)}
/* Nút đặc cam như ảnh khách: chữ trắng 20px đậm 700 (chữ lớn, 3,21:1). Rê chuột chuyển sang cam đậm, tương phản tăng */
.su-btn--accent{background:var(--accent);color:var(--text-on-accent)}
.su-btn--accent:hover{background:var(--accent-hover);transform:translateY(-1px)}
.su-btn--accent:active{background:var(--accent-active);transform:none}
/* Nút viền đen như "Xem sản phẩm" trong ảnh khách */
.su-btn--outline{background:transparent;color:var(--text);border-color:var(--text)}
.su-btn--outline:hover{background:var(--text);color:var(--bg)}
.su-btn--outline:hover .ic-zalo{--zalo-bong:var(--bg);--zalo-chu:var(--text)}
/* Nút trắng trên ảnh, trên bản đồ: chữ đen */
.su-btn--trang{background:var(--be-mat);color:var(--text);box-shadow:var(--shadow-1)}
.su-btn--trang:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.hang-nut{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hang-nut--deu{display:grid;grid-template-columns:1fr 1fr}
.hang-nut--deu .su-btn{padding:0 12px}
/* Liên kết có mũi tên: gạch chân hiện dần, mũi tên nhích khi rê chuột */
.lk-mui{display:inline-flex;align-items:center;gap:6px;color:var(--link);background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size var(--dur) var(--ease),color var(--dur-fast)}
.lk-mui .ic{transition:transform var(--dur) var(--ease)}
.lk-mui:hover{background-size:100% 1.5px;color:var(--link-hover)}
.lk-mui:hover .ic{transform:translateX(4px)}
main p a:not(.su-btn):not(.lk-mui),main dd a:not(.su-btn):not(.t-code),.ghi-mau a{color:var(--link);font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* Ô chọn bo tròn: kích thước, kỹ thuật, vị trí in, thẻ trang, neo trang */
.chip{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:52px;padding:0 16px;border:var(--border-w) solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);cursor:pointer;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip:hover{border-color:var(--text)}
.chip:has(input:checked){border-color:var(--text);background:var(--text);color:var(--bg)}
.chip:has(input:focus-visible){outline:2px solid var(--border-focus);outline-offset:3px}
.chip--lk:hover{border-color:var(--accent);color:var(--accent-text)}

/* ============ ĐẦU TRANG ============ */
.su-hd{position:sticky;top:0;z-index:var(--z-header);background:var(--bg);border-bottom:1px solid var(--border)}
.su-hd__in{display:flex;align-items:center;gap:12px;height:var(--header-h)}
.su-hd__logo{display:block;flex:none}
.su-hd__logo img{height:40px;width:auto}
.su-hd__nav{display:none}
.su-hd__acts{margin-left:auto;display:flex;align-items:center;gap:4px}
.su-hd__nut{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--text);cursor:pointer;transition:background-color var(--dur-fast)}
.su-hd__nut:hover{background:var(--nen-phu)}
.su-hd__tim{display:none}
.su-hd__gio{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--text)}
.su-hd__gio:hover{background:var(--nen-phu)}
.su-hd__gio-ic{position:relative;display:inline-grid;place-items:center;width:32px;height:32px}
.su-hd__dem{position:absolute;top:-4px;right:-7px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-pill);background:var(--primary);color:var(--primary-text)}
.su-hd__cta{display:none}
@media (min-width:768px){.su-hd__logo img{height:44px}.su-hd__cta{display:inline-flex;min-height:44px;padding:0 16px;margin-left:6px}}
@media (min-width:1200px){
  .su-hd__in{gap:12px}
  .su-hd__nav{display:block;margin-inline:auto}
  .su-hd__nav>ul{display:flex}
  .su-hd__muc{position:relative}
  .su-hd__muc>a{position:relative;display:flex;align-items:center;gap:2px;padding:10px 7px;color:var(--text);font-weight:var(--fw-semibold);font-size:var(--fs-1);line-height:1.25;white-space:nowrap}
  .su-hd__muc>a .ic{width:14px;height:14px;color:var(--text-2);transition:transform var(--dur-fast) var(--ease)}
  .su-hd__muc>a::after{content:"";position:absolute;left:7px;right:7px;bottom:-2px;height:3px;border-radius:3px;background:var(--accent);transform:scaleX(0);transition:transform var(--dur) var(--ease)}
  .su-hd__muc>a:hover::after,.su-hd__muc.dang-mo>a::after{transform:scaleX(1)}
  .su-hd__muc.dang-mo>a{color:var(--accent-text)}
  .co-xo:hover>a .ic,.co-xo:focus-within>a .ic{transform:rotate(180deg)}
  /* Menu xổ: hiện khi rê chuột hoặc khi phím Tab đi vào mục */
  .su-hd__xo{position:absolute;top:100%;left:0;min-width:240px;padding:8px;margin-top:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--dur-fast),transform var(--dur-fast) var(--ease),visibility var(--dur-fast)}
  .su-hd__xo::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .co-xo:hover .su-hd__xo,.co-xo:focus-within .su-hd__xo{opacity:1;visibility:visible;transform:none}
  .su-hd__xo a{display:block;padding:8px 12px;border-radius:var(--radius-sm);color:var(--text);font-size:var(--fs-1);line-height:var(--lh-body);white-space:nowrap}
  .su-hd__xo a:hover{background:var(--nen-phu);color:var(--accent-text)}
  .su-hd__acts{margin-left:0}
  .su-hd__mo{display:none}
}
/* Ô tìm bo tròn nền xám chỉ có chỗ từ 1440; dưới đó là nút kính lúp mở hộp tìm */
@media (min-width:1440px){
  .su-hd__nut-tim{display:none}
  .su-hd__tim{display:flex;align-items:center;width:120px;height:44px;padding:0 6px 0 18px;border-radius:var(--radius-pill);background:var(--nen-phu)}
  .su-hd__tim input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font-size:var(--fs-0);outline:0}
  .su-hd__tim input::placeholder{color:var(--text-3)}
  .su-hd__tim button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--text-2);cursor:pointer}
  .su-hd__tim:focus-within{outline:2px solid var(--border-focus);outline-offset:2px}
}
/* Menu điện thoại: trượt từ phải, nằm ngoài header */
.su-hd__sheet{position:fixed;inset:0;z-index:var(--z-drawer);background:var(--overlay);opacity:0;transition:opacity var(--dur) var(--ease)}
.su-hd__sheet.is-open{opacity:1}
.su-hd__panel{position:absolute;top:0;right:0;bottom:0;width:min(100%,400px);background:var(--surface);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--dur) var(--ease)}
.su-hd__sheet.is-open .su-hd__panel{transform:none}
.su-hd__panel-dau{display:flex;align-items:center;justify-content:space-between;padding:0 var(--margin);height:var(--header-h);border-bottom:1px solid var(--border)}
.su-hd__panel-logo{height:36px;width:auto}
.su-hd__panel-nav{flex:1;overflow:auto;padding:8px var(--margin) 16px}
.su-hd__panel-nhom{margin-top:20px;padding-bottom:4px;color:var(--text-3);font-size:var(--text-small);font-weight:var(--fw-semibold);line-height:var(--lh-lead);letter-spacing:var(--ls-caps);text-transform:uppercase}
.su-hd__panel-nhom.dang-mo{color:var(--accent-text)}
.su-hd__con{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid var(--border);color:var(--text);font-family:var(--font-heading);font-size:var(--fs-2);font-weight:var(--fw-bold);line-height:1.25}
.su-hd__con--dau{margin-top:12px}
.su-hd__con .ic{color:var(--text-3)}
.su-hd__con[aria-current="page"]{color:var(--accent-text)}
.su-hd__panel-chan{padding:16px var(--margin) 24px;display:grid;gap:12px;border-top:1px solid var(--border)}
.su-hd__panel-chan p{font-size:var(--text-small);line-height:var(--lh-lead);color:var(--text-2)}

/* ============ ĐƯỜNG DẪN TRANG, ĐẦU TRANG CON ============ */
.duong-dan ol{display:flex;flex-wrap:wrap;gap:4px 8px;color:var(--text-3)}
.duong-dan li{display:flex;align-items:center;gap:8px}
.duong-dan li+li::before{content:"/";color:var(--border-strong)}
.duong-dan a{color:var(--text-2)}
.duong-dan a:hover{color:var(--accent-text)}
.duong-dan [aria-current]{color:var(--text)}
.dau-trang{padding-block:16px var(--space-10);border-bottom:1px solid var(--border)}
.dau-trang__tieu-de{margin-top:16px;max-width:18em}
.dau-trang__dan{margin-top:12px;max-width:42em;color:var(--text-2)}
.dau-trang--gon{padding-bottom:var(--space-8)}
.neo-trang{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
@media (min-width:768px){.dau-trang{padding-block:24px var(--space-12)}}

/* ============ ẢNH VÀ CHỖ GIỮ ẢNH ============ */
.anh{position:relative;overflow:hidden;width:100%;background:var(--cho-anh)}
.anh[data-ti-le="1:1"]{aspect-ratio:1/1}.anh[data-ti-le="4:3"]{aspect-ratio:4/3}.anh[data-ti-le="4:5"]{aspect-ratio:4/5}
.anh[data-ti-le="21:9"]{aspect-ratio:21/9}.anh[data-ti-le="3:2"]{aspect-ratio:3/2}.anh[data-ti-le="16:10"]{aspect-ratio:16/10}
.anh img{width:100%;height:100%;object-fit:cover}
.cho-anh{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:10px 12px;color:var(--cho-anh-chu);
  background:repeating-linear-gradient(135deg,transparent 0 14px,var(--cho-anh-net) 14px 15px)}
.cho-anh__ten{font-family:var(--font-ui);font-size:var(--fs-00);font-weight:var(--fw-semibold);line-height:var(--lh-label);word-break:break-all}
.cho-anh__mo{font-size:var(--fs-0);line-height:var(--lh-lead);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.anh--nho .cho-anh,.dm__anh .cho-anh,.the-sp__anh .cho-anh,.da-lam__anh .cho-anh{padding:6px 8px}
.anh--nho .cho-anh span,.dm__anh .cho-anh__mo,.the-sp__anh .cho-anh__mo,.da-lam__anh .cho-anh__mo{display:none}

/* ============ PHẦN ĐẦU TRANG CHỦ ============ */
/* Hai cột trên nền trắng: chữ trái, ảnh phải cắt theo VỆT CỌ chéo, mép răng cưa; vệt cam lộ ra dọc mép ảnh.
   Điện thoại: chữ trước, ảnh sau, cùng vệt cọ. Ảnh đứng yên, không băng chuyền */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero__luoi{padding-block:24px 8px}
.hero__dong{display:block}
.hero__dong--cam{color:var(--accent)}
.hero__dan{margin-top:14px;max-width:26em;color:var(--text)}
.hero__nut{margin-top:24px}
.hero__nut .su-btn{flex:1 1 auto}
/* Điện thoại: hai cột, biểu tượng bên trái chữ. Từ 768: bốn cột, biểu tượng trên chữ như ảnh khách */
.hero__ck{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:24px;max-width:480px}
.hero__ck-muc{display:flex;align-items:center;gap:8px;color:var(--text)}
@media (min-width:768px){.hero__ck{grid-template-columns:repeat(4,1fr);gap:8px}.hero__ck-muc{flex-direction:column;gap:6px;text-align:center}}
.hero__ck-muc .ic{color:var(--text-2)}
.hero__anh-ben{position:relative;margin-top:16px}
.hero__co{position:absolute;inset:0;width:100%;height:100%;fill:var(--co-ve)}
.hero__anh{position:relative;clip-path:polygon(100% 0,100% 100%,15.0% 100.0%,16.3% 96.7%,16.2% 93.3%,18.0% 90.0%,18.4% 86.7%,20.5% 83.3%,20.9% 80.0%,21.3% 76.7%,23.9% 73.3%,23.6% 70.0%,25.4% 66.7%,26.7% 63.3%,27.0% 60.0%,28.1% 56.7%,28.5% 53.3%,30.4% 50.0%,31.5% 46.7%,31.6% 43.3%,32.9% 40.0%,34.2% 36.7%,34.7% 33.3%,35.9% 30.0%,37.3% 26.7%,37.5% 23.3%,38.2% 20.0%,39.2% 16.7%,41.1% 13.3%,41.8% 10.0%,43.3% 6.7%,44.1% 3.3%,45.0% 0.0%)}
.hero__anh .cho-anh{padding-left:47%}
/* Một ảnh 3:2 lấp ô 4:3 ở điện thoại và ô gần 3:1 ở màn rộng: neo vào mặt cô gái (khoảng 60% ngang, 20% dọc ảnh gốc) */
.hero__anh img{object-position:62% 22%}
/* Bong bóng chữ viết tay "In trọn chất riêng!": viền nét tay, mũi tên chỉ xuống ảnh */
/* Điện thoại: thu 82% và neo góc phải trên, để bong bóng không đè mặt người trong ảnh */
.hero__bong{position:absolute;top:2%;right:4px;z-index:2;display:grid;place-items:start center;width:160px;height:146px;color:var(--text);transform:rotate(-8deg) scale(.82);transform-origin:top right}
.hero__bong-chu{position:relative;z-index:1;display:block;width:124px;margin-top:22px;text-align:center}
.hero__bong-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero__bong-net path:first-child{fill:var(--bong-chu)}
@media (min-width:768px){
  .hero__luoi{padding-block:32px 8px}
  .hero__nut .su-btn{flex:0 0 auto}
  .hero__anh-ben{margin-top:24px}
  .hero__bong{top:6%;right:4%;transform:rotate(-8deg)}
}
@media (min-width:1024px){
  .hero{min-height:480px}
  .hero__luoi{display:flex;align-items:center;min-height:480px;padding-block:36px}
  .hero__chu{position:relative;z-index:2;width:46%}
  .hero__anh-ben{position:absolute;top:0;right:0;bottom:0;width:57%;margin:0}
  .hero__anh{height:100%;aspect-ratio:auto}
  .hero__bong{top:7%;right:5%}
}
@media (min-width:1200px){.hero,.hero__luoi{min-height:500px}.hero__chu{width:44%}}

/* ============ CUỘN NGANG CÓ NAM CHÂM (danh mục, sản phẩm bán chạy): vuốt tay, không tự chạy ============ */
.cuon-ngang{display:grid;grid-auto-flow:column;grid-auto-columns:42%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--margin));padding:4px var(--margin) 12px;scroll-padding-inline:var(--margin);scrollbar-width:thin}
.cuon-ngang>*{scroll-snap-align:start}
@media (min-width:768px){.cuon-ngang{grid-auto-columns:26%;gap:16px}}
@media (min-width:1200px){.cuon-ngang{grid-auto-flow:row;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:12px}}

/* ============ BẢY DANH MỤC ============ */
.danh-muc__luoi{margin-top:16px}
.dm{display:grid;align-content:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-the);overflow:hidden;color:var(--text);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur)}
.dm__anh{background:var(--be-mat)}
.dm__anh img{transition:transform var(--dur-slow) var(--ease)}
.dm__hang{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 12px 12px}
.dm__mui{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--accent);color:var(--text-on-accent);transition:transform var(--dur-fast) var(--ease)}
.dm:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--border-strong)}
.dm:hover .dm__anh img{transform:scale(1.04)}
.dm:hover .dm__mui{transform:translateX(2px)}
@media (min-width:1200px){.danh-muc__luoi{margin-top:20px}}

/* ============ ĐẦU KHỐI ============ */
.dau-khoi{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:16px}
.dau-khoi__phu{margin-top:4px;max-width:34em;color:var(--text-2)}
@media (min-width:1200px){.dau-khoi{margin-bottom:20px}}

/* ============ THẺ SẢN PHẨM: ảnh sản phẩm đã in, tên, dành cho ai, giá từ ============ */
.luoi-sp{display:grid;grid-template-columns:1fr 1fr;gap:24px 12px}
@media (min-width:768px){.luoi-sp{grid-template-columns:repeat(3,1fr);gap:32px 20px}}
.the-sp{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;justify-items:start;gap:4px}
.the-sp__anh{border-radius:var(--radius-the);border:1px solid var(--border);background:var(--be-mat)}
.the-sp__anh img{transition:transform var(--dur-slow) var(--ease)}
.the-sp:hover .the-sp__anh img{transform:scale(1.04)}
.the-sp__ten{margin-top:8px}
.the-sp__ten a{color:var(--text)}
.the-sp__ten a::after{content:"";position:absolute;inset:0;z-index:1}
.the-sp__ten a:hover{color:var(--accent-text)}
.the-sp__cho{align-self:end;color:var(--text-3)}
.the-sp__gia{color:var(--accent-text)}
.ban-chay__ghi{margin-top:12px;color:var(--text-3)}

/* ============ BẢNG ============ */
/* Bảng là bảng mở: kẻ dòng, không hộp bo góc, vì khách đang so số chứ không ngắm thẻ (lệnh mẫu mục 4b) */
.bang-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--text);border-bottom:1px solid var(--border-strong)}
.hop .bang-cuon{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.bang th,.bang td{padding:12px 14px;vertical-align:top;border-top:1px solid var(--border)}
.bang thead th{background:var(--nen-phu);color:var(--text);border-top:0;vertical-align:bottom}
.bang tbody th{color:var(--text)}
.bang td.t-price{color:var(--accent-text)}
.bang--gia td,.bang--gia thead th:not(:first-child){text-align:center}
.bang--gia td:last-child:not(.t-price){text-align:left;color:var(--text-2)}
.bang--gia tr.dang-chon{background:var(--surface-2)}
.bang--gia tr.dang-chon th{box-shadow:inset 4px 0 0 var(--accent)}
.bang--size td{text-align:center}
.bang--size td:last-child{text-align:left;color:var(--text-2)}
@media (min-width:768px){.bang th,.bang td{padding:14px 18px}}
.ghi-mau{margin-top:12px;padding:10px 14px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);background:var(--nen-phu);color:var(--text-2)}

/* ============ BỐN BƯỚC (nền xám rất nhạt, tiêu đề căn giữa, mũi tên cam nối) ============ */
.buoc__tieu-de,.buoc__phu{text-align:center}
.buoc__phu{margin-top:6px;color:var(--text-2)}
.buoc__ds{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;margin-top:28px}
.buoc__muc{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;text-align:center}
.buoc__dau{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.buoc__so{color:var(--accent)}
.buoc__ic{color:var(--text)}
.buoc__mo{max-width:20em;color:var(--text-2)}
.buoc__mui{display:none}
@media (min-width:1024px){
  .buoc__ds{grid-template-columns:repeat(4,1fr);gap:32px;margin-top:28px}
  .buoc__mui{position:absolute;top:14px;right:-28px;display:block;color:var(--accent)}
  /* Biến thể gọn ở trang sản phẩm: tiêu đề trái, bốn bước hai nhân hai, chữ căn trái, không mũi tên */
  .buoc--gon .buoc__khung{display:grid;grid-template-columns:4fr 7fr;gap:64px;align-items:start}
  .buoc--gon .buoc__tieu-de,.buoc--gon .buoc__phu{text-align:left}
  .buoc--gon .buoc__ds{grid-template-columns:1fr 1fr;gap:28px 40px;margin-top:0}
  .buoc--gon .buoc__muc{justify-items:start;text-align:left}
  .buoc--gon .buoc__mui{display:none}
}

/* ============ HAI Ô: "Không biết thiết kế" nền cam nhạt · "Doanh nghiệp" nền đen ============ */
/* Tràn hai mép màn hình như ảnh khách; chữ bám lề nội dung 1200 */
.hai-o{display:grid}
.hai-o__o{position:relative;display:grid;gap:20px;padding:36px var(--margin);background:var(--bg);color:var(--text);overflow:hidden}
.hai-o__tieu-de .hai-o__dong{display:block}
.hai-o__dong--cam{color:var(--accent)}
.hai-o__doan{margin-top:14px;max-width:24em}
.hai-o__nut{margin-top:22px}
.hai-o__nhom{margin-top:10px;color:var(--text-2)}
.hai-o__tich{display:grid;gap:10px;margin-top:18px}
.hai-o__tich li{display:flex;align-items:center;gap:10px}
.hai-o__tich .ic{color:var(--accent)}
.hai-o__anh{width:min(240px,64%);justify-self:end;border-radius:var(--radius-the);background:transparent}
.hai-o__anh--linh-vat{width:min(240px,64%)}
/* Linh vật lật ngang để nhìn về phía chữ "Không biết thiết kế? Không sao." (Dũng góp ý 19/10/2026). Lật bằng CSS, tệp ảnh giữ
   nguyên; ảnh không có chữ nên lật không sai gì */
.hai-o__anh--linh-vat img{transform:scaleX(-1)}
@media (min-width:768px){.hai-o__o.hai-o__o--trai{grid-template-columns:1fr 260px}}
/* Từ 1024 ô chỉ rộng nửa màn hình: cột ảnh vừa phải, ảnh lấn vào lề phải ô 16px để to hơn mà không ép cột chữ;
   cột chữ nằm trên ảnh để nút cam không bị đè */
@media (min-width:1024px){
  .hai-o__o.hai-o__o--trai{grid-template-columns:1fr 190px;column-gap:16px}
  .hai-o__o--trai .hai-o__anh--linh-vat{width:calc(100% + 16px);margin-right:-16px}
  .hai-o__o--trai .hai-o__chu{position:relative;z-index:1}
}
@media (min-width:1200px){.hai-o__o.hai-o__o--trai{grid-template-columns:1fr 230px}}
@media (min-width:600px){.hai-o__tich{grid-template-columns:1fr 1fr;gap:10px 20px}}
/* Điện thoại: ảnh ô Doanh nghiệp tràn hết bề ngang ô, sát đáy ô, mép trên tan vào nền đen (Dũng góp ý 19/10/2026: đang
   nằm nhỏ một góc). [data-ti-le] để thắng luật tỉ lệ 1:1 của .anh */
@media (max-width:767px){
  .hai-o__o--phai{padding-bottom:0}
  .hai-o__o--phai .hai-o__anh[data-ti-le]{width:auto;justify-self:stretch;margin:-8px calc(-1 * var(--margin)) 0;aspect-ratio:4/3;max-height:440px;border-radius:0;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%)}
  .hai-o__o--phai .hai-o__anh img{object-position:60% 60%}
}
/* Ô Doanh nghiệp từ 768: ảnh sản phẩm là NỀN của ô như ảnh khách (Dũng góp ý 19/10/2026): phủ phải, cao hết ô, chạm mép
   phải ô, mép trái tan vào nền đen. Cột chữ dừng trước túi tote (túi nằm ở nửa phải ảnh) để chữ trắng không đè lên vải kem:
   bề rộng chữ = bề rộng ô - nửa ảnh - lề trái - 16px. Ô rộng 100vw ở 768 đến 1023, 50vw từ 1024, nên tính bằng vw.
   Điện thoại giữ ảnh dưới chữ, ô quá hẹp để chữ đè */
@media (min-width:768px){
  .hai-o__o.hai-o__o--phai{grid-template-columns:minmax(0,1fr)}
  .hai-o__o--phai .hai-o__chu{position:relative;z-index:1;max-width:min(30em,calc(100vw - min(31vw,340px) - 48px))}
  .hai-o__o--phai .hai-o__anh[data-ti-le]{position:absolute;top:0;right:0;bottom:0;width:min(62%,680px);height:100%;aspect-ratio:auto;border-radius:0;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40%);mask-image:linear-gradient(to right,transparent 0,#000 40%)}
  .hai-o__o--phai .hai-o__anh img{object-position:60% 55%}
}
@media (min-width:1024px){.hai-o__o--phai .hai-o__chu{max-width:min(30em,calc(50vw - min(15.5vw,340px) - 56px))}}
/* 1024 đến 1279: cột chữ dưới 400px, sáu dấu tích xếp một cột cho khỏi gãy dòng */
@media (min-width:1024px) and (max-width:1279px){.hai-o__o--phai .hai-o__tich{grid-template-columns:1fr}}
@media (min-width:768px){.hai-o__o{grid-template-columns:1fr 220px;align-items:center;gap:24px;padding:44px var(--margin)}.hai-o__anh{width:100%}}
@media (min-width:1024px){
  .hai-o{grid-template-columns:1fr 1fr}
  .hai-o__o{grid-template-columns:1fr 180px;padding-block:44px}
  .hai-o__o--trai{padding-left:max(var(--margin),calc(50vw - var(--container) / 2));padding-right:32px}
  .hai-o__o--phai{padding-right:max(var(--margin),calc(50vw - var(--container) / 2));padding-left:40px}
}
@media (min-width:1200px){.hai-o__o{grid-template-columns:1fr 200px;padding-block:40px}}

/* ============ MADE BY PRINTME: bảy ảnh đơn thật bo góc ============ */
.da-lam__luoi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.da-lam__anh{border-radius:var(--radius-the)}
.da-lam__luoi>.anh:first-child{grid-column:1/-1;aspect-ratio:16/10}
/* Từ 768: năm cột, ảnh đầu chiếm hai cột hai hàng, bảy ảnh lấp kín đúng hai hàng */
@media (min-width:768px){.da-lam__luoi{grid-template-columns:repeat(5,1fr);gap:12px}.da-lam__luoi>.anh:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}
@media (min-width:1200px){.da-lam__luoi:not(.da-lam__luoi--ve){grid-template-columns:repeat(7,1fr)}.da-lam__luoi:not(.da-lam__luoi--ve)>.anh:first-child{grid-column:auto;grid-row:auto;aspect-ratio:1/1}}

/* ============ GHÉ PRINTME: ba cột đều nhau trong lề nội dung: ảnh mặt tiền · thông tin · ô bản đồ tạm ============ */
/* Dũng góp ý 19/10/2026 ở 2048: ảnh tràn mép trái chiếm gần nửa màn hình, chia lại ba phần bằng nhau */
/* Khoảng trên tính cả 32px đáy khối Made by: trên = dưới, 48 ở điện thoại, 80 từ 1024 (Dũng góp ý 19/10/2026) */
.ghe{padding-block:var(--space-4) var(--space-12);background:var(--bg)}
.ghe__luoi{display:grid;gap:24px}
.ghe__anh{margin-inline:calc(-1 * var(--margin));width:auto}
.ghe__dan{margin-top:4px;color:var(--text-2)}
.ghe__tt{display:grid;gap:14px;margin-top:20px}
.ghe__tt li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.ghe__tt li>.ic{color:var(--accent)}
.ghe__tt li>span{display:grid;gap:2px}
.ghe__phu{color:var(--text-2)}
.ghe__so{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.ghe__nut{margin-top:24px}
@media (min-width:768px){.ghe__luoi{grid-template-columns:1fr 1fr;align-items:center}.ghe__anh{grid-column:1/-1}}
@media (min-width:1024px){
  .ghe{padding-top:var(--space-12);padding-bottom:var(--space-20)}
  .ghe__luoi{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  /* [data-ti-le] để thắng luật tỉ lệ .anh[data-ti-le="4:3"]: thiếu nó ô ảnh giữ 4:3, nới rộng theo chiều cao và đè cột giữa */
  .ghe__anh[data-ti-le]{grid-column:auto;align-self:stretch;margin-inline:0;border-radius:var(--radius);aspect-ratio:auto;min-height:340px}
}
/* Ô bản đồ tạm: chưa nhúng Google Maps tới khi khách xác nhận địa chỉ */
.ban-do-tam{position:relative;min-height:260px;border-radius:var(--radius);overflow:hidden;background:var(--be-mat-chim);border:1px solid var(--border)}
.ban-do-tam__nen{position:absolute;inset:0;width:100%;height:100%}
.ban-do-tam__song{fill:none;stroke:var(--tint-peri-strong);stroke-width:14;stroke-linecap:round;opacity:.7}
.ban-do-tam__duong{fill:none;stroke:var(--be-mat);stroke-width:6;stroke-linecap:round}
.ban-do-tam__duong--lon{stroke-width:11}
.ban-do-tam__ghim{position:absolute;left:50%;top:42%;display:flex;align-items:center;gap:6px;padding:6px 14px 6px 8px;border-radius:var(--radius-pill);background:var(--be-mat);box-shadow:var(--shadow-2);transform:translate(-50%,-50%)}
.ban-do-tam__ghim .ic{color:var(--accent)}
.ban-do-tam__ghi{position:absolute;left:12px;right:12px;top:10px;color:var(--text-2)}
.ban-do-tam__nut{position:absolute;right:12px;bottom:12px}
@media (min-width:1024px){.ban-do-tam{align-self:stretch;min-height:340px}}

/* ============ DẢI KÊU GỌI CUỐI TRANG CON ============ */
.keu-goi{padding-block:var(--section-y)}
.keu-goi__the{display:grid;gap:20px;padding:28px 20px;border-radius:var(--radius-xl);background:var(--bg);color:var(--text)}
.keu-goi__dong{display:block}
.keu-goi__dong--cam{color:var(--accent)}
.keu-goi__phu{margin-top:10px;color:var(--text-2)}
.keu-goi__nut{justify-self:start}
@media (max-width:399px){.keu-goi__nut{white-space:normal;text-align:center}}
@media (min-width:1024px){.keu-goi__the{grid-template-columns:1fr auto;align-items:center;gap:32px;padding:36px 48px}}

/* ============ CHÂN TRANG NỀN ĐEN ============ */
.su-ft{background:var(--bg);color:var(--text-2);padding:var(--space-12) 0 var(--space-8);font-size:var(--text-small);line-height:var(--lh-lead)}
.su-ft__luoi{display:grid;gap:32px}
.su-ft__logo img{height:44px;width:auto}
.su-ft__dau p{margin-top:12px;max-width:26em}
.su-ft__mxh{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.su-ft__mxh a{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--on-dark);transition:transform var(--dur-fast) var(--ease)}
.su-ft__mxh a:hover{transform:translateY(-2px)}
.su-ft__mxh .ic{width:18px;height:18px}
.su-ft__mxh-fb{background:var(--mxh-fb)}.su-ft__mxh-tt{background:var(--mxh-tt);color:var(--mxh-tt-chu)!important}.su-ft__mxh-sp{background:var(--mxh-sp)}
.su-ft__mxh-zalo{background:var(--mxh-zalo)}.su-ft__mxh-yt{background:var(--mxh-yt)}.su-ft__mxh-ig{background:var(--mxh-ig)}
.su-ft__mxh-zalo .ic-zalo{width:24px;height:18px;--zalo-bong:var(--on-dark);--zalo-chu:var(--mxh-zalo)}
.su-ft__tieu-de{margin-bottom:12px;color:var(--text);font-family:var(--font-ui);font-size:var(--fs-1);font-weight:var(--fw-semibold);line-height:1.3}
.su-ft__ds{display:grid;gap:8px}
.su-ft__ds a{color:var(--text-2)}
.su-ft a:hover{color:var(--accent-text)}
.su-ft__cot--hai .su-ft__ds{grid-template-columns:1fr 1fr}
.su-ft__tin-hang{display:flex;align-items:center;gap:6px;margin-top:14px;padding:4px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--be-mat)}
.su-ft__tin-hang input{flex:1;min-width:0;height:44px;padding:0 14px;border:0;background:transparent;color:var(--text);font-size:var(--fs-0);outline:0}
.su-ft__tin-hang input::placeholder{color:var(--text-3)}
.su-ft__tin-hang:focus-within{border-color:var(--accent)}
.su-ft__tin-hang .su-btn{min-height:44px;padding:0 18px}
.su-ft__dong-y{margin-top:8px;color:var(--text-3)}
.su-ft__dong-y a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.su-ft__kq{margin-top:8px;color:var(--text)}
.su-ft__duoi{display:flex;flex-direction:column;gap:16px;margin-top:40px;padding-top:20px;border-top:1px solid var(--border)}
.su-ft__phap-ly{display:grid;gap:4px;color:var(--text-3)}
.su-ft__phap-ly a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.su-ft__bct{display:grid;place-items:center;flex:none;width:184px;min-height:56px;padding:8px 12px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-sm);color:var(--text-3);text-align:center}
.su-ft__mau{margin-top:16px;padding:10px 14px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);background:var(--nen-phu);color:var(--text-2)}
@media (min-width:768px){.su-ft__luoi{grid-template-columns:1fr 1fr 1fr}.su-ft__dau,.su-ft__tin{grid-column:1/-1}}
@media (min-width:1024px){.su-ft__duoi{flex-direction:row;align-items:center;justify-content:space-between}}
@media (min-width:1200px){.su-ft{padding-top:var(--space-16)}.su-ft__luoi{grid-template-columns:1.5fr .9fr 1.2fr 1.1fr 1.6fr;gap:32px}.su-ft__dau,.su-ft__tin{grid-column:auto}}

/* ============ THANH LIÊN HỆ DÍNH ĐÁY (điện thoại) VÀ NÚT ZALO NỔI ============ */
.su-cb{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--surface);box-shadow:var(--shadow-bar)}
.su-cb a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--radius-pill);color:var(--on-dark)}
.su-cb__goi{background:var(--goi)}
.su-cb__zalo{background:var(--zalo)}
.zalo-noi{position:fixed;right:20px;bottom:20px;z-index:var(--z-float);display:none;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--zalo);box-shadow:var(--shadow-2);transition:transform var(--dur-fast) var(--ease)}
.zalo-noi:hover{transform:scale(1.06)}
.zalo-noi .ic-zalo{width:36px;height:27px}
@media (min-width:768px){.su-cb{display:none}body.co-thanh-lien-he{padding-bottom:0}.zalo-noi{display:grid}}

/* ============ HỘP NỔI: TÌM, BẢNG SIZE ============ */
.hop{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:var(--radius-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-2)}
.hop::backdrop{background:var(--overlay)}
.hop--tim{margin-top:12vh}
.hop__than{display:grid;gap:12px;padding:16px 20px 20px}
.hop__dau{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hop__ten{font-family:var(--font-heading);font-size:var(--fs-2);font-weight:var(--fw-bold);line-height:1.25}
.hop__goi{color:var(--text-2);font-size:var(--text-small);line-height:var(--lh-lead)}
.o-tim{display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;border:var(--border-w) solid var(--border-control);border-radius:var(--radius-pill);background:var(--surface);color:var(--text-2)}
.o-tim:focus-within{border-color:var(--text)}
.o-tim input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font-size:var(--fs-1);outline:0}
.o-tim--gon{height:48px}

/* ============ CỬA HÀNG ============ */
.cua-hang{padding-block:var(--space-6) var(--section-y)}
.cua-hang__luoi{display:grid;gap:24px;align-items:start}
.cua-hang__thanh{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.cua-hang__dem{flex:1 1 auto;color:var(--text-2)}
.cua-hang__xep{display:inline-flex;align-items:center;gap:8px;color:var(--text-2)}
.cua-hang__xep select{height:40px;padding:0 36px 0 14px;border:var(--border-w) solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B253C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat;color:var(--text);font-size:var(--fs-0);-webkit-appearance:none;appearance:none}
.cua-hang__trong{padding:40px 24px;border:1px dashed var(--border-strong);border-radius:var(--radius);text-align:center}
.cua-hang__trong p+p{margin-top:8px;color:var(--text-2)}
/* Bộ lọc: điện thoại là tấm trượt, từ 1024 là cột trái dính */
.loc{position:fixed;inset:0;z-index:var(--z-drawer);background:var(--overlay);display:none}
.loc.is-open{display:block}
.loc__form{position:absolute;top:0;right:0;bottom:0;width:min(100%,360px);overflow:auto;padding:0 var(--margin) 24px;background:var(--surface)}
.loc__dau{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;height:var(--header-h);background:var(--surface)}
.loc__nhom{padding:16px 0;border-top:1px solid var(--border)}
.loc__nhom legend{float:left;width:100%;margin-bottom:8px}
.loc__nhom legend+*{clear:both}
.loc__chon{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer}
.loc__chon input{width:20px;height:20px;margin:0;flex:none}
.loc__nut{display:flex;gap:8px;padding-top:16px;border-top:1px solid var(--border)}
.loc__nut .su-btn{flex:1}
@media (min-width:1024px){
  .cua-hang__luoi{grid-template-columns:248px 1fr;gap:40px}
  .loc{position:sticky;top:calc(var(--header-h) + 16px);inset:auto;z-index:auto;display:block;background:none}
  .loc__form{position:static;width:auto;padding:0;background:none;overflow:visible}
  .loc__dau{position:static;height:auto;padding-bottom:12px}
  .loc__dong,.loc__xem,.cua-hang__mo-loc{display:none}
  .loc__nhom:first-of-type{border-top:0}
}
.si__luoi{display:grid;gap:16px}
.si__chu p+p{margin-top:12px;color:var(--text-2)}
.si__chu .hang-nut{margin-top:24px;gap:16px 24px}
@media (min-width:1024px){.si__luoi{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}

/* ============ TRANG SẢN PHẨM ============ */
.sp{padding-block:16px var(--section-y)}
.sp__khuon{margin-top:16px}
.sp__luoi{display:grid;gap:24px;margin-top:16px}
.sp__chinh{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-sunken)}
.sp__ds-nho{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.sp__nho{padding:0;border:2px solid transparent;border-radius:var(--radius);overflow:hidden;background:none;cursor:pointer}
.sp__nho[aria-pressed="true"]{border-color:var(--text)}
.sp__sao{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--text-2)}
.sp__gia{margin-top:12px;color:var(--accent-text)}
.sp__thue{margin-top:4px;color:var(--text-2)}
.sp__form{display:grid;gap:20px;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.sp__nhom legend,.sp__nhom>.t-label{float:left;width:100%;margin-bottom:10px}
.sp__nhom legend+*,.sp__nhom>.t-label+*{clear:both}
.sp__da-chon{font-weight:var(--fw-regular);color:var(--text-2)}
.sp__chon{display:flex;flex-wrap:wrap;gap:8px}
.chon-mau{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer}
.chon-mau input{position:absolute;opacity:0;width:1px;height:1px}
.chon-mau__o{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong)}
.chon-mau--trang .chon-mau__o{background:var(--vai-trang)}
.chon-mau--den .chon-mau__o{background:var(--vai-den)}
.chon-mau--xanh-than .chon-mau__o{background:var(--vai-xanh-than)}
.chon-mau--be .chon-mau__o{background:var(--vai-be)}
.chon-mau:has(input:checked){box-shadow:0 0 0 2px var(--text)}
.chon-mau:has(input:focus-visible){outline:2px solid var(--border-focus);outline-offset:3px}
.sp__lk-size{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 0;border:0;background:none;color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sp__lk-size .ic{color:var(--accent-text)}
.sp__goi{margin-top:8px;color:var(--text-2)}
.tai-anh{position:relative;display:flex;align-items:center;gap:14px;padding:16px;border:var(--border-w) dashed var(--border-strong);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.tai-anh:hover{border-color:var(--accent);background:var(--accent-subtle)}
.tai-anh:focus-within{outline:2px solid var(--border-focus);outline-offset:3px}
.tai-anh>.ic{color:var(--accent);width:28px;height:28px}
.tai-anh__chu{display:grid;gap:2px}
.tai-anh__chu .t-small{color:var(--text-2)}
.tai-anh__o{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tai-anh--gon{padding:12px 14px}
.tai-anh.co-tep{border-style:solid;border-color:var(--success)}
.sp__mua-hang{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.so-luong{display:inline-flex;align-items:center;height:48px;border:var(--border-w) solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface)}
.so-luong button{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--text);cursor:pointer;border-radius:50%}
.so-luong button:hover{color:var(--accent-text)}
.so-luong input{width:52px;height:100%;border:0;background:transparent;text-align:center;-moz-appearance:textfield}
.so-luong input::-webkit-outer-spin-button,.so-luong input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.so-luong--nho{height:40px}
.so-luong--nho button{width:36px;height:36px}
.so-luong--nho input{width:40px}
.sp__tam-tinh{color:var(--text-2)}
.sp__tam-tinh b{margin-left:6px;color:var(--accent-text)}
.sp__nut .su-btn{flex:1 1 240px}
.sp__da-them{display:flex;align-items:center;gap:8px;color:var(--success)}
.sp__hen{display:grid;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);color:var(--text-2)}
.sp__hen li{display:flex;gap:10px;align-items:flex-start}
.sp__hen .ic{color:var(--accent-text)}
@media (min-width:1024px){
  .sp__luoi{grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
  .sp__anh{position:sticky;top:calc(var(--header-h) + 16px)}
}
@media (min-width:1200px){.sp__luoi{gap:64px}}
.sp__bac{margin-top:28px}
.sp__bac .bang-cuon{margin-top:12px}
.sp-gia__ghi{margin-top:10px;color:var(--text-3)}
.sp-mo-ta{background:var(--nen-phu)}
.sp-mo-ta__luoi{display:grid;gap:32px}
.sp-mo-ta__chu>*+*{margin-top:16px}
.sp-mo-ta__chu p:not(.t-lead){color:var(--text-2);max-width:38em}
.thong-so{display:grid;align-content:start}
.thong-so div{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-strong)}
.thong-so dt{color:var(--text-2);padding-top:3px}
@media (min-width:1024px){.sp-mo-ta__luoi{grid-template-columns:7fr 5fr;gap:64px}}

/* ============ BẢNG GIÁ VÀ KỸ THUẬT IN ============ */
.so-sanh .bang-cuon{margin-top:24px}
.bang--so-sanh{min-width:760px}
.bang--so-sanh thead th{width:28%}
.bang--so-sanh thead th:first-child{width:16%}
.so-sanh__kt{display:block}
.so-sanh__phu{display:block;color:var(--text-2)}
.bang--so-sanh tbody th{position:sticky;left:0;background:var(--bg)}
.bac-gia__luoi{display:grid;gap:24px;margin-top:var(--space-12)}
.bac-gia__ben>*+*{margin-top:12px}
.bac-gia__ben .t-small{color:var(--text-2)}
.bac-gia__ben .su-btn{margin-top:20px}
@media (min-width:1024px){.bac-gia__luoi{grid-template-columns:4fr 7fr;gap:64px;align-items:start}}
.da-gom__hai{display:grid;gap:24px;margin-top:20px}
.ds-dau{display:grid;gap:10px;margin-top:12px}
.ds-dau li{display:flex;gap:10px;align-items:flex-start}
.ds-dau .ic{color:var(--success);margin-top:2px}
.ds-dau--chua .ic{color:var(--text-3)}
.da-gom__nhan{padding-bottom:10px;border-bottom:2px solid var(--text)}
.da-gom__cong-ty{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);color:var(--text-2)}
@media (min-width:768px){.da-gom__hai{grid-template-columns:1fr 1fr;gap:24px 48px;max-width:960px}}
.chon-nhanh__ds{display:grid;margin-top:24px}
.chon-nhanh__ds li{display:grid;gap:6px;align-content:start;padding:20px 0;border-top:2px solid var(--text)}
.chon-nhanh__ds p:not(.t-h4){color:var(--text-2)}
.chon-nhanh__ds .lk-mui{justify-self:start;margin-top:6px}
/* Ba dòng chọn nhanh xếp như bảng tra: tình huống, lời khuyên, liên kết. Không chia ba cột thẻ */
@media (min-width:1024px){.chon-nhanh__ds li{grid-template-columns:4fr 6fr 2fr;align-items:baseline;gap:32px;border-top-width:1px}.chon-nhanh__ds li:first-child{border-top-width:2px}.chon-nhanh__ds .lk-mui{margin-top:0;justify-self:end}}

/* ============ BIỂU MẪU ============ */
.su-form{display:grid;gap:16px}
.su-form__hai{display:grid;gap:16px}
@media (min-width:768px){.su-form__hai{grid-template-columns:1fr 1fr}}
.su-input{display:grid;gap:6px;align-content:start}
.su-input label,.su-input__nhan{font-size:var(--fs-0);font-weight:var(--fw-semibold);line-height:var(--lh-label);color:var(--text)}
.su-input input,.su-input select,.su-input textarea{width:100%;min-height:48px;padding:0 14px;border:var(--border-w) solid var(--border-control);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:var(--fs-1);line-height:1.5}
.su-input textarea{padding:12px 14px;resize:vertical}
.su-input input:focus,.su-input select:focus,.su-input textarea:focus{outline:0;border-color:var(--text);box-shadow:0 0 0 3px var(--accent-ring)}
.su-input .loi{border-color:var(--danger)}
.o-kiem{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:var(--fw-semibold);line-height:1.3}
.o-kiem input{width:20px;height:20px;margin:0}
.su-form__ban-quyen{padding:10px 12px;border-radius:var(--radius-sm);background:var(--nen-phu);color:var(--text-2)}
.su-form__dong-y{color:var(--text-3)}
.su-form__kq{padding:12px 14px;border:1px solid var(--success-border);border-radius:var(--radius-sm);background:var(--success-subtle);color:var(--text)}
.the-form{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
@media (min-width:768px){.the-form{padding:28px}}

/* ============ ĐẶT IN SỐ LƯỢNG ============ */
.dat-dau{padding-block:16px var(--section-y)}
.dat-dau__luoi{display:grid;gap:32px;margin-top:16px}
.dat-dau__dan{margin-top:12px;color:var(--text-2);max-width:34em}
.dat-dau__chu .ds-dau{margin-top:20px}
.dat-dau__zalo{margin-top:28px;padding-top:24px;border-top:1px dashed var(--border-strong)}
.dat-dau__zalo .hang-nut{margin-top:12px}
@media (min-width:1024px){.dat-dau__luoi{grid-template-columns:6fr 5fr;gap:56px;align-items:start}}
.quy-trinh{background:var(--nen-phu)}
.quy-trinh__luoi{display:grid;gap:24px}
.quy-trinh__ben p{margin-top:12px;color:var(--text-2);max-width:30em}
.quy-trinh__buoc{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--border-strong)}
.quy-trinh__buoc:last-child{border-bottom:1px solid var(--border-strong)}
.quy-trinh__so{color:var(--accent)}
.quy-trinh__buoc p{margin-top:4px;color:var(--text-2);max-width:40em}
@media (min-width:1024px){.quy-trinh__luoi{grid-template-columns:4fr 8fr;gap:64px;align-items:start}.quy-trinh__ben{position:sticky;top:calc(var(--header-h) + 24px)}.quy-trinh__buoc{grid-template-columns:72px 1fr;padding:24px 0}}
.chuan-bi__luoi{display:grid;gap:32px;margin-top:24px}
.chuan-bi__ds{display:grid;gap:20px;align-content:start}
.chuan-bi__ds dd{margin-top:4px;color:var(--text-2)}
.chuan-bi__bang-ten{margin-bottom:12px}
@media (min-width:1024px){.chuan-bi__luoi{grid-template-columns:5fr 7fr;gap:56px}}

/* ============ BẢNG SIZE VÀ CHẤT LIỆU ============ */
.size__luoi{display:grid;gap:32px}
.size__nhom{margin-top:32px}
.size__nhom h3{margin-bottom:12px}
.size__ghi{margin-top:8px;color:var(--text-3)}
.cach-do{display:grid;gap:16px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.cach-do__hinh{width:100%;max-width:220px;margin-inline:auto}
.cach-do__ao{fill:var(--nen-phu);stroke:var(--text);stroke-width:2;stroke-linejoin:round}
.cach-do__do{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.cach-do__chu{display:grid;gap:8px;color:var(--text-2)}
.cach-do__chu b{color:var(--text)}
@media (min-width:1024px){.size__luoi{grid-template-columns:8fr 4fr;gap:48px;align-items:start}.cach-do{position:sticky;top:calc(var(--header-h) + 24px)}}
.vai__luoi{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;margin-top:24px}
.vai__anh{border-radius:var(--radius)}
.vai__ten{margin-top:12px}
.vai__mo{margin-top:4px;color:var(--text-2)}
.vai__dung{margin-top:6px;color:var(--text-3)}
@media (min-width:1024px){.vai__luoi{grid-template-columns:repeat(4,1fr);gap:32px 24px}}
.phan-van{background:var(--nen-phu)}
.phan-van__luoi{display:grid;gap:16px}
.phan-van__luoi p+p{margin-top:12px;color:var(--text-2)}
.phan-van__luoi .hang-nut{margin-top:24px;gap:16px 24px}
@media (min-width:1024px){.phan-van__luoi{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}

/* ============ VỀ PRINTME ============ */
.ve-dau{padding-top:16px}
.ve-dau__luoi{display:grid;gap:12px;margin-top:16px}
.ve-dau__luoi .t-lead{color:var(--text-2);max-width:32em}
.ve-dau__anh{margin-top:32px}
@media (min-width:1024px){.ve-dau__luoi{grid-template-columns:6fr 5fr;gap:56px;align-items:end}}
.ve-chuyen__luoi{display:grid;gap:16px}
.ve-chuyen__chu{max-width:40em}
.ve-chuyen__chu p+p{margin-top:16px}
.ve-chuyen__chu p:not(.t-lead):not(.t-h3){color:var(--text-2)}
.ve-chuyen__trich{margin:28px 0 0;padding-left:20px;border-left:4px solid var(--accent)}
@media (min-width:1024px){.ve-chuyen__luoi{grid-template-columns:4fr 8fr;gap:64px}}
.may__ds{display:grid;gap:40px;margin-top:28px}
.may{display:grid;gap:16px;align-items:center}
.may__anh{border-radius:var(--radius-lg)}
.may__chu p{margin-top:8px;color:var(--text-2);max-width:32em}
.may__chu .may__so{margin-top:6px;color:var(--accent-text)}
@media (min-width:768px){.may{grid-template-columns:7fr 5fr;gap:40px}.may--dao{grid-template-columns:5fr 7fr}.may--dao .may__anh{order:2}}
@media (min-width:1200px){.may{gap:64px}}
.nguoi__luoi{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}
.nguoi__anh{border-radius:var(--radius)}
.nguoi h3{margin-top:12px}
.nguoi p{margin-top:4px;color:var(--text-2)}
@media (min-width:768px){.nguoi__luoi{grid-template-columns:repeat(3,1fr);gap:24px}}
/* Khối "Ghé cửa hàng" ở trang Về PrintME: lớp riêng ve-ghe, không đụng khối Ghé PrintME của trang chủ */
.ve-ghe__luoi{display:grid;gap:20px;padding-top:32px;border-top:2px solid var(--text)}
.ghe__dc{margin-top:12px}
.ghe__gio{color:var(--text-2)}
@media (min-width:1024px){.ve-ghe__luoi{grid-template-columns:1fr auto;align-items:end;gap:48px}}

/* ============ HỎI ĐÁP VÀ CHÍNH SÁCH ============ */
.faq__luoi{display:grid;gap:24px}
.faq__ben p{margin-top:12px;color:var(--text-2);max-width:26em}
.faq__ben .hang-nut{margin-top:20px}
.faq__muc{border-bottom:1px solid var(--border-strong)}
.faq__muc:first-child{border-top:1px solid var(--border-strong)}
.faq__muc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;list-style:none}
.faq__muc summary::-webkit-details-marker{display:none}
.faq__muc summary .ic{color:var(--accent-text);transition:transform var(--dur) var(--ease)}
.faq__muc[open] summary .ic{transform:rotate(180deg)}
.faq__tra{padding-bottom:20px;color:var(--text-2);max-width:42em}
@media (min-width:1024px){.faq__luoi{grid-template-columns:4fr 8fr;gap:64px;align-items:start}.faq__ben{position:sticky;top:calc(var(--header-h) + 24px)}}
.cs{background:var(--nen-phu)}
.cs__luoi{display:grid;gap:24px}
.cs__muc-luc ul{display:grid;gap:2px;margin-top:8px}
.cs__muc-luc a{display:block;padding:6px 0;color:var(--text-2)}
.cs__muc-luc a:hover{color:var(--accent-text)}
.cs__muc{padding-block:28px;border-top:1px solid var(--border-strong)}
.cs__muc:first-child{padding-top:0;border-top:0}
.cs__muc>*+*{margin-top:12px}
.cs__muc p{color:var(--text-2);max-width:44em}
.cs__ds{padding-left:22px;max-width:44em;color:var(--text-2)}
.cs__ds--ul{list-style:disc}
.cs__ds--ol{list-style:decimal}
.cs__ds li+li{margin-top:6px}
.cs__ds li::marker{color:var(--accent-text)}
.cs__cap-nhat{margin-top:12px;color:var(--text-3)}
@media (min-width:1024px){.cs__luoi{grid-template-columns:3fr 9fr;gap:64px;align-items:start}.cs__muc-luc{position:sticky;top:calc(var(--header-h) + 24px)}}

/* ============ LIÊN HỆ ============ */
.lh-dau{padding-block:16px var(--section-y)}
.lh-dau__luoi{display:grid;gap:32px;margin-top:16px}
.lh-tt{display:grid;gap:18px;margin-top:24px}
.lh-tt div{display:grid;grid-template-columns:24px 1fr;gap:2px 14px}
.lh-tt .ic{grid-row:span 2;color:var(--accent);margin-top:2px}
.lh-tt dt{color:var(--text-2)}
.lh-tt__phu{display:block;color:var(--text-2)}
.lh-tt dd a{color:var(--text)}
.lh-dau__chu .hang-nut{margin-top:28px}
@media (min-width:1024px){.lh-dau__luoi{grid-template-columns:5fr 6fr;gap:56px}.lh-dau .ban-do-tam{min-height:420px}}
.chi-duong__luoi{display:grid;gap:20px}
.chi-duong__ds{display:grid;gap:24px}
.chi-duong__ds dd{margin-top:6px;color:var(--text-2)}
@media (min-width:768px){.chi-duong__ds{grid-template-columns:1fr 1fr;gap:28px 40px}}
@media (min-width:1024px){.chi-duong__luoi{grid-template-columns:4fr 8fr;gap:64px}}
.lh-form{background:var(--nen-phu)}
.lh-form__luoi{display:grid;gap:24px}
.lh-form__luoi .t-lead{margin-top:12px;color:var(--text-2)}
.lh-form .su-btn{justify-self:start}
@media (min-width:1024px){.lh-form__luoi{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}

/* ============ GIỎ HÀNG, THANH TOÁN ============ */
.mua-dau{padding-block:16px 24px}
.mua-dau__hang{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
.buoc-mua{display:flex;align-items:center;gap:8px;color:var(--text-3)}
.buoc-mua__muc{display:flex;align-items:center;gap:8px}
.buoc-mua__muc+.buoc-mua__muc::before{content:"";width:20px;height:1px;background:var(--border-strong)}
.buoc-mua__so{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:var(--border-w) solid var(--border-strong)}
.buoc-mua__muc[aria-current]{color:var(--text)}
.buoc-mua__muc[aria-current] .buoc-mua__so{background:var(--text);border-color:var(--text);color:var(--bg)}
.buoc-mua__muc--xong .buoc-mua__so{border-color:var(--accent);color:var(--accent-text)}
.gio{padding-bottom:var(--section-y)}
.gio__luoi{display:grid;gap:32px;align-items:start}
.gio__ds{border-top:1px solid var(--border)}
.mon{display:grid;grid-template-columns:72px 1fr auto;grid-template-areas:"anh chu xoa" "anh sl tien";gap:10px 12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border)}
.mon__anh{grid-area:anh;align-self:start;border-radius:var(--radius-sm)}
.mon__chu{grid-area:chu;min-width:0;overflow-wrap:anywhere}
.mon__ten a{color:var(--text)}
.mon__ten a:hover{color:var(--accent-text)}
.mon__chon{margin-top:2px;color:var(--text-2)}
.mon__don-gia{color:var(--text-3)}
.mon .so-luong{grid-area:sl;justify-self:start}
.mon__tien{grid-area:tien;text-align:right}
.mon__xoa{grid-area:xoa;align-self:start;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--text-3);cursor:pointer}
.mon__xoa:hover{color:var(--danger);background:var(--danger-subtle)}
@media (min-width:768px){.mon{grid-template-columns:88px 1fr auto 120px auto;grid-template-areas:"anh chu sl tien xoa";gap:16px}}
.gio__trai>.lk-mui{margin-top:24px}
.gio__trong{padding:32px 0}
.ma-giam{margin-top:24px}
.ma-giam__hang{display:flex;gap:8px;margin-top:8px;max-width:440px}
.ma-giam__hang .o-tim{flex:1;min-width:0}
.ma-giam__kq{margin-top:8px;color:var(--text-2)}
.tom-tat{display:grid;gap:16px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.tom-tat__giao legend{float:left;width:100%;margin-bottom:4px}
.tom-tat__giao legend+*{clear:both}
.chon-giao{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:8px;padding:12px 14px;border:var(--border-w) solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer}
.chon-giao:has(input:checked){border-color:var(--text)}
.chon-giao input{width:18px;height:18px;margin:0}
.chon-giao__chu{display:grid}
.chon-giao__chu .t-small{color:var(--text-2)}
.tom-tat__so{display:grid;gap:8px}
.tom-tat__so div{display:flex;justify-content:space-between;gap:12px}
.tom-tat__so dt{color:var(--text-2)}
.tom-tat__tong{padding-top:12px;border-top:1px solid var(--border);align-items:baseline}
.tom-tat__tong dt{color:var(--text)}
.tom-tat__thue{color:var(--text-2)}
.tom-tat__yen{display:grid;gap:8px;color:var(--text-2)}
.tom-tat__yen li{display:flex;gap:8px;align-items:flex-start}
.tom-tat__yen .ic{color:var(--accent-text)}
.tom-tat__ds{display:grid;gap:12px}
.tom-tat__ds li{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center}
.tom-tat__anh{border-radius:var(--radius-sm)}
.tom-tat__mon{display:grid}
.tom-tat__mon .t-small{color:var(--text-2)}
@media (min-width:1024px){.gio__luoi{grid-template-columns:1fr 380px;gap:48px}.tom-tat{position:sticky;top:calc(var(--header-h) + 16px)}}
.tt-form{display:grid;gap:32px}
.tt-form__nhom{display:grid;gap:16px}
.tt-form__nhom legend{float:left;width:100%;margin-bottom:4px}
.tt-form__nhom legend+*{clear:both}
.tt-form__nhom .chon-giao{margin-top:0}
.chon-tra{display:grid;grid-template-columns:auto 24px 1fr;gap:12px;align-items:center;padding:14px;border:var(--border-w) solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer}
.chon-tra:has(input:checked){border-color:var(--text)}
.chon-tra input{width:18px;height:18px;margin:0}
.chon-tra .ic{color:var(--accent-text)}
.chon-tra__chu{display:grid}
.chon-tra__chu .t-small{color:var(--text-2)}
.qr-o{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:center;padding:14px;border-radius:var(--radius);background:var(--nen-phu)}
.qr-o__ma{display:grid;place-items:center;gap:6px;aspect-ratio:1;padding:8px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-3);text-align:center;font-size:var(--fs-00);line-height:var(--lh-label)}
.qr-o p{color:var(--text-2)}

/* ============ GIẢM CHUYỂN ĐỘNG ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
}
/* Điện thoại: thanh bước mua chỉ ghi chữ của bước đang đứng, hai bước kia còn số */
@media (max-width:767px){.buoc-mua__muc:not([aria-current]) span:last-child{display:none}}