/* Theme Name: Flatsome Child — Ắc Quy Tận Nơi Template: flatsome Version: 1.0.0 Description: Child theme acquytannoi.com — token màu + component theo bản thiết kế Claude Design 10/08/2026. KHÔNG thêm inline width CSS (guardrail responsive). */ /* ============ DESIGN TOKENS ============ */ :root { --aq-navy: #0A2E6B; --aq-navy-d: #071F4A; --aq-navy-l: #0D3A85; --aq-cta: #FF4D1C; --aq-cta-d: #E63E0F; --aq-yellow: #FFC400; --aq-zalo: #0068FF; --aq-zalo-d: #0053CC; --aq-bg: #F5F7FA; --aq-ink: #1B2A4A; --aq-ink-2: #3A4E70; --aq-mut: #6B7C97; --aq-mut-2: #8A97AC; --aq-line: #E3E9F2; --aq-green: #1F7A3D; --aq-font-head: 'Archivo', 'Be Vietnam Pro', system-ui, sans-serif; } body { font-family: 'Be Vietnam Pro', system-ui, sans-serif; color: var(--aq-ink); } h1,h2,h3,.aq-head { font-family: var(--aq-font-head); color: var(--aq-navy); } /* ============ NÚT CTA ============ */ .aq-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--aq-font-head); font-weight:800; border-radius:11px; line-height:1; padding:16px 24px; font-size:17px; color:#fff !important; text-transform:none; min-height:48px; } .aq-btn-call { background:var(--aq-cta); } .aq-btn-call:hover { background:var(--aq-cta-d); color:#fff; } .aq-btn-zalo { background:var(--aq-zalo); } .aq-btn-zalo:hover { background:var(--aq-zalo-d); color:#fff; } .aq-btn-line { background:#fff; border:2px solid var(--aq-navy); color:var(--aq-navy) !important; } .aq-btn-line:hover { background:var(--aq-navy); color:#fff !important; } .aq-btn-block { display:flex; width:100%; } @keyframes aqPulse { 0%{box-shadow:0 0 0 0 rgba(255,77,28,.55)} 70%{box-shadow:0 0 0 16px rgba(255,77,28,0)} 100%{box-shadow:0 0 0 0 rgba(255,77,28,0)} } .aq-pulse { animation: aqPulse 2s infinite; } /* ============ SOS STICKY BAR (mobile) ============ */ .aq-sos { position:fixed; left:0; right:0; bottom:0; z-index:9999; display:none; height:62px; border-top:2px solid var(--aq-yellow); box-shadow:0 -8px 24px rgba(2,10,30,.25); } .aq-sos a { display:flex; align-items:center; justify-content:center; gap:9px; color:#fff; font-family:var(--aq-font-head); font-weight:800; font-size:16px; } .aq-sos-call { flex:3; background:var(--aq-cta); } .aq-sos-zalo { flex:2; background:var(--aq-zalo); } @media (max-width: 849px) { .aq-sos { display:flex; } body { padding-bottom:62px; } } /* ============ CARD & KHỐI CHUNG ============ */ .aq-card { background:#fff; border:1px solid var(--aq-line); border-radius:14px; } .aq-chip { background:#fff; border:1px solid #D6DEEA; border-radius:999px; padding:5px 13px; font-size:13px; font-weight:600; color:var(--aq-ink-2); display:inline-block; } .aq-badge { background:var(--aq-navy); color:#fff; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; display:inline-block; } .aq-kicker { font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--aq-cta); } .aq-tick { color:var(--aq-cta); font-weight:700; } .aq-check-row { display:flex; gap:20px; flex-wrap:wrap; font-size:14px; } .aq-check-row > span { display:flex; gap:7px; align-items:center; } /* Khối giá trọn gói */ .aq-price-label { font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--aq-mut-2); } .aq-price { font-family:var(--aq-font-head); font-weight:900; font-size:25px; color:var(--aq-cta); line-height:1.1; } .aq-price-xl { font-size:34px; } .aq-price-note { font-size:12px; color:var(--aq-mut); } .aq-price-box { background:#fff; border:2px solid var(--aq-navy); border-radius:16px; overflow:hidden; } .aq-price-box-head { background:var(--aq-navy); color:#fff; padding:11px 20px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--aq-font-head); font-weight:800; font-size:15px; } .aq-price-box-head small { font-size:12px; color:var(--aq-yellow); font-weight:600; } .aq-price-row { display:flex; justify-content:space-between; gap:12px; font-size:14.5px; color:var(--aq-ink-2); padding:4px 0; } /* Quy trình 4 bước */ .aq-step-num { width:46px; height:46px; border-radius:11px; background:var(--aq-navy); color:var(--aq-yellow); font-family:var(--aq-font-head); font-weight:900; font-size:22px; display:flex; align-items:center; justify-content:center; } /* Hero */ .aq-hero { background:linear-gradient(140deg,#0D3A85 0%,#0A2E6B 45%,#071F4A 100%); color:#fff; } .aq-hero h1, .aq-hero h2 { color:#fff; } .aq-hero .aq-sub { color:rgba(255,255,255,.88); } .aq-hero-badge { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,196,0,.5); color:var(--aq-yellow); font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:7px 14px; border-radius:999px; } .aq-hero-badge::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--aq-yellow); } /* Finder */ .aq-finder { background:#fff; border-radius:16px; box-shadow:0 24px 55px rgba(10,46,107,.16); padding:26px 28px 24px; border:1px solid #E8EDF5; } .aq-finder.aq-float { margin-top:-84px; position:relative; z-index:2; } .aq-finder label span { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--aq-mut); display:block; margin-bottom:7px; } .aq-finder select { width:100%; padding:14px; font-size:16px; border:1.5px solid #D6DEEA; border-radius:10px; background:#F9FBFD; color:var(--aq-ink); } .aq-finder-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; } .aq-finder-result { margin-top:18px; background:#F0F6FF; border:1.5px solid rgba(10,46,107,.16); border-radius:12px; padding:18px 20px; display:flex; gap:24px; align-items:center; flex-wrap:wrap; } /* FAQ accordion */ .aq-faq { border:1px solid var(--aq-line); border-radius:12px; overflow:hidden; margin-bottom:10px; background:#fff; } .aq-faq > button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; background:#F9FBFD; border:none; cursor:pointer; padding:15px 18px; font-family:inherit; font-size:15px; font-weight:600; color:var(--aq-navy); text-align:left; min-height:48px; } .aq-faq > button::after { content:'▾'; color:var(--aq-mut-2); transition:transform .2s; } .aq-faq.open > button::after { transform:rotate(180deg); } .aq-faq > div { display:none; padding:14px 18px 16px; font-size:14.5px; line-height:1.65; color:var(--aq-ink-2); border-top:1px solid #EDF1F7; } .aq-faq.open > div { display:block; } /* Modal đặt thay */ .aq-modal-ov { position:fixed; inset:0; z-index:99999; background:rgba(7,17,40,.62); display:none; align-items:center; justify-content:center; padding:20px; } .aq-modal-ov.open { display:flex; } .aq-modal { position:relative; background:#fff; border-radius:16px; max-width:430px; width:100%; padding:26px; display:flex; flex-direction:column; gap:14px; box-shadow:0 30px 70px rgba(2,10,30,.4); } .aq-modal-x { position:absolute; top:12px; right:12px; width:34px; height:34px; border:none; background:#F0F3F8; border-radius:9px; font-size:16px; color:var(--aq-mut); cursor:pointer; } .aq-zalo-hint { background:#F0F6FF; border:1.5px dashed rgba(10,46,107,.3); border-radius:10px; padding:12px 14px; font-size:13.5px; color:var(--aq-ink-2); } /* Bảng thông số / bảng phí kẻ sọc */ .aq-table { border:1px solid var(--aq-line); border-radius:14px; overflow:hidden; background:#fff; } .aq-table > div { display:flex; gap:14px; padding:12px 18px; font-size:14px; } .aq-table > div:nth-child(even) { background:#F9FBFD; } .aq-table > div + div { border-top:1px solid #EDF1F7; } /* Footer nền navy đậm */ .aq-footer-dark { background:var(--aq-navy-d); color:rgba(255,255,255,.78); } .aq-footer-dark a { color:rgba(255,255,255,.78); } .aq-footer-dark a:hover { color:var(--aq-yellow); } /* Toast copy Zalo */ .aq-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:80px; z-index:100000; background:var(--aq-navy); color:#fff; font-size:14px; font-weight:600; padding:12px 20px; border-radius:10px; box-shadow:0 12px 30px rgba(2,10,30,.35); opacity:0; transition:opacity .25s; pointer-events:none; } .aq-toast.show { opacity:1; } /* Mobile tinh chỉnh */ @media (max-width: 549px) { .aq-btn { font-size:15.5px; padding:14px 18px; } .aq-price-xl { font-size:28px; } .aq-finder.aq-float { margin-top:-40px; } } /* ============ HEADER: menu + nút hotline cùng một hàng ============ */ .header-nav-main { flex-wrap: nowrap; } .header-nav-main > li > a.nav-top-link { font-size: 14.5px; white-space: nowrap; } @media (min-width: 850px) and (max-width: 1200px) { .header-nav-main > li > a.nav-top-link { font-size: 13px; padding-left: 7px; padding-right: 7px; } .html_topbar_left .aq-btn { padding: 9px 13px !important; font-size: 13.5px !important; } } .html_topbar_left { margin-left: 10px; } .html_topbar_left .aq-btn { white-space: nowrap; } /* dropdown menu: nền trắng chữ navy như design */ .nav-dropdown { border-radius: 14px; padding: 14px 6px; box-shadow: 0 20px 50px rgba(2,10,30,.3); } .nav-dropdown > li > a { font-size: 14px; font-weight: 600; color: var(--aq-navy); } .nav-dropdown > li > a:hover { color: var(--aq-cta); } /* Trang dùng template full-width (page-blank): bỏ padding trên/dưới của wrapper để section hero dán sát header đúng như bản thiết kế. */ .page-template-page-blank .page-wrapper, .page-template-page-blank-landingpage .page-wrapper { padding-top: 0; padding-bottom: 0; } /* ============ TAB 5 THƯƠNG HIỆU: đổi tab gạch chân của Flatsome thành CHIP như thiết kế ============ */ .tabbed-content > ul.nav { border: none !important; justify-content: center; gap: 10px; margin-bottom: 0; } .tabbed-content > ul.nav > li { margin: 0 !important; } .tabbed-content > ul.nav > li > a { border: 1.5px solid #D6DEEA !important; background: #fff; border-radius: 999px !important; padding: 11px 22px !important; margin: 0 !important; font-family: var(--aq-font-head); font-weight: 700; font-size: 15px; color: var(--aq-navy) !important; text-transform: none !important; letter-spacing: 0; line-height: 1; } .tabbed-content > ul.nav > li > a span { text-transform: none; font-size: 15px; } .tabbed-content > ul.nav > li.active > a, .tabbed-content > ul.nav > li > a:hover { background: var(--aq-navy) !important; color: #fff !important; border-color: var(--aq-navy) !important; } .tabbed-content > ul.nav > li > a::before, .tabbed-content > ul.nav > li > a::after { display: none !important; } .tabbed-content .tab-panels { padding-top: 26px; } /* Nút trong card sản phẩm: navy, hover cam (đúng thiết kế) */ .aq-btn-navy { background: var(--aq-navy); } .aq-btn-navy:hover { background: var(--aq-cta); color: #fff !important; } /* Ảnh chưa gắn: khối sọc placeholder thay vì chữ "Upload Image..." trần */ .uxb-no-content.uxb-image { background: repeating-linear-gradient(45deg,#EDF2F8 0 12px,#E4EBF4 12px 24px); color: #7A8AA6; font-family: ui-monospace, Menlo, monospace; font-size: 12px; display: flex; align-items: center; justify-content: center; min-height: 150px; border-radius: 10px; } /* Finder: khoá chiều cao select của Flatsome để chữ không bị cắt */ .aq-finder select { height: auto !important; line-height: 1.4; } .aq-finder h2 { line-height: 1.25; } /* ============ MENU: chữ trắng đều + mũi tên dropdown nằm cùng dòng ============ */ .header-nav-main > li > a.nav-top-link, .header-nav-main > li > a.nav-top-link span { color: #fff !important; opacity: 1 !important; } .header-nav-main > li > a.nav-top-link:hover, .header-nav-main > li.active > a.nav-top-link, .header-nav-main > li.current-menu-item > a.nav-top-link { color: var(--aq-yellow) !important; } /* mũi tên: inline, không đẩy chữ xuống dòng */ .header-nav-main > li > a.nav-top-link > i.icon-angle-down { display: inline-block !important; vertical-align: middle; margin: 0 0 0 5px !important; font-size: 11px; line-height: 1; opacity: .7; } /* các mục cao đều nhau */ .header-nav-main > li { display: flex; align-items: center; } .header-nav-main > li > a.nav-top-link { display: flex; align-items: center; line-height: 1.2; } /* ================= SỬA 13/08 đợt 2: menu · dropdown · card đều nhau · giãn cách ================= */ /* --- 1. MENU: mọi mục thẳng hàng, mũi tên nằm cùng dòng với chữ --- */ .header-nav-main { align-items: stretch; } .header-nav-main > li.menu-item { display: flex; align-items: center; } .header-nav-main > li.menu-item > a.nav-top-link { display: inline-flex !important; align-items: center; gap: 5px; height: auto; line-height: 1.2; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .header-nav-main > li.menu-item > a.nav-top-link > i, .header-nav-main > li.menu-item > a.nav-top-link > i.icon-angle-down { display: inline-block !important; position: static !important; float: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; font-size: 11px; line-height: 1; opacity: .7; transform: none !important; } /* --- 2. DROPDOWN: chữ navy trên nền trắng, không mất chữ, không cắt hàng --- */ .nav-dropdown, .nav-dropdown.nav-dropdown-default { background: #fff !important; border-radius: 14px; padding: 14px 8px !important; box-shadow: 0 20px 50px rgba(2,10,30,.28); border: 1px solid var(--aq-line); max-height: min(78vh, 640px); overflow-y: auto; } .nav-dropdown li > a, .nav-dropdown li > a:visited { color: var(--aq-navy) !important; font-size: 14px; font-weight: 600; padding: 9px 16px !important; line-height: 1.4; white-space: normal; /* tên dài xuống dòng gọn, không bị cắt */ border-bottom: none !important; text-transform: none !important; } .nav-dropdown li > a:hover { color: var(--aq-cta) !important; background: #F7F9FC; border-radius: 8px; } .nav-dropdown li.nav-dropdown-col > a { /* nhãn cột: chữ nhỏ, mờ, không bấm được */ font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase !important; color: var(--aq-mut-2) !important; pointer-events: none; padding-bottom: 4px !important; } .nav-dropdown .nav-column, .nav-dropdown-default .nav-column { min-width: 210px; } .nav-dropdown li { border: none !important; } /* --- 3. CARD CAO BẰNG NHAU (quy trình 4 bước, card sản phẩm) --- CHỈ áp cho col NÀO CÓ .aq-card bên trong (dùng :has), không đụng col khác của site. */ .aq-card { display: flex; flex-direction: column; } .col:has(> .col-inner .aq-card) { display: flex; flex-direction: column; } .col:has(> .col-inner .aq-card) > .col-inner { display: flex; flex-direction: column; flex: 1; } .col:has(> .col-inner .aq-card) > .col-inner > .ux-html { display: flex; flex-direction: column; flex: 1; } .col:has(> .col-inner .aq-card) .aq-card { flex: 1; } .aq-step-num { flex: 0 0 auto; } /* ô số không bị bóp méo khi tiêu đề dài */ .aq-card > h3, .aq-card > .aq-head { min-height: 2.6em; } /* tiêu đề 1–2 dòng vẫn thẳng hàng */ /* --- 4. GIÃN CÁCH GIỮA SECTION: xem khối "SỬA đợt 3 · D" bên dưới (luật cuối cùng) --- */ .aq-page .row + .row { margin-top: 6px; } .aq-page .section .ux-html + .ux-html { margin-top: 0; } /* ================= SỬA 13/08 đợt 3 ================= */ /* --- A. Mũi tên nhọn của dropdown (body.nav-dropdown-has-arrow) đè lên chữ dòng đầu → bỏ hẳn --- */ .nav-dropdown::before, .nav-dropdown::after, .nav-dropdown-has-arrow li.has-dropdown::before, .nav-dropdown-has-arrow li.has-dropdown::after { display: none !important; content: none !important; } .nav-dropdown { margin-top: 6px; } /* --- B. Menu + nút hotline LUÔN cùng một hàng --- */ .header-nav.header-nav-main { flex-wrap: nowrap !important; align-items: center; } .header-nav-main > li.html.custom { display: flex; align-items: center; margin-left: 8px; flex: 0 0 auto; } .header-nav-main > li.menu-item > a.nav-top-link { padding-left: 10px !important; padding-right: 10px !important; } @media (min-width: 850px) and (max-width: 1300px) { .header-nav-main > li.menu-item > a.nav-top-link { font-size: 13px; padding-left: 7px !important; padding-right: 7px !important; } .html_topbar_left .aq-btn { padding: 9px 14px !important; font-size: 13.5px !important; } } /* --- C. Card 4 bước: tiêu đề khóa đúng 2 dòng để phần mô tả thẳng hàng tuyệt đối --- */ .aq-card > h3, .aq-card > .aq-head { line-height: 1.35 !important; min-height: 2.7em !important; margin: 0 0 2px !important; display: flex; align-items: flex-start; } .aq-card > p { margin-top: 0 !important; } /* --- D. GIÃN CÁCH: siết chặt hơn nữa --- */ .aq-page .section { padding-top: 30px !important; padding-bottom: 30px !important; } /* Hero: 110px đáy CHỈ đúng ở trang chủ — nơi khối #aq-finder có margin-top:-84px kéo lên đè vào hero. Trang khác mượn .aq-hero chỉ để lấy nền navy → thừa 110px trắng. */ .aq-page .section.aq-hero { padding-top: 56px !important; padding-bottom: 30px !important; } .home.aq-page .section.aq-hero { padding-bottom: 110px !important; } .aq-page .section .row { margin-bottom: 0; } /* CHỈ bỏ padding đáy khi các cột nằm CÙNG MỘT HÀNG (desktop ≥1025px). Dưới ngưỡng này cột xuống hàng → padding đáy chính là GAP DỌC, bỏ đi là các ô dính vào nhau (đã dính: ảnh cứu hộ 2 cột + card quy trình 1234 trên tablet). */ @media (min-width: 1025px) { .aq-page .section .col { padding-bottom: 0 !important; } } @media (max-width: 1024px) { .aq-page .section .col { padding-bottom: 16px !important; } /* KHÔNG bỏ padding cột cuối: col cuối sẽ cao hơn 16px làm card trong hàng lệch nhau */ } .aq-page #aq-finder { margin-bottom: 0; } .aq-page .section .ux-html > div:last-child { margin-bottom: 0; } @media (max-width: 849px) { .aq-page .section { padding-top: 24px !important; padding-bottom: 24px !important; } .aq-card > h3, .aq-card > .aq-head { min-height: 0 !important; } } /* --- E. THỦ PHẠM menu 2 dòng: Flatsome đặt flex-wrap:wrap trên nên mũi tên rớt xuống --- */ ul.header-nav-main > li > a.nav-top-link, ul.header-nav-main > li.has-dropdown > a.nav-top-link { flex-wrap: nowrap !important; white-space: nowrap !important; align-items: center !important; height: auto !important; } ul.header-nav-main > li > a.nav-top-link > i, ul.header-nav-main > li.has-dropdown > a.nav-top-link > i.icon-angle-down { display: inline-block !important; width: auto !important; flex: 0 0 auto !important; margin: 0 0 0 5px !important; line-height: 1 !important; font-size: 11px !important; position: static !important; top: auto !important; opacity: .7; } /* --- F. LOGO nằm TRONG ul.header-nav-main → flex-wrap:nowrap làm ảnh bị bóp nhỏ --- */ ul.header-nav-main > li.html.custom > a > img, ul.header-nav-main img.header_logo, ul.header-nav-main img.header-logo, #logo img, #logo a { flex: 0 0 auto !important; width: auto !important; max-width: none !important; height: auto !important; min-width: 0; } ul.header-nav-main img.header_logo { width: 200px !important; } /* Flatsome in kèm bản logo dark (dùng cho header trong suốt) — ẩn đi kẻo hiện 2 logo */ img.header-logo-dark, .header-logo-dark { display: none !important; } #logo, .header-nav-main > li#logo { flex: 0 0 auto !important; } @media (max-width: 849px) { ul.header-nav-main img.header_logo, ul.header-nav-main img.header-logo { width: 170px !important; } } /* --- G. DROPDOWN phải mở XUỐNG DƯỚI mục cha, không che lên menu --- */ .header-nav-main > li.has-dropdown { position: relative !important; } .header-nav-main > li.has-dropdown > ul.nav-dropdown { top: 100% !important; bottom: auto !important; left: 0 !important; right: auto !important; transform: none !important; margin-top: 4px !important; } /* --- H. SOS BAR: 2 nút rộng BẰNG NHAU (trước 3:2 nên nút gọi dài hơn) --- */ .aq-sos-call, .aq-sos-zalo { flex: 1 1 50% !important; } .aq-sos a { font-size: 15px; padding: 0 6px; text-align: center; line-height: 1.2; } /* ================= SỬA 20/08 đợt 7 ================= */ /* --- I. Section "Cứu hộ thực tế" MƯỢN nền .aq-hero nhưng KHÔNG phải hero đầu trang. Luật hero để padding-bottom 110px (chừa chỗ cho khối finder đè lên) → section này thừa ~80px trắng trước khối Maps. Trả về mức section thường. --- */ .aq-page .section.aq-hero.aq-proof { padding-top: 40px !important; padding-bottom: 30px !important; } @media (max-width: 849px) { .aq-page .section.aq-hero.aq-proof { padding-top: 28px !important; padding-bottom: 24px !important; } } /* --- J. TABLET: 6 ảnh thực tế xếp 2 hàng × 3 ảnh. Flatsome tự sinh medium-2 (6 ảnh/hàng từ 550px) → ở iPad ảnh bé xíu. Mobile <550px giữ 2/hàng (small-6), desktop ≥1025px giữ 6/hàng (large-2). --- */ @media (min-width: 550px) and (max-width: 1024px) { .aq-proof .col.large-2 { flex-basis: 33.3333% !important; max-width: 33.3333% !important; width: 33.3333% !important; } } /* --- K. Ảnh sản phẩm DÍNH SÁT card thông số/giá (ux_image + ux_html nằm chung .col-inner, Flatsome không chèn khoảng nào) → chừa khoảng thở ở mọi viewport. --- */ .col-inner > .img { margin-bottom: 0 !important; } .col-inner > .img + .aq-card, .col-inner > .img + .ux-html, .col-inner > .img + div > .aq-card { margin-top: 14px !important; } /* --- L. Bài viết có hero riêng: khối tiêu đề mặc định của Flatsome đã được GỠ trong functions.php (filter theme_mod), không ẩn bằng CSS — xem chú thích ở đó. --- */ .aq-has-hero-h1 .entry-header:empty { display: none; } /* ============ CARD SẢN PHẨM (shortcode [aq_products], dữ liệu từ Woo) ============ */ .aq-p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .aq-p-card { display: flex; flex-direction: column; overflow: hidden; } .aq-p-thumb { position: relative; height: 150px; background: var(--aq-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; } .aq-p-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .aq-p-noimg { font-size: 12px; color: var(--aq-mut-2); } .aq-p-badge { position: absolute; top: 10px; left: 10px; } .aq-p-body { padding: 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .aq-p-name { margin: 0 !important; font-size: 15.5px; line-height: 1.35; min-height: 0 !important; } .aq-p-name a { color: var(--aq-navy); } .aq-p-name a:hover { color: var(--aq-cta); } .aq-p-spec { font-size: 13px; color: var(--aq-ink-2); } .aq-p-price { margin-top: auto; display: flex; flex-direction: column; gap: 1px; } .aq-p-shop { font-size: 12.5px; color: var(--aq-mut-2); } .aq-p-shop b { font-weight: 600; color: var(--aq-ink-2); } .aq-p-price .aq-price-label { margin-top: 5px; } .aq-p-empty { background: #fff; border: 1.5px dashed var(--aq-line); border-radius: 14px; padding: 32px 24px; text-align: center; font-size: 14.5px; color: var(--aq-ink-2); } .aq-p-empty a { font-weight: 700; color: var(--aq-cta); } /* Card sản phẩm trong vòng lặp Woo: cột co giãn giống lưới shortcode */ .products .aq-p-col { flex: 0 0 25%; max-width: 25%; padding-bottom: 16px !important; } .products .aq-p-col > .col-inner { display: flex; height: 100%; } .products .aq-p-col .aq-p-card { flex: 1; } @media (max-width: 1024px) { .products .aq-p-col { flex-basis: 33.3333%; max-width: 33.3333%; } } @media (max-width: 767px) { .products .aq-p-col { flex-basis: 50%; max-width: 50%; } } @media (max-width: 479px) { .products .aq-p-col { flex-basis: 100%; max-width: 100%; } } /* ============ TRANG CHI TIẾT SẢN PHẨM (theo bản thiết kế) ============ */ .aq-sp { display: flex; flex-direction: column; gap: 40px; } .aq-sp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; } .aq-sp-gallery { display: flex; flex-direction: column; gap: 10px; } .aq-sp-main { background: #fff; border: 1px solid var(--aq-line); border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; } .aq-sp-main img { width: 100%; height: 100%; object-fit: contain; padding: 18px; } .aq-sp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .aq-sp-thumb { height: 74px; border-radius: 10px; overflow: hidden; border: 1px solid var(--aq-line); background: #fff; display: flex; align-items: center; justify-content: center; } .aq-sp-thumb img { width: 100%; height: 100%; object-fit: cover; } .aq-sp-thumb span { font-size: 11px; color: var(--aq-mut-2); text-align: center; padding: 4px; } .aq-sp-info { display: flex; flex-direction: column; gap: 16px; } .aq-sp-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .aq-sp-title { margin: 0 !important; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; min-height: 0 !important; } .aq-sp-chips { display: flex; gap: 8px; flex-wrap: wrap; } .aq-price-box-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; } .aq-price-row .aq-b { font-weight: 600; } .aq-price-row .aq-free { font-weight: 700; color: var(--aq-green); } .aq-price-sep { border-top: 1.5px dashed #D6DEEA; margin: 4px 0; } .aq-price-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .aq-price-total .aq-price-label { font-size: 13px; color: var(--aq-mut); } .aq-sp-cta { display: flex; flex-direction: column; gap: 10px; } .aq-sp-carpick { display: flex; flex-direction: column; gap: 6px; } .aq-sp-carpick > span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--aq-mut); } .aq-sp-carpick select { width: 100%; padding: 13px; font-size: 16px; border: 1.5px solid #D6DEEA; border-radius: 10px; background: #fff; color: var(--aq-ink); } .aq-zalo-hint { display: flex; flex-direction: column; gap: 4px; } .aq-hint-label { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--aq-mut-2); } .aq-sp-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start; } .aq-sp-spec h2 { margin: 0 0 16px; font-size: 23px; } .aq-table .aq-k { width: 46%; flex: none; font-weight: 600; color: var(--aq-mut); } .aq-table .aq-v { font-weight: 600; color: var(--aq-ink); } .aq-note { margin: 12px 0 0; font-size: 12.5px; color: var(--aq-mut-2); } .aq-sub-line { margin: 0 0 16px; font-size: 14px; color: var(--aq-ink-2); } .aq-fitcars { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .aq-fitcar { display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; background: #F9FBFD; border: 1px solid var(--aq-line); border-radius: 10px; padding: 12px 15px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--aq-navy); text-align: left; } .aq-fitcar:hover { border-color: var(--aq-cta); color: var(--aq-cta); } .aq-fitcar span { color: #B4BFD0; } .aq-warn { margin-top: 18px; background: #FFF7E6; border: 1px solid rgba(255,196,0,.55); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6; color: #5F4A00; } .aq-warn a { font-weight: 700; color: var(--aq-cta); } .aq-sp-desc { font-size: 15.5px; line-height: 1.75; } .aq-sp .related > h2, .aq-sp .up-sells > h2 { font-size: 23px; } @media (max-width: 849px) { .aq-sp { gap: 28px; } .aq-sp-top { grid-template-columns: 1fr; gap: 22px; } .aq-sp-spec { gap: 26px; } } .aq-sp-related h2 { font-size: 23px; margin: 0 0 16px; } /* ============ BÀI VIẾT (theo bản thiết kế) ============ */ .aq-blog { max-width: 1080px; margin: 0 auto; padding: 16px 24px 48px; } .aq-crumb { font-size: 13.5px; color: var(--aq-mut); padding-bottom: 6px; } .aq-crumb a { color: var(--aq-mut); } .aq-crumb a:hover { color: var(--aq-cta); } .aq-crumb span { margin: 0 7px; color: #B4BFD0; } .aq-crumb strong { font-weight: 600; color: var(--aq-navy); } .aq-blog-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; padding-top: 22px; } .aq-blog-main { min-width: 0; } .aq-blog-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; } .aq-blog-meta-txt { font-size: 13px; color: var(--aq-mut-2); } .aq-blog-title { margin: 0 0 14px !important; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.18; min-height: 0 !important; } .aq-blog-sapo { margin: 0 0 18px; font-size: 16.5px; line-height: 1.65; color: var(--aq-ink-2); } .aq-blog-hero { height: 300px; border-radius: 16px; overflow: hidden; margin-bottom: 20px; } .aq-blog-hero img { width: 100%; height: 100%; object-fit: cover; } .aq-toc { background: #fff; border: 1px solid var(--aq-line); border-radius: 14px; padding: 18px 22px; margin-bottom: 26px; } .aq-toc-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aq-mut); } .aq-toc > div { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .aq-toc a { font-size: 14.5px; font-weight: 600; } .aq-blog-body { font-size: 15.5px; line-height: 1.75; color: var(--aq-ink-2); } .aq-blog-body h2.aq-h2 { margin: 26px 0 12px; font-size: 24px; scroll-margin-top: 90px; } .aq-blog-body h3 { margin: 20px 0 10px; font-size: 18.5px; } .aq-blog-body p { margin: 0 0 14px; } .aq-blog-body ul, .aq-blog-body ol { margin: 0 0 16px; padding-left: 20px; } .aq-blog-body li { margin-bottom: 7px; } .aq-blog-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; } .aq-side-cta, .aq-side-rel { padding: 20px; display: flex; flex-direction: column; gap: 10px; } .aq-side-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aq-mut); } .aq-side-head { font-family: var(--aq-font-head); font-weight: 800; font-size: 17px; color: var(--aq-navy); line-height: 1.3; } .aq-side-cta .aq-btn { font-size: 15px; padding: 13px; } .aq-side-note { font-size: 12px; color: var(--aq-mut-2); text-align: center; } .aq-side-rel > div { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; } .aq-side-rel a { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid #EDF1F7; } .aq-side-rel a:last-child { border-bottom: none; padding-bottom: 0; } .aq-rel-title { font-size: 14px; font-weight: 600; color: var(--aq-navy); line-height: 1.4; } .aq-side-rel a:hover .aq-rel-title { color: var(--aq-cta); } .aq-rel-meta { font-size: 12px; color: var(--aq-mut-2); } .aq-blog-more { background: #fff; margin: 34px -24px -48px; padding: 40px 24px 44px; } .aq-blog-more > h2 { max-width: 1032px; margin: 0 auto 20px; font-size: 24px; } .aq-more-grid { max-width: 1032px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; } .aq-more-card { background: #F9FBFD; border: 1px solid var(--aq-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; } .aq-more-card:hover { border-color: var(--aq-cta); } .aq-more-thumb { height: 130px; background: repeating-linear-gradient(45deg,#EDF2F8 0 12px,#E4EBF4 12px 24px); display: flex; align-items: center; justify-content: center; } .aq-more-thumb img { width: 100%; height: 100%; object-fit: cover; } .aq-more-thumb span { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #7A8AA6; } .aq-more-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; } .aq-more-cat { font-size: 11.5px; font-weight: 700; color: var(--aq-cta); text-transform: uppercase; letter-spacing: .06em; } .aq-more-title { font-size: 15px; font-weight: 700; color: var(--aq-navy); line-height: 1.4; } .aq-more-meta { font-size: 12.5px; color: var(--aq-mut-2); } @media (max-width: 849px) { .aq-blog-grid { grid-template-columns: 1fr; gap: 26px; } .aq-blog-side { position: static; } .aq-blog-hero { height: 210px; } } /* Tiêu đề trang danh mục sản phẩm + trang lưu trữ rỗng */ .aq-cat-title { font-size: clamp(24px, 3vw, 32px); margin: 0 0 14px !important; min-height: 0 !important; } .aq-empty-archive { background: #fff; border: 1.5px dashed var(--aq-line); border-radius: 14px; padding: 34px 24px; text-align: center; } .aq-empty-archive h2 { font-size: 20px; margin: 0 0 8px; } .aq-empty-archive p { margin: 0; font-size: 14.5px; color: var(--aq-ink-2); } .aq-empty-archive a { font-weight: 700; color: var(--aq-cta); } /* Trang sản phẩm nằm trong .shop-container của Flatsome — container này KHÔNG có padding ngang, nên nội dung dán sát mép màn hình. Tự bó lề giống các trang khác. */ .aq-sp, .woocommerce-products-header, .aq-cat-title { max-width: 1180px; margin-left: auto; margin-right: auto; } .aq-sp { padding: 0 24px 40px; } .aq-cat-title { padding: 0 24px; } @media (max-width: 549px) { .aq-sp { padding: 0 16px 30px; } .aq-cat-title { padding: 0 16px; } .aq-blog { padding-left: 16px; padding-right: 16px; } .aq-blog-more { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } } /* Chip bộ lọc đang bật */ .aq-chip-on { background: var(--aq-navy) !important; border-color: var(--aq-navy) !important; color: #fff !important; } /* Flatsome ép `height:40px` cho