/* ========================================================= DR.MIDNIGHT — Stylesheet Bảng màu lấy theo wild-apex.bio: xanh xám #7c9dae (header, chân trang) · xanh đậm #2c5e88 (tiêu đề, đường dẫn) vàng hổ phách #f6b431 (nút chính) · vàng nhạt #f7dc83 (dải tin, nút phụ) nền trắng · chữ #333 ========================================================= */ :root{ /* Website chỉ có giao diện sáng. Khai báo rõ để hệ điều hành đang bật Dark Mode (nhất là macOS/Safari) không tự tô chữ trắng vào ô nhập liệu nền trắng. */ color-scheme:light; /* --- Xanh xám: màu chủ đạo, dùng cho các mảng nền lớn --- */ --blue:#7c9dae; --blue-dark:#6a8b9c; --blue-light:#c0d0d8; /* viền xanh nhạt */ --blue-soft:#eaf0f4; /* nền phụ rất nhạt */ /* --- Xanh đậm: tiêu đề, đường dẫn, nút phụ --- */ --navy:#2c5e88; --navy-dark:#24506f; --navy-deep:#1d4260; /* --- Vàng hổ phách: nút hành động, khối nổi bật --- */ --amber:#f6b431; --amber-light:#f7dc83; --amber-soft:#fdf6e4; --amber-ink:#7a5312; /* --- Nền, chữ, viền --- */ --red:#b4292a; /* đỏ lấy từ bao bì sản phẩm, không thuộc bảng màu trang */ --ink:#333; --muted:#616f78; /* xám xanh, đã chỉnh cho đủ tương phản trên cả nền trắng lẫn nền #f7f7f7 */ --line:#e2e8ec; --bg:#fff; --bg-soft:#f7f7f7; --radius:14px; --shadow:0 2px 14px rgba(29,45,58,.08); --shadow-lg:0 10px 34px rgba(29,45,58,.15); --wrap:1240px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:'Be Vietnam Pro','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; } img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{line-height:1.3;margin:0 0 .5em} p{margin:0 0 1em} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px} /* ========================================================= DẤU HIỆU THAY CHO ICON Website không dùng emoji. Chỗ nào cần một dấu nhận biết thì dùng số thứ tự, chữ viết hoa giãn cách, hoặc nét kẻ vẽ bằng CSS. ========================================================= */ /* Số thứ tự kiểu ấn phẩm: "01" nhỏ, giãn chữ, kèm một nét kẻ mảnh bên dưới */ .num{display:block;font-size:12.5px;font-weight:700;letter-spacing:.24em; color:var(--amber-ink);margin:0 0 15px;font-variant-numeric:tabular-nums} .num::after{content:'';display:block;width:32px;height:1px;background:var(--amber);margin-top:11px} /* Nhãn chữ nhỏ viết hoa — dùng cho khối lưu ý, khối trạng thái */ .eyelabel{display:block;font-size:11px;font-weight:700;letter-spacing:.22em; text-transform:uppercase;margin-bottom:7px;opacity:.75} /* Dấu tích vẽ bằng hai cạnh viền, xoay 45 độ */ .tick{display:inline-block;width:6px;height:11px;border:solid currentColor; border-width:0 1.8px 1.8px 0;transform:rotate(45deg) translate(-1px,-1px)} /* Dấu đóng vẽ bằng hai nét gạch bắt chéo */ .xmark{position:relative;display:inline-block;width:13px;height:13px} .xmark::before,.xmark::after{content:'';position:absolute;top:50%;left:0;width:100%;height:1.5px; background:currentColor;border-radius:1px} .xmark::before{transform:rotate(45deg)} .xmark::after{transform:rotate(-45deg)} /* ---------- Banner sản phẩm chủ lực trên trang chủ ---------- Cả khối là một thẻ — bấm ảnh hay chữ đều sang trang sản phẩm. Nền trắng trùng với nền trang chủ; ảnh tối tự nổi thành mảng điểm nhấn. */ .promo{background:var(--bg);border-bottom:1px solid var(--line)} .promo-inner{display:grid;grid-template-columns:minmax(0,430px) 1fr;gap:56px;align-items:center; padding-top:48px;padding-bottom:52px;color:var(--ink)} .promo-img img{width:100%;height:auto;border-radius:var(--radius); box-shadow:var(--shadow-lg);transition:transform .25s} .promo-inner:hover .promo-img img{transform:translateY(-5px)} .promo-inner:hover .btn{filter:brightness(1.07)} .promo-kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.22em; color:var(--red);margin-bottom:14px} .promo-copy h2{font-size:clamp(26px,3.4vw,40px);line-height:1.25;color:var(--navy-deep);margin-bottom:14px} .promo-copy h2 em{font-style:normal;color:var(--red)} .promo-copy p{font-size:16px;line-height:1.7;color:#42505a;max-width:56ch;margin-bottom:20px} .promo-points{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 20px} .promo-points li{padding:8px 17px;border:1px solid var(--amber);border-radius:999px; background:var(--amber-soft);font-size:14px;font-weight:600;color:var(--amber-ink)} .promo-price{font-size:16px;font-weight:600;color:var(--navy-deep);margin:0 0 26px} .promo-price b{font-size:23px;font-weight:800;color:var(--red);margin-right:4px} @media(max-width:900px){ .promo-inner{grid-template-columns:1fr;gap:30px} .promo-img{max-width:420px;margin:0 auto} } /* ---------- Topbar ---------- */ .topbar{background:var(--amber-light);color:#404040;text-align:center;font-size:14px;font-weight:600;padding:9px 0} /* ---------- Header ---------- Nền xanh xám đậm nên toàn bộ chữ và nút bên trong dùng màu trắng. */ .header{background:var(--blue);color:#fff;position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(255,255,255,.28);box-shadow:0 1px 10px rgba(29,45,58,.12)} .header-inner{display:flex;align-items:center;gap:18px;min-height:74px} .logo{display:flex;align-items:center;gap:11px;color:#fff;flex-shrink:0} /* Logo là PNG nền trong suốt, góc bo đã có sẵn trong ảnh — dùng drop-shadow (bám theo hình thật) thay vì box-shadow (bám theo khung chữ nhật). */ .logo img{width:42px;height:42px;filter:drop-shadow(0 1px 4px rgba(29,45,58,.32))} .logo-text{display:flex;flex-direction:column;line-height:1.1} .logo-text b{font-size:18px;letter-spacing:.14em;color:#fff} /* Menu ngang giữa header */ .nav{flex:1;display:flex;justify-content:center} .nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0} .nav-link{display:flex;align-items:center;gap:5px;padding:10px 16px;border-radius:8px;font-size:15.5px;font-weight:500;white-space:nowrap;transition:background .18s,color .18s} .nav-link:hover,.nav-link.active{background:rgba(255,255,255,.22);color:#fff} .chev{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:2px;transition:transform .18s} /* Nút "Trang chủ" — ngoài cùng bên trái header */ .home-btn{flex-shrink:0;display:inline-flex;align-items:center;padding:9px 15px; border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(255,255,255,.14); font-size:14.5px;font-weight:600;color:#fff;white-space:nowrap;transition:.18s} .home-btn:hover{background:#fff;border-color:#fff;color:var(--navy)} .home-btn.active{background:rgba(255,255,255,.28)} /* Nút cuộn mở danh mục — cạnh nút Trang chủ */ .drawer-btn{flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:11px;background:rgba(255,255,255,.14);cursor:pointer;transition:.18s} .drawer-btn:hover{background:#fff;border-color:#fff} .bars{display:grid;gap:4px;width:19px} .bars i{display:block;height:2px;border-radius:2px;background:#fff;transition:.22s} .drawer-btn:hover .bars i{background:var(--navy)} .drawer-btn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)} .drawer-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0} .drawer-btn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* Nút đăng nhập & giỏ hàng — góc trên bên phải, cạnh nút ngôn ngữ */ .acct-btn,.cart-btn{position:relative;flex-shrink:0;width:44px;height:44px;display:grid;place-items:center; border:1px solid rgba(255,255,255,.45);border-radius:11px;background:rgba(255,255,255,.14); transition:.18s} /* Nền hover là trắng nên icon phải đổi sang xanh đậm, không thì trắng trên trắng */ .acct-btn:hover,.cart-btn:hover{background:#fff;border-color:#fff;color:var(--navy)} /* Icon người và túi giấy — SVG một màu, ăn theo màu chữ (trắng trên header) */ .acct-ico,.cart-ico{width:22px;height:22px;line-height:0} .acct-ico svg,.cart-ico svg{width:100%;height:100%;display:block} .cart-badge{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 6px; border-radius:999px;background:var(--red);color:#fff;border:2px solid #fff; font-size:11.5px;font-weight:800;line-height:17px;text-align:center} .cart-badge[hidden]{display:none} .cart-badge.pulse{animation:cart-pop .45s ease} @keyframes cart-pop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}} @media(prefers-reduced-motion:reduce){ .cart-badge.pulse{animation:none} } /* Chọn ngôn ngữ — góc trên bên phải */ .lang{position:relative;flex-shrink:0} .lang-btn{display:flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(255,255,255,.14);font-family:inherit;font-size:14.5px;font-weight:600;color:#fff;cursor:pointer;transition:.18s} .lang-btn:hover{background:#fff;border-color:#fff;color:var(--navy)} /* Mã ngôn ngữ trong danh sách chọn — thay cho cờ, dùng chữ trong khung mảnh */ .lang-code{flex-shrink:0;min-width:30px;padding:2px 0;border:1px solid var(--line);border-radius:4px; font-size:10.5px;font-weight:700;letter-spacing:.1em;text-align:center;color:var(--muted)} .lang-menu button[aria-selected="true"] .lang-code{border-color:var(--amber);color:var(--amber-ink)} .lang.open .lang-btn .chev{transform:rotate(180deg)} .lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:186px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:70} .lang.open .lang-menu{opacity:1;visibility:visible;transform:none} .lang-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 13px;border:0;border-radius:9px;background:none;font-family:inherit;font-size:14.5px;color:var(--ink);text-align:left;cursor:pointer} .lang-menu button:hover{background:var(--bg-soft)} .lang-menu button[aria-selected="true"]{background:var(--amber-soft);color:var(--navy-deep);font-weight:600} /* Ngôn ngữ đang chọn: một nét kẻ mảnh ở cuối dòng thay cho dấu tích */ .lang-menu button[aria-selected="true"]::after{content:'';margin-left:auto;width:18px;height:1.5px; background:var(--amber);border-radius:1px} /* Ngăn kéo danh mục */ .drawer-mask{position:fixed;inset:0;background:rgba(29,45,58,.45);opacity:0;transition:opacity .26s;z-index:80} body.drawer-open .drawer-mask{opacity:1} .drawer{position:fixed;top:0;left:0;bottom:0;width:min(330px,86vw);background:#fff;box-shadow:6px 0 30px rgba(29,45,58,.22);transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:81;display:flex;flex-direction:column;overflow-y:auto} body.drawer-open .drawer{transform:none} /* display:flex ở trên sẽ thắng [hidden] của trình duyệt — phải ẩn lại tường minh */ .drawer[hidden],.drawer-mask[hidden]{display:none} .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;background:var(--blue);border-bottom:1px solid var(--line)} .drawer-head b{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#fff} .drawer-x{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.25);font-size:15px;color:#fff;cursor:pointer} .drawer-x:hover{background:#fff} .drawer-nav{padding:14px;flex:1} .drawer-item>a{display:block;padding:12px 14px;border-radius:10px;font-size:16px;font-weight:500;border-left:3px solid transparent} .drawer-item>a:hover{background:var(--bg-soft)} .drawer-item>a.active{background:var(--blue-soft);border-left-color:var(--navy);color:var(--navy-dark);font-weight:600} .drawer-sub{padding:2px 0 6px 16px} .drawer-sub a{display:block;padding:8px 14px;border-radius:8px;font-size:14.5px;color:var(--muted)} .drawer-sub a:hover{background:var(--bg-soft);color:var(--navy-dark)} .drawer-foot{padding:20px 22px;border-top:1px solid var(--line);background:var(--bg-soft);font-size:14px} .drawer-foot .f-line b{font-size:19px;color:var(--navy-deep)} .drawer-foot .f-hours{color:var(--muted);font-size:13px;margin:0} .drawer-foot .f-hours span{display:block} /* ---------- Nút ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;border-radius:999px;font-weight:600;font-size:15.5px;border:2px solid transparent;cursor:pointer;transition:.2s;font-family:inherit} /* Nút chính = vàng hổ phách chữ trắng, nút phụ = vàng nhạt chữ đen — đúng như wild-apex */ .btn-primary{background:var(--amber);color:#fff} .btn-primary:hover{background:#e0a223} .btn-gold{background:var(--amber-light);color:#2c2c2c} .btn-gold:hover{filter:brightness(1.05)} .btn-ghost{border-color:currentColor;color:var(--navy-dark)} .btn-ghost:hover{background:var(--navy-dark);color:#fff} .btn-lg{padding:16px 38px;font-size:16.5px} .btn-block{width:100%} /* Nút bị khoá: mờ đi, con trỏ báo không bấm được, bỏ mọi hiệu ứng hover */ .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} .btn-primary:disabled:hover{background:var(--amber)} .btn-gold:disabled:hover{filter:none} .btn-ghost:disabled:hover{background:none;color:var(--navy-dark)} /* Dòng nhắc hiện kèm khi nút đang bị khoá */ .btn-hint{margin:10px 0 0;font-size:13.5px;color:var(--muted)} /* ---------- Thư viện ảnh sản phẩm ---------- Cột ảnh nhỏ chạy dọc bên trái + ảnh lớn bên phải. Bấm (hoặc rê chuột) vào ảnh nhỏ để đổi ảnh lớn. */ .gallery{display:grid;grid-template-columns:86px 1fr;gap:14px;align-items:start} .gallery-thumbs{display:flex;flex-direction:column;gap:9px;max-height:560px; overflow-y:auto;scrollbar-width:thin} .gallery-thumbs button{flex:0 0 auto;width:86px;aspect-ratio:1;padding:0;overflow:hidden; border:2px solid var(--line);border-radius:9px;background:#fff; cursor:pointer;transition:.18s} .gallery-thumbs button:hover{border-color:var(--blue-dark)} .gallery-thumbs button[aria-current="true"]{border-color:var(--navy); box-shadow:0 0 0 2px rgba(29,45,58,.16)} .gallery-thumbs img{width:100%;height:100%;object-fit:cover;display:block} .gallery-main{position:relative;border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;background:#fff} .gallery-main img{width:100%;aspect-ratio:1;object-fit:contain;display:block} .gallery-count{position:absolute;right:12px;bottom:12px;padding:4px 11px;border-radius:999px; background:rgba(29,45,58,.62);color:#fff;font-size:12.5px;font-weight:600} @media(max-width:700px){ /* Màn hẹp: ảnh lớn lên trên, dải ảnh nhỏ nằm ngang bên dưới */ .gallery{grid-template-columns:1fr;gap:10px} .gallery-main{order:1} .gallery-thumbs{order:2;flex-direction:row;max-height:none;overflow-x:auto;padding-bottom:4px} .gallery-thumbs button{width:70px} } /* ---------- Hero ---------- */ .hero{background:linear-gradient(135deg,#eef3f6 0%,#dde8ee 45%,#fdf5e2 100%);padding:70px 0 80px} /* Hero nằm dưới khối 3 yếu tố nên để nền trơn, tránh 2 dải gradient chồng nhau */ .hero.hero-plain{background:#fff;border-top:1px solid var(--line)} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} .hero-grid>*{min-width:0} .eyebrow{display:inline-block;background:#fff;color:var(--navy-dark);border-radius:999px;padding:6px 16px;font-size:13px;font-weight:700;letter-spacing:.06em;margin-bottom:18px;box-shadow:var(--shadow)} .hero h1{font-size:clamp(30px,4.2vw,50px);letter-spacing:-.01em;margin-bottom:18px} .hero h1 em{font-style:normal;color:var(--navy)} .hero p.lead{font-size:17.5px;color:var(--muted);max-width:52ch;margin-bottom:28px} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} /* ---------- Section ---------- */ .section{padding:72px 0} .section.soft{background:var(--bg-soft)} .section-head{text-align:center;max-width:680px;margin:0 auto 44px} .section-head h2{font-size:clamp(24px,3vw,34px)} .section-head p{color:var(--muted);margin:0} .section-head .kicker{color:var(--navy);font-weight:700;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px} /* ---------- 3 yếu tố trọng tâm ---------- */ /* Là khối mở đầu trang chủ nên mang dải gradient thương hiệu. Muốn trả lại nền trắng: xoá rule .pillars-top bên dưới. */ .pillars-top{background:linear-gradient(135deg,#eef3f6 0%,#dde8ee 45%,#fdf5e2 100%);padding:64px 0 68px} .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .pillar{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px 32px;box-shadow:var(--shadow);transition:.22s} .pillar::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--amber)} .pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue)} /* Con số lớn mờ ở góc, làm nền trang trí sau chữ — không phải icon */ .pillar-no{position:absolute;top:18px;right:24px;font-size:64px;font-weight:800;line-height:1; color:var(--blue-light);opacity:.5;letter-spacing:-.05em;user-select:none} .pillar h3{position:relative;font-size:22px;color:var(--navy-deep);margin-bottom:8px} .pillar p{position:relative;font-size:15.5px;color:var(--muted);margin:0} /* Ghi chú xen trong câu — nhỏ hơn chữ chính, vẫn đọc rõ */ .note-inline{font-size:.87em;opacity:.85} /* ---------- Sản phẩm ---------- */ .line-block{margin-bottom:46px} .line-block:last-child{margin-bottom:0} .line-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px; padding-bottom:12px;border-bottom:2px solid var(--line)} .line-head h2{font-size:22px;margin:0;color:var(--navy-deep)} .line-head span{font-size:14px;color:var(--muted)} .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .prod-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;display:flex;flex-direction:column;transition:.22s} .prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-dark)} .prod-art{aspect-ratio:4/3;background:var(--bg-soft);position:relative;overflow:hidden;display:block} .prod-art svg{width:100%;height:100%} .prod-art img{width:100%;height:100%;object-fit:cover} .prod-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;gap:4px} .prod-name{font-size:17px;font-weight:600;line-height:1.35;margin:0} .prod-name-en{font-size:13.5px;color:var(--muted);font-style:italic;margin:0 0 10px} .prod-soon{display:inline-block;align-self:flex-start;margin-bottom:14px;padding:3px 10px; border-radius:999px;background:var(--amber-soft);border:1px solid #f0e0b4; color:var(--amber-ink);font-size:11.5px;font-weight:600} .prod-price{margin:2px 0 14px;font-size:14px;color:var(--muted)} .prod-price b{color:var(--red);font-size:19px;font-weight:800} .prod-body .btn{margin-top:auto} /* ---------- Ô tăng/giảm số lượng ---------- */ .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px; overflow:hidden;background:#fff} .qty button{width:38px;height:40px;border:0;background:#fff;font-size:18px;line-height:1; color:var(--navy-deep);cursor:pointer;transition:.15s} .qty button:hover{background:var(--bg-soft)} .qty button:disabled{color:var(--blue-dark);cursor:not-allowed} .qty input{width:46px;height:40px;border:0;text-align:center;font-family:inherit; font-size:15px;font-weight:700;color:var(--ink);background:#fff;-moz-appearance:textfield} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* ---------- Hộp thoại thêm vào giỏ ---------- */ .modal{width:min(460px,92vw);border:0;border-radius:16px;padding:26px; box-shadow:var(--shadow-lg);color:var(--ink);background:#fff} .modal::backdrop{background:rgba(29,45,58,.55)} .modal h2{font-size:19px;margin:0 34px 2px 0;line-height:1.35} .modal .modal-sub{font-size:14px;color:var(--muted);margin:0 0 18px} .modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%; background:var(--bg-soft);color:var(--navy-deep);font-size:14px;cursor:pointer} .modal-x:hover{background:var(--blue-soft)} .modal-label{display:block;font-size:13px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);margin:18px 0 8px} .modal-label:first-of-type{margin-top:0} .pack-opt{cursor:pointer;border-width:2px;transition:.16s} .pack-opt:hover{border-color:var(--blue-dark)} .pack-opt[aria-checked="true"]{border-color:var(--navy);background:var(--bg-soft)} .modal-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px; margin:18px 0 16px;padding-top:16px;border-top:1px solid var(--line);font-size:15px} .modal-total b{font-size:22px;font-weight:800;color:var(--red)} /* ---------- Trang giỏ hàng ---------- */ .cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center; padding:18px 0;border-bottom:1px solid var(--line)} .cart-row:first-child{border-top:1px solid var(--line)} .cart-thumb{width:96px;aspect-ratio:1;border:1px solid var(--line);border-radius:11px; overflow:hidden;background:#fff} .cart-thumb img{width:100%;height:100%;object-fit:cover;display:block} .cart-name{font-size:16px;font-weight:600;margin:0 0 3px} .cart-name a:hover{color:var(--navy-dark)} .cart-pack{font-size:13.5px;color:var(--muted);margin:0 0 10px} .cart-unit{font-size:13.5px;color:var(--muted);margin:8px 0 0} .cart-line{text-align:right;white-space:nowrap} .cart-line b{display:block;font-size:18px;font-weight:800;color:var(--red);margin-bottom:8px} .cart-del{border:0;background:none;color:var(--muted);font-size:13px;cursor:pointer; text-decoration:underline;padding:2px 0;font-family:inherit} .cart-del:hover{color:var(--red)} .cart-sum{display:flex;align-items:baseline;justify-content:space-between;gap:16px; margin-top:24px;padding-top:20px;border-top:2px solid var(--line);font-size:17px} .cart-sum b{font-size:27px;font-weight:800;color:var(--red)} .cart-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px} .btn-danger{background:none;border:2px solid #d9b3b0;color:var(--red)} .btn-danger:hover{background:var(--red);border-color:var(--red);color:#fff} @media(max-width:640px){ .cart-row{grid-template-columns:72px 1fr;gap:14px} .cart-thumb{width:72px} .cart-line{grid-column:2;text-align:left;margin-top:4px} } /* ---------- Các bước đặt hàng ---------- */ .steps{display:flex;align-items:center;gap:8px;margin:0 0 34px;flex-wrap:wrap} .step{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--muted)} .step i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; background:var(--blue-soft);border:1px solid var(--line);color:var(--muted); font-style:normal;font-size:13px;font-weight:800} .step[aria-current="true"]{color:var(--navy-deep);font-weight:700} .step[aria-current="true"] i{background:var(--navy);border-color:var(--navy);color:#fff} .step.done i{background:var(--amber-soft);border-color:var(--amber);color:var(--amber-ink)} .step-sep{flex:1;min-width:16px;height:2px;background:var(--line);border-radius:2px} /* ---------- Xác nhận đơn ---------- */ .review-box{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px; margin-bottom:18px;background:#fff} .review-box h3{font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted); margin:0 0 12px} /* flex-wrap + overflow-wrap: địa chỉ hoặc tên tài khoản dài phải xuống dòng, không được đẩy ngang làm tràn trang */ .review-line{display:flex;gap:14px;justify-content:space-between;padding:7px 0;font-size:15px; flex-wrap:wrap} .review-line span{min-width:0;overflow-wrap:anywhere} .review-line span:first-child{color:var(--muted)} .review-line span:last-child{text-align:right;font-weight:500} .review-item{display:flex;gap:14px;justify-content:space-between;padding:11px 0; border-bottom:1px solid var(--line);font-size:15px} .review-item span{min-width:0;overflow-wrap:anywhere} .review-item:last-child{border-bottom:0} .review-item small{display:block;color:var(--muted);font-size:13px} .review-item b{white-space:nowrap;color:var(--red)} .review-total{display:flex;justify-content:space-between;gap:16px;align-items:baseline; padding-top:16px;margin-top:8px;border-top:2px solid var(--line);font-size:17px} .review-total b{font-size:26px;font-weight:800;color:var(--red)} /* ---------- Chọn phương thức thanh toán ---------- */ .pay-list{display:grid;gap:12px;margin-bottom:24px} .pay-opt{display:flex;align-items:flex-start;gap:14px;border:2px solid var(--line); border-radius:12px;padding:16px 18px;cursor:pointer;background:#fff;transition:.16s; text-align:left;font-family:inherit;width:100%} .pay-opt:hover{border-color:var(--blue-dark)} .pay-opt[aria-checked="true"]{border-color:var(--navy);background:var(--bg-soft)} .pay-opt b{display:block;font-size:16px;margin-bottom:3px;color:var(--ink)} .pay-opt span{font-size:13.5px;color:var(--muted)} .pay-opt:disabled{opacity:.5;cursor:not-allowed} .pay-opt:disabled:hover{border-color:var(--line)} .pay-opt .ship-fee{margin-left:auto;align-self:center;white-space:nowrap; font-size:15.5px;font-weight:800;color:var(--red)} .ship-closed{display:block;margin-top:5px;font-size:12.5px;font-weight:700;color:var(--red)} .ship-hint{display:block;margin-top:5px;font-size:12.5px;color:var(--amber-ink)} .pay-opt .ship-fee em{font-style:normal;color:#2e7d5b} .pay-opt .ship-fee s{display:block;font-size:13px;font-weight:400;color:var(--muted)} /* Khối ngày giao dự kiến */ .eta-box{background:var(--amber-soft);border-color:#f0e0b4} .eta-head{margin:0 0 6px;font-size:16px;font-weight:600;color:var(--navy-deep)} .eta-date{margin:0;font-size:17px;font-weight:800;color:var(--navy-deep)} .eta-note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--amber-ink);opacity:.9} .eta-note+.eta-note{margin-top:7px} /* hai dòng ghi chú liền nhau thì sát lại */ /* Dấu xác nhận đơn thành công: vòng tròn nét mảnh, bên trong là dấu tích vẽ bằng CSS */ .done-seal{width:56px;height:56px;margin:0 auto 14px;border:1.5px solid var(--amber);border-radius:50%; display:grid;place-items:center;color:var(--amber-ink)} .done-seal .tick{width:9px;height:17px;border-width:0 2px 2px 0} .done-code{display:inline-block;margin:6px 0 18px;padding:10px 20px;border-radius:10px; background:var(--amber-soft);border:1px dashed var(--amber); font-size:22px;font-weight:800;letter-spacing:.08em;color:var(--navy-deep)} /* ---------- Chi tiết sản phẩm ---------- */ .pd{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:44px 0 10px} .pd>*{min-width:0} .pd-art{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:sticky;top:96px} .pd-art svg,.pd-art img{width:100%;height:auto;display:block} .pd-imgnote{margin:10px 0 0;font-size:12.5px;color:var(--muted);font-style:italic;text-align:center} .pd-line{display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:999px; background:var(--blue-soft);border:1px solid var(--line);font-size:12.5px; font-weight:600;color:var(--navy-deep)} .pd h1{font-size:clamp(23px,2.7vw,31px);margin-bottom:4px} .pd .name-en{color:var(--muted);font-style:italic;font-size:16px;margin-bottom:22px} .packs{display:grid;gap:10px;margin-bottom:8px} .pack{display:flex;align-items:center;justify-content:space-between;gap:14px; border:1px solid var(--line);border-radius:12px;padding:14px 17px;background:#fff} .pack-label{font-size:14.5px;font-weight:500} .pack-price{text-align:right;white-space:nowrap} .pack-price b{color:var(--red);font-weight:800;font-size:18px} .pack-price s{display:block;color:var(--muted);font-size:13px;font-weight:400} .pack-off{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px; background:var(--red);color:#fff;font-size:11.5px;font-weight:700;vertical-align:2px} /* Dòng mô tả dài dưới tên + danh sách điểm nổi bật (dấu tích vẽ bằng CSS) */ .pd-tagline{font-size:14.5px;font-weight:600;color:var(--navy);margin:-12px 0 16px} .hl{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px} .hl li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:#42505a} .hl .tick{flex-shrink:0;margin-top:4px;color:var(--amber-ink)} /* Giá của quy cách đang chọn — số to, giá gốc gạch ngang bên cạnh */ .pd-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 18px} .pd-price b{font-size:31px;color:var(--red);font-weight:800;line-height:1} .pd-price s{color:var(--muted);font-size:16.5px} /* Hàng nút mua + dòng gợi ý freeship */ .buy-row{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 12px} .pd-shiphint{font-size:13px;color:var(--muted);margin:0} /* Thanh tab dưới trang chi tiết: Mô tả sản phẩm · Giao hàng & thanh toán */ .pd-tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin:34px 0 0} .pd-tabs button{padding:13px 20px;border:0;background:none;font-family:inherit;font-size:15.5px; font-weight:600;color:var(--muted);cursor:pointer; border-bottom:2px solid transparent;margin-bottom:-2px;transition:.16s} .pd-tabs button:hover{color:var(--navy)} .pd-tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--navy)} .pd-panel{padding:30px 0 6px} .pd-panel h3{font-size:17.5px;color:var(--navy-deep);margin:26px 0 12px} .pd-panel h3:first-child{margin-top:0} .pd-panel p,.pd-panel li,.pd-panel td,.pd-panel th{font-size:15.5px;color:#42505a} .pd-panel table.spec th{color:var(--ink)} .pd-block{padding:36px 0;border-top:1px solid var(--line)} .pd-block:first-of-type{border-top:0} .pd-block h2{font-size:21px;color:var(--navy-deep);margin-bottom:14px} .pd-block h3{font-size:16.5px;margin:22px 0 8px} .pd-block h3:first-of-type{margin-top:0} .pd-block p,.pd-block li{font-size:16px;color:#42505a} .dose-list{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:9px} .dose-list li{display:flex;gap:11px;align-items:flex-start} .dose-list li::before{content:'';flex-shrink:0;width:7px;height:7px;border-radius:50%; background:var(--amber);margin-top:9px} .test-list{list-style:none;padding:0;margin:0;display:grid;gap:14px} .test-list li{border-left:3px solid var(--amber);padding:2px 0 2px 16px} .test-list b{display:block;color:var(--navy-deep);font-size:16px;margin-bottom:2px} .test-list a{color:var(--navy-dark);text-decoration:underline;font-size:13.5px} /* Nút mở giấy kiểm định (mở tab mới) */ .doc-btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px} .test-list a.doc-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px; border:1.5px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy-dark); font-size:13.5px;font-weight:600;text-decoration:none;transition:.18s} .test-list a.doc-btn:hover{background:var(--navy-dark);border-color:var(--navy-dark);color:#fff} /* Mũi tên chéo báo "mở tab mới", vẽ bằng CSS thay cho ký tự ↗ */ .doc-btn .ext{position:relative;width:9px;height:9px;flex-shrink:0;opacity:.75} .doc-btn .ext::before{content:'';position:absolute;inset:0;border:solid currentColor;border-width:1.4px 1.4px 0 0} .doc-btn .ext::after{content:'';position:absolute;top:1px;right:0;width:12px;height:1.4px; background:currentColor;transform:rotate(45deg);transform-origin:right center} .ext-link{position:relative} /* Tên sản phẩm phía trên mỗi nhóm giấy kiểm nghiệm (trang Chứng nhận kiểm nghiệm). Đặt trong .prose nên phải thắng được .prose h3 về độ ưu tiên. */ .prose h3.doc-prod{margin:30px 0 12px;font-size:18px} .prose h3.doc-prod:first-child{margin-top:0} .doc-prod a{color:var(--navy-deep);text-decoration:none} .doc-prod a:hover{text-decoration:underline} /* ---------- Khối nổi bật (hộp hotline, gợi ý) ---------- */ .side-help{background:var(--amber-soft);border:1px solid #f0e0b4;border-radius:var(--radius);padding:20px} .side-help b{display:block;font-size:15px;margin-bottom:4px;color:var(--navy-deep)} .side-help p{font-size:13.5px;color:var(--amber-ink);margin:0 0 12px} /* ---------- Bảng thông số ---------- */ /* Dải ảnh giới thiệu lớn trong phần mô tả sản phẩm — như trang gốc. Ảnh thu còn 63,75% bề rộng cột (100% giảm 25%, rồi giảm tiếp 15%) và canh giữa; màn hẹp trả lại 100% để chữ trong ảnh vẫn đọc được. */ .pd-media{display:grid;gap:14px;margin:26px 0 30px} .pd-media img{width:63.75%;height:auto;margin:0 auto;border-radius:var(--radius);box-shadow:var(--shadow)} @media(max-width:640px){ .pd-media img{width:100%} } .pd-labelnote{font-size:13.5px;color:var(--muted);margin:0 0 12px} /* ---------- Khối "công thức then chốt" trong mô tả sản phẩm ---------- Dựng bằng HTML/SVG thuần Việt, thay cho các banner ảnh tiếng Trung. */ .fs{border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;margin:0 0 16px;background:#fff;box-shadow:var(--shadow)} .fs-badge{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;margin-bottom:13px} .fs h4{font-size:21px;color:var(--navy-deep);margin:0 0 3px} .fs-sub{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px} .fs-lead{font-size:15.5px;font-weight:600;color:var(--navy);margin:0 0 14px} .fs-note{font-size:14px;line-height:1.6;color:var(--muted);background:var(--bg-soft);border-radius:10px;padding:14px 16px;margin:16px 0 0} .fs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .fs-step{text-align:center;background:var(--blue-soft);border-radius:12px;padding:18px 14px;font-size:14px;color:#42505a} .fs-step b{display:block;font-size:24px;font-weight:800;color:var(--navy);margin-bottom:6px;font-variant-numeric:tabular-nums} .fs-donut{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center} .fs-donut svg{width:180px;height:180px} .fs-legend{display:grid;gap:8px;font-size:14.5px} .fs-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px} .fs-aud{display:grid;grid-template-columns:1fr 1fr;gap:14px} .fs-aud div{background:var(--blue-soft);border-radius:12px;padding:16px 18px;font-size:14px;color:#42505a} .fs-aud b{display:block;color:var(--navy-deep);font-size:15px;margin-bottom:4px} .fs-quote{border-left:4px solid var(--amber);background:var(--amber-soft);padding:18px 20px;border-radius:0 12px 12px 0;font-size:15.5px;font-style:italic;color:var(--navy-deep);margin-top:16px} .fs-quote small{display:block;margin-top:9px;font-style:normal;font-weight:600;font-size:13px;color:var(--amber-ink)} @media(max-width:640px){ .fs-steps,.fs-aud{grid-template-columns:1fr} .fs-donut{grid-template-columns:1fr;justify-items:center;gap:18px} } table.spec{width:100%;border-collapse:collapse;font-size:15px} table.spec th,table.spec td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)} table.spec th{background:var(--bg-soft);font-weight:600;width:44%} table.spec td small{color:var(--muted)} .checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px} /* li là block chứ không phải flex: nếu là flex thì mỗi đoạn chữ và mỗi thẻ inline bên trong (vd ) biến thành một ô flex riêng, nằm cạnh nhau thành nhiều cột rời rạc. Block cho chữ chảy liền mạch; số thứ tự đặt tuyệt đối. */ .checklist li{position:relative;padding-left:38px;font-size:15.5px;line-height:1.6} /* Danh sách các bước: đánh số 01, 02, 03 thay cho dấu tích */ .checklist{counter-reset:ck} .checklist li{counter-increment:ck} .checklist li::before{content:counter(ck,decimal-leading-zero);position:absolute;left:0;top:1px; width:26px;height:26px; border-radius:50%;background:var(--amber-soft);color:var(--amber-ink); border:1px solid #f0dda6;display:grid;place-items:center; font-size:11.5px;font-weight:700;letter-spacing:.04em} /* Khối lưu ý: nhận biết bằng nét kẻ dọc và nhãn chữ hoa, không dùng biểu tượng */ .warn{border-left:4px solid var(--amber);background:var(--amber-soft);padding:16px 20px;border-radius:0 10px 10px 0;font-size:14.5px;color:var(--navy-deep)} .warn .eyelabel{color:var(--amber-ink)} /* ---------- Trang nội dung ---------- */ .page-head{background:linear-gradient(135deg,#eef3f6 0%,#dde8ee 45%,#fdf5e2 100%);padding:56px 0} .page-head h1{font-size:clamp(26px,3.4vw,40px);margin-bottom:8px} .page-head p{color:var(--muted);max-width:62ch;margin:0} .prose{max-width:760px;margin:0 auto;padding:56px 0 78px} .prose h2{font-size:26px;margin-top:44px;padding-top:4px} .prose h2:first-child{margin-top:0} .prose h3{font-size:19px;margin-top:30px;color:var(--navy-dark)} .prose p,.prose li{font-size:16.5px;color:#42505a} .prose ul{padding-left:22px} .prose li{margin-bottom:8px} .quote{border-left:4px solid var(--amber);background:var(--bg-soft);padding:22px 26px;border-radius:0 12px 12px 0;font-size:17px;font-style:italic;color:var(--navy-dark)} /* Tên thương hiệu & tên sản phẩm nhấn mạnh trong câu chuyện thương hiệu. 1.12em = lớn hơn chữ xung quanh khoảng một cỡ, tự co giãn theo khối chứa nó. */ .brand-name{font-weight:800;font-size:1.12em;letter-spacing:.01em;color:var(--red)} .product-name{font-weight:800;font-size:1.12em;letter-spacing:.02em; color:#c08c18;text-decoration:none} /* vàng hổ phách dạng đặc — dùng khi trình duyệt không hỗ trợ gradient chữ */ a.product-name:hover{text-decoration:underline;text-decoration-color:#d9a02a;text-underline-offset:3px} /* Hiệu ứng ánh kim: chỉ bật khi trình duyệt hỗ trợ cắt nền theo chữ, nếu không sẽ rơi về màu đặc ở trên (tránh chữ bị trong suốt = mất chữ). */ @supports ((background-clip:text) or (-webkit-background-clip:text)){ .product-name{ background:linear-gradient(100deg,#b07d14 0%,#d9a02a 26%,#f7dc83 48%,#c08c18 68%,#9a6c10 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } } .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .mini{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px} .mini h3{font-size:17.5px;margin-bottom:6px} .mini p{font-size:14.5px;color:var(--muted);margin:0} .faq details{border:1px solid var(--line);border-radius:12px;padding:0;margin-bottom:12px;overflow:hidden;background:#fff} .faq summary{padding:17px 20px;font-weight:600;cursor:pointer;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';font-size:21px;color:var(--navy);line-height:1} .faq details[open] summary::after{content:'−'} .faq .ans{padding:0 20px 18px;color:var(--muted);font-size:15px} /* Tiêu đề phụ và danh sách bên trong một câu trả lời FAQ */ .faq .ans .sub-h{display:block;margin:16px 0 5px;color:var(--ink);font-weight:600} .faq .ans .sub-h:first-child{margin-top:0} .faq .ans ul{margin:5px 0 0;padding-left:20px} .faq .ans li{margin-bottom:3px} .faq .ans p{margin:0 0 11px} .faq .ans p:last-child{margin-bottom:0} /* Chú thích nhỏ, tách riêng ở cuối một đoạn nội dung. font-size:.7em = nhỏ hơn 30% so với cỡ chữ của khối chứa nó. */ .note{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line); font-size:.7em;line-height:1.55;font-style:italic;color:var(--muted);opacity:.9} /* ---------- Giờ làm việc ---------- */ .hours{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden} .hours li{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;font-size:15px;border-bottom:1px solid var(--line);background:#fff} .hours li:last-child{border-bottom:0} .hours li.off{background:var(--bg-soft);color:var(--muted)} .hours b{font-weight:600} .hours span{color:var(--navy-dark);font-weight:600;white-space:nowrap} .hours li.off span{color:var(--muted);font-weight:500} /* ---------- Form ---------- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} /* Cột grid mặc định có min-width:auto = min-content. Một