/* STD&P – CSS giao diện (mobile-first, một HTML cho mọi bề rộng). Không thư viện ngoài.
Mục lục: 1 Phông · 2 Biến · 3 Nền tảng · 4 Nút, tiêu đề · 5 Đầu trang + menu · 6 Banner, dải cam kết · 7 Thanh tìm ·
8 Lưới nhóm / sản phẩm · 9 Trang chủ · 10 Trang trong, cột trái · 11 Nội dung soạn thảo · 12 Danh sách bài, bài viết ·
13 Sản phẩm · 14 Biểu mẫu · 15 Chân trang, nút nổi · 16 Tiện ích, in ấn, giảm chuyển động */
/* ---------- 1. Phông (tự lưu) ---------- */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(../fonts/roboto-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(../fonts/roboto-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ---------- 2. Biến thiết kế ---------- */
:root{
--red:#ec3237;--red-d:#d0222a;--red-dd:#b01a21; /* --red: tiêu đề lớn, điểm nhấn · --red-d: nút, chữ nhỏ (đủ tương phản trên nền trắng) */
--navy:#003586;--navy-d:#00276a;--navy-l:#e8eef8;
--text:#222;--muted:#5d6570;--line:#e2e6ea;--soft:#f4f6f8;--foot:#dde8ef;--ok:#2e9e2a;--err:#b3261e;
--font:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
--r:6px;--wrap:1200px;--gut:16px;--head:60px;
--shadow:0 2px 10px rgba(0,25,70,.08);--shadow-l:0 8px 28px rgba(0,25,70,.16);
}
@media (min-width:992px){:root{--head:76px;--gut:24px}}
/* ---------- 3. Nền tảng ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 12px)}
body{margin:0;font:400 16px/1.6 var(--font);color:var(--text);background:#fff;overflow-wrap:break-word}
img,video,svg{max-width:100%;height:auto;vertical-align:middle}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,address,fieldset{margin:0;padding:0}
address{font-style:normal}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #1a73e8;outline-offset:2px;border-radius:2px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-60px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r)}
.skip-link:focus{top:8px}
.ic{flex:none}
main{display:block;min-height:40vh}
/* ---------- 4. Nút, tiêu đề ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border:1px solid transparent;border-radius:var(--r);font-weight:500;font-size:15px;line-height:1.2;text-align:center;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn-primary{background:var(--red-d);color:#fff}
.btn-primary:hover{background:var(--red-dd)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-d)}
.btn-line{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-line:hover{background:var(--navy);color:#fff}
.sec-title{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s5);font-size:22px;font-weight:500;line-height:1.3;color:var(--red);text-transform:uppercase;text-align:center}
.sec-title::before,.sec-title::after{content:"";flex:1;height:1px;background:#d5d9de;min-width:12px}
.sec-title span{max-width:100%}
.page-title{margin-bottom:var(--s4);font-size:24px;font-weight:700;line-height:1.3;color:var(--navy);text-transform:uppercase}
.box-t{margin-bottom:var(--s4);padding-bottom:10px;font-size:20px;font-weight:500;line-height:1.3;color:var(--navy);text-transform:uppercase;border-bottom:1px solid var(--line);position:relative}
.box-t::after{content:"";position:absolute;left:0;bottom:-1px;width:120px;max-width:50%;height:2px;background:var(--red)}
.empty{padding:var(--s6) var(--s4);text-align:center;color:var(--muted);background:var(--soft);border-radius:var(--r)}
@media (min-width:768px){.sec-title{font-size:28px;gap:var(--s5)}.page-title{font-size:26px}}
/* ---------- 5. Đầu trang (dính khi cuộn) + menu ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 1px 0 var(--line);transition:box-shadow .2s}
.site-header.is-stuck{box-shadow:var(--shadow)}
.admin-bar .site-header{top:46px}
@media (min-width:783px){.admin-bar .site-header{top:32px}}
@media (max-width:600px){.admin-bar .site-header{top:0}}
.header-in{display:flex;align-items:center;gap:var(--s4);height:var(--head)}
.logo{flex:none;display:flex;align-items:center;height:100%;padding-block:6px}
.logo img{height:100%;width:auto;max-height:64px;object-fit:contain}
.logo-text{font-size:20px;font-weight:700;color:var(--navy)}
.header-act{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.cart-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:#333;border-radius:50%}
.cart-link:hover{color:var(--red-d);background:var(--soft)}
.cart-count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red-d);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.nav-btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 10px;border-radius:var(--r);color:var(--red-d);font-weight:500;font-size:15px;text-transform:uppercase}
.nav-btn:hover{background:var(--soft)}
/* Ô tìm kiếm ở đầu trang */
.hsearch{position:relative;display:flex}
.hsearch input{width:100%;height:42px;padding:0 44px 0 16px;border:1px solid #cfd4da;border-radius:21px;background:#fff;font-size:14px;-webkit-appearance:none;appearance:none}
.hsearch input::placeholder,.sbar input::placeholder{color:#767c85;opacity:1}
.hsearch input:focus{border-color:var(--navy);outline:0;box-shadow:0 0 0 3px rgba(0,53,134,.15)}
.hsearch button{position:absolute;right:2px;top:1px;width:40px;height:40px;border:0;border-radius:50%;background:none;color:#333}
.hsearch button:hover{color:var(--red-d)}
input[type="search"]::-webkit-search-cancel-button{display:none}
/* Điện thoại / máy tính bảng: menu là bảng trượt từ cạnh phải */
@media (max-width:991.98px){
.nav{position:fixed;top:0;right:0;bottom:0;z-index:120;width:min(86vw,360px);display:flex;flex-direction:column;background:#fff;box-shadow:var(--shadow-l);transform:translateX(105%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s;overflow-y:auto;overscroll-behavior:contain}
.nav:target,.nav-open .nav{transform:none;visibility:visible;transition:transform .25s ease}
.nav-backdrop{position:fixed;inset:0;z-index:110;background:rgba(0,20,50,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.nav:target + .nav-backdrop,.nav-open .nav-backdrop{opacity:1;visibility:visible;transition:opacity .25s}
.nav-open body{overflow:hidden}
.nav-head{display:flex;align-items:center;justify-content:space-between;height:var(--head);padding:0 8px 0 var(--s4);border-bottom:1px solid var(--line);flex:none}
.nav-head-t{font-weight:700;color:var(--navy);text-transform:uppercase}
.nav-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%}
.hsearch{margin:var(--s4);flex:none}
.nav-list{padding-bottom:var(--s5)}
.nav-list li{position:relative;border-bottom:1px solid var(--line)}
.nav-a{display:block;padding:13px 56px 13px var(--s4);font-weight:500;text-transform:uppercase;font-size:15px}
.sub .nav-a{text-transform:none;font-weight:400;padding-left:var(--s6);font-size:15px}
.sub .sub .nav-a{padding-left:var(--s7)}
.is-on > .nav-a{color:var(--red-d)}
.nav-tg{position:absolute;top:2px;right:4px;width:44px;height:44px;border:0;background:none;color:#555;border-radius:50%}
.nav-tg .ic{transition:transform .2s}
.nav-tg[aria-expanded="true"] .ic{transform:rotate(180deg)}
.sub{background:var(--soft)}
.sub li:last-child{border-bottom:0}
.sub li:first-child{border-top:1px solid var(--line)}
.js .nav-tg[aria-expanded="false"] + .sub{display:none}
}
/* Máy tính: thanh ngang, mục con thả xuống khi rê chuột / Tab */
@media (min-width:992px){
.nav{display:flex;align-items:center;flex:1;min-width:0;height:100%;gap:var(--s4)}
.nav-head,.nav-backdrop,.nav-btn,.nav-tg{display:none}
.nav-list{display:flex;align-items:stretch;height:100%;margin-left:var(--s4);order:1}
.hsearch{order:2;margin-left:auto;width:200px;flex:none}
.nav-list > li{position:relative;display:flex;align-items:center}
.nav-list > li > .nav-a{display:flex;align-items:center;height:100%;padding:0 11px;font-size:14.5px;font-weight:500;text-transform:uppercase;color:#333;white-space:nowrap;position:relative}
.nav-list > li > .nav-a::after{content:"";position:absolute;left:11px;right:11px;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transition:transform .2s}
.nav-list > li:hover > .nav-a,.nav-list > li.is-on > .nav-a{color:var(--red-d)}
.nav-list > li:hover > .nav-a::after,.nav-list > li.is-on > .nav-a::after,.nav-list > li:focus-within > .nav-a::after{transform:none}
.sub{position:absolute;top:100%;left:0;z-index:5;min-width:240px;padding:6px 0;background:#fff;border-top:3px solid var(--red);border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow-l);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility 0s .15s}
li:hover > .sub,li:focus-within > .sub{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .15s}
.sub li{position:relative}
.sub .nav-a{display:block;padding:9px 18px;font-size:14.5px;color:#333}
.sub li:hover > .nav-a,.sub .is-on > .nav-a,.sub .nav-a:focus-visible{color:var(--red-d);background:var(--soft)}
.sub .sub{top:-9px;left:100%;border-top:3px solid var(--red)}
.sub .has-sub > .nav-a{padding-right:30px}
.sub .has-sub > .nav-a::after{content:"›";position:absolute;right:14px;top:50%;transform:translateY(-52%);font-size:18px;color:#888}
}
@media (min-width:1200px){
.nav-list > li > .nav-a{padding:0 14px;font-size:15px}
.nav-list > li > .nav-a::after{left:14px;right:14px}
.hsearch{width:230px}
}
/* ---------- 6. Banner, dải cam kết ---------- */
.banner{padding-block:var(--s3)}
.banner-box{position:relative;border-radius:var(--r);overflow:hidden;background:#e9edf1}
.banner-track{position:relative;width:100%;aspect-ratio:1600/570} /* tỷ lệ thật đặt inline theo ảnh banner đầu tiên */
.banner-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.banner-slide.is-on{opacity:1;visibility:visible;transition:opacity .6s ease;z-index:1}
.banner-slide a{display:block;width:100%;height:100%}
.banner-media{display:block;width:100%;height:100%;object-fit:cover}
.banner-nav{position:absolute;top:50%;z-index:3;width:40px;height:56px;margin-top:-28px;border:0;background:rgba(0,0,0,.28);color:#fff;display:flex;align-items:center;justify-content:center;transition:background-color .15s}
.banner-nav:hover{background:rgba(0,0,0,.55)}
.banner-prev{left:0;border-radius:0 var(--r) var(--r) 0}
.banner-next{right:0;border-radius:var(--r) 0 0 var(--r)}
.banner-dots{position:absolute;left:0;right:0;bottom:6px;z-index:3;display:flex;justify-content:center;gap:2px}
.banner-dots button{width:24px;height:24px;padding:0;border:0;background:none;position:relative}
.banner-dots button::before{content:"";position:absolute;left:7px;top:7px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.banner-dots .is-on::before{background:var(--red)}
@media (max-width:575.98px){.banner-nav{width:28px;height:40px;margin-top:-20px}.banner-nav .ic{width:20px;height:20px}.banner-dots{bottom:0}.banner-dots button{width:18px}.banner-dots button::before{left:5px;top:8px;width:8px;height:8px}}
@media (min-width:768px){.banner{padding-block:var(--s4)}}
.strip{background:var(--navy);color:#fff}
.strip-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3);padding-block:var(--s4)}
.strip-list a,.strip-list div{display:flex;align-items:center;gap:var(--s3)}
.strip-ic{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.strip-ic img{width:30px;height:30px;object-fit:contain}
.strip-tx{display:flex;flex-direction:column;font-size:12.5px;font-weight:500;line-height:1.45;text-transform:uppercase}
.strip-tx b{font-weight:700}
@media (min-width:768px){.strip-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}.strip-tx{font-size:13.5px}}
@media (min-width:1200px){.strip-list{padding-block:14px}.strip-tx{font-size:14.5px}}
/* ---------- 7. Thanh tìm sản phẩm ---------- */
.sbar{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.sbar-dims,.sbar-kw{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s3);border:1px solid var(--line);border-radius:var(--r);background:#fff}
.sbar-dims{flex-wrap:wrap;gap:var(--s2) var(--s4)}
.sbar-l{display:flex;align-items:center;gap:6px;flex:1 1 100%;font-size:14.5px;color:#333}
.sbar-l .ic{color:#777}
.sbar-row{display:flex;align-items:stretch;gap:6px;flex:1;min-width:0;width:100%}
.sbar-f{display:flex;flex:1;min-width:0}
.sbar input{width:100%;min-width:0;height:40px;padding:0 10px;border:1px solid #c5cbd2;border-radius:var(--r);background:#fff;font-size:15px;-webkit-appearance:none;appearance:none;-moz-appearance:textfield}
.sbar input::-webkit-outer-spin-button,.sbar input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sbar-f input{border-radius:var(--r) 0 0 var(--r);border-right:0}
.sbar input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,53,134,.15);position:relative;z-index:1}
.sbar-u{display:flex;align-items:center;padding:0 8px;border:1px solid #c5cbd2;border-radius:0 var(--r) var(--r) 0;background:#eef0f3;color:#555;font-size:13.5px}
.sbar-btn{flex:none;width:44px;height:40px;border:0;border-radius:var(--r);background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.sbar-btn:hover{background:var(--navy-d)}
.sbar-kw input{flex:1}
@media (min-width:768px){
.sbar-dims{flex-wrap:nowrap}
.sbar-l{flex:0 1 auto;white-space:nowrap}
.sbar-row{width:auto;max-width:440px;margin-left:auto}
}
@media (min-width:992px){.sbar{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s5)}}
.help-line{display:flex;gap:var(--s2);align-items:flex-start;margin-bottom:var(--s5);padding:12px var(--s4);border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:15px;color:#333}
.help-line .ic{color:var(--navy);margin-top:3px}
.help-line a{color:var(--navy);font-weight:500;white-space:nowrap}
.help-line a:hover{text-decoration:underline}
/* ---------- 8. Lưới nhóm sản phẩm, thẻ sản phẩm ---------- */
.cats{--gap:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5) var(--gap);margin-bottom:var(--s5)}
.cat{width:calc((100% - var(--gap)) / 2)}
.cat a{display:flex;flex-direction:column;align-items:center;height:100%;text-align:center}
.cat-img,.pcard-img{display:block;width:100%;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--soft)}
.cat-img img,.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.cat a:hover img,.pcard a:hover img{transform:scale(1.04)}
.cat-name{margin-top:var(--s3);font-size:16px;font-weight:500;line-height:1.35;color:#333}
.cat a:hover .cat-name,.pcard a:hover .pcard-name{color:var(--red-d)}
.cat-count{display:inline-flex;align-items:center;gap:4px;margin-top:2px;font-size:14px;color:var(--muted)}
@media (min-width:576px){.cats{--gap:20px}.cat{width:calc((100% - var(--gap)*2) / 3)}}
@media (min-width:992px){.cats{--gap:24px;gap:var(--s6) var(--gap)}.cat{width:calc((100% - var(--gap)*(var(--cols) - 1)) / var(--cols))}.cat-name{font-size:17px}}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4);margin-bottom:var(--s5)}
.pcard a{display:flex;flex-direction:column;height:100%}
.pcard-img{border:1px solid var(--line);background:#fff}
.pcard-name{margin-top:10px;font-size:15px;font-weight:500;line-height:1.4;color:#222}
.price{display:block;margin-top:2px;font-size:14.5px;font-weight:500;color:var(--red-d)}
.price del{color:var(--muted);font-weight:400;margin-right:6px}
.price ins{text-decoration:none}
@media (min-width:576px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) var(--s5)}}
@media (min-width:1100px){.pgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-block:var(--s5)}
.pager a{min-width:40px;height:40px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r);font-weight:500;color:#333}
.pager a:hover{border-color:var(--navy);color:var(--navy)}
.pager .is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.search-sum{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s4);font-size:15px;color:#333}
.chip{display:inline-flex;gap:4px;padding:4px 12px;border-radius:16px;background:var(--navy-l);color:var(--navy)}
.chip-x{margin-left:4px;color:var(--red-d);text-decoration:underline;text-underline-offset:2px}
/* ---------- 9. Trang chủ ---------- */
.sec{padding-block:var(--s6)}
.sec-soft{background:var(--soft)}
.sec-intro{max-width:1000px;margin:-8px auto var(--s5);text-align:center;font-size:15px;color:#444}
.sec-more{margin-top:var(--s5);text-align:center}
@media (min-width:768px){.sec{padding-block:var(--s7)}}
.carousel{position:relative}
.car-track{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px;margin:-4px}
.car-track::-webkit-scrollbar{display:none}
.doc{flex:0 0 86%;scroll-snap-align:start;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 1px 4px rgba(0,25,70,.08)}
.doc a{display:flex;flex-direction:column;height:100%}
.doc-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--soft)}
.doc-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.doc a:hover img{transform:scale(1.04)}
.doc-body{padding:var(--s3) var(--s4) var(--s4)}
.doc-t{font-size:16px;font-weight:500;line-height:1.4}
.doc a:hover .doc-t{color:var(--red-d)}
.doc-ex{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:#555}
.car-nav{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--red-d);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:background-color .15s,color .15s,opacity .15s}
.car-nav:hover:not(:disabled){background:var(--red-d);color:#fff;border-color:var(--red-d)}
.car-nav:disabled{opacity:.45;cursor:default}
.car-prev{left:-6px}
.car-next{right:-6px}
@media (min-width:576px){.doc{flex-basis:calc((100% - var(--s4)) / 2)}}
@media (min-width:992px){.car-track{gap:var(--s5)}.doc{flex-basis:calc((100% - var(--s5)*2) / 3)}}
@media (min-width:1320px){.car-prev{left:-58px}.car-next{right:-58px}}
.why{background:var(--navy);color:#fff;padding-block:var(--s6)}
.why-t{font-size:20px;font-weight:500;line-height:1.35;text-align:center;text-transform:uppercase}
.why-sub{margin-top:6px;text-align:center;font-size:16px;color:#dfe8f7}
.why-list{display:grid;gap:var(--s5);margin-top:var(--s5)}
.why-list li{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s2) var(--s3);position:relative}
.why-list li::before,.why-list li::after{content:"";position:absolute;left:0;width:5px;height:5px;border-left:1px solid rgba(255,255,255,.7)}
.why-list li::before{top:0;border-top:1px solid rgba(255,255,255,.7)}
.why-list li::after{bottom:0;border-bottom:1px solid rgba(255,255,255,.7)}
.why-ic{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.why-ic img{width:44px;height:44px;object-fit:contain}
.why-list h3{font-size:14.5px;font-weight:700;line-height:1.4;text-transform:uppercase}
.why-list p{margin-top:6px;font-size:13.5px;line-height:1.55;color:#e3eaf6}
@media (min-width:768px){.why{padding-block:var(--s7)}.why-t{font-size:24px}.why-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5)}}
@media (min-width:992px){.why-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ---------- 10. Trang trong, cột trái ---------- */
.crumbs{background:#f1f2f4;font-size:14.5px;color:#444}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;min-height:42px;padding-block:8px}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li + li::before{content:"›";margin:0 10px;color:#777;font-size:17px;line-height:1}
.crumbs a:hover{color:var(--red-d);text-decoration:underline}
.crumbs [aria-current]{color:#555}
.pg{padding-block:var(--s5) var(--s6)}
.page-cols{display:grid;gap:var(--s6)}
.page-main{min-width:0}
@media (min-width:992px){
.pg{padding-block:var(--s6) var(--s7)}
.page-cols{grid-template-columns:290px minmax(0,1fr);gap:var(--s6);align-items:start}
.page-cols > .side{order:-1}
}
.side{display:grid;gap:var(--s5);min-width:0}
.side-info{padding:var(--s4) 18px;border-radius:var(--r);background:var(--navy);color:#fff}
.side-info-t{font-size:17px;font-weight:700;line-height:1.35}
.side-info-b{margin-top:10px;font-size:14.5px;line-height:1.55}
.side-info-b p{display:flex;gap:8px;align-items:flex-start}
.side-info-b p + p{margin-top:8px}
.side-info-b .ic{margin-top:2px;opacity:.9}
.side-info-b a{text-decoration:underline;text-underline-offset:2px}
.side-t{margin-bottom:10px;font-size:16px;font-weight:500;line-height:1.35;color:var(--navy)}
.side-cert img{display:block;width:100%;border:1px solid var(--line);border-radius:var(--r)}
.side-cats{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.side-t-red{margin:0;padding:11px var(--s4);background:var(--red-d);color:#fff;text-transform:uppercase;font-size:15.5px}
.side-cats a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px var(--s4);border-top:1px solid var(--line);font-size:15px;color:#333}
.side-cats li:first-child a{border-top:0}
.side-cats a .ic{color:#9aa1aa}
.side-cats a:hover,.side-cats [aria-current]{color:var(--red-d);background:var(--soft)}
.side-catalogue{display:flex;align-items:center;gap:var(--s3);padding:14px var(--s4);border:1px solid var(--navy);border-radius:var(--r);background:var(--navy-l);color:var(--navy);transition:background-color .15s,color .15s}
.side-catalogue span{display:flex;flex-direction:column;flex:1;line-height:1.35}
.side-catalogue small{font-size:13px;color:#3d4b63}
.side-catalogue:hover{background:var(--navy);color:#fff}
.side-catalogue:hover small{color:#dbe5f6}
.intro{margin-bottom:var(--s5);font-size:15.5px;color:#333}
.intro.is-clamp{max-height:7.6em;overflow:hidden;position:relative}
.intro.is-clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3em;background:linear-gradient(rgba(255,255,255,0),#fff)}
.intro-tg{display:flex;align-items:center;gap:4px;margin:-12px auto var(--s5);padding:6px 14px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--navy);font-size:14px;font-weight:500}
.intro-tg:hover{border-color:var(--navy)}
.intro-tg[aria-expanded="true"] .ic{transform:rotate(180deg)}
.notfound{text-align:center}
.notfound-code{font-size:72px;font-weight:700;line-height:1;color:var(--navy-l);-webkit-text-stroke:1px #b9c7de}
.notfound .page-title{margin-top:var(--s2)}
.notfound-tx{max-width:640px;margin:0 auto var(--s4);color:#444}
.notfound-act{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-bottom:var(--s6)}
.notfound .sbar,.notfound .help-line{text-align:left}
.brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.brands a{display:flex;flex-direction:column;align-items:center;height:100%;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);text-align:center}
.brands a:hover{border-color:var(--navy);box-shadow:var(--shadow)}
.brand-img{display:flex;align-items:center;justify-content:center;height:80px}
.brand-img img{max-height:80px;width:auto;object-fit:contain}
.brand-name{margin-top:10px;font-size:15px;font-weight:500;line-height:1.4}
@media (min-width:576px){.brands{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:992px){.brands{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* ---------- 11. Nội dung do quản trị soạn ---------- */
.prose{font-size:16px;line-height:1.7;color:#222}
.prose::after{content:"";display:table;clear:both}
.prose > * + *{margin-top:.85em}
.prose p:empty{display:none}
.prose h1{font-size:24px;line-height:1.3;color:var(--navy);text-transform:uppercase}
.prose h2{font-size:20px;line-height:1.35;margin-top:1.3em}
.prose h3{font-size:18px;line-height:1.4;margin-top:1.2em}
.prose h4{font-size:16px;margin-top:1.1em}
.prose ul,.prose ol{padding-left:1.4em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.3em}
.prose a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--red-d)}
.prose img{height:auto!important;max-width:100%;border-radius:2px}
.prose iframe,.prose video{max-width:100%}
.prose table{border-collapse:collapse;max-width:100%}
.prose td,.prose th{padding:8px 10px;border:1px solid var(--line);vertical-align:top}
.prose blockquote{margin:1em 0;padding:8px 16px;border-left:3px solid var(--red);background:var(--soft)}
.prose .table-x{overflow-x:auto}
@media (max-width:767.98px){.prose table{display:block;overflow-x:auto;width:100%!important;height:auto!important}.prose [style*="width"]{max-width:100%}}
/* ---------- 12. Danh sách bài, bài viết ---------- */
.news-item{display:grid;gap:var(--s3);padding-block:var(--s5);border-bottom:1px solid var(--line)}
.news-item:first-child{padding-top:0}
.news-img{display:block;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--soft)}
.news-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.news-item:hover .news-img img{transform:scale(1.04)}
.news-t{font-size:19px;font-weight:500;line-height:1.35}
.news-t a:hover{color:var(--red-d)}
.news-date{margin-top:4px;font-size:14px;color:var(--muted)}
.news-ex{margin-top:8px;font-size:15.5px;color:#333}
@media (min-width:576px){.news-item{grid-template-columns:260px minmax(0,1fr);gap:var(--s5)}}
.article-t{font-size:24px;font-weight:700;line-height:1.3;color:var(--navy)}
.article-lead{margin-top:var(--s4);font-size:17px;font-weight:500;line-height:1.6;color:#333}
.article .prose{margin-top:var(--s4)}
.article-src{margin-top:var(--s4);text-align:right;font-style:italic;color:#555}
.video{position:relative;aspect-ratio:16/9;margin-top:var(--s4);background:#000;border-radius:var(--r);overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.others{margin-top:var(--s6)}
.others li{display:flex;gap:6px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line)}
.others li .ic{color:var(--red-d);align-self:center}
.others a:hover{color:var(--red-d)}
.others time{color:var(--muted);font-size:14px;white-space:nowrap}
@media (min-width:768px){.article-t{font-size:28px}}
/* ---------- 13. Chi tiết sản phẩm ---------- */
.product-cols{display:grid;gap:var(--s6)}
.product-main{min-width:0}
.product-top{display:grid;gap:var(--s5)}
.gallery{min-width:0}
.gallery-main{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.gallery-main img{width:100%;height:100%;object-fit:contain}
.gallery-full{display:block;width:100%;height:100%;cursor:zoom-in}
.js .gallery-full:not(.is-on){display:none}
html:not(.js) .gallery-main{aspect-ratio:auto}
.gallery-thumbs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.gallery-thumbs a{display:block;width:72px;height:72px;border:2px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.gallery-thumbs img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs a:hover{border-color:#9fb2d3}
.gallery-thumbs .is-on{border-color:var(--navy)}
.product-t{font-size:22px;font-weight:700;line-height:1.3;color:var(--navy)}
.product-cat{margin-top:var(--s2)}
.badge{display:inline-block;padding:4px 12px;border-radius:4px;background:var(--navy);color:#fff;font-size:14px;font-weight:500;line-height:1.4}
.badge:hover{background:var(--navy-d)}
.product-sku{margin-top:var(--s2);font-size:15px;color:#444}
.specs{margin-top:var(--s4)}
.specs-t{margin-bottom:6px;font-size:15px;font-weight:400;color:var(--muted)}
.specs-box{padding:12px var(--s4);border:1px solid #e3e9f0;border-radius:var(--r);background:#f4f7fa;font-size:15px}
.specs-box dl > div{display:flex;flex-wrap:wrap;gap:0 6px;padding:3px 0}
.specs-box dt{color:#333}
.specs-box dd{color:var(--navy);font-weight:500}
.specs-dims + .specs-info{margin-top:8px;padding-top:8px;border-top:1px solid #dde4ec}
.specs-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4)}
.product-short{margin-top:var(--s4);font-size:15.5px}
.product-short ul{display:grid;gap:6px}
.product-short li{position:relative;padding-left:26px}
.product-short li::before{content:"";position:absolute;left:4px;top:.35em;width:12px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.product-short p + p{margin-top:.5em}
.product-price{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font-size:16px}
.product-price .price{display:inline;font-size:20px;font-weight:700}
.product-price .price-ask{font-size:17px}
.product-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
.buy{display:flex;flex-wrap:wrap;gap:var(--s3)}
.qty{display:inline-flex;border:1px solid #c5cbd2;border-radius:var(--r);overflow:hidden;height:44px}
.qty-b{width:40px;border:0;background:#fff;font-size:20px;line-height:1;color:#333}
.qty-b:hover{background:var(--soft)}
.qty input{width:54px;border:0;border-inline:1px solid #c5cbd2;text-align:center;font-weight:500;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.btn-quote{flex:1 1 220px;max-width:340px;font-size:16px;min-height:48px}
.buy + .btn-quote{flex:1 1 100%}
.product-contact{margin-top:var(--s4);font-size:15.5px}
.product-contact span{white-space:nowrap}
.product-contact span + span::before{content:"· "}
.product-contact a{color:var(--red-d);font-weight:700}
.product-contact a:hover,.product-links a:hover{text-decoration:underline}
.product-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s3);font-size:15px}
.product-links a{display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-weight:500}
.tabs{margin-top:var(--s6)}
.tabs-nav{display:flex;flex-wrap:wrap;gap:4px;border-bottom:3px solid var(--red)}
.tab{padding:11px 16px;border-radius:var(--r) var(--r) 0 0;background:#eef0f3;color:#333;font-size:15px;font-weight:500;text-transform:uppercase;line-height:1.3}
.tab:hover{background:#e2e6ea}
.tab.is-on{background:var(--red-d);color:#fff}
html:not(.js) .tab{background:var(--red-d);color:#fff}
.tab-panel{padding-top:var(--s4)}
.js .tab-panel:not(.is-on){display:none}
.js .tab-panel-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tab-panel-t{margin-bottom:var(--s3);font-size:18px;color:var(--navy)}
.product-side{display:grid;gap:var(--s4);align-content:start;min-width:0}
.box{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.box-head{padding:11px var(--s4);background:var(--red-d);color:#fff;font-size:15.5px;font-weight:500;line-height:1.35;text-transform:uppercase}
.box-body{padding:var(--s4)}
.whybuy ul{display:grid;gap:10px}
.whybuy li{position:relative;padding-left:28px;font-size:15px;line-height:1.45}
.whybuy li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--ok)}
.whybuy li::after{content:"";position:absolute;left:5px;top:6px;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.note-navy{display:flex;gap:10px;padding:14px var(--s4);border-radius:var(--r);background:var(--navy);color:#fff;font-size:14.5px;font-weight:500;line-height:1.55}
.note-navy .ic{margin-top:2px;color:#ffd24a}
.pgrid-side{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3);margin:0}
.pgrid-side .pcard-name{font-size:14px;margin-top:8px}
.pgrid-side .price{font-size:13.5px}
.related{margin-top:var(--s7)}
@media (min-width:576px){.pgrid-side{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){
.product-top{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s6)}
.product-t{font-size:24px}
}
@media (min-width:1100px){
.product-cols{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
.pgrid-side{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Biểu mẫu báo giá: không có JS → khối cuối trang; có JS → hộp thoại mở bằng nút "Yêu cầu báo giá nhanh" */
.quote{margin-top:var(--s7);scroll-margin-top:calc(var(--head) + 16px)}
.quote-in{max-width:720px;margin-inline:auto;padding:var(--s5) var(--s4);border:1px solid var(--line);border-radius:var(--r);background:#fff}
.quote-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.quote-head .box-t{flex:1}
.quote-x{flex:none;width:40px;height:40px;margin:-6px -6px 0 0;border:0;border-radius:50%;background:none;color:#444;display:inline-flex;align-items:center;justify-content:center}
.quote-x:hover{background:var(--soft)}
.quote-for{margin-bottom:var(--s4);font-size:15px;color:#444}
.js .quote{display:none}
.js .quote.is-open{display:flex;position:fixed;inset:0;z-index:300;margin:0;padding:var(--s4);align-items:flex-start;justify-content:center;background:rgba(0,20,50,.6);overflow-y:auto;overscroll-behavior:contain}
.js .quote.is-open .quote-in{width:100%;margin-block:auto;box-shadow:var(--shadow-l);border:0}
.modal-open body{overflow:hidden}
/* Thanh nút cố định ở trang sản phẩm (điện thoại) */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:var(--s2);padding:8px var(--s3) calc(8px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -2px 12px rgba(0,25,70,.14);transition:transform .2s}
.sticky-cta .btn{flex:1;padding-inline:10px;font-size:14.5px}
.sticky-cta.is-off{transform:translateY(110%)}
.stdp-product .site-footer{padding-bottom:64px}
@media (min-width:768px){.sticky-cta{display:none}.stdp-product .site-footer{padding-bottom:0}}
/* ---------- 14. Biểu mẫu liên hệ / báo giá (HTML do lõi dựng: form.stdp-form) ---------- */
.contact-cols{display:grid;gap:var(--s6)}
.contact-main{min-width:0}
@media (min-width:992px){.contact-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start}}
#form{scroll-margin-top:calc(var(--head) + 16px)}
.stdp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.stdp-ftable{width:100%;border-collapse:collapse}
.stdp-ftable th,.stdp-ftable td{display:block;padding:0;text-align:left;font-weight:400}
.stdp-ftable th{padding-top:var(--s3);font-size:15px;color:#333}
.stdp-ftable th:empty{display:none}
.stdp-ftable td{padding-top:4px}
.stdp-form .req{color:var(--red-d)}
.stdp-form input[type="text"],.stdp-form input[type="tel"],.stdp-form input[type="email"],.stdp-form input[type="number"],.stdp-form select,.stdp-form textarea{width:100%;min-height:44px;padding:9px 12px;border:1px solid #c5cbd2;border-radius:var(--r);background:#fff;font-size:16px;line-height:1.4}
.stdp-form textarea{min-height:130px;max-height:260px;resize:vertical}
.stdp-form input:focus,.stdp-form select:focus,.stdp-form textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,53,134,.15)}
.stdp-form [aria-invalid="true"]{border-color:var(--err)}
.stdp-form input[readonly]{background:var(--soft);color:#444}
.stdp-err{display:block;font-size:13.5px;color:var(--err)}
.stdp-err:empty{display:none}
.stdp-cap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.stdp-form .stdp-cap input{width:110px;flex:none}
.stdp-cap-img{flex:none;height:36px;width:auto;border-radius:4px;background:#333}
.stdp-cap-new{flex:none;width:40px;height:40px;border:1px solid #c5cbd2;border-radius:var(--r);background:#fff;font-size:18px;line-height:1;color:#333}
.stdp-cap-new:hover{border-color:var(--navy);color:var(--navy)}
.stdp-cap .stdp-err{flex:1 1 100%}
.stdp-form .bsubmit,.stdp-form [type="submit"]{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:var(--s4);padding:10px 32px;border:0;border-radius:var(--r);background:var(--red-d);color:#fff;font-size:15px;font-weight:500;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;appearance:none}
.stdp-form .bsubmit:hover,.stdp-form [type="submit"]:hover{background:var(--red-dd)}
.stdp-form [type="submit"]:disabled{opacity:.6;cursor:wait}
.stdp-note{margin-top:var(--s2);font-size:13.5px;color:var(--muted)}
.stdp-msg:empty{display:none}
.stdp-msg{margin-top:var(--s4);padding:12px var(--s4);border-radius:var(--r);font-size:15px}
.stdp-msg.ok{background:#eaf6ea;border:1px solid #b7dcb5;color:#1d5c1a}
.stdp-msg.err{background:#fdecea;border:1px solid #f1b9b4;color:#8c1d18}
.stdp-msg table{margin-top:var(--s3);font-size:14px;background:#fff}
.stdp-msg td{padding:6px 8px!important}
@media (min-width:576px){
.stdp-ftable th,.stdp-ftable td{display:table-cell;padding:6px 0;vertical-align:top}
.stdp-ftable th{width:150px;padding:16px var(--s4) 0 0}
.stdp-ftable th:empty{display:table-cell}
}
/* ---------- 15. Chân trang, nút nổi ---------- */
.site-footer{background:var(--foot);color:#333;font-size:15px}
.footer-cols{display:grid;gap:var(--s5);padding-block:var(--s6)}
.footer-t{margin-bottom:var(--s3);font-size:15.5px;font-weight:700;line-height:1.35;color:#222;text-transform:uppercase}
.footer-t a:hover,.footer-list a:hover,.footer-about address a:hover{color:var(--red-d)}
.footer-about address p{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.footer-about address .ic{margin-top:3px;color:#222}
.footer-follow{margin:var(--s4) 0 var(--s2);font-size:16px;font-weight:500;color:#222}
.footer-social{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.footer-soc{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r);background:#4a4f57;color:#fff;transition:background-color .15s}
.footer-soc:hover{background:var(--navy)}
.footer-bct{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r);background:#fff;border:1px solid #b9c7d3;color:#0a5aa6;font-size:11px;font-weight:700;line-height:1.2;text-transform:uppercase}
.footer-list li{display:flex;gap:6px;align-items:flex-start;padding:4px 0;color:#444}
.footer-list .ic{margin-top:5px;color:#555}
.footer-copy{background:#111;color:#c9cdd2;font-size:14px;text-align:center;padding-block:14px}
@media (min-width:576px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-about{grid-column:1/-1}}
@media (min-width:992px){.footer-cols{grid-template-columns:minmax(0,1.6fr);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s6)}.footer-about{grid-column:auto}}
.floats{position:fixed;left:10px;bottom:10px;z-index:80;display:flex;flex-direction:row;align-items:center;gap:8px}
.fl{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:21px;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .15s}
.fl:hover{transform:scale(1.06)}
.fl-ms{background:#0a7cff}
.fl-zalo{background:#0068ff;font-size:11.5px;font-weight:700;letter-spacing:-.2px}
.fl-tel{background:var(--red-d)}
.fl-tel span{display:none;font-weight:700;font-size:15px;white-space:nowrap}
/* Điện thoại: một hàng 3 nút nhỏ ở góc trái dưới (không che nội dung giữa trang); chân trang chừa chỗ để không bị che */
/* Trang sản phẩm trên điện thoại đã có thanh "Gọi / Yêu cầu báo giá" cố định ở đáy → ẩn cụm nút nổi để không che nội dung */
.stdp-product .floats{display:none}
@media (max-width:767.98px){.fl-2{display:none}.footer-copy{padding-bottom:64px}.stdp-product .footer-copy{padding-bottom:14px}}
@media (min-width:768px){
.floats{left:14px;bottom:16px;flex-direction:column;align-items:flex-start}
.stdp-product .floats{display:flex;bottom:16px}
.fl{width:46px;height:46px;border-radius:23px}
}
/* Số điện thoại hiện kèm nút khi lề trang đủ rộng (không đè lên nội dung); màn hình hẹp hơn: hiện khi rê chuột / Tab tới */
@media (min-width:768px){
.fl-tel:hover,.fl-tel:focus-visible{width:auto;padding:0 18px 0 12px;gap:8px}
.fl-tel:hover span,.fl-tel:focus-visible span{display:inline}
}
@media (min-width:1600px){
.fl-tel{width:auto;padding:0 18px 0 12px;gap:8px}
.fl-tel span{display:inline}
}
/* ---------- 16. Giảm chuyển động, in ấn ---------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media print{
.site-header,.site-footer,.floats,.sticky-cta,.banner,.strip,.side,.sbar,.crumbs{display:none!important}
.quote{display:none!important}
}