/* Theme Name: Mỹ Phẩm 2 Theme URI: https://mypham2.trongtamtay.cloud Author: Trong Tam Tay Description: Theme mỹ phẩm tông tím: banner trên cùng, banner trượt + 2 banner phụ, 8 thẻ chương trình, thương hiệu nổi bật, khối danh mục có tab, trang chi tiết 2 cột. Version: 3.0.0 Requires at least: 6.4 Tested up to: 7.1 Requires PHP: 8.1 License: GNU General Public License v2 or later Text Domain: wp_nk Tags: e-commerce, blog, custom-menu, featured-images, translation-ready */ @font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-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:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-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} :root{--red:#d70018;--red-d:#b80014;--red-l:#fdecee;--blue:#2a4e9d;--blue-l:#e4f0ff;--blue-b:#a3c4ff;--purple:#6a3fc7;--purple-l:#eee6ff;--green:#1a8b3d;--green-l:#e6f7ec;--text:#1d1d20;--muted:#6b7280;--line:#e5e7eb;--soft:#f3f4f6;--bg:#f7f7f9;--white:#fff;--r:12px;--r-s:8px;--w:1200px;--font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--sh:0 1px 3px rgba(0,0,0,.06),0 8px 24px -12px rgba(0,0,0,.15);--sh-s:0 1px 2px rgba(0,0,0,.06)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font:14px/1.5 var(--font);color:var(--text);background:var(--white);overflow-x:clip} img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{line-height:1.3;margin:0 0 .5em;font-weight:700} h1{font-size:22px}h2{font-size:18px}h3{font-size:16px}h4{font-size:14px} p,ul,ol,table,figure,blockquote{margin:0 0 1em} ul,ol{padding-left:1.3em} table{width:100%;border-collapse:collapse}th,td{padding:.6em .75em;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{font-weight:600;background:var(--soft)} blockquote{border-left:4px solid var(--brand);padding:.3em 1em;color:var(--muted);background:var(--soft)} code,pre{font-family:ui-monospace,Menlo,monospace;font-size:.92em}pre{overflow:auto;padding:1em;background:var(--soft);border-radius:var(--r-s)} hr{border:0;border-top:1px solid var(--line);margin:1.5em 0} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .skip-link{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:.5em 1em;z-index:999}.skip-link:focus{left:0} .wrap{max-width:var(--w);margin:0 auto;padding:0 12px} .hide{display:none!important} .muted{color:var(--muted)} /* ---------- Forms & buttons ---------- */ input,select,textarea,button{font:inherit;color:inherit} input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea{width:100%;padding:.55em .8em;border:1px solid #d1d5db;border-radius:var(--r-s);background:#fff} input:focus,select:focus,textarea:focus{outline:2px solid transparent;border-color:var(--brand);box-shadow:0 0 0 3px rgba(42,131,233,.15)} textarea{min-height:110px} button{border:0;background:none;padding:0;cursor:pointer;color:inherit} .btn,input[type=submit],input[type=button],.button,.wp-block-button__link,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.comment-form input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.6em 1.2em;border:0;border-radius:var(--r-s);background:var(--brand);color:#fff!important;font-weight:600;line-height:1.2;cursor:pointer;text-align:center;transition:background .15s,transform .1s;text-decoration:none} .btn:hover,input[type=submit]:hover,.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--brand-d)} .btn:active,.button:active{transform:translateY(1px)} .btn-outline{background:#fff;color:var(--brand)!important;border:1px solid var(--brand)}.btn-outline:hover{background:var(--brand-l)} .btn-blue{background:var(--blue)}.btn-blue:hover{background:#1e3c7d} .btn-lg{padding:.85em 1.4em;font-size:15px} .woocommerce a.button.disabled,.woocommerce button.button:disabled,.woocommerce button.button.disabled{opacity:.5;cursor:not-allowed;background:var(--brand)} /* ---------- Header ---------- */ .site-header{background:linear-gradient(90deg,#d70018 0%,#dc1a2c 55%,#ec4b45 100%);color:#fff;position:relative;z-index:60} .topbar{font-size:12px;height:30px;display:flex;align-items:center;gap:22px;white-space:nowrap;overflow:hidden} .topbar .usp{display:flex;gap:22px;flex:1} .topbar span{display:inline-flex;align-items:center;gap:6px}.topbar b{font-weight:600} .topbar .links{display:flex;gap:18px} .topbar svg{width:14px;height:14px} .mainbar{display:flex;align-items:center;gap:10px;height:64px} .brand{display:flex;align-items:center;font-weight:800;font-size:24px;letter-spacing:-.03em;color:#fff;margin-right:8px;white-space:nowrap} .brand img{max-height:36px;width:auto} .brand .logo-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid #fff;border-radius:6px;font-size:18px;margin-left:4px} .hbtn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:10px;background:rgba(255,255,255,.18);color:#fff;font-weight:500;white-space:nowrap;border:0;cursor:pointer;transition:background .15s} .hbtn:hover{background:rgba(255,255,255,.3)} .hbtn svg{width:20px;height:20px;flex:none} .hbtn .chev{width:14px;height:14px;opacity:.9} .hsearch{flex:1;max-width:520px;position:relative} .hsearch form{display:flex;align-items:center;background:#fff;border-radius:10px;height:42px;padding:0 8px 0 12px;color:var(--text)} .hsearch input{border:0!important;box-shadow:none!important;padding:0 8px!important;background:transparent;height:100%;font-size:14px} .hsearch svg{width:20px;height:20px;color:#555;flex:none} .hsearch button{background:transparent;padding:6px;color:var(--muted)} .hsearch button:hover{background:var(--soft)} .hright{margin-left:auto;display:flex;align-items:center;gap:8px} .cart-link{position:relative} .cart-count{position:absolute;top:2px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ffd400;color:#111;font-size:11px;font-weight:700;line-height:18px;text-align:center} .cart-link.has-items .cart-count{display:block} .login-btn{background:rgba(255,255,255,.22)} .nav-toggle,.search-toggle{display:none} /* Mega menu */ .catmenu-wrap{position:relative} .catmenu{display:none;position:absolute;left:0;top:calc(100% + 8px);width:820px;background:#fff;color:var(--text);border-radius:var(--r);box-shadow:var(--sh);z-index:100;grid-template-columns:230px 1fr;overflow:hidden} .catmenu-wrap.is-open .catmenu,.catmenu-wrap:hover .catmenu{display:grid} .catmenu-wrap.is-open .catmenu{display:grid} .catmenu .cat-list{list-style:none;margin:0;padding:8px 0;background:#fff;border-right:1px solid var(--line);max-height:520px;overflow:auto} .catmenu .cat-list li a{display:flex;align-items:center;gap:10px;padding:9px 14px;font-weight:500;font-size:13px} .catmenu .cat-list li a img,.catmenu .cat-list li a svg{width:22px;height:22px;flex:none} .catmenu .cat-list li a:hover,.catmenu .cat-list li.is-active a{background:var(--brand-l);color:var(--brand)} .catmenu .cat-list .arrow{margin-left:auto;width:14px;height:14px;opacity:.5} .catmenu .cat-panel{padding:18px 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px 24px;align-content:start} .catmenu .cat-panel h4{font-size:13px;margin-bottom:8px;color:var(--brand)} .catmenu .cat-panel ul{list-style:none;margin:0;padding:0} .catmenu .cat-panel li{padding:3px 0;font-size:13px;color:#444} .catmenu .cat-panel li a:hover{color:var(--brand)} /* Mobile nav */ .mobile-nav{display:none} @media (max-width:1000px){ .topbar{display:none} .mainbar{height:56px;gap:8px;flex-wrap:wrap} .brand{font-size:20px} .hbtn .lbl{display:none} .hbtn{padding:0 10px;height:38px} .loc-btn,.hsearch,.cat-btn,.login-btn{display:none} .hright{gap:6px} .search-toggle{display:inline-flex} .nav-toggle{display:inline-flex} .hsearch.is-open{display:block;position:absolute;left:0;right:0;top:56px;max-width:none;padding:8px 12px 12px;background:var(--brand);z-index:70} .catmenu-wrap:hover .catmenu{display:none} .catmenu{position:fixed;inset:56px 0 0 0;width:auto;border-radius:0;grid-template-columns:1fr;box-shadow:none;overflow:auto} .catmenu-wrap.is-open .catmenu{display:block} .catmenu .cat-list{max-height:none;border:0} .catmenu .cat-panel{display:none} } /* ---------- Layout ---------- */ .site-main{background:var(--bg);padding:12px 0 40px;min-height:50vh} .site-main>.wrap>*:first-child{margin-top:0} .box{background:#fff;border-radius:var(--r);box-shadow:var(--sh-s);padding:16px} .section{margin-bottom:24px} .sec-head{display:flex;align-items:center;gap:14px;margin-bottom:12px} .sec-head h2{font-size:18px;text-transform:uppercase;margin:0;letter-spacing:-.01em} .sec-head .more{font-size:13px;color:var(--blue);font-weight:500;display:inline-flex;align-items:center;gap:4px} .sec-head .more svg{width:14px;height:14px} .breadcrumb,.woocommerce-breadcrumb{font-size:13px;color:var(--muted);margin:0 0 12px;display:flex;flex-wrap:wrap;gap:4px;align-items:center} .breadcrumb a,.woocommerce-breadcrumb a{color:var(--muted)}.breadcrumb a:hover,.woocommerce-breadcrumb a:hover{color:var(--brand)} .page-header{margin-bottom:16px} .page-header .archive-description{color:var(--muted)} .entry-content{max-width:820px} .entry-content img{border-radius:var(--r-s)} .entry-content-wide{max-width:none} .alignwide{max-width:var(--w)}.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)} .aligncenter{margin-left:auto;margin-right:auto}.alignleft{float:left;margin:0 1.5em 1em 0}.alignright{float:right;margin:0 0 1em 1.5em} .wp-caption,.wp-block-image figcaption{color:var(--muted);font-size:.85rem;text-align:center} /* ---------- Home: top area ---------- */ .home-top{display:grid;grid-template-columns:190px minmax(0,1fr) 190px;gap:10px;margin-bottom:12px;align-items:start} .side-cats{background:#fff;border-radius:var(--r);box-shadow:var(--sh-s);padding:6px 0;list-style:none;margin:0} .side-cats li a{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;font-weight:600;border-radius:8px;margin:0 6px} .side-cats li a:hover{background:var(--brand-l);color:var(--brand)} .side-cats li a img,.side-cats li a svg{width:20px;height:20px;flex:none;color:var(--brand)} .side-cats li a .arrow{margin-left:auto;width:14px;height:14px;opacity:.45} .hero{background:#fff;border-radius:var(--r);box-shadow:var(--sh-s);overflow:hidden} .hero-tabs{display:flex;overflow:hidden;border-bottom:1px solid var(--line)} .hero-tabs button{flex:1;background:transparent;color:var(--muted);padding:8px 6px;border-radius:0;font-size:11px;line-height:1.3;border-bottom:2px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .hero-tabs button b{display:block;color:#333;font-weight:700;text-transform:uppercase;font-size:11px;overflow:hidden;text-overflow:ellipsis} .hero-tabs button.is-active{border-bottom-color:var(--brand);background:#fff}.hero-tabs button.is-active b{color:var(--brand)} .hero-tabs button:hover{background:var(--soft)} .slider{position:relative;overflow:hidden} .slider .track{display:flex;transition:transform .45s ease;will-change:transform} .slider .slide{flex:0 0 100%;min-width:0} .slider .slide img{width:100%;aspect-ratio:1035/449;object-fit:cover} .slider .nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.85);color:#333;box-shadow:var(--sh-s);padding:0;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s} .slider:hover .nav{opacity:1}.slider .nav.prev{left:10px}.slider .nav.next{right:10px}.slider .nav svg{width:18px;height:18px} .slider .dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px} .slider .dots button{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.6);padding:0;transition:width .2s}.slider .dots button.is-active{width:22px;background:#fff} .small-banners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px} .small-banners img{width:100%;aspect-ratio:689/299;object-fit:cover;border-radius:10px} .right-col{display:flex;flex-direction:column;gap:10px} .member-box{background:#fff;border-radius:var(--r);box-shadow:var(--sh-s);padding:12px} .member-box .mb-top{display:flex;gap:10px;align-items:flex-start} .member-box .mb-top img{width:44px;height:44px;border-radius:50%;flex:none;background:var(--soft);object-fit:cover} .member-box h4{font-size:13px;margin:0 0 4px} .member-box p{font-size:12px;color:var(--muted);margin:0 0 8px} .member-box .mb-links{font-size:12px;font-weight:600}.member-box .mb-links a{color:var(--brand)}.member-box .mb-links span{color:var(--muted);font-weight:400;margin:0 4px} .member-box .mb-cta{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .member-box .mb-cta svg{width:14px;height:14px;margin-left:auto;opacity:.5} .promo-groups{background:#fff;border-radius:var(--r);box-shadow:var(--sh-s);padding:10px;display:flex;flex-direction:column;gap:10px} .promo-group h5{margin:0 0 6px;font-size:12px;font-weight:600;text-align:center;background:var(--soft);border-radius:6px;padding:5px 8px;color:#333} .promo-group ul{list-style:none;margin:0;padding:0} .promo-group li{font-size:12px;padding:4px 4px;display:flex;align-items:center;gap:6px} .promo-group li img{width:16px;height:16px;flex:none} .promo-group li b{font-weight:700} .promo-group li .new{background:var(--brand);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;margin-left:auto} .promo-groups .strip{border-radius:8px;overflow:hidden}.promo-groups .strip img{width:100%} .strip-banner{margin:12px 0}.strip-banner img{width:100%;border-radius:10px;aspect-ratio:1752/120;object-fit:cover} @media (max-width:1000px){.home-top{grid-template-columns:minmax(0,1fr)}.side-cats,.side-cats-wrap,.right-col{display:none}} /* ---------- Flash sale ---------- */ .flash{position:relative;margin:0 0 16px;padding-top:44px} .flash-tabs{position:absolute;top:0;left:0;right:0;display:flex;gap:8px;padding:0 24px;z-index:2} .flash-tabs button{flex:1;height:52px;border-radius:14px 14px 0 0;background:linear-gradient(180deg,#f04a3c,#c60016);color:rgba(255,255,255,.7);font-weight:800;font-size:16px;text-transform:uppercase;font-style:italic;letter-spacing:.02em;box-shadow:inset 0 -6px 12px -6px rgba(0,0,0,.35)} .flash-tabs button.is-active{background:linear-gradient(180deg,#ff3b3b,#d70018);color:#fff;height:56px;margin-top:-4px} .flash-body{background:linear-gradient(180deg,#e60c1f 0%,#c8000f 100%);border:2px solid #f7c948;border-radius:20px;padding:18px 18px 12px;color:#fff;position:relative;overflow:hidden} .flash-body::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.18),transparent 60%);pointer-events:none} .flash-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;position:relative;flex-wrap:wrap} .flash-row .countdown{margin:0} .countdown{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:800;text-transform:uppercase;font-size:14px} .countdown b{display:inline-block;min-width:34px;padding:3px 4px;border-radius:6px;background:#fff;color:#1d1d20;text-align:center;font-size:16px;font-variant-numeric:tabular-nums} .flash-note{text-align:center;font-size:12px;font-weight:600;margin-top:12px;position:relative;color:#ffe3e3} .hscroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px;position:relative} .hscroll::-webkit-scrollbar{display:none} .hscroll>*{scroll-snap-align:start;flex:0 0 calc((100% - 40px)/5);min-width:0} .hs-wrap{position:relative} .hs-wrap .nav{position:absolute;top:45%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:#fff;color:#333;box-shadow:var(--sh);padding:0;display:inline-flex;align-items:center;justify-content:center;z-index:3} .hs-wrap .nav.prev{left:-14px}.hs-wrap .nav.next{right:-14px}.hs-wrap .nav svg{width:18px;height:18px} .hs-wrap .nav[disabled]{opacity:0;pointer-events:none} .flash .pc{background:#fff;color:var(--text)} .flash .pc .p-sold{margin:8px 0 0;height:18px;border-radius:9px;background:#ffd9dc;position:relative;overflow:hidden;font-size:11px;font-weight:600;color:#7a1220;text-align:center;line-height:18px} .flash .pc .p-sold i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ff5f6d,#d70018);border-radius:9px} .flash .pc .p-sold span{position:relative} @media (max-width:1000px){.hscroll>*{flex-basis:calc((100% - 20px)/3)}.flash-tabs button{font-size:12px;height:44px}.flash-tabs{padding:0 10px}.flash{padding-top:40px}} @media (max-width:640px){.hscroll>*{flex-basis:calc((100% - 10px)/2)}.countdown{margin-left:0}} /* ---------- Deal tabs box (blue) ---------- */ .deal-box{border:1px solid var(--blue-b);border-radius:16px;background:linear-gradient(180deg,#e9f1ff 0%,#f4f8ff 100%);margin-bottom:24px;overflow:hidden} .deal-tabs{display:flex;background:#fff;border-bottom:1px solid var(--blue-b)} .deal-tabs button{flex:1;padding:12px 10px;background:linear-gradient(180deg,#f2f6ff,#e3ecfb);color:#2a4e9d;font-weight:800;font-size:22px;text-transform:uppercase;border-radius:0;border-right:1px solid var(--blue-b);display:flex;align-items:center;justify-content:center;min-height:64px} .deal-tabs button:last-child{border-right:0} .deal-tabs button img{max-height:40px;width:auto;max-width:100%;object-fit:contain} .deal-tabs button{min-width:0} .deal-tabs button.is-active{background:#fff;color:var(--blue)} .deal-body{padding:14px 14px 16px} .pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:10px} .pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid #cfd6e4;border-radius:999px;background:#fff;font-size:13px;font-weight:500;cursor:pointer;color:#333;white-space:nowrap} .pill:hover{border-color:var(--blue)} .pill.is-active{border-color:var(--blue);color:var(--blue);font-weight:600} .pill img{width:26px;height:26px;object-fit:contain} .pills.sub{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px}.pills.sub::-webkit-scrollbar{display:none} .pills.sub .pill{border-radius:8px;padding:6px 12px;flex:none} @media (max-width:1000px){.deal-tabs button{font-size:14px;min-height:50px}.deal-tabs button img{max-height:26px}.pills{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}} /* ---------- Product card ---------- */ .pc{position:relative;background:#fff;border-radius:10px;box-shadow:var(--sh-s);border:1px solid #eceef1;padding:34px 10px 10px;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;min-width:0} .pc:hover{box-shadow:var(--sh);transform:translateY(-2px)} .pc .p-badges{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none} .pc .p-off{background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:10px 0 10px 0} .pc .p-inst{background:var(--blue-l);color:var(--blue);font-size:11px;font-weight:600;padding:5px 10px;border-radius:0 10px 0 10px;margin-left:auto} .pc .p-img{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:6px;margin-bottom:8px;background:#fff} .pc .p-img img{width:100%;height:100%;object-fit:contain;transition:transform .3s} .pc:hover .p-img img{transform:scale(1.04)} .pc .p-specs{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px;font-size:11px;font-weight:700;color:#444;background:var(--soft);border-radius:4px;padding:3px 6px;margin-bottom:8px;text-align:center} .pc .p-specs b{color:var(--brand)} .pc .p-name{font-size:14px;font-weight:600;line-height:1.35;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em} .pc .p-name a:hover{color:var(--brand)} .pc .p-label{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;margin-bottom:6px;align-self:flex-start} .pc .p-label.new{background:var(--green-l);color:var(--green)}.pc .p-label.pre{background:var(--brand-l);color:var(--brand)}.pc .p-label.soon{background:#fff3e0;color:#c2410c} .pc .p-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:6px} .pc .p-price .now{color:var(--brand);font-weight:700;font-size:16px} .pc .p-price .old{color:#9ca3af;text-decoration:line-through;font-size:12px} .pc .p-price .price{display:contents} .pc .p-chip{font-size:11px;padding:3px 8px;border-radius:4px;margin-bottom:5px;font-weight:500;line-height:1.3} .pc .p-chip.smember{background:var(--blue-l);color:#1f3f86} .pc .p-chip.student{background:var(--purple-l);color:var(--purple)} .pc .p-promo{font-size:12px;color:#444;background:var(--soft);border-radius:6px;padding:6px 8px;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pc .p-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:6px} .pc .p-ship{display:inline-flex;align-items:center;gap:4px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:2px 7px 2px 4px;border-radius:4px} .pc .p-ship svg{width:14px;height:14px} .pc .p-rate{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600} .pc .p-rate svg{width:14px;height:14px;color:#f5b301} .pc .p-fav{margin-left:auto;color:var(--blue);background:transparent;padding:2px;display:inline-flex}.pc .p-fav svg{width:20px;height:20px} .pc .p-cart{display:none} .product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .product-grid.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.product-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} ul.products{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} ul.products li.product{display:contents} @media (max-width:1000px){.product-grid,.product-grid.cols-3,.product-grid.cols-4,.product-grid.cols-5,ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){.product-grid,.product-grid.cols-3,.product-grid.cols-4,.product-grid.cols-5,ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pc{padding:30px 8px 8px}.pc .p-name{font-size:13px}.pc .p-price .now{font-size:15px}} /* ---------- Category section (banner + tabs + grid) ---------- */ .cat-section{display:grid;grid-template-columns:222px minmax(0,1fr);gap:10px;margin-bottom:24px;align-items:start} .cat-section .cs-banners{display:flex;flex-direction:column;gap:10px} .cat-section .cs-banners img{width:100%;border-radius:10px;object-fit:cover} .cat-section .cs-banners .tall{aspect-ratio:320/794} .cat-section .cs-body{min-width:0} .cs-tabs{display:flex;background:#fff;border-radius:10px;box-shadow:var(--sh-s);margin-bottom:10px;overflow:hidden} .cs-tabs a,.cs-tabs button{flex:1;text-align:center;padding:11px 10px;font-weight:700;text-transform:uppercase;font-size:14px;color:#333;background:#fff;border-radius:0;border-bottom:2px solid transparent;border-right:1px solid var(--line)} .cs-tabs a:last-child,.cs-tabs button:last-child{border-right:0} .cs-tabs .is-active{color:var(--brand);border-bottom-color:var(--brand);background:linear-gradient(180deg,#fff,#fff5f5)} .chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px;padding:2px}.chips::-webkit-scrollbar{display:none} .chip{flex:none;display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:8px;padding:6px 12px 6px 8px;box-shadow:var(--sh-s);font-size:13px;font-weight:600;white-space:nowrap} .chip img{width:36px;height:36px;object-fit:contain} .chip:hover{color:var(--brand)} .brand-row{display:flex;align-items:center;gap:8px;margin-bottom:10px} .brand-row .pills{margin:0;flex:1;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.brand-row .pills::-webkit-scrollbar{display:none} .brand-row .more{flex:none;font-size:13px;color:var(--blue);font-weight:500;display:inline-flex;align-items:center;gap:4px} .brand-row .more svg{width:14px;height:14px} .cs-more{text-align:center;margin-top:12px} .cs-more a{display:inline-block;padding:.5em 2em;border:1px solid var(--blue);color:var(--blue);border-radius:8px;font-weight:600;background:#fff} .cs-more a:hover{background:var(--blue-l)} @media (max-width:1000px){.cat-section{grid-template-columns:1fr}.cat-section .cs-banners{flex-direction:row}.cat-section .cs-banners .tall{display:none}} /* ---------- Accessories tiles ---------- */ .acc-row{display:grid;grid-template-columns:repeat(8,1fr);gap:10px} .acc-row a{background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:10px 8px;text-align:center;font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:6px} .acc-row a img{width:64px;height:64px;object-fit:contain} .acc-row a:hover{color:var(--brand);box-shadow:var(--sh)} @media (max-width:1000px){.acc-row{grid-template-columns:repeat(4,1fr)}} /* ---------- News / promo blocks ---------- */ .news-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .news-card{background:#fff;border-radius:10px;box-shadow:var(--sh-s);overflow:hidden;display:flex;flex-direction:column} .news-card img{width:100%;aspect-ratio:16/9;object-fit:cover} .news-card .nc-body{padding:10px 12px 12px} .news-card h3{font-size:13px;font-weight:600;line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .news-card:hover h3{color:var(--brand)} .news-card .nc-meta{font-size:11px;color:var(--muted);margin-top:6px} @media (max-width:1000px){.news-row{grid-template-columns:repeat(2,1fr)}} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px} .promo-box{background:#fff;border-radius:12px;box-shadow:var(--sh-s);padding:14px} .promo-box h3{text-align:center;text-transform:uppercase;font-size:16px;margin-bottom:12px} .promo-box .imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px} .promo-box .imgs img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:8px} .b2b{background:linear-gradient(90deg,#ff2a3d,#d70018);border-radius:14px;padding:22px 26px;color:#fff;display:grid;grid-template-columns:1fr 1.6fr;gap:20px;align-items:center;margin-bottom:24px;overflow:hidden;position:relative} .b2b h3{font-size:24px;line-height:1.25;margin-bottom:14px;color:#fff} .b2b .btns{display:flex;gap:10px;flex-wrap:wrap} .b2b .btns a{padding:.55em 1.3em;border-radius:8px;font-weight:700;font-size:13px} .b2b .btns .b1{background:#fff;color:var(--brand)}.b2b .btns .b2{border:1px solid #fff;color:#fff} .b2b .stats{background:#fff;color:var(--text);border-radius:12px;padding:16px 18px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:center} .b2b .stats div{text-align:center;font-size:12px;font-weight:600} .b2b .stats b{display:block;font-size:34px;color:var(--brand);line-height:1} .b2b .mascot{position:absolute;right:38%;bottom:-10px;width:110px;opacity:.95} @media (max-width:1000px){.two-col{grid-template-columns:1fr}.b2b{grid-template-columns:1fr}.b2b .mascot{display:none}} /* ---------- Footer ---------- */ .site-footer{background:#fff;border-top:1px solid var(--line);padding:32px 0 0;font-size:13px;color:#333} .footer-cols{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:28px;padding-bottom:28px} .footer-cols h4{font-size:14px;margin-bottom:12px;color:#111} .footer-cols ul{list-style:none;padding:0;margin:0 0 16px} .footer-cols li{padding:4px 0} .footer-cols li a:hover{color:var(--brand)} .footer-cols .hot b{font-weight:700} .pay-logos{display:flex;flex-wrap:wrap;gap:8px} .pay-logos img{height:24px;width:auto;border:1px solid var(--line);border-radius:4px;padding:2px 4px;background:#fff} .newsletter{background:var(--soft);border-radius:8px;padding:10px 12px;font-size:12px;margin-bottom:10px} .newsletter b{color:var(--brand);display:block;margin-bottom:2px} .newsletter-form label{display:block;font-size:12px;font-weight:600;margin:8px 0 4px} .newsletter-form small{display:block;color:var(--muted);margin:8px 0}.newsletter-form small a{color:var(--brand)} .newsletter-form button{width:100%;text-transform:uppercase} .socials{display:flex;gap:8px;margin-bottom:16px}.socials img{width:32px;height:32px} .footer-apps{display:flex;gap:8px}.footer-apps img{height:36px;width:auto} .member-sites li{padding:6px 0}.member-sites img{height:24px;width:auto;margin-top:4px} .footer-links{background:var(--bg);padding:14px 0;border-top:1px solid var(--line)} .footer-links .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 24px;font-size:12px} .footer-links .cols div{line-height:1.9}.footer-links .cols span{color:#bbb;margin:0 5px} .footer-links a:hover{color:var(--brand)} .copyright{background:var(--bg);padding:14px 0 20px;font-size:11px;color:var(--muted);text-align:center} .copyright img{display:inline-block;height:28px;margin:8px 4px 0} @media (max-width:1000px){.footer-cols{grid-template-columns:1fr 1fr}.footer-links .cols{grid-template-columns:1fr 1fr}} @media (max-width:640px){.footer-cols{grid-template-columns:1fr}} .back-top{position:fixed;right:16px;bottom:16px;z-index:50;background:var(--text);color:#fff;border-radius:999px;padding:.5em 1em;font-size:12px;font-weight:600;box-shadow:var(--sh);opacity:0;pointer-events:none;transition:opacity .2s} .back-top.is-visible{opacity:1;pointer-events:auto} /* ---------- WooCommerce: notices, archive ---------- */ .woocommerce-notices-wrapper:empty{display:none} .woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;margin:0 0 14px;padding:.8em 1em;border-radius:8px;border:1px solid;background:var(--green-l);border-color:#a7dcb7;color:#14532d;display:flex;flex-wrap:wrap;align-items:center;gap:10px} .woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{order:2;margin-left:auto;padding:.4em .9em} .woocommerce-info{background:var(--blue-l);border-color:var(--blue-b);color:#1e3a8a} .woocommerce-error{background:var(--brand-l);border-color:#fca5a5;color:#7f1d1d;display:block}.woocommerce-error li{margin:.2em 0} .shop-head{margin-bottom:12px} .shop-head h1{font-size:22px;margin:0 0 10px} .subcats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .subcats a{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:13px;font-weight:500} .subcats a:hover{border-color:var(--brand);color:var(--brand)} .filter-bar{background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:12px 14px;margin-bottom:12px} .filter-bar h3{font-size:14px;margin-bottom:8px} .filter-bar .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .filter-bar .row .lbl{font-weight:600;font-size:13px;margin-right:4px} .fbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid #d1d5db;border-radius:8px;padding:6px 12px;font-size:13px;background:#fff;cursor:pointer;font-weight:500} .fbtn svg{width:14px;height:14px;opacity:.6} .fbtn.is-active{border-color:var(--brand);color:var(--brand);background:var(--brand-l)} .sort-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px} .sort-row .lbl{font-weight:600;font-size:14px;margin-right:6px} .sort-row a{display:inline-flex;align-items:center;gap:5px;border:1px solid #d1d5db;border-radius:8px;padding:6px 12px;font-size:13px;background:#fff;font-weight:500} .sort-row a.is-active{border-color:var(--brand);color:var(--brand);background:var(--brand-l)} .sort-row a svg{width:14px;height:14px} .woocommerce-result-count{color:var(--muted);margin:0;font-size:13px} .woocommerce-ordering{margin:0}.woocommerce-ordering select{width:auto;padding:.4em 2em .4em .8em} .pagination,.woocommerce-pagination{margin:20px 0 0;text-align:center} .pagination .nav-links,.woocommerce-pagination ul.page-numbers{display:inline-flex;gap:6px;list-style:none;padding:0;margin:0;border:0} .page-numbers{display:inline-block;min-width:36px;padding:.4em .7em;border:1px solid var(--line);border-radius:8px;color:var(--text);background:#fff} .page-numbers.current,.page-numbers:hover{background:var(--brand);color:#fff;border-color:var(--brand)} .woocommerce nav.woocommerce-pagination ul li{border:0;margin:0} .term-description,.shop-desc{background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:18px 20px;margin-top:20px;max-height:340px;overflow:hidden;position:relative;font-size:14px} .shop-desc.is-open{max-height:none} .shop-desc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,#fff)} .shop-desc.is-open::after{display:none} .shop-desc-toggle{text-align:center;margin-top:8px}.shop-desc-toggle button{background:#fff;color:var(--blue)!important;border:1px solid var(--blue-b)} .no-results{background:#fff;border-radius:10px;padding:30px;text-align:center} /* ---------- Single product ---------- */ .sp-head{background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:12px 16px;margin-bottom:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .sp-head h1{font-size:20px;margin:0;flex:1 1 auto} .sp-head .sp-rate{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600} .sp-head .sp-rate svg{width:16px;height:16px;color:#f5b301} .sp-head .sp-links{display:flex;gap:14px;font-size:13px;color:var(--blue);font-weight:500} .sp-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px;align-items:start;margin-bottom:12px} .sp-gallery{background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:14px} .sp-gallery .main{aspect-ratio:1/1;border-radius:8px;overflow:hidden;position:relative;background:#fff} .sp-gallery .main img{width:100%;height:100%;object-fit:contain} .sp-gallery .thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto} .sp-gallery .thumbs img{width:64px;height:64px;object-fit:contain;border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:3px;background:#fff} .sp-gallery .thumbs img.is-active{border-color:var(--brand)} .sp-features{background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:14px 16px;margin-top:12px} .sp-features h3{font-size:15px;margin-bottom:8px} .sp-features ul{margin:0;padding-left:1.2em;font-size:13px;line-height:1.7} .sp-buy{background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:14px 16px} .sp-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px} .sp-price .now{color:var(--brand);font-size:26px;font-weight:700} .sp-price .old{color:#9ca3af;text-decoration:line-through;font-size:15px} .sp-price .off{background:var(--brand-l);color:var(--brand);font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px} .sp-price .price{display:contents} .sp-price .price del,.sp-price .price ins{text-decoration:none}.sp-price .price del{color:#9ca3af;text-decoration:line-through;font-size:15px} .sp-price .price ins .amount,.sp-price .price>.amount{color:var(--brand);font-size:26px;font-weight:700} .sp-opts{margin-bottom:12px} .sp-opts h4{font-size:13px;margin-bottom:6px;font-weight:600} .sp-opts .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px} .sp-opts .opt{border:1px solid #d1d5db;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;background:#fff;text-align:center;line-height:1.3;color:var(--text)} .sp-opts .opt small{display:block;color:var(--muted);font-weight:400} .sp-opts .opt.is-active,.sp-opts .opt:hover{border-color:var(--brand);color:var(--brand)} .sp-opts .opt.is-active{background:var(--brand-l)} .sp-chips{display:flex;flex-direction:column;gap:6px;margin-bottom:12px} .sp-chips .p-chip{font-size:12px;padding:6px 10px;border-radius:6px;font-weight:500} .sp-chips .smember{background:var(--blue-l);color:#1f3f86}.sp-chips .student{background:var(--purple-l);color:var(--purple)} .sp-promo{border:1px solid #f5b8be;border-radius:10px;margin-bottom:12px;overflow:hidden} .sp-promo h4{margin:0;background:var(--brand-l);color:var(--brand);padding:8px 12px;font-size:13px;display:flex;align-items:center;gap:6px} .sp-promo h4 svg{width:16px;height:16px} .sp-promo ol{margin:0;padding:10px 12px 10px 30px;font-size:13px;line-height:1.6} .sp-promo ol li::marker{color:var(--brand);font-weight:700} .sp-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px} .sp-actions .buy-now{padding:1em;font-size:15px;text-transform:uppercase;flex-direction:column;gap:2px;line-height:1.2} .sp-actions .buy-now small{font-weight:400;font-size:11px;text-transform:none;opacity:.9} .sp-actions .row{display:grid;grid-template-columns:1fr 1fr;gap:8px} .sp-actions form.cart{display:contents} .sp-actions form.cart .quantity{display:none} .sp-actions form.cart button{width:100%} .sp-actions form.cart .variations{grid-column:1/-1;margin:0 0 8px} .sp-actions form.cart .variations td{border:0;padding:.3em .3em .3em 0}.sp-actions form.cart .variations select{width:auto;min-width:160px} .sp-actions .woocommerce-variation-add-to-cart{grid-column:1/-1} .sp-actions .woocommerce-variation-price .price{color:var(--brand);font-weight:700;font-size:20px} .sp-actions .reset_variations{font-size:12px;margin-left:6px} .sp-actions .stock{font-size:13px;margin:0 0 6px}.sp-actions .out-of-stock{color:var(--brand)} .sp-guarantee{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.7} .sp-guarantee li{display:flex;gap:8px;align-items:flex-start}.sp-guarantee ul{list-style:none;margin:0;padding:0} .sp-guarantee svg{width:16px;height:16px;flex:none;color:var(--green);margin-top:3px} .sp-specs{background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:14px 16px;margin-top:12px} .sp-specs h3{font-size:15px;margin-bottom:8px} .sp-specs table{font-size:13px}.sp-specs th{width:38%;background:var(--soft);font-weight:500} .sp-specs table th,.sp-specs table td{padding:.5em .7em} .sp-bottom{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px;align-items:start} .sp-desc{background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:16px 18px} .sp-desc h2{font-size:16px;margin-bottom:10px} .sp-desc .desc-body{max-height:520px;overflow:hidden;position:relative} .sp-desc .desc-body.is-open{max-height:none} .sp-desc .desc-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,#fff)} .sp-desc .desc-body.is-open::after{display:none} .sp-desc .desc-toggle{text-align:center;margin-top:8px}.sp-desc .desc-toggle button{background:#fff;color:var(--blue)!important;border:1px solid var(--blue-b)} .sp-reviews{background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:16px 18px;margin-top:12px} .sp-reviews h2{font-size:16px} #reviews .commentlist{list-style:none;padding:0}#reviews .comment_container{display:flex;gap:12px;padding:1em 0;border-bottom:1px solid var(--line)}#reviews .avatar{border-radius:50%;width:42px;height:42px} #reviews .comment-text{flex:1}#reviews .meta{font-size:12px;color:var(--muted)} .comment-form-rating p.stars a{color:#f5b301} .star-rating{position:relative;height:1em;width:5.4em;font-size:.9em;line-height:1;overflow:hidden;color:#d1d5db;letter-spacing:.1em} .star-rating::before{content:"\2605\2605\2605\2605\2605";position:absolute;left:0;top:0} .star-rating span{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;padding-top:1.5em;color:#f5b301}.star-rating span::before{content:"\2605\2605\2605\2605\2605";position:absolute;left:0;top:0} .related.products,.upsells.products{margin-top:20px}.related.products>h2,.upsells.products>h2{font-size:18px;text-transform:uppercase;margin-bottom:12px} .woocommerce-product-gallery__trigger{display:none} @media (max-width:900px){.sp-grid,.sp-bottom{grid-template-columns:1fr}.sp-head h1{font-size:17px}} /* ---------- Cart ---------- */ .woocommerce-cart .woocommerce{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start} .woocommerce-cart .woocommerce>*{grid-column:1/-1} .woocommerce-cart .woocommerce form.woocommerce-cart-form{grid-column:1;background:#fff;border-radius:10px;padding:14px;box-shadow:var(--sh-s)} .woocommerce-cart .woocommerce .cart-collaterals{grid-column:2;background:#fff;border-radius:10px;padding:16px;box-shadow:var(--sh-s)} .woocommerce-cart .cart-collaterals h2{font-size:15px} table.shop_table img{width:64px;height:64px;object-fit:contain;border-radius:6px} table.shop_table .product-remove a{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--brand);align-items:center;justify-content:center;font-weight:700} table.shop_table .quantity input{width:70px;text-align:center} table.shop_table td.actions{padding-top:1em} table.shop_table td.actions .coupon{display:inline-flex;gap:8px;align-items:center} table.shop_table td.actions .coupon input[type=text]{width:180px} table.shop_table td.actions>.button{float:right} .cart_totals table th{background:transparent;width:40%}.cart_totals .order-total{font-size:1.05rem} .wc-proceed-to-checkout .button{width:100%;display:flex;font-size:15px;padding:.9em} .cart-empty{font-size:15px}.return-to-shop{margin-top:1em} @media (max-width:900px){.woocommerce-cart .woocommerce{grid-template-columns:1fr}.woocommerce-cart .woocommerce .cart-collaterals{grid-column:1} table.shop_table_responsive thead,table.shop_table_responsive tbody th{display:none}table.shop_table_responsive tr{display:block;border-bottom:1px solid var(--line);padding:.5em 0} table.shop_table_responsive td{display:flex;justify-content:space-between;align-items:center;border:0;padding:.35em 0;text-align:right} table.shop_table_responsive td::before{content:attr(data-title);font-weight:600;text-align:left} table.shop_table_responsive td.product-thumbnail,table.shop_table_responsive td.product-remove{justify-content:flex-start}table.shop_table_responsive td.actions{display:block} table.shop_table td.actions .coupon{width:100%;margin-bottom:10px}table.shop_table td.actions .coupon input[type=text]{flex:1}table.shop_table td.actions>.button{float:none;width:100%}} /* ---------- Checkout ---------- */ form.checkout.woocommerce-checkout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:start} form.checkout.woocommerce-checkout>*{grid-column:1/-1} form.checkout.woocommerce-checkout #customer_details{grid-column:1;background:#fff;border-radius:10px;padding:16px;box-shadow:var(--sh-s)} form.checkout.woocommerce-checkout .nk-co-side{grid-column:2;background:#fff;border-radius:10px;padding:16px;box-shadow:var(--sh-s);position:sticky;top:12px} form.checkout.woocommerce-checkout #order_review_heading{margin:0 0 10px;font-size:15px} #customer_details h3{font-size:15px} .form-row{margin:0 0 1em}.form-row label{display:block;font-weight:500;margin-bottom:.3em;font-size:13px}.form-row .required{color:var(--brand);text-decoration:none} .form-row-first,.form-row-last{width:calc(50% - 8px);display:inline-block;vertical-align:top}.form-row-first{margin-right:12px} .woocommerce-checkout #order_review table th{background:transparent} .wc_payment_methods{list-style:none;padding:0;margin:0 0 1em}.wc_payment_method{padding:.7em 0;border-bottom:1px solid var(--line)}.wc_payment_method label{font-weight:600;margin-left:6px} .payment_box{background:var(--soft);border-radius:8px;padding:.8em 1em;margin-top:.6em;font-size:13px;color:#374151} #place_order{width:100%;font-size:15px;padding:.9em} .woocommerce-terms-and-conditions-wrapper{font-size:12px} .select2-container .select2-selection--single{height:auto;padding:.5em .8em;border:1px solid #d1d5db;border-radius:8px}.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.5;padding-left:0}.select2-container--default .select2-selection--single .select2-selection__arrow{height:100%} @media (max-width:900px){form.checkout.woocommerce-checkout{grid-template-columns:1fr}form.checkout.woocommerce-checkout #customer_details,form.checkout.woocommerce-checkout .nk-co-side{grid-column:1;position:static}.form-row-first,.form-row-last{width:100%;display:block;margin-right:0}} .woocommerce-order ul.order_details{list-style:none;display:flex;flex-wrap:wrap;gap:12px 32px;margin:1.5em 0;background:#fff;border-radius:10px;padding:16px 20px}.woocommerce-order ul.order_details li{font-size:12px;color:var(--muted);text-transform:uppercase}.woocommerce-order ul.order_details li strong{display:block;font-size:14px;color:var(--text);text-transform:none} .woocommerce-customer-details address{background:#fff;border-radius:10px;padding:16px;font-style:normal} /* ---------- My account ---------- */ .woocommerce-account .woocommerce{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px;align-items:start} .woocommerce-account .woocommerce>*{grid-column:1/-1} .woocommerce-MyAccount-navigation{grid-column:1!important}.woocommerce-MyAccount-content{grid-column:2!important;background:#fff;border-radius:10px;padding:16px;box-shadow:var(--sh-s)} .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:var(--sh-s)} .woocommerce-MyAccount-navigation li a{display:block;padding:.7em 1em;border-left:3px solid transparent} .woocommerce-MyAccount-navigation li.is-active a,.woocommerce-MyAccount-navigation li a:hover{background:var(--brand-l);border-color:var(--brand);color:var(--brand)} .woocommerce-account:not(.logged-in) .woocommerce{grid-template-columns:1fr} .woocommerce-form-login,.woocommerce-form-register{max-width:460px;padding:20px;background:#fff;border-radius:10px;box-shadow:var(--sh-s)} .u-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.u-columns>div{grid-column:auto!important} @media (max-width:820px){.woocommerce-account .woocommerce{grid-template-columns:1fr}.woocommerce-MyAccount-navigation,.woocommerce-MyAccount-content{grid-column:1!important}.u-columns{grid-template-columns:1fr}} /* ---------- Blog ---------- */ .blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start} .post-list{display:flex;flex-direction:column;gap:10px} .post-item{display:grid;grid-template-columns:260px 1fr;gap:14px;background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:12px} .post-item img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px} .post-item h2{font-size:16px;margin:0 0 6px}.post-item h2 a:hover{color:var(--brand)} .post-item .excerpt{color:#444;font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 6px} .entry-meta{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center} .entry-meta .cat{background:var(--brand-l);color:var(--brand);padding:1px 8px;border-radius:4px;font-weight:600} .blog-side .box{margin-bottom:10px}.blog-side h3{font-size:14px;text-transform:uppercase;margin-bottom:10px} .blog-side ul{list-style:none;margin:0;padding:0}.blog-side li{padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}.blog-side li:last-child{border:0} .article{background:#fff;border-radius:10px;box-shadow:var(--sh-s);padding:20px 24px} .article h1{font-size:26px;line-height:1.3} .article .entry-content{max-width:none;font-size:15px;line-height:1.75} .article .entry-thumb img{border-radius:8px;margin-bottom:16px} .post-navigation .nav-links{display:flex;justify-content:space-between;gap:16px;margin-top:2em;padding-top:1em;border-top:1px solid var(--line)} .comments-area{max-width:820px;margin-top:20px;background:#fff;border-radius:10px;padding:20px;box-shadow:var(--sh-s)} .comment-list{list-style:none;padding:0}.comment-list .comment{padding:1em 0;border-top:1px solid var(--line)} .comment-list .children{list-style:none;padding-left:2em} .comment-meta{font-size:.9rem;color:var(--muted)} .comment-form p{margin-bottom:1em} @media (max-width:1000px){.blog-layout{grid-template-columns:1fr}.blog-side{display:none}.post-item{grid-template-columns:1fr}} .error-404{background:#fff;border-radius:10px;padding:40px 20px;text-align:center} .search-form{display:flex;gap:8px;max-width:600px;margin:0 auto}.search-form input{flex:1} .woocommerce-store-notice{position:fixed;left:0;right:0;bottom:0;background:var(--brand);color:#fff;text-align:center;padding:.8em 1em;z-index:60;margin:0}.woocommerce-store-notice a{color:#fff;text-decoration:underline;margin-left:8px} .blockUI.blockOverlay{border-radius:10px} @media print{.site-header,.site-footer{display:none}} /* ---------- NK Builder blocks ---------- */ .nk-block>.section:last-child,.nk-block>.home-top{margin-bottom:12px} .side-cats li a svg{width:20px;height:20px;color:var(--brand)} .topbar .usp svg{width:14px;height:14px} .catmenu .cat-list li a svg{width:22px;height:22px} .banner-double{display:grid;grid-template-columns:1fr 1fr;gap:12px}.banner-double img{width:100%;border-radius:10px} .rt-title{font-size:18px;text-transform:uppercase;margin-bottom:10px} .faq details{border-bottom:1px solid var(--line);padding:12px 0}.faq details:last-of-type{border:0} .faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px} .faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--brand);font-weight:700;font-size:18px;line-height:1} .faq details[open] summary::after{content:"−"}.faq details>div{padding-top:8px;color:#444} @media (max-width:1000px){.desktop-only{display:none!important}.home-top{grid-template-columns:minmax(0,1fr)!important}.banner-double{grid-template-columns:1fr}} .nk-hidden-field{display:none!important} .woocommerce-checkout .woocommerce-billing-fields h3,#customer_details h3{font-size:15px;margin-bottom:12px} #order_review .shop_table td,#order_review .shop_table th{padding:.55em .4em} #order_review .product-name{font-weight:500} #shipping_method{list-style:none;padding:0;margin:0}#shipping_method li{margin:2px 0} /* Biến thể dạng nút: select của Woo vẫn còn trong form (ẩn), nút điều khiển nó */ .sp-actions form.variations_form .variations,.sp-actions .woocommerce-variation-price,.sp-actions .reset_variations{display:none!important} .sp-actions .single_variation_wrap{display:contents} .sp-actions .woocommerce-variation{grid-column:1/-1} .sp-actions .woocommerce-variation:empty{display:none} .sp-actions .woocommerce-variation-add-to-cart{grid-column:auto} .sp-actions .woocommerce-variation-availability .stock{margin:0} .sp-opts .opt.is-out{color:#9ca3af;background:#f9fafb;border-style:dashed} .sp-opts .opt.is-out small::after{content:" · hết hàng"} .sp-opts .opt.is-out.is-active{color:var(--brand);background:var(--brand-l)} .sp-actions button.buy-now{width:100%;border:0;cursor:pointer} .sp-actions form.cart .quantity{display:none!important} /* Woo JS gắn style="display:block" */ .sp-actions .row:not(:has(>.btn)){grid-template-columns:1fr} /* Mua ngay | Thêm vào giỏ (cam) – 50/50 */ .sp-actions .row{align-items:stretch} .sp-actions .woocommerce-variation{order:-1} .sp-actions .woocommerce-variation-add-to-cart{display:flex} .sp-actions form.cart .single_add_to_cart_button{flex:1;height:100%;min-height:52px;background:#f97316;border-color:#f97316;color:#fff;font-size:15px;font-weight:700;text-transform:uppercase} .sp-actions form.cart .single_add_to_cart_button:hover{background:#ea580c;border-color:#ea580c} .sp-actions form.cart .single_add_to_cart_button.disabled{opacity:.5} /* ---------- Đánh giá sản phẩm (template-parts/reviews.php) ---------- */ .rv-title{font-size:17px;margin:0 0 14px} .rv-stars{position:relative;display:inline-flex;vertical-align:middle;line-height:0} .rv-stars svg{width:15px;height:15px;flex:none} .rv-stars.lg svg{width:22px;height:22px} .rv-stars .bg{display:flex;gap:2px;color:#e5e7eb} .rv-stars .fg{position:absolute;inset:0 auto 0 0;display:flex;gap:2px;color:#f59e0b;overflow:hidden;white-space:nowrap} .rv-summary{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px} .rv-score{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border-right:1px solid var(--line);padding-right:24px} .rv-score b{font-size:40px;line-height:1;font-weight:800;color:var(--text)} .rv-score b small{font-size:18px;color:var(--muted);font-weight:600} .rv-score .muted{font-size:13px;color:var(--muted)} .rv-write{margin-top:6px;width:100%;border-radius:999px} .rv-bars{display:flex;flex-direction:column;gap:8px} .rv-bar{display:grid;grid-template-columns:42px 1fr 92px;gap:10px;align-items:center;font-size:13px} .rv-bar .n{display:inline-flex;align-items:center;gap:3px;font-weight:600} .rv-bar .n svg{width:13px;height:13px;color:#f59e0b} .rv-bar .track{height:8px;border-radius:99px;background:#f1f2f4;overflow:hidden} .rv-bar .track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#f97316)} .rv-bar .c{color:var(--muted);text-align:right} .rv-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;font-size:13px} .rv-filter span{color:var(--muted);margin-right:2px} .rv-filter button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 14px;font-size:13px;cursor:pointer;color:var(--text)} .rv-filter button:hover{border-color:var(--brand);color:var(--brand)} .rv-filter button.is-active{border-color:var(--brand);background:var(--brand-l);color:var(--brand);font-weight:600} .rv-list{list-style:none;margin:0;padding:0} .rv-item{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)} .rv-item.is-more{display:none} .rv-list.show-all .rv-item.is-more{display:flex} .rv-item[hidden]{display:none!important} .rv-ava{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px} .rv-body{flex:1;min-width:0} .rv-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .rv-head b{font-size:14px} .rv-date{color:var(--muted);font-size:12px;margin-left:auto} .rv-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px} .rv-badge svg{width:12px;height:12px} .rv-badge.ok{background:var(--green-l);color:var(--green)} .rv-badge.wait{background:#fef3c7;color:#92400e} .rv-badge.shop{background:var(--brand-l);color:var(--brand)} .rv-rate{display:flex;align-items:center;gap:8px;margin:4px 0 2px;font-size:12px;color:var(--muted)} .rv-text{font-size:14px;line-height:1.6;overflow-wrap:anywhere} .rv-text p{margin:4px 0} .rv-reply{margin-top:10px;padding:10px 14px;background:var(--soft);border-radius:var(--r-s);border-left:3px solid var(--brand)} .rv-more{text-align:center;padding:14px 0 4px} .rv-form{margin-top:20px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:#fcfcfd;scroll-margin-top:90px} .rv-form-title{font-size:16px;margin:0 0 12px} .rv-form-title small{font-size:13px;margin-left:8px} .rv-label{display:block;font-weight:600;margin-bottom:8px} .rv-pick-wrap{margin-bottom:14px} .rv-pick{display:inline-flex;flex-direction:row-reverse;gap:6px} .rv-pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .rv-pick label{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;cursor:pointer;color:#d1d5db;transition:transform .12s} .rv-pick label svg{width:34px;height:34px;transition:color .12s} .rv-pick label span{font-size:11px;color:var(--muted);white-space:nowrap} .rv-pick label:hover{transform:scale(1.08)} .rv-pick label:hover,.rv-pick label:hover~label,.rv-pick input:checked~label{color:#f59e0b} .rv-pick input:checked+label span{color:var(--text);font-weight:700} .rv-pick input:focus-visible+label{outline:2px solid var(--blue-b);outline-offset:2px;border-radius:6px} .rv-form textarea,.rv-form input[type=text],.rv-form input[type=email]{width:100%;border:1px solid #d1d5db;border-radius:var(--r-s);padding:10px 12px;font:inherit;background:#fff} .rv-form textarea:focus,.rv-form input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)} .rv-form .comment-form p{margin:0 0 12px} .rv-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px} .rv-form .form-submit{margin:0} .rv-submit{width:100%;padding:.85em 1.2em!important;font-size:15px!important;border-radius:var(--r-s)} .rv-note{margin:0;color:var(--muted)} @media (max-width:640px){ .rv-summary{grid-template-columns:1fr;gap:16px} .rv-score{border-right:0;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:14px} .rv-fields{grid-template-columns:1fr} .rv-pick label{width:56px}.rv-pick label svg{width:28px;height:28px} .rv-date{margin-left:0;width:100%} } /* ---------- Mega menu: nút "Danh mục" + danh mục trái trang chủ ---------- */ /* Cầu nối vô hình lấp khe 8px giữa nút và menu → di chuột xuống không bị mất menu */ @media (min-width:1001px){ .catmenu-wrap::after{content:"";position:absolute;left:0;top:100%;width:240px;height:12px;display:none} .catmenu-wrap:hover::after,.catmenu-wrap.is-open::after{display:block} } .side-cats-wrap{position:relative;z-index:60} .side-mega{display:none;position:absolute;left:100%;top:0;bottom:0;padding-left:10px;width:calc(min(var(--w),100vw - 32px) - 200px)} .side-cats-wrap.is-hover .side-mega{display:block} .side-mega-in{background:#fff;border-radius:var(--r);box-shadow:var(--sh);height:100%;overflow:auto} .side-mega .cat-panel{padding:18px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px 24px;align-content:start} .side-mega .cat-panel.hide{display:none} .side-mega .cat-panel h4{font-size:13px;margin:0 0 8px;color:var(--brand)} .side-mega .cat-panel ul{list-style:none;margin:0;padding:0} .side-mega .cat-panel li{padding:3px 0;font-size:13px;color:#444} .side-mega .cat-panel li a:hover{color:var(--brand)} .side-cats li.is-active>a{background:var(--brand-l);color:var(--brand)} /* ---------- Nút gọi nổi (template-parts/call-button.php) ---------- */ @keyframes suntory-alo-circle-anim{0%{transform:rotate(0) scale(.5) skew(1deg);opacity:.1}30%{transform:rotate(0) scale(.7) skew(1deg);opacity:.5}100%{transform:rotate(0) scale(1) skew(1deg);opacity:.1}} @keyframes suntory-alo-circle-fill-anim{0%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}} @keyframes suntory-alo-circle-img-anim{0%{transform:rotate(0) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0) scale(1) skew(1deg)}100%{transform:rotate(0) scale(1) skew(1deg)}} @keyframes nk-call-cyc{0%{opacity:0;transform:scale(.6)}6%,28%{opacity:1;transform:scale(1)}34%,100%{opacity:0;transform:scale(.6)}} .nk-call{position:fixed;bottom:var(--call-b);left:18px;z-index:90;color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent} .nk-call.is-right{left:auto;right:18px} .nk-call-btn,a.nk-call{position:fixed;display:block;width:60px;height:60px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%} .nk-call-btn{position:relative} .nk-call-ring,.nk-call-fill{position:absolute;border-radius:50%;pointer-events:none} .nk-call-ring{inset:-22px;border:2px solid var(--call);animation:suntory-alo-circle-anim 1.2s ease-in-out infinite} .nk-call-fill{inset:-10px;background:var(--call);animation:suntory-alo-circle-fill-anim 2.3s ease-in-out infinite} .nk-call-core{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--call);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);animation:1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim} .nk-call-core svg{width:30px;height:30px} .nk-call-core>span{grid-area:1/1;display:grid;place-items:center} .nk-call--multi .cyc{opacity:0;animation:nk-call-cyc 4.5s infinite} .nk-call--multi .cyc:nth-child(2){animation-delay:1.5s} .nk-call--multi .cyc:nth-child(3){animation-delay:3s} .nk-call--multi .cyc svg{width:28px;height:28px} .nk-call--multi .x{opacity:0;transform:rotate(-90deg);transition:.25s} .nk-call--multi .x svg{width:26px;height:26px} .nk-call--multi.is-open .cyc{display:none} .nk-call--multi.is-open .x{opacity:1;transform:none} .nk-call--multi.is-open .nk-call-core{animation:none} .nk-call--multi.is-open .nk-call-ring,.nk-call--multi.is-open .nk-call-fill{display:none} .nk-call-list{position:absolute;bottom:calc(100% + 18px);left:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s} .nk-call.is-right .nk-call-list{left:auto;right:0;align-items:flex-end} .nk-call--multi.is-open .nk-call-list{opacity:1;visibility:visible;transform:none} .nk-call-item{display:flex;align-items:center;gap:12px;padding:5px 20px 5px 5px;background:#fff;color:#222;border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.16);white-space:nowrap;text-decoration:none;font-size:15px} .nk-call.is-right .nk-call-item{flex-direction:row-reverse;padding:5px 5px 5px 20px} .nk-call-item:hover{color:var(--c)} .nk-call-item b{font-weight:700} .nk-call-ic{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--c);color:#fff;animation:1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim} .nk-call-ic svg{width:24px;height:24px} .nk-call-num{position:absolute;top:50%;left:30px;z-index:-1;transform:translateY(-50%);height:42px;display:flex;align-items:center;padding:0 20px 0 42px;border-radius:999px;background:var(--call);color:#fff;font-weight:700;font-size:16px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.2)} .nk-call.is-right .nk-call-num{left:auto;right:30px;padding:0 42px 0 20px} @media (max-width:768px){ .nk-call{left:14px}.nk-call.is-right{right:14px} .nk-call.only-desktop{display:none} .nk-call-item{font-size:14px} } /* Mẫu cột icon */ .nk-call--icons{display:flex;flex-direction:column;gap:12px} .nk-call-icon{position:relative;display:block;text-decoration:none} .nk-call-icon .nk-call-ic{width:50px;height:50px;box-shadow:0 4px 12px rgba(0,0,0,.22);animation:none;transition:transform .15s} .nk-call-icon .nk-call-ic svg{width:26px;height:26px;fill:currentColor} .nk-call--icons.is-shake .nk-call-ic{animation:1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim} .nk-call--icons.is-shake .nk-call-icon:nth-child(2n) .nk-call-ic{animation-delay:.5s} .nk-call-icon:hover .nk-call-ic{animation-play-state:paused;transform:scale(1.1)} .nk-call-icon .tip{position:absolute;top:50%;left:calc(100% + 10px);transform:translateY(-50%);background:#18181b;color:#fff;font-size:13px;font-weight:600;padding:5px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s} .nk-call.is-right .nk-call-icon .tip{left:auto;right:calc(100% + 10px)} .nk-call-icon:hover .tip{opacity:1} @media (max-width:768px){.nk-call-icon .nk-call-ic{width:46px;height:46px}.nk-call-icon .tip{display:none}} @media (min-width:769px){.nk-call.only-mobile{display:none}} @media (prefers-reduced-motion:reduce){.nk-call-ring,.nk-call-fill,.nk-call-core,.nk-call-ic,.nk-call--multi .cyc{animation:none}.nk-call--multi .cyc:first-child{opacity:1}} /* ===================================================================== ĐIỆN MÁY X – lớp giao diện riêng (màu xanh, thẻ sản phẩm điện máy…) Màu thương hiệu: --brand (xanh). Màu giá / giảm giá: --price (đỏ). ===================================================================== */ :root{--brand:#2a83e9;--brand-d:#1b6fd1;--brand-l:#e8f2fe;--yellow:#ffd400;--price:#e30019;--orange:#f26b0a;--bg:#f2f4f7;--line:#e4e7ec;--text:#1d2939;--muted:#667085;--r:12px} body{background:var(--bg);color:var(--text)} .site-main{background:var(--bg);padding-top:12px} input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(42,131,233,.15)} /* ---- Màu giá ---- */ .pc .p-price .now,.sp-price .now,.sp-price .price ins .amount,.sp-price .price>.amount,.sp-actions .woocommerce-variation-price .price{color:var(--price)} .sp-price .off{background:#fee4e2;color:var(--price)} .pc .p-label.pre{background:#fee4e2;color:var(--price)} /* ---- Dải khuyến mãi trên cùng ---- */ .top-promo{display:block;line-height:0;overflow:hidden} .top-promo img{width:100%;height:44px;object-fit:cover;object-position:center;max-width:1920px;margin:0 auto} /* ---- Header ---- */ .site-header{background:linear-gradient(90deg,#2a83e9 0%,#3b8ff0 60%,#56a1f6 100%)} .mainbar{height:64px;gap:12px} .brand{font-size:22px;font-style:italic;gap:8px;margin-right:4px} .brand img{max-height:40px} .brand .logo-mark{width:34px;height:34px;border:0;border-radius:50%;background:var(--yellow);color:#0b2a5b;margin:0} .brand .logo-mark svg{width:20px;height:20px;fill:#0b2a5b;stroke:none} .cat-btn{background:transparent;padding:0 10px} .cat-btn:hover{background:rgba(255,255,255,.16)} .hsearch{max-width:none;flex:1;min-width:200px} .hsearch form{border-radius:999px;height:40px;padding:0 14px} .hsearch svg{color:#98a2b3} .hlink{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:14px;padding:6px 8px;border-radius:8px;white-space:nowrap} .hlink:hover{background:rgba(255,255,255,.16)} .hlink svg{width:22px;height:22px} .site-header .cart-link{background:transparent;padding:0 8px} .site-header .cart-link:hover{background:rgba(255,255,255,.16)} .cart-count{background:var(--yellow);top:0;right:0} .loc-btn{display:inline-flex;align-items:center;gap:8px;min-width:190px;height:40px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff;font-size:14px;white-space:nowrap} .loc-btn:hover{background:rgba(255,255,255,.28)} .loc-btn svg{width:18px;height:18px;flex:none}.loc-btn .chev{margin-left:auto;width:14px;height:14px;opacity:.8} .hright-m{display:none} .hkeys{background:#fff;border-bottom:1px solid var(--line)} .hkeys .wrap{display:flex;justify-content:center;gap:22px;height:36px;align-items:center;overflow-x:auto;scrollbar-width:none} .hkeys .wrap::-webkit-scrollbar{display:none} .hkeys a{font-size:13px;color:#344054;white-space:nowrap} .hkeys a:hover{color:var(--brand)} @media (max-width:1000px){ .mainbar{height:56px} .hlink .lbl,.site-header .cart-link .lbl{display:none} .login-btn{display:inline-flex} .loc-btn{display:none} .hright-m{display:flex;gap:2px} .mainbar{flex-wrap:nowrap;gap:4px} .brand{min-width:0;flex:0 1 auto;margin-right:auto} .brand img{max-height:30px;width:auto} .site-header .hbtn,.hlink{padding:0 7px;height:38px} .hkeys .wrap{justify-content:flex-start;gap:16px} .top-promo img{height:34px} .brand{font-size:19px} } /* ---- Trang chủ: banner, dải ưu đãi, lưới danh mục ---- */ .home-top{grid-template-columns:minmax(0,1fr)!important;margin-bottom:10px} .hero{border-radius:14px;box-shadow:none} .hero-tabs{display:none} .slider .slide img{aspect-ratio:1200/330} .small-banners img{border-radius:12px} .info-strip{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:10px 16px;margin:0 0 12px;font-size:13px;color:#344054;flex-wrap:wrap} .info-strip a{display:inline-flex;align-items:center;gap:8px} .info-strip img{width:24px;height:24px;object-fit:contain;flex:none} .info-strip b{color:var(--brand)} .info-strip .sep{color:#98a2b3} .cat-grid-box{background:#fff;border:2px solid #22c3d6;border-radius:18px;padding:10px 8px;margin-bottom:22px} .cat-grid{display:grid;grid-template-columns:repeat(var(--cols,8),minmax(0,1fr));gap:4px} .cat-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:12px;text-align:center;font-size:13px;color:#344054;line-height:1.3} .cat-grid a:hover{background:var(--brand-l);color:var(--brand)} .cat-grid .ic{position:relative;width:64px;height:56px;display:flex;align-items:center;justify-content:center} .cat-grid img{width:56px;height:56px;object-fit:contain} .cat-grid em{position:absolute;top:-8px;right:-16px;background:#fee4e2;color:var(--price);font-style:normal;font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;white-space:nowrap} @media (max-width:1000px){.cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.cat-grid-box{border-radius:14px}} /* ---- Tiêu đề khối có icon tròn vàng ---- */ .sec-head h2{text-transform:none;font-size:20px} .flash-title,.dmx-head{display:flex;align-items:center;gap:10px;margin:0 0 12px} .flash-title h2,.dmx-head h2{font-size:20px;margin:0;text-transform:none} .flash-title .ic,.dmx-head .ic{width:30px;height:30px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;color:#0b2a5b;flex:none} .flash-title .ic svg,.dmx-head .ic svg{width:18px;height:18px;fill:#0b2a5b;stroke:none} /* ---- Khuyến mãi online (flash sale) ---- */ .flash{padding-top:0;margin-bottom:24px} .flash-tabs{position:static;display:flex;gap:0;padding:0;background:#fff;border-radius:14px 14px 0 0;overflow:hidden} .flash-tabs button{flex:1;height:50px;margin:0;border-radius:0;background:#fff;color:#344054;font-style:normal;text-transform:none;font-size:15px;font-weight:600;box-shadow:none;border-bottom:3px solid transparent;letter-spacing:0} .flash-tabs button.is-active{height:50px;margin:0;background:#fff;color:var(--brand);border-bottom-color:var(--brand)} .flash-body{background:linear-gradient(180deg,#a9cdf9 0%,#d6e8fd 100%);border:0;border-radius:0 0 18px 18px;padding:14px;color:var(--text)} .flash-body::before{display:none} .flash-row{justify-content:flex-start;margin-bottom:12px} .countdown{background:#fff;border-radius:999px;padding:5px 6px 5px 16px;color:#0b2a5b;text-transform:none;font-size:14px;gap:5px} .countdown b{background:var(--brand);color:#fff;border-radius:6px;min-width:32px;font-size:15px} .flash-note{color:#344054} .flash .pc{border:0} /* ---- Thẻ sản phẩm ---- */ .pc{padding:12px;border-radius:12px;border:1px solid transparent;box-shadow:none;gap:0} .pc:hover{box-shadow:0 8px 24px -10px rgba(16,24,40,.28);transform:none} .pc .p-img{position:relative;aspect-ratio:1/1;margin-bottom:10px;border-radius:8px} .pc:hover .p-img img{transform:scale(1.03)} .pc .p-label{position:absolute;left:0;bottom:0;margin:0;font-size:10px} .pc .p-top{font-size:11px;color:#475467;background:#f2f4f7;border-radius:4px;padding:2px 6px;margin-bottom:6px;align-self:flex-start;line-height:1.4} .pc .p-name{font-size:13px;font-weight:500;line-height:1.4;min-height:2.8em;margin:0 0 6px;color:#1d2939} .pc .p-name a:hover{color:var(--brand)} .pc .p-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px} .pc .p-chips span{font-size:11px;color:#344054;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:4px;padding:1px 6px;line-height:1.5} .pc .p-price{margin:2px 0 2px} .pc .p-price .now{font-size:16px;font-weight:700} .pc .p-old{display:flex;gap:6px;align-items:center;font-size:13px;margin-bottom:4px} .pc .p-old s{color:#98a2b3} .pc .p-old b{color:var(--price);font-weight:500} .pc .p-gift{font-size:12px;color:#475467;margin-bottom:4px} .pc .p-rate{margin-top:auto;padding-top:4px;display:flex;align-items:center;gap:4px;font-size:12px;color:#667085} .pc .p-rate svg{width:13px;height:13px;color:#fdb022} .pc .p-rate b{color:#344054;font-weight:600} .pc .p-quota{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:4px;background:linear-gradient(90deg,#ffe066,#ffd400);color:#0b2a5b;font-size:12px;font-weight:600;border-radius:999px;height:24px} .pc .p-quota svg{width:12px;height:12px;fill:#0b2a5b;stroke:none} .pc .p-buy{display:block;text-align:center;color:var(--brand);font-weight:600;font-size:13px;margin-top:8px} .product-grid.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))} @media (max-width:1000px){.product-grid.cols-6{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){.product-grid.cols-6{grid-template-columns:repeat(2,minmax(0,1fr))}.pc{padding:10px}} /* ---- Khối ngành hàng / Gợi ý cho bạn ---- */ .cat-section{display:block} .cat-section .cs-body{background:#fff;border-radius:18px;padding:14px} .cs-tabs{box-shadow:none;border:1px solid var(--line)} .cs-tabs:has(button:only-child){display:none} .cs-tabs .is-active{background:var(--brand-l)} .cs-more a{border-radius:10px} .cat-section .product-grid .pc{border-color:#f2f4f7} /* ---- Trang danh mục ---- */ .cat-banner img{width:100%;border-radius:14px;aspect-ratio:1200/260;object-fit:cover;margin-bottom:12px} .shop-box{background:#fff;border-radius:18px;padding:14px 14px 20px;margin-bottom:16px} .shop-head{margin-bottom:10px} .shop-head h1{font-size:18px;display:flex;align-items:baseline;gap:8px;margin:0} .shop-head h1 small{font-size:13px;color:var(--muted);font-weight:400} .dm-filter .row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px} .dm-filter .fbtn{border-radius:8px;height:34px;padding:0 12px;border-color:#d0d5dd} .dm-filter .fbtn.is-active{border-color:var(--brand);color:var(--brand);background:var(--brand-l)} .brand-chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid #d0d5dd;border-radius:8px;font-weight:800;font-size:13px;color:#1e40af;background:#fff;letter-spacing:.02em;text-transform:uppercase} .brand-chip:hover,.brand-chip.is-active{border-color:var(--brand);background:var(--brand-l)} .dm-sort{display:flex;gap:16px;align-items:center;font-size:13px;margin:6px 0 14px;flex-wrap:wrap} .dm-sort span{color:#667085} .dm-sort a{color:#344054} .dm-sort a.is-active{color:var(--brand);font-weight:600} .shop-box ul.products{gap:0;border-top:1px solid #f2f4f7;border-left:1px solid #f2f4f7} .shop-box ul.products .pc{border:0;border-right:1px solid #f2f4f7;border-bottom:1px solid #f2f4f7;border-radius:0} .shop-box ul.products .pc:hover{z-index:1} .woocommerce-pagination .page-numbers{border-radius:8px} .term-description,.shop-desc{border-radius:18px;box-shadow:none} /* ---- Trang sản phẩm (bám theo bố cục trang chi tiết điện máy: trái 720 · phải 440, thanh mua cố định ở đáy) ---- */ .single-product .site-main{padding-bottom:96px} .sp-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;background:transparent;box-shadow:none;padding:4px 0 0;margin:0 0 16px} .sp-head h1{flex:0 1 auto;font-size:20px;font-weight:700;margin:0;color:#1d2939} .sp-hlink{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--brand)} .sp-hlink svg{width:15px;height:15px} .sp-grid{display:grid;grid-template-columns:minmax(0,720px) minmax(0,440px);justify-content:space-between;gap:20px;align-items:start;margin-bottom:16px} .sp-left>*{margin:0 0 20px} .sp-gallery{background:#fff;border-radius:12px;box-shadow:none;padding:16px} .sp-gallery .main{position:relative;aspect-ratio:688/470;border-radius:0;background:#fff} .sp-gallery .main img{width:100%;height:100%;object-fit:contain} .g-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:56px;display:grid;place-items:center;background:#fff;border-radius:6px;box-shadow:0 1px 6px rgba(16,24,40,.15);color:#344054;padding:0} .g-nav:hover{color:var(--brand)} .g-nav svg{width:18px;height:18px} .g-nav.prev{left:0}.g-nav.next{right:0} .g-count{position:absolute;right:4px;bottom:4px;background:#f2f4f7;color:#475467;font-size:13px;padding:2px 10px;border-radius:999px} .g-count b{font-weight:500} .sp-gallery .thumbs{display:flex;justify-content:center;gap:8px;margin-top:12px;overflow-x:auto} .sp-gallery .thumbs img{width:48px;height:48px;padding:2px;border:1px solid transparent;border-radius:4px;object-fit:contain;cursor:pointer;background:#fff} .sp-gallery .thumbs img.is-active{border-color:var(--brand)} .sp-commit{background:#fff;border-radius:12px;box-shadow:none;padding:16px} .sp-commit h3{font-size:16px;font-weight:700;margin:0 0 10px} .sp-commit ul{list-style:none;margin:0;padding:0} .sp-commit li{display:flex;gap:12px;align-items:center;font-size:14px;line-height:1.5;padding:8px 0;color:#1d2939} .sp-commit li svg{width:28px;height:28px;flex:none;color:#3b82f6;stroke-width:1.5} .sp-commit a,.sp-promo a,.sp-ship a{color:var(--brand)} .sp-specs{background:#fff;border-radius:12px;box-shadow:none;padding:20px 16px 12px} .sp-specs-title{text-align:center;margin-bottom:16px} .sp-specs-title span{display:inline-block;padding:10px 52px;border:1px solid #bcd8fb;background:#eaf3fe;color:var(--brand);border-radius:8px;font-size:16px;font-weight:600} .spec-group{margin-bottom:10px} .spec-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;background:#f2f4f7;border-radius:8px;padding:13px 12px;font-size:16px;font-weight:500;color:#1d2939} .spec-group summary::-webkit-details-marker{display:none} .spec-group summary .chev{width:18px;height:18px;transition:transform .2s} .spec-group[open] summary .chev{transform:rotate(180deg)} .spec-group table{margin:4px 0 0;font-size:14px} .spec-group th,.spec-group td{padding:11px 10px;border-bottom:1px solid #e4e7ec;background:transparent;vertical-align:top} .spec-group th{width:40%;font-weight:600;color:#1d2939} .spec-group td{color:#344054} .spec-group tr:last-child th,.spec-group tr:last-child td{border-bottom:0} .sp-desc,.sp-reviews{background:#fff;border-radius:12px;box-shadow:none;padding:16px} .sp-buy{position:sticky;top:12px;background:#fff;border-radius:12px;box-shadow:none;padding:16px} .sp-ban{display:block;margin-bottom:16px}.sp-ban img{width:100%;border-radius:8px} .sp-opts{margin-bottom:12px} .sp-opts .opts{display:flex;flex-wrap:wrap;gap:10px} .sp-opts .opt{height:36px;padding:0 18px;border:1px solid #d0d5dd;border-radius:6px;font-weight:400;font-size:13px;min-width:0;background:#fff;color:#1d2939;line-height:34px} .sp-opts .opt small{display:none} .sp-opts .opt:hover{border-color:var(--brand);color:var(--brand)} .sp-opts .opt.is-active{border-color:var(--brand);color:var(--brand);background:#f0f7ff} .sp-opts .opt.is-out{opacity:.45;border-style:dashed} .sp-loc{font-size:14px;color:#344054;margin:16px 0 8px} .sp-loc a{display:inline-flex;align-items:center;gap:4px;color:var(--brand)} .sp-loc a svg{width:14px;height:14px} .sp-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 16px} .sp-price .now{font-size:24px;font-weight:700;color:var(--price)} .sp-price .old{font-size:14px;color:#98a2b3;text-decoration:line-through} .sp-price .off{font-size:13px;background:transparent;color:var(--price);padding:0} .sp-promo{border:1px solid #d0d5dd;border-radius:12px;margin:0 0 16px;overflow:hidden} .sp-promo-h{padding:12px 16px;border-bottom:1px solid #e4e7ec} .sp-promo-h b{display:block;font-size:14px;color:#1d2939} .sp-promo-h span{font-size:13px;color:#667085} .sp-promo ol{list-style:none;counter-reset:pm;margin:0;padding:10px 16px 12px} .sp-promo li{counter-increment:pm;position:relative;padding-left:24px;margin:6px 0;font-size:14px;line-height:1.5;color:#1d2939} .sp-promo li::before{content:counter(pm);position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:#3b82f6;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center} .sp-cartform{margin:0} .sp-cartform form.cart{display:block!important;margin:0} .sp-cartform .quantity,.sp-cartform .variations,.sp-cartform .reset_variations,.sp-cartform .woocommerce-variation-price{display:none!important} .sp-cartform .single_add_to_cart_button{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0);white-space:nowrap;border:0!important} .sp-cartform .woocommerce-variation-availability .stock{font-size:13px;margin:0 0 12px} .sp-cartform .stock.out-of-stock{color:var(--price)} .sp-ship{border:0;border-top:1px solid #e4e7ec;border-radius:0;padding:16px 0 0} .sp-ship h4{font-size:16px;font-weight:700;margin:0 0 10px;color:#1d2939} .sp-addr{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--brand);padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid #e4e7ec;width:100%} .sp-addr svg{width:16px;height:16px} .sp-ship ul{list-style:none;margin:0;padding:0} .sp-ship li{display:flex;gap:8px;align-items:center;font-size:14px;line-height:1.5;padding:3px 0;color:#1d2939} .sp-ship li svg{width:18px;height:18px;flex:none;color:#475467} /* Thanh mua cố định ở đáy */ .sp-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;box-shadow:0 -4px 16px rgba(16,24,40,.1);padding:10px 0} .sp-bar-in{display:flex;align-items:center;gap:10px} .sp-bar-name{display:flex;align-items:center;gap:10px;flex:1;min-width:0} .sp-bar-name img{width:48px;height:48px;object-fit:contain;flex:none} .sp-bar-name b{font-size:20px;font-weight:700;color:#1d2939;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sp-bar-price{display:flex;flex-direction:column;align-items:flex-end;padding:0 16px;flex:none} .sp-bar-price small{font-size:14px;color:#1d2939} .sp-bar-price b{font-size:16px;font-weight:700;color:var(--price)} .sp-bar-cart{width:100px;height:48px;border:1px solid var(--brand);border-radius:8px;background:#fff;color:var(--brand);font-size:12px;font-weight:500;flex:none} .sp-bar-cart:hover{background:var(--brand-l)} .sp-bar-buy{display:inline-flex;align-items:center;justify-content:center;min-width:144px;height:48px;padding:0 24px;border-radius:8px;background:var(--price);color:#fff;font-size:16px;font-weight:500;flex:none;border:0} .sp-bar-buy:hover{filter:brightness(.93)} .sp-bar-out{color:var(--price);font-weight:600} .single-product .nk-call{bottom:calc(var(--call-b,24px) + 72px)} .single-product .back-top{bottom:84px} .related.products{margin-top:8px}.related.products>h2{text-transform:none;font-size:20px} @media (max-width:1000px){ .sp-grid{grid-template-columns:1fr} .sp-buy{position:static} .sp-head h1{font-size:18px} .sp-bar-name,.sp-bar-price small{display:none} .sp-bar-price{flex:1;align-items:flex-start;padding:0} .sp-bar-buy{min-width:0;flex:1} .sp-bar-cart{width:96px} } /* ---- Tin khuyến mãi ---- */ .promo-wrap{margin-bottom:24px} .promo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .promo-card{background:#fff;border-radius:14px;padding:12px} .promo-card .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px} .promo-card h2{font-size:15px;margin:10px 0 4px;line-height:1.45;font-weight:600} .promo-card h2 a:hover{color:var(--brand)} .promo-card .entry-meta{color:#98a2b3} .article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;margin-bottom:24px} .article{background:#fff;border-radius:14px;box-shadow:none;padding:20px 24px} .article h1{font-size:24px;margin-bottom:6px} .article .entry-meta{color:#98a2b3;margin-bottom:14px} .article .entry-meta a{color:var(--brand)} .article .lead{font-weight:600;font-size:15px;line-height:1.7} .article .entry-content h2{font-size:18px;margin-top:1.4em} .article .entry-content h3{font-size:16px;margin-top:1.2em} .article .entry-content table th,.article .entry-content table td{border:1px solid var(--line)} .article .entry-content a{color:var(--brand)} .article-side{background:#fff;border-radius:14px;padding:14px 16px;position:sticky;top:12px} .article-side h3{font-size:15px;margin-bottom:6px} .article-side ul{list-style:none;margin:0;padding:0} .article-side li a{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f2f4f7} .article-side li:last-child a{border:0} .article-side img{width:100px;height:56px;object-fit:cover;border-radius:6px;flex:none} .article-side b{font-size:13px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .article-side li a:hover b{color:var(--brand)} .article-side small{display:block;color:#98a2b3;font-size:12px;margin-top:2px} @media (max-width:900px){.promo-grid{grid-template-columns:1fr}.article-layout{grid-template-columns:1fr}.article-side{position:static}.article{padding:16px}} /* ---- Trang mặc định (page.php), tài khoản, giỏ, thanh toán: giữ form chung, đổi bo góc & nền ---- */ .box,.woocommerce-cart .woocommerce form.woocommerce-cart-form,.woocommerce-cart .woocommerce .cart-collaterals,form.checkout.woocommerce-checkout #customer_details,form.checkout.woocommerce-checkout .nk-co-side,.woocommerce-MyAccount-content,.woocommerce-MyAccount-navigation ul,.woocommerce-form-login,.woocommerce-form-register{border-radius:14px;box-shadow:none} .page-content,.entry-page{background:#fff;border-radius:14px;padding:20px 24px} /* ---- Footer ---- */ .site-footer{border-top:0} .footer-links,.copyright{background:#f9fafb} /* Breadcrumb dấu › */ .breadcrumb,.woocommerce-breadcrumb{gap:6px;font-size:14px;color:#667085} .woocommerce-breadcrumb a,.breadcrumb a{color:#667085} .woocommerce-breadcrumb .bc-sep,.breadcrumb .bc-sep{width:14px;height:14px;color:#98a2b3} .single-product .woocommerce-breadcrumb{margin-bottom:8px} /* 404 */ .e404-ic{display:grid;place-items:center;width:96px;height:96px;margin:0 auto 14px;border-radius:50%;background:var(--yellow)} .e404-ic svg{width:52px;height:52px;fill:#0b2a5b;stroke:none} /* Mobile: phiên bản, giá, khuyến mãi ngay dưới ảnh (như trang gốc) */ @media (max-width:1000px){.sp-grid{display:flex;flex-direction:column;gap:0}.sp-left{display:contents}.sp-gallery{order:1;margin-bottom:12px}.sp-buy{order:2;margin-bottom:12px}.sp-left>*:not(.sp-gallery){order:3;margin-bottom:12px}} /* ========================================================= Skin Di Động X: header vàng chữ đen, menu ngang có icon, trang tin ========================================================= */ .site-header{background:#ffd400;color:#111} .site-header .mainbar{height:62px} .cat-btn{display:none} .hsearch form{background:#fff;border:0} .hlink,.site-header .cart-link{color:#111} .hlink:hover,.site-header .cart-link:hover{background:rgba(0,0,0,.07)} .cart-count{background:#e30019;color:#fff} .loc-btn{background:rgba(0,0,0,.07);color:#111;min-width:170px} .loc-btn:hover{background:rgba(0,0,0,.12)} .site-header .hbtn{color:#111} .brand{color:#111;font-style:normal} .brand .logo-mark{background:#111;color:#ffd400}.brand .logo-mark svg{fill:none;stroke:#ffd400} /* menu ngang */ .hnav{background:#ffd400;border-top:1px solid rgba(0,0,0,.06)} .hnav ul{list-style:none;margin:0;padding:0} .hnav .wrap>ul{display:flex;justify-content:space-between;gap:4px;height:44px;align-items:stretch} .hnav .wrap>ul>li{position:relative;display:flex} .hnav .wrap>ul>li>a{display:flex;align-items:center;gap:6px;padding:0 8px;font-size:14px;color:#111;white-space:nowrap;border-radius:8px 8px 0 0} .hnav .wrap>ul>li>a img,.hnav .wrap>ul>li>a svg:not(.dd){width:22px;height:22px;flex:none} .hnav .dd{width:12px;height:12px;opacity:.7} .hnav .wrap>ul>li:hover>a{background:rgba(0,0,0,.07)} .hnav-sub{display:none;position:absolute;left:0;top:100%;z-index:90;background:#fff;border-radius:0 10px 10px 10px;box-shadow:var(--sh);padding:16px 20px;min-width:440px;grid-template-columns:repeat(2,minmax(180px,1fr));gap:12px 28px} .hnav li:nth-last-child(-n+3) .hnav-sub{left:auto;right:0;border-radius:10px 0 10px 10px} .hnav .has-sub:hover .hnav-sub,.hnav .has-sub:focus-within .hnav-sub{display:grid} .hnav-sub h4{font-size:13px;color:#111;margin:0 0 6px} .hnav-sub li a{display:block;padding:4px 0;font-size:13px;color:#444} .hnav-sub li a:hover{color:var(--brand)} @media (max-width:1000px){ .hnav .wrap>ul{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;height:auto;padding:6px 0;gap:2px} .hnav .wrap>ul::-webkit-scrollbar{display:none} .hnav .wrap>ul>li>a{flex-direction:column;gap:3px;font-size:11.5px;padding:4px 8px;border-radius:8px} .hnav .dd,.hnav-sub,.hnav .has-sub:hover .hnav-sub{display:none} .site-header .mainbar{height:56px} } /* banner chính: 2 slide cạnh nhau như trang gốc */ .slider{--per:1} .slider .slide{flex:0 0 calc(100% / var(--per))} .home-top .slider{--per:2;border-radius:0} .home-top .slider .slide{padding:0 5px} .home-top .slider .track{margin:0 -5px} .home-top .slider .slide img{aspect-ratio:800/300;border-radius:12px} .home-top .hero{border-radius:0;background:transparent} @media (max-width:760px){.home-top .slider{--per:1}} /* trang sản phẩm: 2 nút trên khối thông số */ .sp-specs-title{display:flex;justify-content:center;gap:10px} .sp-specs-title span,.sp-specs-title a{display:inline-block;padding:10px 26px;border:1px solid var(--line);background:#fff;color:#333;border-radius:8px;font-size:15px;font-weight:600} .sp-specs-title .on{border-color:#bcd8fb;background:#eaf3fe;color:var(--brand)} .sp-specs-title a:hover{border-color:var(--brand);color:var(--brand)} @media (max-width:600px){.sp-specs-title span,.sp-specs-title a{padding:9px 14px;font-size:14px}} /* trang tin */ .news-cats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px} .news-cats .lbl{font-weight:700;text-transform:uppercase;font-size:13px;margin-right:6px} .news-cats a{padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;color:#333} .news-cats a:hover,.news-cats a.on{border-color:var(--brand);color:var(--brand)} .news-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;margin-bottom:28px;align-items:start} .news-layout.is-products{grid-template-columns:minmax(0,1fr)} .news-desc{margin-bottom:12px} .news-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)} .nt-big img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px} .nt-big h2{font-size:20px;line-height:1.35;margin:10px 0 4px} .nt-big:hover h2,.nt-side a:hover h3,.nl-item h2 a:hover,.ns-posts a:hover span{color:var(--brand)} .nt-big .meta{font-size:12px;color:var(--muted)} .nt-side{display:flex;flex-direction:column;gap:12px} .nt-side a{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:start} .nt-side img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px} .nt-side h3{font-size:14px;font-weight:600;line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .news-list{display:flex;flex-direction:column} .nl-item{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)} .nl-item .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px} .nl-item h2{font-size:17px;line-height:1.4;margin:0 0 6px} .nl-item p{font-size:14px;color:#555;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .nl-item .entry-meta{font-size:12px;color:var(--muted)} .nl-item .entry-meta a{color:var(--brand)} .news-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:12px} .ns-box h3{font-size:15px;text-transform:uppercase;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid #ffd400} .ns-tags{display:flex;flex-wrap:wrap;gap:6px} .ns-tags a{font-size:13px;padding:4px 10px;background:var(--soft);border-radius:999px;color:#333} .ns-tags a:hover{background:#fff5bf} .ns-posts{list-style:none;margin:0;padding:0} .ns-posts li{padding:8px 0;border-bottom:1px dashed var(--line)} .ns-posts a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center} .ns-posts img{width:72px;height:52px;object-fit:cover;border-radius:6px} .ns-posts span{font-size:13px;font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} @media (max-width:900px){ .news-layout{grid-template-columns:minmax(0,1fr)} .news-side{position:static} .news-top{grid-template-columns:minmax(0,1fr)} .nl-item{grid-template-columns:130px minmax(0,1fr);gap:12px} .nl-item h2{font-size:15px}.nl-item p{display:none} .news-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .news-cats a,.news-cats .lbl{white-space:nowrap} } /* bài viết: 1 cột giữa */ .article-center{max-width:800px;margin:0 auto 24px;box-shadow:none;border-radius:0;padding:8px 0 0;background:transparent} .article-center h1{font-size:30px;line-height:1.3;margin-bottom:12px} .article-center .entry-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:16px} .article-center .entry-meta .av img{width:32px;height:32px;border-radius:50%} .article-center .entry-meta b{color:#111} .article-center .entry-meta a{color:var(--brand)} .article-center .lead{font-size:16px;font-weight:600;line-height:1.6} .article-center .entry-content{font-size:16px;line-height:1.8} .article-center .entry-content h2{font-size:21px;margin-top:1.2em} .entry-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px} .entry-tags a{font-size:13px;padding:4px 10px;background:var(--soft);border-radius:999px} .related-news{max-width:800px;margin:0 auto 28px;border-top:1px solid var(--line);padding-top:18px} .related-news h2{font-size:18px} .rn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .article-center-comments{max-width:800px;margin:0 auto} @media (max-width:700px){.article-center h1{font-size:23px}.rn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* trang chủ kiểu Di Động X */ .flash-title .ic,.dmx-head .ic{display:none} .flash-title h2,.dmx-head h2{font-size:20px;font-weight:700} .flash-tabs{border-bottom:1px solid var(--line)} .flash-tabs button.is-active{color:#111;border-bottom-color:#ffd400} .flash-body{background:#fff;border-radius:0 0 14px 14px} .countdown{background:#fff5bf;color:#111}.countdown b{background:#111;color:#ffd400} .pc .p-buy{color:var(--brand)} .cat-section:has(.cs-banners){display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;align-items:start} .cat-section .cs-banners img{width:100%;height:auto;border-radius:14px} .cat-section.skin-red .cs-body{background:#b5121b;padding:0 14px 16px;border-radius:18px} .cat-section.skin-red .dmx-head h2{color:#ffd400;padding-top:14px} .cat-section.skin-red .cs-tabs{background:transparent;border:0;justify-content:center;margin-bottom:10px} .cat-section.skin-red .cs-tabs button{background:#fff;color:#111;border-radius:6px;margin:0 3px} .cat-section.skin-red .cs-tabs .is-active{background:#ffd400;color:#111} .cat-section.skin-red .product-grid{gap:8px} .cat-section.skin-red .cs-more a{background:#fff} .cs-headimg{margin:0 -14px 10px;text-align:center} .cs-headimg img{width:100%;max-width:1200px;margin:0 auto;border-radius:18px 18px 0 0} body.blog,body.single-post,body.category,body.tag,body.search:not(.post-type-archive-product){background:#fff} @media (max-width:1000px){.cat-section:has(.cs-banners){grid-template-columns:minmax(0,1fr)}.cat-section .cs-banners{display:none}} .cat-grid-box{border:0;border-radius:14px} @media (max-width:760px){.cat-section.skin-red .cs-tabs{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}.cat-section.skin-red .cs-tabs::-webkit-scrollbar{display:none}.cat-section.skin-red .cs-tabs button{flex:none;white-space:nowrap;padding:8px 14px;font-size:13px}.cat-section.skin-red .cs-body{padding:0 8px 12px}.cs-headimg{margin:0 -8px 10px}} /* ---------- Giỏ hàng mini (rê chuột vào nút giỏ hàng) ---------- */ .cart-wrap{position:relative;display:flex;align-items:center;align-self:stretch} .nk-mini{display:none;position:absolute;right:0;top:100%;z-index:120;width:360px;background:#fff;color:var(--text);border-radius:12px;box-shadow:0 12px 32px -8px rgba(0,0,0,.28);text-align:left;font-size:13px;cursor:default} .nk-mini::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} @media (min-width:1001px){.cart-wrap:hover .nk-mini,.cart-wrap:focus-within .nk-mini{display:block}} .nm-head{padding:12px 16px;font-weight:700;font-size:14px;border-bottom:1px solid var(--line)} .nm-head span{color:var(--muted);font-weight:400} .nm-list{list-style:none;margin:0;padding:4px 0;max-height:320px;overflow:auto} .nm-list li{display:grid;grid-template-columns:56px minmax(0,1fr) 24px;gap:10px;align-items:center;padding:8px 16px;transition:opacity .2s} .nm-list li+li{border-top:1px dashed var(--line)} .nm-img img{width:56px;height:56px;object-fit:contain;border-radius:6px} .nm-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500;line-height:1.4;color:var(--text)} .nm-name:hover{color:var(--brand)} .nm-price{margin-top:2px;font-weight:700;color:var(--price,var(--brand))} .nm-price span{color:var(--muted);font-weight:400} .nm-del{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;line-height:1} .nm-del:hover{background:var(--soft);color:#d70018} .nm-foot{padding:12px 16px 14px;border-top:1px solid var(--line)} .nm-sub{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:14px} .nm-sub b{color:var(--price,var(--brand));font-size:16px} .nm-go{width:100%;display:flex} .nm-empty{padding:26px 16px;text-align:center;color:var(--muted)} .nm-empty svg{width:42px;height:42px;margin:0 auto 6px;opacity:.4} .nm-empty p{margin:0} /* ---------- Trang thanh toán: bảng giỏ hàng ở trên, form ở dưới ---------- */ .nk-co-cart{background:#fff;border-radius:14px;padding:16px;margin-bottom:12px;transition:opacity .2s} .nk-co-cart.is-busy{opacity:.55;pointer-events:none} .nk-co-cart h3{font-size:16px;margin:0 0 10px} .nk-co-cart h3 span{color:var(--muted);font-weight:400;font-size:14px} .nk-cart-table{margin:0} .nk-cart-table th{background:var(--soft);font-size:13px} .nk-cart-table td{vertical-align:middle} .nk-cart-table .product-thumbnail{width:80px} .nk-cart-table .product-name a{font-weight:600;color:var(--text)} .nk-cart-table .product-name a:hover{color:var(--brand)} .nk-cart-table .product-name dl{margin:4px 0 0;font-size:12px;color:var(--muted)} .nk-cart-table .product-name dl dt,.nk-cart-table .product-name dl dd{display:inline;margin:0} .nk-cart-table .product-name dl p{display:inline;margin:0} .nk-cart-table .product-subtotal{font-weight:700;color:var(--price,var(--brand))} .nk-cart-table .product-remove{width:40px;text-align:center} .nk-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff} .nk-qty button{width:32px;height:34px;font-size:18px;line-height:1;color:var(--text)} .nk-qty button:hover{background:var(--soft)} table.shop_table .nk-qty input,.nk-qty input{width:44px!important;height:34px;padding:0!important;border:0!important;border-left:1px solid var(--line)!important;border-right:1px solid var(--line)!important;border-radius:0!important;text-align:center;-moz-appearance:textfield;box-shadow:none!important} .nk-qty input::-webkit-outer-spin-button,.nk-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .nk-co-cart-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap} .nk-co-cart-foot .more{color:var(--brand);font-weight:500} .nk-co-cart-foot .nk-upd{background:#fff;color:var(--brand)!important;border:1px solid var(--brand)} /* đã có bảng giỏ hàng ở trên: cột "Đơn hàng" chỉ còn tổng tiền + vận chuyển + thanh toán */ .woocommerce-checkout #order_review .shop_table thead,.woocommerce-checkout #order_review .shop_table tbody .cart_item{display:none} .woocommerce-checkout #order_review .shop_table tfoot tr:first-child th,.woocommerce-checkout #order_review .shop_table tfoot tr:first-child td{border-top:0} @media (max-width:900px){ .nk-cart-table tr.cart_item{display:grid!important;grid-template-columns:72px minmax(0,1fr) 28px;gap:2px 10px;padding:10px 0;position:relative} .nk-cart-table td{padding:0!important;border:0} .nk-cart-table td::before{display:none} .nk-cart-table td.product-thumbnail{grid-row:1/span 3;width:auto} .nk-cart-table td.product-name,.nk-cart-table td.product-price,.nk-cart-table td.product-quantity,.nk-cart-table td.product-subtotal{grid-column:2;justify-content:flex-start!important;text-align:left!important} .nk-cart-table td.product-price{display:none!important} .nk-cart-table td.product-remove{grid-column:3;grid-row:1;position:static} .nk-cart-table td.product-quantity{grid-row:3} .nk-cart-table td.product-subtotal{grid-row:2} .nk-cart-table .product-thumbnail img{width:72px;height:72px} } .woocommerce-checkout .woocommerce-message:has(a.wc-forward){display:none} /* Thanh toán: SĐT + email chung 1 dòng (mỗi ô 50%) */ .woocommerce-checkout #billing_phone_field,.woocommerce-checkout #billing_email_field{display:inline-block!important;width:calc(50% - 6px)!important;vertical-align:top;clear:none} .woocommerce-checkout #billing_phone_field{margin-right:12px!important} /* Thêm vào giỏ xong: giỏ hàng mini tự sổ ra (JS thêm .is-open .just-added vào .cart-wrap) */ .cart-wrap.is-open .nk-mini{display:block;animation:nkDrop .18s ease-out} @keyframes nkDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .cart-wrap.just-added .nm-head::before{content:"✓ Đã thêm vào giỏ hàng";display:block;margin:-12px -16px 10px;padding:9px 16px;background:#ecfdf3;color:#067647;font-weight:600;font-size:13px;border-radius:12px 12px 0 0} @media (max-width:1000px){.cart-wrap.is-open .nk-mini{position:fixed;left:8px;right:8px;top:64px;width:auto;max-height:calc(100vh - 80px);overflow:auto}} .nk-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;box-shadow:0 10px 30px -8px rgba(0,0,0,.3);max-width:calc(100vw - 32px);margin:0!important} .single_add_to_cart_button.loading{opacity:.6;pointer-events:none} /* ---------- Nút liên hệ (tắt giỏ hàng / sản phẩm chưa có giá) ---------- */ .nk-contact{display:flex;gap:8px;margin:0 0 12px} .nk-contact .nk-cbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 14px;border-radius:8px;background:var(--brand);color:#fff;font-weight:700;font-size:15px;text-decoration:none;text-align:center;line-height:1.25} .nk-contact .nk-cbtn:hover{filter:brightness(.93);color:#fff} .nk-contact .nk-cbtn svg{width:18px;height:18px;flex:none} .nk-contact .nk-cbtn.zalo{background:#0068ff} .nk-contact .zl{font-style:normal;font-size:10px;font-weight:800;background:#fff;color:#0068ff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;flex:none} .nk-contact-card,.nk-contact-bar{margin:0} .nk-contact-card{margin-top:8px} .nk-contact-card .nk-cbtn{min-height:34px;font-size:13px;padding:0 8px;border-radius:6px} .nk-contact-card .zl{width:20px;height:20px;font-size:8px} .nk-contact-bar .nk-cbtn{min-height:44px} .nk-contact-icon{margin:0;gap:6px} .nk-contact-icon .nk-cbtn{min-height:36px;width:42px;flex:none;padding:0;border-radius:6px} .nk-contact .nk-cbtn span{white-space:nowrap} .nk-contact-page .nk-cbtn span{white-space:normal} /* ---------- Header dính khi cuộn: thu gọn, giấu các hàng phụ (dùng chung mọi giao diện) ---------- */ body .site-header.site-header{position:sticky;top:var(--wp-admin--admin-bar--height,0);z-index:70;transition:box-shadow .2s} @media (max-width:600px){body.admin-bar .site-header{top:0}} /* thanh admin trên mobile không dính */ .site-header.is-stuck{box-shadow:0 4px 16px -8px rgba(0,0,0,.28)} .site-header.is-stuck .topbar,.site-header.is-stuck .hkeys,.site-header.is-stuck .hnav,.site-header.is-stuck .ns-navrow,.site-header.is-stuck .ns-cta,.site-header.is-stuck .ns-fav{display:none!important} /* ---------- Icon giỏ hàng trước chữ ở nút Thêm vào giỏ rộng (trang sản phẩm, thanh mua dưới đáy) ---------- */ form.cart .single_add_to_cart_button,.sp-bar-cart{display:inline-flex!important;align-items:center;justify-content:center;gap:8px} form.cart .single_add_to_cart_button::before,.sp-bar-cart::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.3'/%3E%3Ccircle cx='20' cy='21' r='1.3'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.3'/%3E%3Ccircle cx='20' cy='21' r='1.3'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat} form.cart .single_add_to_cart_button.loading::before{opacity:.5} .sp-bar-cart{min-width:158px;white-space:nowrap;padding:0 16px} @media (max-width:640px){.sp-bar-cart{min-width:0;padding:0 10px}.sp-bar-cart::before{width:16px;height:16px}} @media (max-width:640px){.sp-bar-cart{white-space:normal;line-height:1.2}.sp-bar-cart::before{display:none}} /* ---------- Banner dọc nổi 2 bên: chỉ khi màn hình đủ rộng cho khung 1200px + 2 banner ---------- */ .nk-side-ban{display:none} @media (min-width:1460px){ .nk-side-ban{display:block;position:fixed;top:150px;z-index:40;width:110px;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px -8px rgba(0,0,0,.25)} .nk-side-ban.left{right:calc(50% + 600px + 14px)} .nk-side-ban.right{left:calc(50% + 600px + 14px)} .nk-side-ban img{width:100%;height:auto;display:block} } @media (min-width:1640px){.nk-side-ban{width:150px}} /* ========================================================= Box trang chủ kiểu TGDĐ (dienmay3) ========================================================= */ .tgf,.tgt,.tgk{background:#fff;border-radius:12px;margin-bottom:20px} .tgf{padding:0 0 14px;overflow:hidden} /* hàng tab */ .tgf-tabs{display:flex;align-items:stretch;border-bottom:1px solid #eee;overflow-x:auto;scrollbar-width:none} .tgf-tabs::-webkit-scrollbar{display:none} .tgf-tabs button{flex:1 0 auto;min-width:118px;height:58px;padding:0 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:15px;color:#333;border-bottom:3px solid transparent;background:#fff;white-space:nowrap} .tgf-tabs button b{font-weight:400} .tgf-tabs button.is-active{background:#fff7e6;border-bottom-color:#f79009} .tgf-tabs .t-fs b{font:italic 900 17px/1 var(--font);color:#e30019;letter-spacing:.3px} .tgf-tabs .t-fs small{background:#e30019;color:#fff;font-weight:800;font-size:12px;padding:2px 8px;border-radius:3px;line-height:1.3} .tgf-tabs .t-online b{font:900 15px/1 var(--font);color:#fb5a1e} .tgf-tabs .t-online small{background:#fb5a1e;color:#fff;font-weight:700;font-size:11px;padding:2px 6px;border-radius:3px;line-height:1.3} /* đồng hồ cam */ .tgf-cd{width:max-content;margin:18px auto 16px;background:#f79009;border-radius:14px;padding:8px 22px 9px;text-align:center;color:#fff;box-shadow:0 4px 0 #fff3dd,0 6px 14px -6px rgba(247,144,9,.6)} .tgf-cd span{display:block;font-size:16px;margin-bottom:3px} .tgf-cd .cd{display:flex;gap:4px;align-items:center;justify-content:center;font-weight:700} .tgf-cd .cd b{background:#fff;color:#111;border-radius:5px;min-width:26px;height:24px;display:grid;place-items:center;font-size:15px} /* lưới 2 hàng cuộn ngang */ .tgf .hs-wrap{padding:0 14px} .tgf-grid{display:grid!important;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:calc((100% - 50px) / 6);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .tgf-grid::-webkit-scrollbar{display:none} .tgf-grid .pc{scroll-snap-align:start;border:1px solid #e9eaec;border-radius:8px;padding:10px} @media (max-width:1000px){.tgf-grid{grid-auto-columns:calc((100% - 20px) / 3)}} @media (max-width:640px){.tgf-grid{grid-auto-columns:calc((100% - 10px) / 2)}} /* thanh suất đốm lửa + nút Mua ngay */ .pc .p-quota.tg{position:relative;display:block;height:20px;border-radius:999px;background:#ffeec2;margin:8px 0 0 8px;overflow:visible} .pc .p-quota.tg i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#ffcc4d,#ffb800)} .pc .p-quota.tg img{position:absolute;left:-8px;top:-6px;width:22px;height:auto;z-index:2} .pc .p-quota.tg span{position:relative;z-index:1;display:block;text-align:center;font-size:12px;line-height:20px;color:#333;font-weight:500} .pc .p-buy{display:block;margin-top:10px;background:#eaf3ff;color:#2f80ed!important;border-radius:6px;padding:7px 0;font-size:15px;font-weight:600} .pc .p-buy:hover{background:#d6e8ff} /* Deal đẹp có hạn */ .tgd{margin-bottom:20px} .tgd-head{line-height:0;text-align:center} .tgd-head img{width:100%;height:auto;max-width:1200px;margin:0 auto} .tgd-title{text-align:center;color:#fff;background:#c4161c;margin:0;padding:16px;border-radius:12px 12px 0 0;font-size:26px} .tgd-body{background:#c30d0d;border-radius:0 0 14px 14px;padding:16px 14px 18px;margin-top:-2px} .tgd-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:16px} .tgd-tabs button{background:#fff;color:#333;border-radius:8px;padding:9px 14px;font-size:14px;border:1px solid #eee} .tgd-tabs button.is-active{background:#2f80ed;color:#fff;border-color:#2f80ed} .tgd .product-grid{gap:8px} .tgd .pc{background:#fff;border-radius:8px} .tgd-more{display:table;margin:16px auto 0;background:#fff;color:#2f80ed;border-radius:8px;padding:8px 18px;font-size:14px} .tgd-more svg{width:12px;height:12px;vertical-align:-1px} @media (max-width:640px){.tgd-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.tgd-tabs button{flex:none;white-space:nowrap}} /* Mua online – ô ảnh */ .tgt{padding:14px 14px 10px} .tgt h2,.tgk h2{font-size:20px;font-weight:600;margin:0 0 12px} .tgt-row{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 70px) / 8);gap:10px;overflow-x:auto;scrollbar-width:none} .tgt-row::-webkit-scrollbar{display:none} .tgt-row a{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center} .tgt-row .im{display:block;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#f3f4f6} .tgt-row .im img{width:100%;height:100%;object-fit:cover} .tgt-row b{font-size:13px;font-weight:400;line-height:1.35;color:#333;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tgt-row a:hover b{color:#2f80ed} @media (max-width:1000px){.tgt-row{grid-auto-columns:calc((100% - 30px) / 4)}} /* Gian hàng ưu đãi + banner lớn */ .tgs h2,.tgw h2{font-size:20px;font-weight:600;margin:0 0 12px} .tgs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .tgs-grid img{width:100%;aspect-ratio:380/500;object-fit:cover;border-radius:8px} .tgw img{width:100%;height:auto;border-radius:10px} @media (max-width:760px){.tgs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Mọi người cũng tìm kiếm */ .tgk{padding:14px} .tgk .keys{display:flex;flex-wrap:wrap;gap:8px} .tgk .keys a{background:#f2f4f7;border-radius:6px;padding:5px 10px;font-size:13px;color:#555} .tgk .keys a:hover{background:#e7f0ff;color:#2f80ed} /* Banner trượt 2 ảnh: ảnh TGDĐ 1344×448 (3:1) */ .home-top .slider .slide img{aspect-ratio:3/1} /* ========================================================= Footer kiểu TGDĐ ========================================================= */ .site-footer.tg-footer{background:#fff;color:#333;padding:0;margin-top:24px;border-top:1px solid #eee} .tgft-cols{display:grid;grid-template-columns:1fr 1fr 1.15fr 1fr;gap:24px;padding:26px 12px 18px} .tgft-cols h4{font-size:15px;font-weight:700;margin:0 0 10px;color:#222} .tgft-cols ul{list-style:none;margin:0 0 14px;padding:0} .tgft-cols li{font-size:14px;line-height:1.5;padding:4px 0;color:#333} .tgft-cols li b{color:#2f80ed;font-weight:700} .tgft-cols a{color:#333} .tgft-cols a:hover{color:#2f80ed} .tgft-cols ul.more{max-height:195px;overflow:hidden} .tgft-cols ul.more.is-open{max-height:none} .tgft-more{color:#2f80ed;font-size:14px;padding:0;background:none;margin-top:-8px} .tgft-cols .sites li a{color:#2f80ed} .tgft-cols .socials{display:flex;gap:10px;margin-bottom:14px} .tgft-cols .socials img{width:28px;height:28px} .tgft-cols .badges{display:flex;gap:10px;flex-wrap:wrap} .tgft-copy{border-top:1px solid #eee;background:#fff} .tgft-copy .wrap{padding:12px;font-size:12px;color:#777;line-height:1.6} .tgft-copy p{margin:0 0 4px} @media (max-width:900px){.tgft-cols{grid-template-columns:1fr 1fr}} @media (max-width:560px){.tgft-cols{grid-template-columns:1fr}} .cat-section .cs-banners img,.cat-section .cs-banners img.tall{aspect-ratio:auto!important;height:auto!important;object-fit:contain} .tgs-grid{align-items:start} .tgs-grid img{aspect-ratio:auto;height:auto;object-fit:contain} /* ========================================================= Màu đổi được (inc/colors.php): --brand / --hd (+ chữ tự tương phản --on-brand / --hd-t) ========================================================= */ body .site-header{background:var(--hd)!important;color:var(--hd-t)} .site-header .hlink,.site-header .cart-link,.site-header .hbtn,.site-header .loc-btn,.site-header .brand,.site-header .topbar,.site-header .topbar a,.site-header .links a{color:var(--hd-t)} .btn,.button,input[type=submit],.woocommerce a.button,.woocommerce button.button{background:var(--brand);color:var(--on-brand)!important} .btn:hover,.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--brand-d)} .nk-contact .nk-cbtn:not(.zalo){background:var(--brand);color:var(--on-brand)} .hnav{background:var(--hd)} .hnav .wrap>ul>li>a{color:var(--hd-t)} .ns-box h3{border-bottom-color:var(--hd)} .flash-tabs button.is-active{border-bottom-color:var(--hd)} .countdown b{color:var(--hd)} .brand .logo-mark{color:var(--hd)}.brand .logo-mark svg{stroke:var(--hd)} .pc .p-buy{color:var(--brand)!important;background:var(--brand-l)} .tgd-tabs button.is-active{background:var(--brand);border-color:var(--brand);color:var(--on-brand)} .tgd-more,.tgt-row a:hover b,.tgk .keys a:hover,.tgft-cols li b,.tgft-cols a:hover,.tgft-more,.tgft-cols .sites li a{color:var(--brand)} .tgk .keys a:hover{background:var(--brand-l)} .nk-side-ban{z-index:90} /* ========================================================= Điện Máy 5 – kiểu MediaMart (màu theo --hd / --brand) ========================================================= */ .top-promo img{height:auto;max-height:70px;width:auto;max-width:100%;margin:0 auto} .mm-header .mainbar{height:74px;gap:18px} .mm-header .brand img{max-height:44px;width:auto} .mm-hl{display:flex;align-items:center;gap:8px;color:var(--hd-t);white-space:nowrap} .mm-hl svg{width:24px;height:24px;flex:none} .mm-hl span{display:flex;flex-direction:column;line-height:1.25} .mm-hl b{font-size:14px;display:flex;align-items:center;gap:3px}.mm-hl b .chev{width:12px;height:12px} .mm-hl small{font-size:12px;opacity:.9} .mm-header .cart-link .lbl{display:inline} .mm-header .hsearch{flex:1;min-width:240px;max-width:none;display:flex;flex-direction:column;gap:4px} .mm-links{display:flex;justify-content:flex-end;gap:14px;font-size:12px} .mm-links a{color:var(--hd-t);opacity:.95} .mm-header .hsearch form{display:flex;align-items:center;height:36px;border-radius:4px;background:#fff;padding:0 4px 0 12px;border:0} .mm-header .hsearch input[type=search]{border:0!important;padding:0!important;height:34px;box-shadow:none!important;background:transparent} .mm-header .hsearch button{width:32px;height:32px;display:grid;place-items:center;color:#555} .mm-header .hsearch button svg{width:18px;height:18px} .mm-nav{background:var(--hd-d)} .mm-nav .wrap{display:flex;align-items:center;gap:24px;height:40px} .mm-nav .cat-btn{display:inline-flex!important;align-items:center;gap:8px;height:40px;padding:0 14px;background:rgba(0,0,0,.18);color:var(--hd-t);font-size:13px;font-weight:700;border-radius:0} .mm-nav .cat-btn svg{width:18px;height:18px}.mm-nav .cat-btn .dd{width:12px;height:12px} .mm-keys{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;white-space:nowrap} .mm-keys::-webkit-scrollbar{display:none} .mm-keys a{color:var(--hd-t);font-size:13px} .mm-nav .catmenu{top:100%} @media (max-width:1000px){.mm-hl,.mm-links,.mm-header .cart-link .lbl{display:none}.mm-nav .cat-btn{display:none!important}.mm-nav .wrap{height:36px}.mm-header .mainbar{height:58px}} /* banner chính 1 slide full khung */ .home-top .slider{--per:1} .home-top .slider .slide{padding:0}.home-top .slider .track{margin:0} .home-top .slider .slide img{aspect-ratio:1200/365;border-radius:6px} /* hàng icon */ .mmi{display:flex;align-items:center;gap:8px;background:#fff;border-radius:6px;padding:8px 10px;margin-bottom:14px} .mmi .badge img{width:150px;height:auto} .mmi .row{display:flex;flex:1;justify-content:space-between;gap:6px;overflow-x:auto;scrollbar-width:none} .mmi .row::-webkit-scrollbar{display:none} .mmi .row a{display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.25;color:#333;min-width:110px} .mmi .row img{width:38px;height:38px;object-fit:contain;flex:none} .mmi .row a:hover{color:var(--brand)} /* hot deal */ .mmh{background:var(--brand);border-radius:8px;padding:0 10px 12px;margin-bottom:22px} .mmh-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:80px} .mmh-head .im img{max-height:80px;width:auto;display:block} .mmh-head .tx{display:flex;align-items:baseline;gap:14px;color:var(--on-brand)} .mmh-head .tx b{font:900 30px/1 var(--font);text-transform:uppercase} .mmh-head .tx span{font-size:17px;font-weight:600;color:#ffe066} .mmh-cd{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--on-brand);padding-right:6px} .mmh-cd span{font-weight:800;font-size:19px} .mmh-cd .cd{display:flex;gap:4px;align-items:center} .mmh-cd .cd b{background:#fff;color:#111;border-radius:4px;min-width:34px;height:32px;display:grid;place-items:center;font-size:16px} .mmh-cd em{font-style:normal;font-weight:700} .mmh .hs-wrap{padding:0} .mmh .tgf-grid .pc{border:0} @media (max-width:640px){.mmh-head{flex-direction:column;align-items:stretch;padding:8px 0}.mmh-head .im img{width:100%;height:auto}} /* thẻ sản phẩm: nút Mua ngay đỏ kiểu MediaMart */ .pc .p-buy{background:var(--brand);color:var(--on-brand)!important;border-radius:4px;padding:6px 0;font-size:14px;font-weight:600} .pc .p-buy:hover{background:var(--brand-d)} /* tiêu đề + banner */ .mmb h2{font-size:17px;font-weight:700;text-transform:uppercase;margin:0 0 10px} .mmb .grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px} .mmb .grid img{width:100%;height:auto;border-radius:6px} @media (max-width:760px){.mmb .grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* khung danh mục tiêu đề màu */ .mmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .mmp .pn{grid-column:span var(--w);background:#fff;border-radius:6px;overflow:hidden} .mmp .pn-head{display:block;line-height:0} .mmp .pn-head img{width:100%;height:auto;aspect-ratio:1200/175;object-fit:cover;object-position:left} .mmp .pn-head b{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:18px;padding:12px 14px;line-height:1.2} .mmp .pn-head b span{font-size:13px;color:#ffe066;font-weight:600} .mmp .pn-grid{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:8px;padding:8px} .mmp .pn-grid .pc{border:1px solid #f0f0f0} @media (max-width:1000px){.mmp{grid-template-columns:minmax(0,1fr)}.mmp .pn{grid-column:auto}.mmp .pn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* vì sao mua */ .mmw{background:#fff;border-radius:8px;padding:14px 16px 18px} .mmw h2{display:flex;align-items:center;gap:8px;font-size:15px;text-transform:uppercase;margin:0 0 12px} .mmw h2 svg{width:20px;height:20px;color:var(--brand)} .mmw .rs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px} .mmw .rs>div,.mmw .ns .row>div{display:flex;align-items:center;gap:10px} .mmw .rs i{width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;flex:none} .mmw .rs i svg{width:20px;height:20px} .mmw p{margin:0;font-size:12.5px;line-height:1.35;color:#444} .mmw p b{display:block;font-size:13px;color:#111} .mmw .ns{background:#f3f4f6;border-radius:8px;padding:14px} .mmw .ns h3{text-align:center;color:var(--brand);font-size:15px;text-transform:uppercase;margin:0 0 12px} .mmw .ns .row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;background:#fff;border-radius:8px;padding:14px} .mmw .ns i{color:var(--brand)}.mmw .ns i svg{width:30px;height:30px} .mmw .ns b{color:var(--brand);font-size:15px} @media (max-width:900px){.mmw .rs,.mmw .ns .row{grid-template-columns:repeat(2,minmax(0,1fr))}} /* tin khuyến mại + video */ .mmn{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;background:#fff;border-radius:8px;padding:14px 16px} .mmn .hd{display:flex;align-items:baseline;gap:12px;margin-bottom:10px} .mmn .hd h2{font-size:16px;text-transform:uppercase;margin:0} .mmn .hd a{font-size:13px;color:var(--brand)} .mmn .l .bd{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px} .mmn .big img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px} .mmn .big h3{font-size:16px;line-height:1.4;margin:8px 0 0} .mmn ul{list-style:none;margin:0;padding:0} .mmn li{padding:6px 0;border-bottom:1px solid #f2f2f2} .mmn li a{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;font-size:13.5px;line-height:1.4} .mmn li img{width:92px;height:56px;object-fit:cover;border-radius:4px} .mmn a:hover h3,.mmn li a:hover span{color:var(--brand)} .mmn .r .big h3{font-size:14px} @media (max-width:900px){.mmn,.mmn .l .bd{grid-template-columns:minmax(0,1fr)}} @media (max-width:1000px){.mm-header .brand{flex:none;margin-right:auto}.mm-header .brand img{max-height:32px}.mm-header .hsearch{display:none}.mm-header .hsearch.is-open{display:flex;position:absolute;left:12px;right:12px;top:58px;z-index:80}.mm-header .hsearch.is-open .mm-links{display:none}} /* ========================================================= Điện Máy 6 – gia dụng thông minh (vàng / đen) ========================================================= */ body{background:#f6f6f6} .gd-top{background:#1f1f1f;color:#fff;font-size:12.5px} .gd-top .wrap{display:flex;justify-content:space-between;align-items:center;height:32px;gap:16px} .gd-top .msg{display:flex;gap:18px;overflow:hidden;white-space:nowrap} .gd-top .msg b{color:#ffd400} .gd-top .lk{display:flex;gap:14px;white-space:nowrap} .gd-top .lk a{display:inline-flex;align-items:center;gap:4px;color:#fff}.gd-top .lk svg{width:13px;height:13px} .gd-header .mainbar{height:auto;min-height:84px;padding:10px 12px;gap:22px} .gd-header .brand img{max-height:48px;width:auto} .gd-header .hsearch{flex:1;max-width:none;display:flex;flex-direction:column;gap:5px} .gd-header .hsearch form{display:flex;align-items:center;height:40px;border-radius:4px;background:#fff;padding:0 0 0 14px;border:0;overflow:hidden} .gd-header .hsearch input[type=search]{border:0!important;padding:0!important;height:40px;box-shadow:none!important;background:transparent} .gd-header .hsearch button{width:56px;height:40px;background:#1f1f1f;color:#fff;display:grid;place-items:center} .gd-header .hsearch button svg{width:18px;height:18px} .gd-keys{display:flex;gap:14px;font-size:12px;overflow:hidden;white-space:nowrap} .gd-keys a{color:var(--hd-t);opacity:.75} .gd-hot{display:flex;align-items:center;gap:8px;background:#1f1f1f;color:#fff;border-radius:999px;padding:6px 16px 6px 8px;white-space:nowrap} .gd-hot svg{width:28px;height:28px;background:#fff;color:#1f1f1f;border-radius:50%;padding:6px} .gd-hot span{display:flex;flex-direction:column;line-height:1.15}.gd-hot small{font-size:11px;opacity:.8}.gd-hot b{font-size:14px} .gd-header .cart-link .lbl{display:none} .gd-header .cart-link svg{width:28px;height:28px} .gd-header .cart-count{background:#e11d1d;color:#fff} .gd-nav{background:#fff;border-bottom:1px solid #eee} .gd-nav .wrap{display:flex;align-items:center;gap:20px;height:44px} .gd-nav .cat-btn{display:inline-flex!important;align-items:center;gap:8px;background:transparent;color:#111;font-weight:700;font-size:13px;padding:0} .gd-nav .cat-btn svg{width:18px;height:18px}.gd-nav .dd{width:11px;height:11px;opacity:.7} .gd-menu{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex:1;justify-content:space-between} .gd-menu>li{position:relative} .gd-menu>li>a{display:flex;align-items:center;gap:4px;line-height:44px;font-size:13px;font-weight:700;text-transform:uppercase;color:#222;white-space:nowrap} .gd-menu>li>a:hover{color:#d4a700} .gd-menu .sub{display:none;position:absolute;left:0;top:100%;z-index:90;background:#fff;box-shadow:var(--sh);border-radius:6px;padding:8px 0;min-width:220px} .gd-menu .has-sub:hover .sub{display:block} .gd-menu .sub a{display:block;padding:7px 14px;font-size:13.5px} .gd-menu .sub a:hover{background:var(--brand-l)} @media (max-width:1000px){.gd-top .lk,.gd-hot,.gd-keys,.gd-nav{display:none}.gd-top .msg span:not(:first-child){display:none}.gd-header .mainbar{min-height:60px;padding:6px 12px}.gd-header .brand{flex:none;margin-right:auto}.gd-header .brand img{max-height:34px}.gd-header .hsearch{display:none}.gd-header .hsearch.is-open{display:flex;position:absolute;left:12px;right:12px;top:60px;z-index:80}} /* banner */ .gdh{display:grid;grid-template-columns:minmax(0,2.63fr) minmax(0,1fr);gap:12px;margin:14px 0 18px} .gdh.one{grid-template-columns:minmax(0,1fr)} .gdh .slider{--per:1;border-radius:10px}.gdh .slider .slide img{width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:10px} .gdh .side{display:grid;gap:12px}.gdh .side img{width:100%;height:100%;object-fit:cover;border-radius:10px} @media (max-width:900px){.gdh{grid-template-columns:minmax(0,1fr)}.gdh .side{grid-template-columns:1fr 1fr}} /* ô danh mục */ .gdc{background:#fff;border-radius:12px;padding:16px 14px;margin-bottom:22px} .gdc .row{display:flex;justify-content:space-between;gap:10px;overflow-x:auto;scrollbar-width:none} .gdc a{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:84px;font-size:13px;color:#333} .gdc i{width:84px;height:84px;border-radius:10px;background:var(--brand);display:grid;place-items:center;overflow:hidden} .gdc img{width:100%;height:100%;object-fit:cover} .gdc a:hover span{color:#d4a700} /* gợi ý cho bạn */ .gdt{background:#fff;border-radius:12px;padding:16px 18px 20px;margin-bottom:24px} .gdt h2{text-align:center;color:#e11d1d;font-size:18px;text-transform:uppercase;margin:0 0 12px} .gdt .tabs{display:flex;gap:24px;border-bottom:1px solid #eee;margin:0 0 14px} .gdt .tabs button{padding:8px 4px;color:#777;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px} .gdt .tabs button.is-active{color:#e11d1d;border-bottom-color:#e11d1d} /* khối danh mục thanh đen */ .gdr{background:#fff;border-radius:12px;overflow:hidden;margin-bottom:24px;padding-bottom:16px} .gdr .bar{display:flex;justify-content:space-between;align-items:center;background:#1f1f1f;padding:0 16px;height:46px;border-radius:12px 12px 0 0} .gdr .bar h2{color:#fff;font-size:16px;text-transform:uppercase;margin:0} .gdr .bar em{font-style:normal;color:var(--brand)} .gdr .bar a{color:var(--brand);font-size:13px;font-weight:600} .gdr .hs-wrap{padding:14px 14px 0} .gdr-row{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 70px) / 8);gap:10px;overflow-x:auto;scrollbar-width:none} .gdr-row::-webkit-scrollbar{display:none} @media (max-width:1000px){.gdr-row{grid-auto-columns:calc((100% - 20px) / 3)}} @media (max-width:640px){.gdr-row{grid-auto-columns:calc((100% - 10px) / 2)}} /* thẻ sản phẩm gọn: ảnh, % góc, tên, giá đỏ, giá gốc, đã bán */ .pc{border:1px solid #eee;border-radius:8px;padding:8px;position:relative} .pc .p-top,.pc .p-chips,.pc .p-gift{display:none} .pc .p-name{font-size:13px;font-weight:600;min-height:2.8em} .pc .p-price .now{color:#e11d1d;font-size:15px} .pc .p-old b{position:absolute;top:8px;right:8px;background:#e11d1d;color:#fff;font-size:11px;font-weight:700;padding:1px 6px;border-radius:3px} .pc .p-rate svg,.pc .p-rate b{display:none} .pc .p-rate span{font-size:12px;color:#777} /* tin tức */ .gdn h2{text-align:center;font-size:22px;text-transform:uppercase;margin:6px 0 16px} .gdn .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .gdn article{background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden} .gdn .im img{width:100%;aspect-ratio:16/9;object-fit:cover} .gdn .bd{padding:12px 14px 14px} .gdn time{font-size:12px;color:#888} .gdn h3{font-size:15px;line-height:1.4;margin:4px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .gdn p{font-size:13.5px;color:#555;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .gdn .more{color:#2563eb;font-size:13px} .gdn .all{text-align:center;margin:20px 0 10px} .gdn .all a{display:inline-block;background:var(--brand);color:var(--on-brand);font-weight:700;text-transform:uppercase;padding:10px 26px;border-radius:4px} @media (max-width:900px){.gdn .grid{grid-template-columns:minmax(0,1fr)}} /* footer */ .tgft-cols h4{text-transform:uppercase} .gdt [data-panel][hidden]{display:none!important} .tgft-cols li b{color:#e11d1d} .sp-promo a,.sp-hlink,.sp-addr,.sp-ship a,.sp-commit a,.cs-more a,.desc-toggle button,.woocommerce a:not(.button),.entry-content a{color:var(--brand)} /* ========================================================= TMĐT – bố cục sàn thương mại điện tử (cam) ========================================================= */ body{background:#f5f5f5} body .site-header.sp-header{background:linear-gradient(-180deg,var(--hd),color-mix(in srgb,var(--hd) 70%,#ff8a3d))!important;color:var(--hd-t)} .sp-topnav{display:flex;justify-content:space-between;align-items:center;height:34px;font-size:13px} .sp-topnav .l,.sp-topnav .r{display:flex;align-items:center;gap:8px;white-space:nowrap} .sp-topnav a{color:var(--hd-t);display:inline-flex;align-items:center;gap:4px}.sp-topnav svg{width:15px;height:15px} .sp-topnav span{opacity:.6} .sp-header .mainbar{height:auto;min-height:86px;padding:10px 12px 14px;gap:36px;align-items:flex-start} .sp-header .brand{padding-top:4px}.sp-header .brand img{max-height:50px;width:auto} .sp-header .hsearch{flex:1;max-width:none;display:flex;flex-direction:column;gap:6px} .sp-header .hsearch form{display:flex;align-items:center;height:42px;background:#fff;border-radius:3px;padding:3px;border:0} .sp-header .hsearch input[type=search]{border:0!important;padding:0 10px!important;height:36px;box-shadow:none!important} .sp-header .hsearch button{width:62px;height:36px;border-radius:2px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center} .sp-header .hsearch button svg{width:18px;height:18px} .sp-keys{display:flex;gap:14px;font-size:12px;overflow:hidden;white-space:nowrap}.sp-keys a{color:var(--hd-t);opacity:.9} .sp-header .cart-link{margin-top:8px}.sp-header .cart-link .lbl{display:none}.sp-header .cart-link svg{width:30px;height:30px} .sp-header .cart-count{background:#fff;color:var(--brand);border:2px solid var(--hd)} .sp-header .catmenu-wrap{position:absolute;left:12px;top:100%} @media (max-width:1000px){.sp-topnav{display:none}.sp-header .mainbar{min-height:56px;padding:6px 12px;gap:8px;align-items:center}.sp-header .brand{flex:none;margin-right:auto;padding:0}.sp-header .brand img{max-height:34px}.sp-header .hsearch{display:none}.sp-header .hsearch.is-open{display:flex;position:absolute;left:12px;right:12px;top:56px;z-index:80}.sp-header .cart-link{margin:0}} .site-header.is-stuck .sp-topnav,.site-header.is-stuck .sp-keys{display:none} /* banner + icon tiện ích */ .gdh{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:5px;margin:20px 0 0;background:transparent} .gdh .slider{--per:1;border-radius:2px}.gdh .slider .slide img{width:100%;aspect-ratio:1200/470;object-fit:cover;border-radius:2px} .gdh .side{display:grid;gap:5px}.gdh .side img{width:100%;height:100%;object-fit:cover;border-radius:2px} @media (max-width:900px){.gdh{grid-template-columns:minmax(0,1fr)}.gdh .side{grid-template-columns:1fr 1fr}} .sps{display:flex;justify-content:space-around;gap:6px;background:#fff;padding:14px 8px 10px;margin:0 0 20px;overflow-x:auto;scrollbar-width:none} .sps a{display:flex;flex-direction:column;align-items:center;gap:8px;width:110px;flex:none;text-align:center;font-size:13px;line-height:1.3;color:#222} .sps img{width:46px;height:46px} /* danh mục */ .spc{background:#fff;margin-bottom:20px} .spc h2,.spt .hd h2{font-size:16px;font-weight:500;color:rgba(0,0,0,.54);text-transform:uppercase;margin:0;padding:16px 20px;border-bottom:1px solid #eee} .spc .grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:120px;overflow-x:auto;scrollbar-width:none} .spc .grid a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-right:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;text-align:center;font-size:13px;color:#222} .spc .grid a:hover{box-shadow:0 0 6px rgba(0,0,0,.12);z-index:1} .spc i{width:84px;height:84px;border-radius:50%;overflow:hidden;background:#f5f5f5;display:grid;place-items:center} .spc i img{width:80%;height:80%;object-fit:contain} /* flash sale */ .spf{background:#fff;margin-bottom:20px} .spf .hd{display:flex;align-items:center;gap:14px;padding:14px 20px} .spf .fs{font:italic 900 26px/1 var(--font);color:var(--brand);letter-spacing:.5px} .spf .cd{display:flex;gap:4px}.spf .cd b{background:#000;color:#fff;min-width:26px;height:24px;display:grid;place-items:center;border-radius:2px;font-size:15px} .spf .hd a{margin-left:auto;color:var(--brand);font-size:14px} .spf .row,.spt .row{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 50px) / 6);gap:10px;overflow-x:auto;scrollbar-width:none;padding:0 20px 20px} .spf .it{display:flex;flex-direction:column;align-items:center;gap:8px} .spf .im{position:relative;display:block;width:100%;aspect-ratio:1/1}.spf .im img{width:100%;height:100%;object-fit:contain} .spf .im em{position:absolute;top:0;right:0;background:#ffe97a;color:var(--brand);font-style:normal;font-size:12px;font-weight:700;padding:2px 6px} .spf .pr{color:var(--brand);font-size:18px;font-weight:500} .spf .bar{position:relative;display:block;width:100%;height:16px;border-radius:8px;background:#ffbda6;overflow:hidden} .spf .bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(270deg,#ffb000,#eb1717);border-radius:8px} .spf .bar span{position:relative;display:block;text-align:center;color:#fff;font-size:10px;font-weight:700;line-height:16px} /* mall */ .spm{background:#fff;margin-bottom:20px} .spm .hd{display:flex;align-items:center;gap:18px;padding:14px 20px;border-bottom:1px solid #eee;font-size:14px;color:#222} .spm .hd b{color:#d0011b;font-size:20px;padding-right:18px;border-right:1px solid #ddd} .spm .hd span{display:inline-flex;align-items:center;gap:5px}.spm .hd svg{width:16px;height:16px;color:#d0011b} .spm .hd a{margin-left:auto;color:#d0011b} .spm .bd{display:grid;grid-template-columns:390px minmax(0,1fr);gap:10px;padding:10px} .spm .ban img{width:100%;height:100%;object-fit:cover} .spm .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0} .spm .grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;font-size:14px;color:#d0011b;border:1px solid #f4f4f4} .spm .grid img{width:110px;height:110px;object-fit:contain} @media (max-width:900px){.spm .bd{grid-template-columns:minmax(0,1fr)}.spm .ban{display:none}.spm .hd span{display:none}.spm .grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* tìm kiếm hàng đầu */ .spt{background:#fff;margin-bottom:20px} .spt .hd{display:flex;align-items:center;border-bottom:1px solid #eee}.spt .hd h2{border:0;color:var(--brand);font-weight:600}.spt .hd a{margin-left:auto;padding-right:20px;color:var(--brand);font-size:14px} .spt .row{padding-top:16px} .spt .it{display:flex;flex-direction:column;gap:10px} .spt .im{position:relative;display:block;aspect-ratio:1/1;background:#f6f6f6}.spt .im img{width:100%;height:100%;object-fit:contain} .spt .im em{position:absolute;left:0;top:0;background:var(--brand);color:#fff;font-style:normal;font-size:12px;font-weight:700;padding:3px 6px;z-index:1} .spt .im small{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.26);color:#fff;font-size:13px;text-align:center;padding:4px} .spt .it b{font-size:15px;font-weight:500;color:#222;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @media (max-width:1000px){.spf .row,.spt .row{grid-auto-columns:calc((100% - 20px) / 3);padding:0 12px 16px}} /* gợi ý hôm nay */ .spd .hd{position:sticky;top:var(--sticky-top,60px);z-index:5;background:#fff;border-bottom:4px solid var(--brand);text-align:center;margin-bottom:6px} .spd .hd h2{color:var(--brand);font-size:16px;font-weight:600;margin:0;padding:15px} .spd .product-grid{gap:10px} .spd .more{text-align:center;margin:20px 0 30px}.spd .more a{display:inline-block;background:#fff;border:1px solid #ddd;color:#555;padding:10px 120px;font-size:14px} .spd .more a:hover{background:#f8f8f8} /* thẻ sản phẩm kiểu sàn */ .pc{background:#fff;border:1px solid transparent;border-radius:0;padding:0 0 10px;box-shadow:0 1px 1px rgba(0,0,0,.05)} .pc:hover{border-color:var(--brand);box-shadow:0 1px 20px rgba(0,0,0,.05);transform:translateY(-1px)} .pc .p-img{border-radius:0;margin-bottom:8px} .pc .p-top,.pc .p-chips,.pc .p-gift,.pc .p-rate svg,.pc .p-rate b,.pc .p-quota,.pc .p-buy{display:none!important} .pc .p-name,.pc .p-price,.pc .p-old,.pc .p-rate{padding:0 8px} .pc .p-name{font-size:13px;font-weight:400;min-height:2.8em} .pc .p-price .now{color:var(--brand);font-size:16px;font-weight:500} .pc .p-old s{display:none} .pc .p-old b{position:absolute;top:0;right:0;background:#ffe97a;color:var(--brand);font-size:12px;font-weight:700;padding:2px 5px} .pc .p-rate{display:flex;justify-content:flex-end;font-size:12px;color:#555} /* footer */ .sp-footer{background:#fbfbfb;border-top:4px solid var(--brand);color:rgba(0,0,0,.65);margin-top:30px;padding:30px 0 20px} .sp-footer .cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px} .sp-footer h4{font-size:12px;font-weight:700;text-transform:uppercase;color:rgba(0,0,0,.87);margin:0 0 14px} .sp-footer ul{list-style:none;margin:0 0 16px;padding:0}.sp-footer li{font-size:12px;padding:4px 0}.sp-footer a{color:rgba(0,0,0,.65)}.sp-footer a:hover{color:var(--brand)} .sp-footer .logos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.sp-footer .logos img{background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.1);padding:3px;border-radius:2px} .sp-footer .soc{display:flex;gap:10px} .sp-footer .apps{display:flex;flex-direction:column;gap:8px} .sp-footer .copy{border-top:1px solid #eee;margin-top:20px;padding-top:16px;font-size:13px;text-align:center} .sp-footer .copy p{margin:0} @media (max-width:900px){.sp-footer .cols{grid-template-columns:1fr 1fr}} .sp-footer .logos img{height:26px;width:auto;max-width:none} .sp-footer .apps img{height:34px;width:auto;max-width:none} .sp-footer .logos[style] img{height:30px} .sp-footer .soc img{width:18px;height:18px} .spc .grid{grid-auto-columns:minmax(120px,1fr)} .spm .ban{align-self:start}.spm .ban img{aspect-ratio:400/520;height:auto;object-fit:contain} @media (max-width:600px){.spf .hd{padding:12px;gap:8px}.spf .fs{font-size:20px;white-space:nowrap}.spf .cd b{min-width:22px;height:20px;font-size:13px}.spf .hd a{white-space:nowrap;font-size:13px}.spc h2,.spt .hd h2{padding:12px}.spd .more a{padding:10px 60px}} .woocommerce .site-header a:not(.button),.woocommerce .sp-topnav a,.woocommerce .sp-keys a{color:var(--hd-t)}.woocommerce .site-header .cart-link{color:var(--hd-t)}.woocommerce a.sp-bar-buy{color:#fff}.woocommerce .sp-footer a{color:rgba(0,0,0,.65)} .woocommerce .pc a:not(.button){color:inherit}.pc .p-name,.pc .p-name a{color:#222} /* ===== Trang chi tiết kiểu sàn ===== */ .pd-stars{display:inline-block;width:80px;height:14px;vertical-align:-2px;background:linear-gradient(90deg,var(--brand) var(--v,100%),#d5d5d5 var(--v,100%));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 14%22%3E%3Cpath d=%22M7 0l2.1 4.5 4.9.6-3.6 3.3 1 4.8L7 10.8 2.6 13.2l1-4.8L0 5.1l4.9-.6z%22/%3E%3C/svg%3E") 0 0/16px 14px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 14%22%3E%3Cpath d=%22M7 0l2.1 4.5 4.9.6-3.6 3.3 1 4.8L7 10.8 2.6 13.2l1-4.8L0 5.1l4.9-.6z%22/%3E%3C/svg%3E") 0 0/16px 14px repeat-x} .pd{color:rgba(0,0,0,.8)} .pd-top{display:grid;grid-template-columns:450px minmax(0,1fr);gap:32px;background:#fff;padding:16px;border-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,.05)} .pd-gal .main{position:relative;aspect-ratio:1/1;background:#fff}.pd-gal .main img{width:100%;height:100%;object-fit:contain} .pd-gal .g-nav{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:46px;background:rgba(0,0,0,.2);color:#fff;border:0;display:grid;place-items:center;opacity:0;transition:.2s}.pd-gal:hover .g-nav{opacity:1}.pd-gal .prev{left:0}.pd-gal .next{right:0} .pd-gal .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px} .pd-gal .thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border:2px solid transparent;cursor:pointer}.pd-gal .thumbs img.is-active,.pd-gal .thumbs img:hover{border-color:var(--brand)} .pd-share{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:18px;font-size:15px} .pd-share i{width:25px;height:25px;border-radius:50%;display:inline-block}.s-ms{background:#0384ff}.s-fb{background:#3b5999}.s-pi{background:#de0217}.s-tw{background:#10c2ff} .pd-like{display:inline-flex;align-items:center;gap:6px;border-left:1px solid #ddd;padding-left:18px;margin-left:12px}.pd-like svg{width:22px;height:22px;color:#ff424f} .pd-info h1{font-size:20px;font-weight:500;line-height:1.25;margin:4px 0 10px;color:#222;word-break:break-word} .pd-fav{display:inline-block;background:var(--brand);color:var(--on-brand);font-size:12px;font-weight:500;padding:2px 5px;border-radius:2px;margin-right:10px;vertical-align:3px} .pd-meta{display:flex;align-items:center;flex-wrap:wrap;font-size:14px;color:#767676;margin-bottom:14px} .pd-meta>*{display:inline-flex;align-items:center;gap:6px;padding:0 15px;border-left:1px solid #ddd;color:#767676}.pd-meta>:first-child{padding-left:0;border:0} .woocommerce .pd-meta a{color:#767676} .pd-meta b{font-size:16px;color:#222;font-weight:500}.pd-meta b.u{border-bottom:1px solid currentColor;color:var(--brand)}.pd-meta a:nth-child(2) b{color:#222} .pd-meta .r{margin-left:auto;border:0;font-size:14px} .pd-price{display:flex;align-items:center;gap:12px;background:#fafafa;padding:15px 20px;min-height:64px} .pd-price .old{color:#929292;text-decoration:line-through;font-size:16px}.pd-price .now{color:var(--brand);font-size:30px;font-weight:500} .pd-price .off{background:var(--brand);color:var(--on-brand);font-size:12px;font-weight:600;padding:2px 4px;border-radius:2px} .pd-rows{padding:10px 20px 0} .pd-row{display:flex;align-items:flex-start;gap:10px;margin:22px 0 0;font-size:14px} .pd-row>label{flex:0 0 110px;color:#757575;line-height:1.4;padding-top:6px} .pd-row>div{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px} .pd-vouch span{background:#fff0ec;color:var(--brand);font-size:14px;padding:3px 8px;border-left:1px dashed var(--brand);border-right:1px dashed var(--brand)} .pd-promo{flex-direction:column;align-items:flex-start!important;gap:4px!important;padding-top:6px}.pd-promo span{color:#222}.pd-promo span:before{content:"✓ ";color:var(--brand)} .pd-ship{flex-direction:column;align-items:flex-start!important;gap:2px!important}.pd-ship p{margin:0;display:flex;align-items:center;gap:8px;padding-top:6px}.pd-ship svg{width:20px;height:20px;color:#00bfa5}.pd-ship b{font-weight:400}.pd-ship .muted{font-size:13px;color:#929292;padding:0 0 0 28px} .pd-safe{padding-top:6px;color:#222;display:block!important}.pd-safe svg{width:16px;height:16px;color:var(--brand);vertical-align:-3px;margin-right:6px} .pd .opts{display:flex;flex-wrap:wrap;gap:8px} .pd .opts .opt{position:relative;min-width:80px;min-height:36px;padding:4px 14px;border:1px solid rgba(0,0,0,.09);background:#fff;color:rgba(0,0,0,.8);border-radius:2px;font-size:14px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center} .pd .opts .opt small{font-size:11px;color:#929292}.pd .opts .opt small:empty{display:none} .pd .opts .opt:hover,.pd .opts .opt.is-active{border-color:var(--brand);color:var(--brand)} .pd .opts .opt.is-active:after{content:"✓";position:absolute;right:0;bottom:0;width:15px;height:15px;background:var(--brand);color:#fff;font-size:9px;line-height:18px;text-align:right;padding-right:1px;clip-path:polygon(100% 0,100% 100%,0 100%)} .pd .opts .opt.is-out{opacity:.4} .nk-qtyb{display:inline-flex;border:1px solid rgba(0,0,0,.09)}.nk-qtyb button{width:32px;height:32px;background:#fff;border:0;font-size:18px;color:#555}.nk-qtyb input{width:50px;height:32px;border:0!important;border-left:1px solid rgba(0,0,0,.09)!important;border-right:1px solid rgba(0,0,0,.09)!important;text-align:center;padding:0!important;-moz-appearance:textfield;border-radius:0!important} .nk-qtyb input::-webkit-inner-spin-button{-webkit-appearance:none} .pd-qty .muted{color:#757575;margin-left:10px} .pd-form{display:block!important;padding:0 20px;margin:0} .pd-btns{display:flex;gap:15px;margin:28px 0 0;padding:0 20px} .pd-form .pd-btns{padding:0} .pd .pd-add,.pd .pd-buy{height:48px;padding:0 20px;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;border-radius:2px;font-size:15px;min-width:180px;flex:none;position:static!important;clip:auto!important;width:auto!important;margin:0!important} .pd .pd-add{background:#fff3ef!important;border:1px solid var(--brand)!important;color:var(--brand)!important}.pd-add svg{width:20px;height:20px} .pd .pd-buy,.woocommerce .pd a.pd-buy{background:var(--brand)!important;border:0!important;color:var(--on-brand)!important}.pd-buy:hover{filter:brightness(1.05)} .pd-varform .variations,.pd-varform .single_variation_wrap .woocommerce-variation,.pd-varform .single_add_to_cart_button,.pd-varform .reset_variations{display:none!important} .pd-varform{padding:0 20px;margin-top:18px} .pd-contact{padding:20px} .pd-guar{display:flex;align-items:center;gap:10px;margin:30px 20px 0;padding-top:24px;border-top:1px solid rgba(0,0,0,.05);font-size:14px}.pd-guar svg{width:20px;height:20px;color:var(--brand)}.pd-guar span{color:#757575} .pd-shop{display:flex;align-items:center;gap:20px;background:#fff;margin:15px 0;padding:25px;border-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,.05)} .pd-shop .ava{position:relative;flex:none;width:78px;height:78px;border-radius:50%;background:var(--hd);display:grid;place-items:center;border:1px solid rgba(0,0,0,.09)} .pd-shop .ava img{width:72%;height:auto}.pd-shop .ava b{color:#fff;font-size:30px} .pd-shop .ava em{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-style:normal;font-size:10px;padding:1px 5px;border-radius:2px;white-space:nowrap} .pd-shop .nm{flex:0 0 auto;padding-right:25px;border-right:1px solid rgba(0,0,0,.09)}.pd-shop .nm b{display:block;font-size:16px;color:#222}.pd-shop .nm small{color:#757575;font-size:13px} .pd-shop .act{display:flex;gap:10px;margin-top:8px}.woocommerce .pd-shop .act a{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 15px;border:1px solid rgba(0,0,0,.09);color:#555;font-size:14px}.pd-shop .act a svg{width:14px;height:14px} .woocommerce .pd-shop .act a.chat{background:#fff3ef;border-color:var(--brand);color:var(--brand)} .pd-shop .st{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:18px 30px;font-size:14px;color:rgba(0,0,0,.4)} .pd-shop .st span{display:flex;justify-content:space-between;gap:10px}.pd-shop .st b{color:var(--brand);font-weight:400} .pd-body{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:15px;align-items:start} .pd-card{background:#fff;padding:10px 25px 25px;border-radius:3px;margin-bottom:15px;box-shadow:0 1px 1px rgba(0,0,0,.05)} .pd-card>h2{font-size:18px;font-weight:400;background:rgba(0,0,0,.02);padding:14px;margin:15px 0;color:rgba(0,0,0,.87)} .pd-spec{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px 10px;margin:0 15px 30px;font-size:14px}.pd-spec dt{color:rgba(0,0,0,.4)}.pd-spec dd{margin:0;color:#222}.woocommerce .pd-spec .crumb a{color:#0055aa} .pd-desc{margin:0 15px;font-size:14px;line-height:1.7}.pd-desc h2,.pd-desc h3{font-weight:600;font-size:15px;margin:10px 0}.pd-desc img{max-width:100%;height:auto} .pd-side{background:#fff;padding:12px;border-radius:3px;position:sticky;top:80px} .pd-side h3{font-size:14px;font-weight:400;color:rgba(0,0,0,.54);margin:0 0 10px} .woocommerce .pd-mini{display:block;padding:10px 0;border-top:1px solid #f2f2f2;color:#222;font-size:13px}.pd-mini img{width:100%;aspect-ratio:1/1;object-fit:contain} .pd-mini span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:6px 0 4px}.pd-mini b{color:var(--brand);font-weight:500;font-size:15px} .pd-more{margin-top:15px}.pd-more .hd{display:flex;align-items:center;justify-content:space-between;margin:20px 0 12px}.pd-more h2{font-size:16px;font-weight:500;color:rgba(0,0,0,.54);margin:0}.pd-more .hd a{color:var(--brand);font-size:14px} .pd-more .product-grid{gap:10px} /* đánh giá */ .pd-rv>h2{font-size:18px;font-weight:400;margin:15px 0;color:rgba(0,0,0,.87)} .pd-rv-box{display:flex;align-items:center;gap:30px;background:#fffbf8;border:1px solid #f9ede5;padding:28px 30px;margin-bottom:16px} .pd-rv-box .sc{flex:none;color:var(--brand);font-size:18px;text-align:center}.pd-rv-box .sc b{font-size:30px;font-weight:500}.pd-rv-box .sc .pd-stars{display:block;width:100px;height:18px;margin:8px auto 0;-webkit-mask-size:20px 18px;mask-size:20px 18px} .pd-rv .rv-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;background:none} .pd-rv .rv-filter button{min-width:100px;height:32px;padding:0 10px;background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:2px;font-size:14px;color:rgba(0,0,0,.8)} .pd-rv .rv-filter button.is-active{border-color:var(--brand);color:var(--brand)} .pd-rv .rv-list{list-style:none;margin:0;padding:0 0 0 20px} .pd-rv .rv-item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.09)} .pd-rv .rv-ava{width:40px;height:40px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:600} .pd-rv .nm{display:block;font-size:12px;font-weight:400;color:rgba(0,0,0,.87);margin-bottom:4px}.pd-rv .rv-item .pd-stars{width:60px;height:11px;-webkit-mask-size:12px 11px;mask-size:12px 11px} .pd-rv .rv-date{font-size:12px;color:rgba(0,0,0,.54);margin:4px 0 12px}.pd-rv .rv-text{font-size:14px;line-height:1.5;color:rgba(0,0,0,.87)}.pd-rv .rv-text p{margin:0 0 6px} .pd-rv .rv-reply{background:#f5f5f5;padding:10px 12px;margin-top:10px;font-size:14px}.pd-rv .rv-reply b{display:block;margin-bottom:4px} .rv-help{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:rgba(0,0,0,.4);font-size:14px} .pd-rv .rv-form{margin-top:20px}.pd-rv .rv-form summary{display:inline-block;list-style:none;cursor:pointer}.pd-rv .rv-form summary::-webkit-details-marker{display:none}.pd-rv .rv-form[open] summary{margin-bottom:14px} .pd-rv .rv-empty{color:#757575;text-align:center;padding:30px 0} .pd-mbar{display:none} @media (max-width:1000px){ .pd-top{grid-template-columns:minmax(0,1fr);padding:0;gap:0}.pd-gal .g-nav{opacity:1}.pd-gal .thumbs{display:none}.pd-share{display:none} .pd-info{padding:12px}.pd-info h1{font-size:16px}.pd-price{padding:10px 12px}.pd-price .now{font-size:24px}.pd-rows{padding:0}.pd-row>label{flex-basis:90px;font-size:13px} .pd-meta .r{display:none}.pd-form{padding:0}.pd-btns{display:none}.pd-guar{margin:20px 0 0} .pd-shop{flex-wrap:wrap;padding:14px;gap:12px}.pd-shop .ava{width:56px;height:56px}.pd-shop .nm{border:0;padding:0}.pd-shop .st{flex-basis:100%;grid-template-columns:repeat(2,1fr);gap:8px 16px;font-size:13px} .pd-body{grid-template-columns:minmax(0,1fr)}.pd-side{display:none}.pd-card{padding:4px 12px 16px}.pd-spec{grid-template-columns:110px 1fr;margin:0 4px 20px}.pd-desc{margin:0 4px} .pd-rv-box{flex-direction:column;align-items:flex-start;padding:16px;gap:14px}.pd-rv .rv-filter button{min-width:0}.pd-rv .rv-list{padding:0} .pd-mbar{display:grid;grid-template-columns:1fr 1fr 2fr;position:fixed;left:0;right:0;bottom:0;z-index:90;height:52px;background:#fff;box-shadow:0 -1px 4px rgba(0,0,0,.08)} .pd-mbar>*,.woocommerce .pd-mbar>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;font-size:11px;color:#fff;background:#00bfa5}.pd-mbar svg{width:20px;height:20px} .pd-mbar .add{border-left:1px solid rgba(255,255,255,.4)!important} .pd-mbar .buy,.woocommerce .pd-mbar a.buy{background:var(--brand);color:var(--on-brand);font-size:15px}.pd-mbar .buy small{font-size:12px} body.single-product{padding-bottom:52px} } /* box sản phẩm theo danh mục */ .spr{background:#fff;margin-bottom:20px;border-radius:2px} .spr .bar{display:flex;align-items:center;gap:20px;padding:0 20px;min-height:60px;border-bottom:2px solid var(--brand)} .spr h2{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;font-weight:600;color:var(--brand);text-transform:uppercase;white-space:nowrap}.spr h2 img{width:34px;height:34px;object-fit:contain} .spr nav{display:flex;gap:18px;overflow:hidden;white-space:nowrap;flex:1;min-width:0}.spr nav a{font-size:13px;color:#555}.spr nav a:hover{color:var(--brand)} .spr .all{margin-left:auto;color:var(--brand);font-size:14px;white-space:nowrap} .spr .bd{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:10px}.spr.has-ban .bd{grid-template-columns:230px minmax(0,1fr)} .spr .ban img{width:100%;height:100%;object-fit:cover;border-radius:2px} .spr .product-grid{gap:10px}.spr .pc{box-shadow:none;border-color:#f0f0f0} @media (max-width:1000px){.spr .bar{padding:0 12px;gap:10px;min-height:48px}.spr h2{font-size:14px}.spr h2 img{width:26px;height:26px}.spr nav{display:none}.spr.has-ban .bd{grid-template-columns:minmax(0,1fr)}.spr .ban{display:none}} .strip-banner{display:block;margin-bottom:12px}.strip-banner img{width:100%;height:auto;display:block} .strip-banner img{height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:2px} .gdh .slider .track{gap:0!important}.gdh .slider{align-self:stretch}.gdh .slider .slide img{height:100%} /* ảnh đính kèm đánh giá */ .rv-upload{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:-4px 0 14px} .rv-up-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px dashed var(--brand);color:var(--brand);border-radius:6px;cursor:pointer;font-size:14px;background:#fff} .rv-up-btn input{display:none}.rv-up-note{font-size:12px;color:#888} .rv-up-prev{display:flex;flex-wrap:wrap;gap:8px;width:100%}.rv-up-prev:empty{display:none}.rv-up-prev img{width:64px;height:64px;object-fit:cover;border-radius:4px;border:1px solid #eee} .rv-imgs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}.rv-imgs img{width:72px;height:72px;object-fit:cover;border-radius:4px;border:1px solid #eee;display:block} .pd-varform .quantity{display:none!important}.pd-varform{padding:0!important;margin:0!important;height:0;overflow:hidden}.pd-qrow{padding:0 20px}@media (max-width:1000px){.pd-qrow{padding:0}} .gdh .slider .slide img{aspect-ratio:1200/360!important;height:auto!important;object-fit:cover}.gdh .side{grid-template-rows:1fr 1fr}.gdh .side a{display:block;min-height:0;overflow:hidden}.gdh .side img{height:100%!important;width:100%;object-fit:cover} .nm-var{font-size:12px;color:#888;margin:2px 0} /* lightbox ảnh */ .nk-lb{position:fixed;inset:0;z-index:100000;background:rgba(15,15,15,.92);display:none;align-items:center;justify-content:center} .nk-lb.open{display:flex}.nk-lb img{max-width:90vw;max-height:86vh;object-fit:contain;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.5);user-select:none} .nk-lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:48px;height:48px;font-size:34px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0} .nk-lb button:hover{background:rgba(255,255,255,.25)}.nk-lb-x{top:14px;right:16px;font-size:30px!important}.nk-lb-p{left:16px;top:50%;transform:translateY(-50%)}.nk-lb-n{right:16px;top:50%;transform:translateY(-50%)} .nk-lb-c{position:absolute;top:24px;left:20px;color:#ddd;font-size:14px}.nk-lb.one .nk-lb-p,.nk-lb.one .nk-lb-n,.nk-lb.one .nk-lb-c{display:none} .rv-imgs a{cursor:zoom-in} @media (max-width:600px){.nk-lb button{width:40px;height:40px;font-size:28px}.nk-lb-p{left:6px}.nk-lb-n{right:6px}.nk-lb img{max-width:100vw}} /* ========================================================= MỸ PHẨM 1 – giao diện kiểu chuỗi mỹ phẩm (gradient pastel, hồng chủ đạo) ========================================================= */ :root{--cc-grad:linear-gradient(90deg,#7ec2fc 0%,#b497fd 33%,#fa96cb 66%,#fccc97 100%);--cc-grad2:linear-gradient(90deg,#fccc97 0%,#fa96cb 33%,#b497fd 66%,#7ec2fc 100%);--cc-pill:linear-gradient(90deg,#7ec2fc,#b497fd 45%,#fa96cb);--cc-brandc:#a670dd;--w:1320px} body{background:#f0f0f0;color:#333;font-size:14px} .wrap{max-width:var(--w)} /* header */ body .site-header.cc-header{background:var(--cc-grad)!important;color:#fff;box-shadow:none;border:0} .cc-top .mainbar{height:66px;min-height:0;display:flex;align-items:center;gap:40px;padding-top:0;padding-bottom:0} .cc-header .brand{flex:none;display:flex;align-items:center}.cc-header .brand img{height:36px;width:auto} .cc-header .hsearch{flex:1;max-width:none;display:block} .cc-header .hsearch form{position:relative;display:flex;height:37px;background:#fff;border-radius:50px;overflow:hidden;border:0;padding:0} .cc-header .hsearch input[type=search]{flex:1;border:0!important;padding:0 50px 0 18px!important;height:37px;background:none;box-shadow:none!important;font-size:14px;color:#333} .cc-header .hsearch button{position:absolute;right:0;top:0;width:48px;height:37px;background:none;color:#777;display:grid;place-items:center;border:0} .cc-header .hsearch button svg{width:18px;height:18px} .cc-acc{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:700;font-size:15px}.cc-acc svg{width:30px;height:30px}.cc-acc a{color:#fff} .cc-order{color:#fff;display:grid}.cc-order svg{width:28px;height:28px} .cc-header .cart-link{color:#fff;margin:0;position:relative}.cc-header .cart-link .lbl{display:none}.cc-header .cart-link svg{width:28px;height:28px} .cc-header .cart-count{background:#fff;color:var(--brand);border:0;font-weight:700} .cc-header .search-toggle,.cc-burger{display:none;background:none;border:0;color:#fff} .cc-nav{background:#fff;color:#222;box-shadow:0 2px 4px rgba(0,0,0,.05)} .cc-nav .wrap{display:flex;align-items:center;gap:34px;height:50px;font-size:15px;font-weight:500;white-space:nowrap} .cc-nav a{color:#222}.cc-nav a:hover{color:var(--brand)} .cc-cat{position:relative;height:100%;display:flex;align-items:center} .cc-cat-btn{display:flex;align-items:center;gap:10px;background:none;border:0;font:inherit;color:#222;cursor:pointer;padding:0}.cc-cat-btn svg{width:22px;height:22px} .cc-cat .catmenu-wrap{position:absolute;left:0;top:100%;z-index:90;display:none;min-width:900px} .cc-cat:hover .catmenu-wrap,.cc-cat:focus-within .catmenu-wrap{display:block} .cc-cat .catmenu{box-shadow:0 10px 30px rgba(0,0,0,.12);border-radius:0 0 10px 10px;overflow:hidden} .site-header.is-stuck .cc-nav{display:none} @media (max-width:1000px){.cc-top .mainbar{height:56px;gap:12px}.cc-header .brand img{height:30px}.cc-burger,.cc-header .search-toggle{display:grid}.cc-acc,.cc-order{display:none}.cc-header .hsearch{display:none}.cc-header .hsearch.is-open{display:block;position:absolute;left:12px;right:12px;top:60px;z-index:80}.cc-nav .wrap{overflow-x:auto;gap:22px;height:44px;font-size:14px;scrollbar-width:none}.cc-cat{display:none}.cc-header .brand{margin-right:auto}} /* hộp chung */ .cc-box{background:#fff;border-radius:10px;padding:15px;margin-bottom:15px} .cc-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cc-title h2,.cc-h{font-size:20px;font-weight:700;color:#222;margin:0 0 12px}.cc-title h2{margin:0}.cc-title a{color:#333;font-size:13px;font-weight:600} .btn-c{text-align:center;margin-top:16px} .cc-more{display:inline-flex;align-items:center;gap:6px;border:1px solid #ddd;border-radius:6px;padding:8px 22px;color:#333;font-weight:600;background:#fff;font-size:14px}.cc-more svg{width:14px;height:14px}.cc-more:hover{border-color:var(--brand);color:var(--brand)} .cc-box .hs-wrap .nav,.cc-flash .hs-wrap .nav{width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);border:0;color:#333} /* hero */ .cc-hero{background:#fff;margin:0 calc(50% - 50vw) 15px;padding:12px calc(50vw - 50%) 6px} .cc-hero-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;max-width:var(--w);margin:0 auto} .cc-hero .slider{border-radius:10px;overflow:hidden}.cc-hero .slider .slide img{width:100%;aspect-ratio:880/410!important;height:auto!important;object-fit:cover;display:block} .cc-hero .side{display:grid;grid-template-rows:1fr 1fr;gap:10px}.cc-hero .side a{display:block;border-radius:10px;overflow:hidden}.cc-hero .side img{width:100%;height:100%;object-fit:cover;display:block} .cc-icons{display:flex!important;gap:6px;max-width:var(--w);margin:10px auto 0;overflow-x:auto;scrollbar-width:none;padding-bottom:6px} .cc-icons a{flex:0 0 calc((100% - 54px) / 10);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#333;font-size:13px} .cc-icons i{width:58px;height:58px;display:grid;place-items:center}.cc-icons img{width:100%;height:100%;object-fit:contain} @media (max-width:1000px){.cc-hero-in{grid-template-columns:minmax(0,1fr)}.cc-hero .side{grid-template-columns:1fr 1fr;grid-template-rows:auto}.cc-icons a{flex-basis:72px}} /* flash sale */ .cc-flash{position:relative;border-radius:12px;overflow:hidden;margin-bottom:15px;background:var(--bg,none) center/cover,linear-gradient(135deg,#a5d8ff,#d6b8ff 40%,#ffc2e0 75%,#ffd8b0);padding:0 0 18px} .cc-flash .hd{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;background:linear-gradient(90deg,#e51c65,#9b1b8f 55%,#550096);color:#fff} .cc-flash .hd b{font:italic 900 30px/1 var(--font);letter-spacing:.5px}.cc-flash .hd svg{width:24px;height:24px;color:#ffd84d;fill:#ffd84d} .cc-flash .tabs{display:grid;grid-template-columns:1fr 1fr} .cc-flash .tabs button{height:48px;border:0;background:rgba(255,255,255,.25);color:#fff;font-size:18px;font-weight:700;cursor:pointer}.cc-flash .tabs button.is-active{background:#fff;color:var(--brand)} .cc-flash .cd{display:flex;align-items:center;justify-content:center;gap:6px;color:#fff;font-weight:600;font-size:15px;margin:12px 0} .cc-flash .cd b{background:#fff;color:var(--brand);min-width:30px;height:30px;border-radius:5px;display:grid;place-items:center;font-size:15px} .cc-flash .cat-pill{padding:0 16px 10px}.cc-flash .cat-pill span{color:#fff;font-weight:700;border-bottom:2px solid #fff;padding-bottom:4px} .cc-flash .row,.cc-catrow .row{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px) / 7);gap:10px;overflow-x:auto;scrollbar-width:none;padding:0 16px} .cc-flash .row{grid-auto-columns:calc((100% - 40px) / 5.5)} .cc-flash .more{display:inline-block;margin:14px 0 0 16px;border:1px solid #fff;color:#fff;border-radius:30px;padding:7px 26px;font-weight:600;background:rgba(255,255,255,.15)} @media (max-width:1000px){.cc-flash .row{grid-auto-columns:calc((100% - 20px) / 2.3)}.cc-catrow .row{grid-auto-columns:calc((100% - 20px) / 2.3)}.cc-flash .hd b{font-size:22px}.cc-flash .tabs button{font-size:15px}} /* dải banner */ .cc-strip .row{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 30px) / 3.2);gap:15px;overflow-x:auto;scrollbar-width:none} .cc-strip img{width:100%;height:auto;border-radius:10px;display:block} @media (max-width:1000px){.cc-strip .row{grid-auto-columns:85%}} /* danh mục */ .cc-cats{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;padding:16px calc(50vw - 50%)} .cc-cats .row,.cc-brands .row{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 140px) / 8);gap:20px;overflow-x:auto;scrollbar-width:none} .cc-cats a{display:flex;flex-direction:column;align-items:center;gap:8px;color:#333;font-size:15px;text-align:center} .cc-cats i{width:100%;aspect-ratio:1/1;display:grid;place-items:center}.cc-cats i img{width:100%;height:100%;object-fit:contain;transition:transform .2s}.cc-cats a:hover img{transform:translateY(-4px)} /* thương hiệu */ .cc-brands a{position:relative;display:flex;flex-direction:column;align-items:center;padding-bottom:14px} .cc-brands i{width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;display:block;background:#f6f6f6}.cc-brands i img{width:100%;height:100%;object-fit:cover} .cc-brands b{position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#fff;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.1);padding:4px 10px;width:76%;display:grid;place-items:center}.cc-brands b img{height:22px;width:auto;max-width:100%;object-fit:contain} @media (max-width:1000px){.cc-cats .row,.cc-brands .row{grid-auto-columns:calc((100% - 40px) / 3.5);gap:12px}} /* đặc quyền online */ .cc-pill{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,#fa96cb,#fccc97);color:#fff;font-weight:700;font-size:17px;border-radius:30px;padding:8px 22px 8px 10px;margin:-2px 0 14px}.cc-pill svg{width:26px;height:26px;background:#fff;color:var(--brand);border-radius:50%;padding:4px} .cc-priv .row{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 30px) / 2.5);gap:15px;overflow-x:auto;scrollbar-width:none}.cc-priv img{width:100%;height:auto;border-radius:10px;display:block} /* bán chạy */ .cc-best .row{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px) / 7);gap:10px;overflow-x:auto;scrollbar-width:none} .cc-best .it{display:flex;flex-direction:column;align-items:center;gap:8px;background:#f2f2f2;border-radius:10px;padding:14px 10px;text-align:center;color:#333} .cc-best .it i{width:110px;height:110px;border-radius:50%;background:#fff;overflow:hidden;display:grid;place-items:center}.cc-best .it i img{width:86%;height:86%;object-fit:contain} .cc-best .it b{font-size:14px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}.cc-best .it small{color:#777;font-size:13px} @media (max-width:1000px){.cc-best .row{grid-auto-columns:calc((100% - 20px) / 2.6)}} /* khối danh mục */ .cc-pills{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .cc-pills a{border:1px solid #e3e3e3;border-radius:30px;padding:6px 14px;color:#333;font-size:14px;background:#fff}.cc-pills a:hover{border-color:var(--brand);color:var(--brand)} .cc-pills a.main{background:var(--cc-pill);border:0;color:#fff;font-weight:700;font-size:18px;padding:10px 26px} .cc-catrow .row{padding:0} /* gợi ý cho bạn */ .cc-suggest .tabs{display:flex;gap:14px;margin-bottom:12px} .cc-suggest .tabs button{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px 0 8px;border-radius:30px;border:0;background:#fff;color:var(--brand);font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.06)} .cc-suggest .tabs button svg{width:34px;height:34px;border-radius:50%;background:var(--cc-pill);color:#fff;padding:7px} .cc-suggest .tabs button.is-active{background:var(--cc-pill);color:#fff}.cc-suggest .tabs button.is-active svg{background:#fff;color:var(--brand)} .cc-suggest .product-grid{gap:12px} @media (max-width:1000px){.cc-suggest .tabs button{font-size:15px;height:42px}.cc-suggest .product-grid.cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}} /* tin tức */ .cc-chips{display:flex;gap:8px;margin:-4px 0 14px}.cc-chips a{border:1px solid #ddd;border-radius:20px;padding:4px 12px;color:#333;font-size:13px} .cc-news .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .cc-news .grid a{border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08);color:#222;background:#fff} .cc-news .grid i{display:block;aspect-ratio:880/410;background:#f3f3f3}.cc-news .grid img{width:100%;height:100%;object-fit:cover} .cc-news .grid b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:10px 12px 14px;font-size:14px;font-weight:600;text-transform:uppercase;line-height:1.4} @media (max-width:1000px){.cc-news .grid{grid-template-columns:1fr 1fr}} /* thẻ sản phẩm */ .pc.cc-card{position:relative;background:#fff;border:1px solid #eee;border-radius:8px;padding:0;overflow:hidden;box-shadow:none;display:flex;flex-direction:column;transition:box-shadow .2s} .pc.cc-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);transform:none} .cc-card .p-off{position:absolute;top:0;right:0;z-index:3;background:#ec1c24;color:#fff;font-weight:700;font-size:13px;padding:3px 7px;border-radius:0 0 0 8px} .cc-card .p-img{display:block;margin:0;border-radius:0;aspect-ratio:1/1;background:#fff}.cc-card .p-img img{width:100%;height:100%;object-fit:contain;display:block} .cc-card .p-info{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px;flex:1} .cc-card .p-brand{color:var(--cc-brandc);font-weight:700;font-size:13px;text-transform:uppercase;line-height:1.2} .cc-card .p-name{margin:0;font-size:14px;font-weight:500;line-height:1.4;min-height:2.8em;padding:0}.cc-card .p-name a{color:#222;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cc-card .p-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:0;margin-top:2px}.cc-card .p-price .now{color:var(--brand);font-size:16px;font-weight:700}.cc-card .p-price .old{color:#999;font-size:13px} .cc-card sup{font-size:.65em;top:-.5em} .cc-card .p-rate{display:flex;align-items:center;gap:4px;font-size:13px;color:#555;padding:0;justify-content:flex-start}.cc-card .p-rate svg{width:14px;height:14px;color:#ffb800;fill:#ffb800;display:inline!important}.cc-card .p-rate b{font-weight:500;display:inline!important}.cc-card .p-rate span{margin-left:auto;color:#777;font-size:12px} .cc-card .p-gift{border:1px solid #ec1c24;color:#ec1c24;border-radius:4px;font-size:12px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block!important;margin-top:2px;background:none} .cc-card .p-progress{display:flex;align-items:center;gap:8px;margin-top:4px}.cc-card .p-progress span{flex:1;height:6px;border-radius:6px;background:#eee;overflow:hidden}.cc-card .p-progress i{display:block;height:100%;background:var(--cc-grad2)}.cc-card .p-progress b{font-size:12px;color:#555;font-weight:500} .product-grid .cc-card{height:100%} /* footer */ .cc-footer{background:none;border:0;padding:0 0 20px;margin-top:10px;color:#333} .cc-loginbar{text-align:center;font-size:15px}.cc-loginbar a{color:var(--brand);font-weight:700;margin-left:6px} .cc-ft-top{display:grid;grid-template-columns:1.25fr 1.1fr .8fr 1.25fr;gap:30px;padding:24px} .cc-ft-top h4,.cc-ft-bot h4{font-size:15px;font-weight:700;margin:6px 0 14px;color:#222} .cc-ft-top ul{list-style:none;margin:0;padding:0}.cc-ft-top li{padding:5px 0}.cc-ft-top li a,.cc-ft-top a{color:#444}.cc-ft-top a:hover{color:var(--brand)} .cc-ft-top .about p{margin:10px 0;line-height:1.55}.cc-ft-top .contact p{margin:6px 0}.cc-ft-top .contact a[href*=lien]{color:#2d6cdf} .cc-ft-bot{display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:30px;padding:24px} .cc-ft-bot p{margin:4px 0;line-height:1.55}.cc-ft-bot .co{margin-bottom:10px}.cc-ft-bot .copy{margin-top:10px;font-size:13px;color:#666}.cc-ft-bot .copy p{margin:0} .cc-ft-bot .soc{display:flex;gap:10px}.cc-ft-bot .soc a{width:40px;height:40px;border-radius:50%;background:#f3f3f3;display:grid;place-items:center} .cc-news{display:flex;margin:10px 0 14px;border:1px solid #ddd;border-radius:6px;overflow:hidden}.cc-news input{flex:1;border:0!important;padding:0 14px!important;height:42px}.cc-news button{border:0;background:var(--cc-pill);color:#fff;font-weight:700;padding:0 22px} .cc-ft-bot .logos{display:flex;gap:12px;flex-wrap:wrap} @media (max-width:900px){.cc-ft-top,.cc-ft-bot{grid-template-columns:1fr;gap:16px;padding:16px}} /* ===== trang chi tiết (mỹ phẩm) ===== */ .cd{color:#333} .woocommerce-breadcrumb{font-size:14px;margin:14px 0}.woocommerce-breadcrumb a{color:#555} .cd-top{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:28px;padding:16px} .cd-gal .main{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#fff}.cd-gal .main img[data-main]{width:100%;height:100%;object-fit:contain;display:block} .cd-gal .main .nk-pf-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2} .cd-gal .g-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.9);box-shadow:0 2px 6px rgba(0,0,0,.15);display:grid;place-items:center;opacity:0;transition:.2s}.cd-gal:hover .g-nav{opacity:1}.cd-gal .prev{left:10px}.cd-gal .next{right:10px} .cd-gal .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px} .cd-gal .thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border:2px solid #eee;border-radius:6px;cursor:pointer}.cd-gal .thumbs img.is-active,.cd-gal .thumbs img:hover{border-color:var(--brand)} .cd-brand{color:var(--cc-brandc);font-weight:600;font-size:14px} .cd-info h1{font-size:24px;font-weight:700;line-height:1.35;margin:6px 0 12px;color:#222} .cd-code{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;color:#555;margin-bottom:12px}.cd-code b.ok{color:#16a34a}.cd-code b.out{color:#dc2626} .cd-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.cd-price .now{color:var(--brand);font-size:26px;font-weight:700}.cd-price small{color:#555;font-size:14px}.cd-price .old{color:#999;text-decoration:line-through}.cd-price .off{color:var(--brand)} .cd-origin{font-size:14px;color:#555;margin:6px 0 10px}.cd-origin em{font-style:normal;color:var(--brand)} .cd-rate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;margin-bottom:12px}.cd-rate a,.cd-rate span{color:#2d6cdf;display:inline-flex;align-items:center;gap:4px}.cd-rate a:first-child{color:#333}.cd-rate svg{width:16px;height:16px;color:#ffb800;fill:#ffb800}.cd-rate i{width:1px;height:14px;background:#ddd} .cd-rate .like{color:#333}.cd-rate .like svg{color:var(--brand);fill:none}.cd-rate .share{background:#1877f2;color:#fff;border-radius:4px;padding:2px 8px;font-size:12px;font-weight:600} .cd-box{border:1px solid #e5e7eb;border-radius:8px;margin-bottom:10px;overflow:hidden}.cd-box h4{display:flex;align-items:center;gap:6px;margin:0;padding:10px 12px;background:#fafafa;border-bottom:1px solid #eee;font-size:14px}.cd-box h4 svg{width:18px;height:18px;color:var(--brand)} .cd-box ol{list-style:none;counter-reset:n;margin:0;padding:10px 12px}.cd-box li{counter-increment:n;position:relative;padding:3px 0 3px 26px;font-size:14px;line-height:1.45}.cd-box li:before{content:counter(n);position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:#fa96cb;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center} .cd-row{display:flex;gap:12px;align-items:flex-start;margin:12px 0}.cd-row>label{flex:0 0 90px;color:#555;padding-top:8px;font-size:14px} .cd .opts{display:flex;flex-wrap:wrap;gap:8px}.cd .opts .opt{min-width:64px;min-height:36px;padding:4px 12px;border:1px solid #ddd;border-radius:6px;background:#fff;font-size:14px;color:#333;cursor:pointer}.cd .opts .opt.is-active,.cd .opts .opt:hover{border-color:var(--brand);color:var(--brand);background:#fff5fa}.cd .opts .opt.is-out{opacity:.4} .cd-qty{display:flex;align-items:center;justify-content:space-between;margin:16px 0 4px}.cd-qty label{font-size:16px;font-weight:600} .cd .nk-qtyb{border-radius:8px;overflow:hidden;border:1px solid #ddd}.cd .nk-qtyb button{width:42px;height:42px;font-size:20px}.cd .nk-qtyb input{width:70px;height:42px} .cd-left{text-align:right;font-size:13px;color:#555;margin:4px 0 12px}.cd-left b{color:#f59e0b} .pd-varform{height:0;overflow:hidden;margin:0;padding:0} .cd-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px} .cd-branch{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #ddd;border-radius:8px;height:48px;font-weight:600;font-size:14px;background:#fafafa}.cd-branch svg{width:22px;height:22px;background:#fa96cb;color:#fff;border-radius:50%;padding:4px} .cd .cd-add{display:flex!important;align-items:center;justify-content:center;gap:8px;height:48px;border:0;border-radius:8px;background:#f8a5cd!important;color:#fff!important;font-weight:700;font-size:15px;width:100%;position:static!important;clip:auto!important;margin:0!important;cursor:pointer}.cd-add svg,.cd-buy svg{width:20px;height:20px} .cd .cd-buy,.woocommerce .cd a.cd-buy{display:flex!important;align-items:center;justify-content:center;gap:8px;height:48px;width:100%;border:0;border-radius:8px;background:var(--cc-grad)!important;color:#fff!important;font-weight:700;font-size:15px;cursor:pointer} .pd-form{display:block!important;margin:0;padding:0} .cd-h{font-size:20px;font-weight:700;margin:0 0 14px;color:#222} .cd-attr table{width:100%;border-collapse:collapse;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;font-size:14px}.cd-attr th,.cd-attr td{padding:10px 14px;border-bottom:1px solid #eee;text-align:left;font-weight:400;vertical-align:top}.cd-attr th{width:28%;border-right:1px solid #eee}.cd-attr tr:nth-child(odd){background:#f7f7f7} .cd-tabs{position:sticky;top:var(--sticky-top,66px);z-index:20;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#fff;border-radius:10px;overflow:hidden;margin-bottom:15px;box-shadow:0 1px 3px rgba(0,0,0,.05)} .cd-tabs a{display:grid;place-items:center;height:46px;color:#333;font-weight:600;border-right:1px solid #eee;font-size:14px;text-align:center}.cd-tabs a.is-active,.cd-tabs a:hover{background:var(--cc-grad);color:#fff} .cd-body{font-size:15px;line-height:1.7}.cd-body img{max-width:100%;height:auto;display:block;margin:10px auto;border-radius:6px}.cd-body ul{padding-left:22px} .cd-sec .desc-body:not(.is-open){max-height:520px;overflow:hidden;position:relative}.cd-sec .desc-body:not(.is-open):after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,#fff)} .cd-sec .desc-toggle{text-align:center;margin-top:10px} .cd-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.cd-tags span{color:#555}.cd-tags a{background:#f3f3f3;border-radius:6px;padding:6px 14px;color:#333;font-size:13px} .cd .product-grid{gap:12px} /* đánh giá */ .cd .pd-rv>h2{font-size:20px;font-weight:700;color:#222}.cd .pd-rv-box{background:#fff8fb;border-color:#fde2ef}.cd .pd-rv .rv-filter button.is-active{border-color:var(--brand);color:var(--brand)} @media (max-width:1000px){.cd-top{grid-template-columns:minmax(0,1fr);padding:10px;gap:14px}.cd-info h1{font-size:18px}.cd-price .now{font-size:22px}.cd-btns{grid-template-columns:1fr}.cd-branch{display:none}.cd-tabs{grid-auto-columns:max-content;overflow-x:auto;top:56px}.cd-tabs a{padding:0 14px}.cd .product-grid.cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}.cd-attr th{width:40%}} /* trang danh mục */ .woocommerce-products-header h1,.shop-head h1{font-size:22px} .archive .product-grid,.search .product-grid{gap:12px} .cc-hero .slider .track{gap:0!important}.cc-icons a{flex:1 0 86px} /* trang danh mục: cột lọc trái */ .shop-box{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0 20px;align-items:start;background:none;padding:0;box-shadow:none} .shop-box>*{grid-column:2}.shop-box>.cc-side{grid-column:1;grid-row:1 / span 20;background:#fff;border-radius:10px;padding:14px;position:sticky;top:130px} .shop-head{background:#fff;border-radius:10px 10px 0 0;padding:14px 16px 4px;margin:0}.shop-head h1{font-size:22px;margin:0}.shop-head h1 small{font-size:22px;font-weight:700;margin-left:4px}.shop-head h1 small:before{content:"("}.shop-head h1 small:after{content:")"} .cc-side .grp{border-bottom:1px solid #eee;padding:4px 0 12px;margin-bottom:12px}.cc-side h4{font-size:14px;font-weight:700;text-transform:uppercase;margin:4px 0 10px} .cc-side .ck{display:flex;align-items:center;gap:8px;padding:5px 0;color:#444;font-size:14px}.cc-side .ck:before{content:"";width:15px;height:15px;border:1px solid #bbb;border-radius:3px;flex:none}.cc-side .ck.is-active{color:var(--brand)}.cc-side .ck.is-active:before{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 3px #fff} .cc-clear{display:block;text-align:center;background:#f1f1f1;border-radius:4px;padding:7px;color:#333;font-weight:600} .cc-sortbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;padding:10px 16px 14px;border-radius:0 0 10px 10px;margin-bottom:12px}.cc-sortbar b{font-size:13px;margin-right:4px} .cc-sortbar a{border:1px solid #e3e3e3;border-radius:6px;padding:4px 12px;color:#333;font-size:14px}.cc-sortbar a.is-active{border-color:var(--brand);color:var(--brand);background:#fff5fa} .shop-box .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px} .cc-card .p-img .nk-pf{height:100%}.cc-card .p-img .nk-pf>img:first-child{height:100%;object-fit:contain} @media (max-width:1000px){.shop-box{grid-template-columns:minmax(0,1fr)}.shop-box>*,.shop-box>.cc-side{grid-column:1;grid-row:auto;position:static}.cc-side{display:flex;gap:16px;overflow-x:auto}.cc-side .grp{min-width:170px;border:0}.shop-box .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} .shop-box ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px}@media (max-width:1000px){.shop-box ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}} /* banner float theo khung 1320px: chỉ hiện khi đủ chỗ 2 bên */ .nk-side-ban.left{right:calc(50% + 660px + 14px)}.nk-side-ban.right{left:calc(50% + 660px + 14px)} @media (max-width:1599px){.nk-side-ban{display:none!important}} @media (min-width:1600px) and (max-width:1779px){.nk-side-ban{width:110px}} @media (min-width:1780px){.nk-side-ban{width:150px}} .pc:hover .p-img .nk-pf-frame{transform:none!important} .cd form.cart .cd-add::before,.pd form.cart .pd-add::before{content:none!important;display:none!important} /* hàng ảnh nhỏ trượt ngang (5 ảnh/hàng) */ .cd-gal .thumbs-wrap{position:relative;display:flex;align-items:center;gap:6px;margin-top:10px} .cd-gal .thumbs-wrap .thumbs{flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px) / 5);grid-template-columns:none;gap:8px;margin:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative} .cd-gal .thumbs-wrap .thumbs::-webkit-scrollbar{display:none}.cd-gal .thumbs-wrap .thumbs img{scroll-snap-align:start} .cd-gal .t-nav{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid #e5e5e5;background:#fff;display:grid;place-items:center;cursor:pointer;color:#555;padding:0}.cd-gal .t-nav svg{width:14px;height:14px}.cd-gal .t-nav:hover{border-color:var(--brand);color:var(--brand)} [data-gallery] [data-main]{cursor:zoom-in} /* menu ngang (wp_nav_menu) + mega menu Danh mục sản phẩm */ .cc-menu{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0;height:100%}.cc-menu>li{position:relative;height:100%;display:flex;align-items:center} .cc-menu a{color:#222}.cc-menu a:hover,.cc-menu .current-menu-item>a{color:var(--brand)} .cc-menu .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:220px;background:#fff;list-style:none;margin:0;padding:8px 0;border-radius:0 0 10px 10px;box-shadow:0 10px 24px rgba(0,0,0,.12);z-index:95} .cc-menu li:hover>.sub-menu{display:block}.cc-menu .sub-menu a{display:block;padding:8px 16px;font-weight:400;font-size:14px} .cc-cat .catmenu-wrap{display:block;position:absolute;left:0;top:100%;min-width:0;width:0;height:0} .cc-cat .catmenu{top:0;width:960px} .cc-cat:hover .catmenu,.cc-cat .catmenu-wrap.is-open .catmenu{display:grid} @media (max-width:1000px){.cc-menu{gap:22px}} @media (max-width:1000px){.cc-cat{display:block;position:static;width:0;height:0;overflow:visible}.cc-cat-btn{display:none}.cc-cat .catmenu-wrap{position:static;width:auto;height:auto}} /* ===== Menu ngang wp_nav_menu (nk-menu): xổ cấp 2, bay ngang cấp 3 ===== */ ul.nk-menu{display:flex;align-items:center;flex-wrap:nowrap;list-style:none;margin:0;padding:0;gap:var(--nk-menu-gap,28px)} ul.nk-menu li{position:relative;list-style:none;margin:0;padding:0} ul.nk-menu>li{display:flex;align-items:center;align-self:stretch} ul.nk-menu>li>a{display:flex;align-items:center;gap:6px;white-space:nowrap;color:inherit;min-height:100%} ul.nk-menu .menu-item-has-children>a:after{content:"";flex:none;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.75;transition:transform .2s} ul.nk-menu>li.menu-item-has-children:hover>a:after{transform:translateY(1px) rotate(-135deg)} ul.nk-menu ul.sub-menu{display:block!important;position:absolute;left:0;top:100%;z-index:150;min-width:230px;margin:0;padding:8px 0;list-style:none;background:#fff;color:#222;border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(0,0,0,.14);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;flex-direction:column;gap:0;height:auto;overflow:visible} ul.nk-menu li:hover>ul.sub-menu,ul.nk-menu li:focus-within>ul.sub-menu{opacity:1;visibility:visible;transform:none} ul.nk-menu ul.sub-menu li{display:block;width:100%} ul.nk-menu ul.sub-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 18px;font-size:14px;font-weight:400;line-height:1.35;white-space:normal;color:#333;background:none;border:0;text-transform:none} ul.nk-menu ul.sub-menu a:hover,ul.nk-menu ul.sub-menu li:hover>a{background:#f6f6f7;color:var(--brand)} ul.nk-menu ul.sub-menu .menu-item-has-children>a:after{transform:rotate(-45deg)} ul.nk-menu ul.sub-menu ul.sub-menu{left:100%;top:-8px;border-radius:10px;transform:translateX(8px)} ul.nk-menu ul.sub-menu li:hover>ul.sub-menu{transform:none} ul.nk-menu>li:nth-last-child(-n+2)>ul.sub-menu{left:auto;right:0} ul.nk-menu>li:nth-last-child(-n+2) ul.sub-menu ul.sub-menu{left:auto;right:100%} ul.nk-menu .current-menu-item>a,ul.nk-menu .current-menu-ancestor>a,ul.nk-menu .current-menu-parent>a{color:var(--brand)} @media (max-width:1000px){ul.nk-menu{gap:18px;overflow-x:auto;scrollbar-width:none}ul.nk-menu ul.sub-menu{display:none!important}ul.nk-menu .menu-item-has-children>a:after{display:none}} .cc-nav ul.nk-menu{--nk-menu-gap:34px;height:100%}.cc-nav ul.nk-menu ul.sub-menu{top:100%} /* ========================================================= MỸ PHẨM 2 – tông tím (#3a2665), nhãn vàng gradient, font Josefin Sans ========================================================= */ :root{--nt:#3a2665;--nt2:#662d91;--nt-l:#dbcde5;--nt-gold:linear-gradient(90deg,#ffc10d -30%,#fceaaa 53%,#ffc10d 133%);--w:1230px;--font:"Josefin Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif} body{font-family:var(--font);background:linear-gradient(180deg,#fff 0,#fff 140px,#efe9f8 420px,#f3f0fa 100%) fixed;color:#333;font-size:15px} .wrap{max-width:var(--w)} h1,h2,h3,h4,button,input,select,textarea{font-family:inherit} /* header */ body .site-header.nt-header{background:#fff!important;color:#333;box-shadow:0 2px 6px rgba(58,38,101,.06);border:0} .nt-topbanner{display:block;line-height:0}.nt-topbanner img{width:100%;height:auto;max-height:66px;object-fit:cover} .nt-topnav{display:flex;justify-content:flex-end;align-items:center;gap:20px;height:36px;font-size:13px} .nt-topmenu{--nk-menu-gap:0}.nt-topmenu>li>a{padding:0 14px;border-left:1px solid #8a8a8a;line-height:13px;color:#333}.nt-topmenu>li:first-child>a{border-left:0} .nt-acc{display:flex;align-items:center;gap:6px;border-left:1px solid #8a8a8a;padding-left:14px;color:#333}.nt-acc svg{width:16px;height:16px} .nt-header .mainbar{height:auto;min-height:62px;padding:2px 12px 10px;gap:18px;align-items:center;display:flex;position:relative} .nt-burger{display:grid!important;place-items:center;width:44px;height:44px;border:1px solid #e1e1e1;border-radius:10px;background:#fff;color:var(--nt)}.nt-burger svg{width:22px;height:22px} .nt-header .brand{flex:none}.nt-header .brand img{height:46px;width:auto} .nt-header .hsearch{flex:0 1 480px;display:block} .nt-header .hsearch form{position:relative;display:flex;height:38px;border:1px solid var(--nt);border-radius:30px;background:#fff;overflow:hidden;padding:0} .nt-header .hsearch input[type=search]{flex:1;border:0!important;padding:0 50px 0 18px!important;height:36px;background:none;box-shadow:none!important;font-size:14px} .nt-header .hsearch button{position:absolute;right:3px;top:3px;width:30px;height:30px;border-radius:50%;background:var(--nt);color:#fff;display:grid;place-items:center;border:0}.nt-header .hsearch button svg{width:15px;height:15px} .nt-hot{margin-left:auto;display:flex;align-items:center;gap:8px;color:#333;font-size:18px}.nt-hot svg{width:26px;height:26px;color:var(--nt)}.nt-hot b{font-weight:600} .nt-header .cart-link{color:var(--nt);margin:0}.nt-header .cart-link .lbl{display:none}.nt-header .cart-link svg{width:28px;height:28px} .nt-header .cart-count{background:var(--nt);color:#fff;border:2px solid #fff} .nt-header .search-toggle{display:none} .nt-header .catmenu-wrap{position:absolute;left:12px;top:100%} .nt-header .catmenu{top:4px;width:900px;border-radius:15px} .nt-header .catmenu .cat-panel h4{color:var(--nt)} .cart-link.nk-bump{animation:nkbump .5s}@keyframes nkbump{30%{transform:scale(1.25)}60%{transform:scale(.9)}} .site-header.is-stuck .nt-topbanner,.site-header.is-stuck .nt-topnav{display:none} @media (max-width:1000px){.nt-topnav{display:none}.nt-header .mainbar{gap:10px;min-height:56px;padding:6px 12px}.nt-header .brand{margin-right:auto}.nt-header .brand img{height:36px}.nt-header .hsearch{display:none}.nt-header .hsearch.is-open{display:block;position:absolute;left:12px;right:12px;top:58px;z-index:80}.nt-hot{display:none}.nt-header .search-toggle{display:grid}.nt-burger{width:38px;height:38px}.nt-topbanner img{max-height:36px}} /* hero */ .nt-hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;margin:14px 0 12px} .nt-hero .slider{border-radius:15px;overflow:hidden}.nt-hero .slider .track{gap:0!important}.nt-hero .slider .slide img{width:100%;aspect-ratio:2100/1000;height:auto;object-fit:cover;display:block} .nt-hero .slider .nav{width:34px;height:34px;border-radius:50%;background:var(--nt);color:#fff;opacity:1;border:0}.nt-hero .slider .dots button{background:rgba(58,38,101,.3)}.nt-hero .slider .dots button.is-active{background:var(--nt)} .nt-hero .side{display:grid;grid-template-rows:1fr 1fr;gap:10px}.nt-hero .side a{display:block;border-radius:15px;overflow:hidden}.nt-hero .side img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:900px){.nt-hero{grid-template-columns:minmax(0,1fr)}.nt-hero .side{grid-template-columns:1fr 1fr;grid-template-rows:auto}} /* thẻ chương trình */ .nt-programs{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-bottom:44px} .nt-programs .item{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:15px;padding:16px 16px 18px;box-shadow:0 2px 10px rgba(58,38,101,.05)} .nt-programs .title{min-height:2.6em;margin-bottom:14px;color:var(--nt);font-size:15px;font-weight:600;text-align:center;text-transform:uppercase;line-height:1.3} .nt-programs .img{display:block;width:100%;aspect-ratio:1/1;border-radius:50%;background:var(--nt);overflow:hidden}.nt-programs .img img{width:100%;height:100%;object-fit:cover;transition:transform .3s} .nt-programs .item:hover .img img{transform:scale(1.06)}.nt-programs .item:hover .title{text-decoration:underline} @media (max-width:900px){.nt-programs{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:28%;overflow-x:auto;scrollbar-width:none}.nt-programs .title{font-size:11px}} /* thương hiệu */ .nt-brands{display:grid;grid-template-columns:3fr 8fr;gap:0 8%;align-items:center;margin-bottom:44px} .nt-brands h2{color:var(--nt);font-size:30px;font-weight:600;line-height:1.15;margin:0 0 10px}.nt-brands p{font-size:14px;color:#444;line-height:1.5;margin:0} .nt-brands .row{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px) / 4);gap:24px;overflow-x:auto;scrollbar-width:none} .nt-brands .brand-item .img{display:block;aspect-ratio:1/1;border-radius:15px;overflow:hidden;background:#fff}.nt-brands .brand-item .img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.nt-brands .brand-item:hover img{transform:scale(1.05)} .nt-brands .brand-item .title{display:block;text-align:center;margin-top:12px;color:#333;font-size:16px} .nt-brands .all{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px;color:var(--nt);font-size:14px}.nt-brands .all svg{width:14px;height:14px} .nt-brands .hs-wrap .nav,.nt-catsec .hs-wrap .nav{width:36px;height:36px;border-radius:50%;background:var(--nt);color:#fff;border:0;opacity:1} @media (max-width:900px){.nt-brands{grid-template-columns:minmax(0,1fr);gap:16px}.nt-brands h2{font-size:22px}.nt-brands .row{grid-auto-columns:calc((100% - 24px) / 2.3);gap:12px}} /* khối danh mục */ .nt-catsec{background:#f9f9f9;border-radius:30px;padding:30px;margin:0 calc(-1 * min(30px, 2vw)) 30px} .nt-catsec .hd{display:grid;grid-template-columns:4fr 8fr;align-items:center;gap:20px;margin-bottom:24px} .nt-catsec h2{color:var(--nt);font-size:28px;font-weight:600;text-transform:uppercase;margin:0;letter-spacing:.3px} .nt-catsec .tabs-wrap{display:flex;align-items:center;gap:12px;min-width:0} .nt-catsec .tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0} .nt-catsec .tabs button{flex:none;background:none;border:0;padding:0 12px;position:relative;font-size:14px;color:#666;text-transform:uppercase;cursor:pointer;white-space:nowrap;letter-spacing:.3px} .nt-catsec .tabs button+button:before{content:"";position:absolute;left:0;top:45%;transform:translateY(-50%);width:1px;height:12px;background:#ccc} .nt-catsec .tabs button:first-child{padding-left:0}.nt-catsec .tabs button.is-active{color:var(--nt);text-decoration:underline;text-underline-offset:3px} .nt-catsec .tabs-wrap .nav.next{position:static;transform:none;flex:none;display:grid;place-items:center} .nt-catsec .bd{display:grid;grid-template-columns:4fr 8fr;gap:0 24px}.nt-catsec .bd.no-promo{grid-template-columns:minmax(0,1fr)} .nt-catsec .promo{display:flex;flex-direction:column;gap:24px}.nt-catsec .promo img{width:100%;height:auto;display:block;border-radius:15px} .nt-catsec .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px 16px} .nt-catsec .more{text-align:center;margin-top:28px}.nt-catsec .more a{display:inline-flex;align-items:center;gap:10px;color:var(--nt);font-size:14px}.nt-catsec .more svg{width:14px;height:14px} [data-panel][hidden]{display:none!important} @media (max-width:900px){.nt-catsec{padding:18px 12px;border-radius:18px;margin:0 0 20px}.nt-catsec .hd,.nt-catsec .bd{grid-template-columns:minmax(0,1fr)}.nt-catsec .promo{display:none}.nt-catsec h2{font-size:20px}.nt-catsec .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 10px}} /* thẻ sản phẩm */ .pc.nt-card{background:none;border:0;box-shadow:none;padding:0;border-radius:0;display:flex;flex-direction:column;text-align:center} .pc.nt-card:hover{transform:none;box-shadow:none} .nt-card .p-imgbox{position:relative;border-radius:15px;background:#fff;overflow:hidden;aspect-ratio:1/1} .nt-card .p-img{display:block;width:100%;height:100%;margin:0;border-radius:0}.nt-card .p-img img{width:100%;height:100%;object-fit:contain;transition:transform .4s} .nt-card:hover .p-img img{transform:scale(1.05)} .nt-card .p-more{position:absolute;left:50%;bottom:14px;transform:translate(-50%,10px);opacity:0;transition:.25s;background:#5e5e5e;color:#fff;border-radius:30px;padding:8px 22px;font-size:13px;white-space:nowrap} .nt-card:hover .p-more{opacity:1;transform:translate(-50%,0)} .nt-card .p-labels{position:absolute;top:10px;left:10px;right:40px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none;z-index:3} .lb{display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:39px;padding:0 7px;border-radius:6px;background:var(--nt);font-size:12px;line-height:1} .lb>span{background:var(--nt-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .lb.off{background:var(--nt-gold);color:var(--nt)} .nt-card .p-name{margin:16px 0 0;padding:0 4px;font-size:15px;font-weight:400;line-height:1.45;min-height:2.9em}.nt-card .p-name a{color:#333;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .nt-card .p-price{margin-top:8px;color:var(--nt);font-size:18px;font-weight:500;padding:0;justify-content:center} .nt-card .p-old{margin-top:6px;font-size:12px;color:#777;padding:0;justify-content:center}.nt-card .p-old del{color:#777} /* footer */ .nt-footer{margin-top:40px;padding:36px 0 30px;background:linear-gradient(180deg,#ececec,#e2e2e2);border:0;color:#333} .nt-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:44px} .nt-svc .it{background:#fff;border-radius:10px;padding:24px 18px;text-align:center}.nt-svc img{height:34px;width:auto;margin:0 auto 12px;display:block} .nt-svc h4{color:var(--nt);font-size:14px;font-weight:500;text-transform:uppercase;margin:0 0 8px;letter-spacing:.3px}.nt-svc p{font-size:13px;color:var(--nt2);margin:0;line-height:1.5} .nt-cols{display:grid;grid-template-columns:6fr 3fr 3fr;gap:30px;font-size:13.5px} .nt-cols h4{color:var(--nt);font-size:15px;font-weight:600;text-transform:uppercase;margin:0 0 14px;letter-spacing:.4px} .nt-cols .txt p{margin:0 0 12px;line-height:1.55;color:var(--nt)} .nt-cols .meta{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.nt-cols .meta li{display:flex;align-items:center;gap:8px;color:var(--nt)}.nt-cols .meta svg{width:16px;height:16px}.nt-cols .meta a{color:var(--nt)} .nt-cols .links ul{list-style:none;margin:0;padding:0}.nt-cols .links li{padding:5px 0}.nt-cols .links a{color:var(--nt)} .nt-cols .right p{color:var(--nt);line-height:1.5;margin:0 0 14px} .nt-news{display:flex;background:#fff;border-radius:10px;overflow:hidden;margin-bottom:24px}.nt-news input{flex:1;border:0!important;height:44px;padding:0 14px!important}.nt-news button{width:44px;border:0;background:var(--nt);color:#fff;display:grid;place-items:center}.nt-news svg{width:16px;height:16px} .nt-cols .soc{display:flex;gap:10px;margin-bottom:22px}.nt-cols .soc a{width:40px;height:40px;border-radius:8px;background:var(--nt);display:grid;place-items:center}.nt-cols .soc img{filter:brightness(0) invert(1)} .nt-cols .logos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.nt-cols .logos img{background:#fff;border-radius:3px;padding:2px} .nt-copy{margin-top:36px;font-size:13px;color:var(--nt);line-height:1.6}.nt-copy p{margin:0} @media (max-width:900px){.nt-svc{grid-template-columns:1fr 1fr}.nt-cols{grid-template-columns:minmax(0,1fr)}.nt-cols .meta{grid-template-columns:1fr}} /* trang chi tiết */ .woocommerce-breadcrumb{margin:16px 0;font-size:13px;color:#777}.woocommerce-breadcrumb a{color:#555} .nd{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,3fr);gap:24px;align-items:start} .nd-card{background:#fff;border-radius:15px;margin-bottom:24px} .nd-top{padding:0} .nd-head{display:flex;align-items:flex-start;gap:16px;padding:20px 26px 14px;border-bottom:1px solid #eee}.nd-head h1{flex:1;font-size:24px;font-weight:500;line-height:1.3;margin:0;color:#333} .nd-like{color:var(--nt);cursor:pointer;margin-top:4px}.nd-like svg{width:20px;height:20px} .nd-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;padding:24px 26px 26px} .nd-gal .main{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#fff}.nd-gal .main img[data-main]{width:100%;height:100%;object-fit:contain} .nd-gal .main .nk-pf-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2} .nd-gal .thumbs-wrap{display:flex;align-items:center;gap:8px;margin-top:12px} .nd-gal .thumbs{flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px) / 4);gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;margin:0} .nd-gal .thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:1px solid #eee;cursor:pointer;scroll-snap-align:start}.nd-gal .thumbs img.is-active{border:2px solid var(--nt)} .nd-gal .t-nav{flex:none;width:26px;height:40px;border:0;background:none;color:var(--nt);display:grid;place-items:center;cursor:pointer;padding:0}.nd-gal .t-nav svg{width:22px;height:22px} .nd-pricebox{background:#f5f5f5;border-radius:6px;padding:16px 18px} .nd-price{display:flex;align-items:baseline;gap:14px}.nd-price .now{color:var(--nt);font-size:30px;font-weight:600}.nd-price .old{color:#999;font-size:15px} .nd-meta{display:flex;align-items:center;gap:8px;margin:10px 0} .nd-stars{display:inline-block;width:100px;height:18px;background:linear-gradient(90deg,#ffc10d var(--v,100%),#ccc var(--v,100%));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 18%22%3E%3Cpath d=%22M9 0l2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L9 13.5l-5.4 3.1 1.2-6.1L.3 6.3l6.1-.7z%22/%3E%3C/svg%3E") 0 0/20px 18px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 18%22%3E%3Cpath d=%22M9 0l2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L9 13.5l-5.4 3.1 1.2-6.1L.3 6.3l6.1-.7z%22/%3E%3C/svg%3E") 0 0/20px 18px repeat-x} .nd-code{font-size:13px;color:#777;display:flex;flex-wrap:wrap;gap:8px}.nd-code i{font-style:normal;color:#ccc}.nd-code a{color:#777} .nd-row{display:flex;align-items:center;gap:14px;margin:18px 0 0}.nd-row strong{flex:0 0 100px;font-size:16px;text-transform:uppercase;font-weight:500} .nd .opts{display:flex;flex-wrap:wrap;gap:8px}.nd .opts .opt{min-height:34px;padding:4px 14px;border:1px solid #ddd;border-radius:30px;background:#fff;font-size:14px;cursor:pointer}.nd .opts .opt.is-active,.nd .opts .opt:hover{border-color:var(--nt);color:var(--nt);background:#f5f0fa} .nd-qty{display:flex;align-items:center;gap:30px;margin:26px 0 22px}.nd-qty strong{font-size:18px;font-weight:500;text-transform:uppercase;color:#333} .nd .nk-qtyb{border:1px solid #ccc;border-radius:6px;overflow:hidden}.nd .nk-qtyb button{width:42px;height:38px;font-size:18px;background:#fff}.nd .nk-qtyb input{width:66px;height:38px} .pd-form{display:block!important;margin:0;padding:0}.pd-varform{height:0;overflow:hidden;margin:0;padding:0} .nd .nd-add{display:flex!important;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;border:1px solid var(--nt)!important;border-radius:6px;background:#fff!important;color:var(--nt)!important;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;position:static!important;clip:auto!important;margin:0 0 14px!important;cursor:pointer;transition:.2s} .nd .nd-add:hover{background:var(--nt)!important;color:#fff!important}.nd-add svg,.nd-buy svg{width:18px;height:18px} .nd form.cart .nd-add::before{content:none!important;display:none!important} .nd-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14px} .nd-branch{display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:6px;background:var(--nt-l);color:#333;font-size:13px;line-height:1.25}.nd-branch svg{width:18px;height:18px;color:var(--nt);flex:none} .nd .nd-buy,.woocommerce .nd a.nd-buy{display:flex!important;align-items:center;justify-content:center;gap:10px;height:46px;border:0;border-radius:6px;background:var(--nt)!important;color:#fff!important;font-size:14px;font-weight:600;text-transform:uppercase;cursor:pointer} .nd .nd-buy:hover{background:#2f1f52!important} .nd-tabs{padding:20px 26px 26px} .nd-tabs .tabs-nav{display:flex;list-style:none;margin:0 0 20px;padding:0;border:1px solid #ddd;border-radius:6px;overflow:hidden} .nd-tabs .tabs-nav li{flex:1}.nd-tabs .tabs-nav button{width:100%;height:42px;border:0;border-left:1px solid #ddd;background:#fff;color:#333;font-size:13px;text-transform:uppercase;cursor:pointer;padding:0 6px} .nd-tabs .tabs-nav li:first-child button{border-left:0}.nd-tabs .tabs-nav button.is-active{background:var(--nt);color:#fff} .nd-content{font-size:15px;line-height:1.7;color:#333}.nd-content img{max-width:100%;height:auto;display:block;margin:12px auto}.nd-content p{margin:0 0 10px} .nd-tab .desc-body:not(.is-open){max-height:600px;overflow:hidden;position:relative}.nd-tab .desc-body:not(.is-open):after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,#fff)} .nd-tab .desc-toggle{text-align:left;margin-top:14px} .nd-more{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 22px;border:0;border-radius:6px;background:var(--nt);color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;cursor:pointer}.nd-more svg{width:14px;height:14px} .nd-rv{padding:22px 26px}.nd .pd-rv>h2{color:var(--nt);font-size:24px;font-weight:600;font-style:italic}.nd .pd-rv-box{background:#faf8fd;border-color:#ece5f4}.nd .pd-rv .rv-filter button.is-active{border-color:var(--nt);color:var(--nt)} .nd-side{position:sticky;top:90px} .nd-spec{list-style:none;margin:0 0 20px;padding:22px 20px;border-radius:15px;background:var(--nt);color:#fff;box-shadow:-1px 3px 25px rgba(0,0,0,.06)} .nd-spec li{display:flex;gap:14px;padding:12px 0}.nd-spec li+li{border-top:1px solid rgba(255,255,255,.15)}.nd-spec .ic{flex:none;width:30px;color:#fff}.nd-spec .ic svg{width:26px;height:26px} .nd-spec strong{display:block;font-size:13px;font-weight:600;margin-bottom:4px}.nd-spec span{font-size:12.5px;line-height:1.45;opacity:.9} .nd-rel-title{color:var(--nt);font-size:24px;font-weight:600;margin:0 0 14px} .nd-rel{display:grid;gap:24px} @media (max-width:1000px){.nd{grid-template-columns:minmax(0,1fr)}.nd-body{grid-template-columns:minmax(0,1fr);padding:14px}.nd-head{padding:14px}.nd-head h1{font-size:18px}.nd-price .now{font-size:24px}.nd-tabs{padding:14px}.nd-tabs .tabs-nav{overflow-x:auto}.nd-tabs .tabs-nav li{flex:none}.nd-tabs .tabs-nav button{padding:0 14px;white-space:nowrap}.nd-side{position:static}.nd-rel{grid-template-columns:1fr 1fr;gap:14px}.nd-bottom{grid-template-columns:1fr}} /* trang danh mục */ .shop-box{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0 28px;align-items:start;background:none;padding:0;box-shadow:none} .shop-box>*{grid-column:2}.shop-box>.cc-side{grid-column:1;grid-row:1 / span 20;background:none;padding:0;position:static} .shop-head{background:none;padding:6px 0;margin:0}.shop-head h1{font-size:18px;color:var(--nt);text-transform:uppercase;font-weight:600}.shop-head h1 small{display:none} .cc-side .grp{border-bottom:1px solid #ddd;padding:0 0 14px;margin-bottom:14px}.cc-side h4{color:var(--nt);font-size:15px;margin:0 0 10px} .cc-side .ck{padding:4px 0;font-size:14px;color:#333}.cc-side .ck.is-active{color:var(--nt);font-weight:600}.cc-side .ck.is-active:before{background:var(--nt);border-color:var(--nt)} .cc-clear{background:var(--nt);color:#fff;border-radius:6px} .cc-sortbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:none;padding:0 0 18px;justify-content:flex-end}.cc-sortbar b{color:#333;font-size:13px;text-transform:uppercase} .cc-sortbar a{border:1px solid #ddd;border-radius:30px;padding:4px 14px;color:#333;font-size:13px;background:#fff}.cc-sortbar a.is-active{border-color:var(--nt);color:#fff;background:var(--nt)} .shop-box ul.products,.shop-box .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:28px 16px} @media (max-width:1000px){.shop-box{grid-template-columns:minmax(0,1fr)}.shop-box>*,.shop-box>.cc-side{grid-column:1;grid-row:auto}.cc-side{display:flex;gap:16px;overflow-x:auto}.cc-side .grp{min-width:170px;border:0}.shop-box ul.products,.shop-box .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} /* nút nổi, menu */ .nk-side-ban{display:none!important} ul.nk-menu ul.sub-menu a:hover{color:var(--nt)} .nt-cols .logos img{height:24px!important;width:auto!important;max-width:60px;object-fit:contain;background:#fff;border-radius:3px;padding:2px 4px} .nt-cols .logos.badges img{height:38px!important;max-width:none;background:none;padding:0} .nt-cols .soc a{background:#fff;border:1px solid var(--nt-l)}.nt-cols .soc img{filter:none;width:20px;height:20px} .nd-content h1,.nd-content h2,.nd-content h3,.nd-content h4{font-size:17px;font-weight:600;line-height:1.45;margin:14px 0 8px;color:#222} .nd-content strong,.nd-content b{font-weight:600}.nd-content p:empty{display:none} .woocommerce .nd .nd-more,.nd .nd-more{color:#fff!important}.woocommerce a.cc-clear,a.cc-clear{color:#fff!important} .nd .pd-rv .rv-form summary{background:var(--nt);color:#fff;border-color:var(--nt)} @media (max-width:1000px){.pd-mbar>*,.woocommerce .pd-mbar>a{background:var(--nt-l);color:var(--nt)}.pd-mbar .add{border-left:1px solid #fff!important}.woocommerce .pd-mbar a.chat{color:var(--nt)}.pd-mbar .buy,.woocommerce .pd-mbar a.buy{background:var(--nt);color:#fff}}