/* Theme Name: A Đi Câu Theme URI: https://adicau.vn Author: ARCHE Description: Block theme chủ đề câu cá – màu chính #0D234D, màu bổ trợ #F04E23. Version: 1.2.12 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: a-di-cau */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin-block: 0; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; overflow-wrap: break-word; } p { text-wrap: pretty; overflow-wrap: break-word; } ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } table { border-collapse: collapse; border-spacing: 0; } hr { height: 0; border: 0; border-top: 1px solid currentColor; } :target { scroll-margin-block: 5rem; scroll-margin-block-start: calc(var(--adc-sticky-top) + 16px); } /* chừa chỗ cho header dính */ a { text-underline-offset: 0.2em; } .wp-block-button__link { transition: background-color .15s ease; } .adc-card { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent); padding-top: var(--wp--preset--spacing--30); } /* ---------- Header ---------- */ .adc-topbar a { color: inherit; text-decoration: none; } .adc-topbar a:hover { color: var(--wp--preset--color--accent); } .adc-topbar__item { display: inline-flex; align-items: center; gap: .4rem; margin: 0; } @media (max-width: 600px) { .adc-topbar__inner { justify-content: center !important; } } .adc-header { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); } /* ---------- Whitespace-driven ---------- */ .adc-topbar { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent); } .adc-eyebrow { font-weight: 600; } .adc-link-arrow { display: flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none; } .adc-link-arrow a { text-decoration: none; } .adc-footer { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); } /* ---------- Icons (Phosphor qua ::before/::after, không cần thẻ ) ---------- */ .adc-i::before, .adc-i-after::after { font-family: "Phosphor-Fill"; font-weight: normal; font-style: normal; line-height: 1; content: var(--adc-icon); color: var(--wp--preset--color--primary); -webkit-font-smoothing: antialiased; } .adc-i--bold::before, .adc-i-after.adc-i--bold::after { font-family: "Phosphor-Bold"; } .adc-i--envelope { --adc-icon: "\e218"; } .adc-i--phone { --adc-icon: "\e3b8"; } .adc-i--fish { --adc-icon: "\e728"; } .adc-i--pin { --adc-icon: "\e316"; } .adc-i--bug { --adc-icon: "\e5f6"; } .adc-i--arrow { --adc-icon: "\e06c"; } .adc-brand { display: flex; align-items: center; gap: .5rem; } .adc-brand::before { font-size: 1.4em; } .adc-card.adc-i::before { display: block; font-size: 24px; margin-bottom: var(--wp--preset--spacing--20); } .adc-topbar__item::before { font-size: 1.1em; } .adc-link-arrow::after { transition: transform .2s ease; } .adc-link-arrow:hover::after { transform: translateX(4px); } .adc-topnav a { text-decoration: none; } .adc-topnav a:hover { color: var(--wp--preset--color--accent); } .adc-i.has-large-font-size { display: flex; align-items: center; gap: .6rem; } .adc-i.has-large-font-size a { text-decoration: none; } /* ---------- Header luôn dính ---------- Mobile: dính cả khối (topbar đã ẩn). Desktop: topbar trôi đi, hàng logo + tìm kiếm ở lại (top âm đúng bằng chiều cao topbar). assets/js/header-mobile.js đo và ghi lại các biến; giá trị dưới đây dùng khi chưa có JS. --adc-sticky-top: phần header đang dính, cho các thanh dính bên dưới (tab chính sách, thanh lọc) và điểm cuộn tới tiêu đề. */ :root { --adc-topbar-h: 48px; --adc-adminbar-h: 0px; --adc-sticky-top: 105px; } @media (max-width: 782px) { :root { --adc-topbar-h: 0px; --adc-sticky-top: 61px; } } header.wp-block-template-part { position: sticky; top: calc(var(--adc-adminbar-h) - var(--adc-topbar-h)); z-index: 95; background: var(--wp--preset--color--white); } /* dưới bảng lọc (99–100), trên nút nổi (90) */ /* ---------- Mega menu Danh mục ---------- */ .adc-topbar { position: relative; z-index: 50; } .adc-topnav .adc-mega { position: static; } .adc-topnav .adc-mega > .wp-block-navigation-item__content { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; } .adc-topnav .adc-mega > .wp-block-navigation-item__content::before { font-family: "Phosphor-Fill"; content: "\e464"; color: var(--wp--preset--color--primary); font-size: 1.2em; line-height: 1; } /* khung: rộng bằng container 1180px */ .adc-topnav .adc-mega > .wp-block-navigation__submenu-container { position: absolute !important; top: 100%; left: 0 !important; right: 0; margin-inline: auto; width: min(1180px, calc(100% - 2 * var(--wp--preset--spacing--30))) !important; padding: 0 !important; display: block !important; list-style: none; z-index: 60; border-radius: 0 0 8px 8px !important; overflow: hidden !important; background: var(--wp--preset--color--white) !important; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent) !important; box-shadow: 0 16px 32px color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent); } /* thanh trái: cấp 1 */ .adc-mega__l1 { display: contents; list-style: none; margin: 0; padding: 0; } .adc-mega__l1-link { display: flex !important; align-items: center; justify-content: flex-start; gap: .75rem; width: 260px; padding: .7rem var(--wp--preset--spacing--30) !important; text-decoration: none; color: var(--wp--preset--color--primary); font-weight: 500; } .adc-mega__l1-link::before { content: ""; flex: none; width: 32px; height: 32px; margin: -3px 0; background: var(--adc-ico) center / contain no-repeat; } .adc-mega__l1-link::after { margin-left: auto; font-family: "Phosphor-Bold"; content: "\e06c"; font-size: .9em; opacity: 0; transition: opacity .15s; color: var(--wp--preset--color--primary); } .adc-mega__l1.is-active > .adc-mega__l1-link { background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent); color: var(--wp--preset--color--accent); } .adc-mega__l1.is-active > .adc-mega__l1-link::after { opacity: 1; } .adc-mega__panel { border-right: 0; } .adc-topnav .adc-mega > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; top: 0; bottom: 0; left: 260px; width: 1px; background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); } /* bên phải: cấp 2 + 3 */ .adc-mega__sub { display: none; position: absolute; top: 0; bottom: 0; left: 261px; right: 0; padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; background: var(--wp--preset--color--white); } .adc-mega__l1.is-active > .adc-mega__sub { display: block; } .adc-mega__all { margin: 0 0 1rem; font-weight: 600; } .adc-mega__all a { color: var(--wp--preset--color--primary); } .adc-mega__all a::before { content: "Tất cả "; } .adc-mega__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.25rem 1.5rem; } .adc-mega__title { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--wp--preset--color--primary); } .adc-mega__title::before { font-family: "Phosphor-Fill"; content: "\e18a"; color: var(--wp--preset--color--primary); font-size: .5em; line-height: 1; } .adc-mega__col ul { list-style: none; margin: .5rem 0 0; padding: 0 0 0 1.6rem; display: grid; gap: .35rem; } .adc-mega__panel a { text-decoration: none; } .adc-mega__panel a:hover { color: var(--wp--preset--color--accent); } .adc-mega__empty { list-style: none; padding: var(--wp--preset--spacing--40); opacity: .7; } .adc-mega__head, .adc-mega__count, .adc-mega__l1--info, .adc-mega__results { display: none; } /* ô tìm, số sản phẩm, mục "Cửa hàng", kết quả tìm: chỉ trên mobile */ .adc-mega__results[hidden] { display: none !important; } /* chuột: hover hiện danh mục con; không hover mục nào thì hiện mục is-active (mặc định mục đầu; chạm trên màn cảm ứng đổi mục, xem assets/js/mega-menu.js) */ @media (hover: hover) and (min-width: 783px) { .adc-mega__l1:hover > .adc-mega__l1-link { background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent); color: var(--wp--preset--color--accent); } .adc-mega__l1:hover > .adc-mega__l1-link::after { opacity: 1; } .adc-mega__l1:hover > .adc-mega__sub { display: block; } .adc-mega__panel:has(.adc-mega__l1:hover) .adc-mega__l1.is-active:not(:hover) > .adc-mega__l1-link { background: none; color: var(--wp--preset--color--primary); } .adc-mega__panel:has(.adc-mega__l1:hover) .adc-mega__l1.is-active:not(:hover) > .adc-mega__l1-link::after { opacity: 0; } .adc-mega__panel:has(.adc-mega__l1:hover) .adc-mega__l1.is-active:not(:hover) > .adc-mega__sub { display: none; } } /* mobile: popup toàn màn hình (html.adc-mega-open), thanh trái = cấp 1 có icon, bên phải = danh mục con của mục đang chọn */ @media (max-width: 782px) { .adc-topnav .adc-mega > .wp-block-navigation__submenu-container { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 1000; width: auto !important; height: auto !important; min-width: 0 !important; margin: 0; padding: 56px 0 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none; font-size: 15px; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; visibility: hidden !important; opacity: 0 !important; } .adc-mega-open .adc-topnav .adc-mega > .wp-block-navigation__submenu-container { visibility: visible !important; opacity: 1 !important; } html.adc-mega-open { overflow: hidden; } .adc-mega-open .adc-topbar { z-index: 1000; } .adc-topnav .adc-mega > .wp-block-navigation__submenu-container::before { position: fixed; top: 56px; bottom: 0; left: 0; z-index: -1; width: 96px; background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, var(--wp--preset--color--white)); } /* đầu popup: ô tìm (gõ để lọc danh mục, Enter tìm sản phẩm) + nút đóng hẳn */ .adc-mega__head { display: flex; align-items: center; gap: 8px; position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 0 8px 0 12px; list-style: none; background: var(--wp--preset--color--white); border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); } .adc-mega__search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, var(--wp--preset--color--white)); } .adc-mega__search::before { font-family: "Phosphor-Bold"; content: "\e30c"; font-size: 18px; line-height: 1; opacity: .6; } .adc-mega__search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: 0; font: inherit; font-size: 16px; color: var(--wp--preset--color--primary); } /* 16px: iOS không tự phóng to khi chạm */ .adc-mega__search input::placeholder { color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent); } .adc-mega__search:focus-within { box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary); } .adc-mega__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wp--preset--color--primary); } .adc-mega__close::before { font-family: "Phosphor-Bold"; content: "\e4f6"; font-size: 22px; line-height: 1; } .adc-mega__count { display: inline; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent); } /* thanh trái: cấp 1 có icon; mục đang chọn nền trắng, viền cam, chữ đậm (không đổi màu chữ cho dễ đọc) */ .adc-mega__l1-link { flex-direction: column; justify-content: center; gap: 6px; width: 96px; min-height: 84px; padding: 10px 6px !important; border: 0; border-left: 3px solid transparent; background: none; font: inherit; text-align: center; font-size: 12.5px; line-height: 1.25; cursor: pointer; } .adc-mega__l1-link::before { width: 36px; height: 36px; margin: 0; } .adc-mega__l1-link::after { display: none; } .adc-mega__l1.is-active > .adc-mega__l1-link { background: var(--wp--preset--color--white); border-left-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary); font-weight: 700; } .adc-mega__l1--info { display: contents; } .adc-mega__l1--info > .adc-mega__l1-link { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); } /* mục đầu thanh trái, ngăn với các danh mục */ .adc-mega__l1--info > .adc-mega__l1-link::before { content: "\e470"; display: grid; place-items: center; width: 36px; height: 36px; background: none; font-family: "Phosphor-Bold"; font-size: 28px; line-height: 1; } /* bên phải: "Tất cả" nổi bật, tiêu đề nhóm là dòng bấm được (số + ›), danh mục con là dòng chữ có vạch ngăn */ .adc-mega__sub { position: fixed; top: 56px; bottom: 0; left: 96px; right: 0; padding: 16px; } .adc-mega__all a { display: flex; align-items: center; gap: 6px; padding: 12px; border-radius: 10px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); } .adc-mega__all .adc-mega__count { color: rgb(255 255 255 / .7); } .adc-mega__all .adc-mega__count::before { content: "· "; } .adc-mega__all a::after { margin-left: auto; font-family: "Phosphor-Bold"; content: "\e13a"; font-size: 15px; line-height: 1; } .adc-mega__cols { grid-template-columns: minmax(0, 1fr); gap: 18px; } .adc-mega__title { display: flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 15.5px; font-weight: 700; } .adc-mega__title::before { display: none; } .adc-mega__title::after { margin-left: auto; font-family: "Phosphor-Bold"; content: "\e13a"; font-size: 15px; line-height: 1; opacity: .55; } .adc-mega__col ul { display: block; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent); } .adc-mega__col li a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 0 10px 2px; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent); font-size: 14.5px; line-height: 1.3; color: var(--wp--preset--color--primary); } .adc-mega__col li .adc-mega__count { margin-left: auto; } /* mục "Cửa hàng" */ .adc-mega__label { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent); } .adc-mega__pages + .adc-mega__label { margin-top: 20px; } /* ul trong menu bị CSS của block Navigation đè margin, nên đặt khoảng cách ở nhãn */ .adc-mega__pages, .adc-mega__contact { margin: 0 0 24px; padding: 0; list-style: none; } .adc-mega__pages a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent); font-weight: 600; color: var(--wp--preset--color--primary); } .adc-mega__pages a::after { margin-left: auto; font-family: "Phosphor-Bold"; content: "\e13a"; font-size: 15px; line-height: 1; opacity: .55; } .adc-mega__contact a { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14.5px; color: var(--wp--preset--color--primary); } /* đang gõ tìm: kết quả phủ thanh trái + bên phải */ .adc-mega__results { display: block; position: fixed; z-index: 2; top: 56px; bottom: 0; left: 0; right: 0; padding: 4px 16px 24px; overflow-y: auto; overscroll-behavior: contain; list-style: none; background: var(--wp--preset--color--white); } .adc-mega__hit { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent); color: var(--wp--preset--color--primary); } .adc-mega__hit .adc-mega__count::before { content: "· "; } .adc-mega__hit small { font-size: 12.5px; color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent); } .adc-mega__hit mark { border-radius: 2px; background: color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent); color: inherit; } .adc-mega__find { display: block; width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, var(--wp--preset--color--white)); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; color: var(--wp--preset--color--primary); cursor: pointer; } .adc-mega__find::before { margin-right: 8px; font-family: "Phosphor-Bold"; content: "\e30c"; line-height: 1; } } /* Để panel mega neo theo topbar (full width) thay vì theo block Navigation (position: relative mặc định). */ .adc-topbar .adc-topnav, .adc-topbar .adc-topnav .wp-block-navigation__responsive-container, .adc-topbar .adc-topnav .wp-block-navigation__responsive-dialog, .adc-topbar .adc-topnav .wp-block-navigation__responsive-container-content, .adc-topbar .adc-topnav .wp-block-navigation__container, .adc-topbar .adc-topnav .adc-mega { position: static !important; } /* Cầu hover: lấp khoảng hở giữa "Danh mục" và mép trên panel để chuột di xuống không bị mất hover. */ .adc-topnav .adc-mega > .wp-block-navigation-item__content { position: relative; } .adc-topnav .adc-mega > .wp-block-navigation-item__content::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 24px; pointer-events: none; } .adc-topnav .adc-mega:hover > .wp-block-navigation-item__content::after, .adc-topnav .adc-mega:focus-within > .wp-block-navigation-item__content::after { pointer-events: auto; } /* ---------- Search (header chính) ---------- */ .adc-search { width: min(360px, 100%); } .adc-search .wp-block-search__inside-wrapper { border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent) !important; border-radius: 8px; padding: 4px 4px 4px 18px !important; background: var(--wp--preset--color--white); transition: border-color .15s ease; } .adc-search .wp-block-search__inside-wrapper:focus-within { border-color: var(--wp--preset--color--primary) !important; } .adc-search .wp-block-search__input { border: 0 !important; background: transparent; padding: .45rem 0; min-width: 0; outline: 0; font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--primary); } .adc-search .wp-block-search__input::placeholder { color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent); } .adc-search .wp-block-search__button { margin: 0 !important; border: 0 !important; border-radius: 8px; padding: .45rem .7rem !important; background: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--white) !important; fill: currentColor; line-height: 1; display: inline-flex; align-items: center; } .adc-search .wp-block-search__button:hover { background: var(--wp--preset--color--accent) !important; transform: none; } @media (max-width: 600px) { .adc-header .wp-block-group.alignwide { gap: var(--wp--preset--spacing--20); } .adc-search { width: 100%; } } /* ---------- Header chính: căn chỉnh lại ---------- */ .adc-header { padding-block: 28px !important; } .adc-header > .wp-block-group { align-items: center; gap: var(--wp--preset--spacing--30); } .adc-brand { gap: .65rem; } .adc-logo { margin: 0; flex: none; line-height: 0; } .adc-logo a { display: block; } /* !important: block Ảnh trong editor gắn sẵn style="height:auto" lên thẻ ; style gắn trực tiếp chỉ thua !important */ .adc-logo img { display: block; height: 46px !important; width: auto !important; max-width: none; } .adc-brand .wp-block-site-title { margin: 0; font-size: 24px !important; font-weight: 800 !important; line-height: 1; } .adc-brand .wp-block-site-title a { text-decoration: none; } .adc-search { width: min(560px, 100%); } .adc-search .wp-block-search__inside-wrapper { padding: 3px 3px 3px 22px !important; border-color: color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent) !important; } .adc-search .wp-block-search__input { padding: .6rem 0; } .adc-search .wp-block-search__button { width: 40px; height: 40px; padding: 0 !important; justify-content: center; } .adc-search .wp-block-search__button svg { width: 20px; height: 20px; } .adc-search .wp-block-search__inside-wrapper { width: 100% !important; } /* ---------- Search: vuông, radius nhỏ, nút liền khung ---------- */ .adc-search .wp-block-search__inside-wrapper { padding: 0 !important; border-radius: 8px; overflow: hidden; align-items: stretch; } .adc-search .wp-block-search__input { padding: .7rem 1rem; } .adc-search .wp-block-search__button { width: 46px; height: auto; align-self: stretch; border-radius: 0; margin: 0 !important; padding: 0 !important; justify-content: center; } /* ---------- Hero banner: 1 lớn trái, 2 nhỏ phải xếp dọc (ảnh) ---------- */ .adc-hero__grid { display: grid !important; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; } .adc-hero__grid > * { margin: 0 !important; } .adc-banner { margin: 0; height: 100%; border-radius: 8px; overflow: hidden; } .adc-banner a, .adc-banner img { display: block; width: 100%; height: 100%; } .adc-banner img { object-fit: cover; border-radius: 8px; transition: transform .4s ease; } .adc-banner:hover img { transform: scale(1.03); } .adc-banner--lg { grid-row: 1 / span 2; aspect-ratio: 21 / 9; height: auto; } .adc-banner--sm { min-height: 0; } @media (max-width: 782px) { /* mobile: chỉ còn slider, tràn sát mép và nằm sát ngay dưới header; 2 banner nhỏ ẩn */ .adc-hero__grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; } .adc-banner--lg { grid-row: auto; } .adc-banner--sm { display: none; } main:has(> .adc-hero:first-child) { margin-block-start: 0; } .adc-hero { padding-top: 0 !important; } /* padding gắn trong template (style inline) */ .adc-hero__grid > :is(.adc-slider-wrap, .adc-banner--lg) { margin-inline: calc(-1 * var(--wp--preset--spacing--30)) !important; border-radius: 0; } /* con trực tiếp: slider.js bọc .adc-banner--lg trong .adc-slider-wrap */ } /* ---------- Slider banner lớn ---------- */ .adc-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .adc-slider.is-enhanced { overflow: visible; scroll-snap-type: none; touch-action: pan-y pinch-zoom; } .adc-slider-wrap { cursor: grab; user-select: none; -webkit-user-select: none; } .adc-slider-wrap.is-dragging { cursor: grabbing; } .adc-slider-wrap img { -webkit-user-drag: none; } .adc-slider::-webkit-scrollbar { display: none; } .adc-slider > figure { flex: 0 0 100%; margin: 0 !important; height: 100%; scroll-snap-align: start; } .adc-slider > figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .adc-slider-wrap { position: relative; grid-row: 1 / span 2; aspect-ratio: 21 / 9; border-radius: 8px; overflow: hidden; } .adc-slider-wrap .adc-slider { height: 100%; backface-visibility: hidden; } .adc-banner:hover:not(.adc-slider-wrap) img { transform: scale(1.03); } .adc-slider-wrap:hover img, .adc-slider:hover img { transform: none; } .adc-slider__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); opacity: 0; transition: opacity .2s ease, background-color .2s ease, color .2s ease; } .adc-slider__nav::before { font-family: "Phosphor-Bold"; font-size: 18px; line-height: 40px; display: block; } .adc-slider__prev { left: 12px; } .adc-slider__prev::before { content: "\e138"; } .adc-slider__next { right: 12px; } .adc-slider__next::before { content: "\e13a"; } .adc-slider-wrap:hover .adc-slider__nav, .adc-slider__nav:focus-visible { opacity: 1; } .adc-slider__nav:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); } .adc-slider__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; justify-content: center; gap: 6px; } .adc-slider__dot { width: 24px; height: 4px; padding: 0; border: 0; border-radius: 2px; cursor: pointer; background: color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent); } .adc-slider__dot.is-active { background: var(--wp--preset--color--white); } @media (max-width: 782px) { .adc-slider-wrap { grid-row: auto; } .adc-slider__nav { opacity: 1; width: 32px; height: 32px; } .adc-slider__nav::before { line-height: 32px; font-size: 16px; } } /* Trong editor JS của slider không chạy: xếp 3 slide thành một hàng ngang để bấm vào từng ảnh mà thay. Chiều cao khớp hai banner nhỏ bên phải; ngoài trang chủ thì chúng là slider tự chạy. */ .editor-styles-wrapper .adc-slider { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; align-content: start; overflow: visible; gap: 8px; aspect-ratio: auto; height: auto; position: relative; padding-top: 24px; } .editor-styles-wrapper .adc-slider::before { content: "Slider trang chủ: 3 ảnh dưới đây sẽ chạy lần lượt"; position: absolute; top: 0; left: 0; font-size: 12px; font-weight: 600; color: var(--wp--preset--color--primary); opacity: .7; } .editor-styles-wrapper .adc-slider > figure { height: auto; margin: 0; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 8px; } .editor-styles-wrapper .adc-slider > figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } /* Block chỉ-xem trong editor: bấm vào là chọn cả khối, không kích hoạt link/nút bên trong */ .editor-styles-wrapper .adc-preview-block { cursor: default; } .editor-styles-wrapper .adc-preview-block a, .editor-styles-wrapper .adc-preview-block button { pointer-events: none; } /* Mọi track cuộn ngang phải là containing block: nếu không, phần tử position:absolute bên trong thẻ (vd. .screen-reader-text trong giá, nhãn "Hết hàng") không bị cắt bởi overflow của track mà thoát ra tính vào chiều rộng cả trang → trang rộng hàng nghìn px, bị lệch/có thanh cuộn ngang. */ .adc-rail__track { position: relative; } /* ---------- Đổ bóng (nổi khối) ---------- */ :root { --adc-shadow-sm: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent); --adc-shadow-md: 0 2px 4px color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent), 0 12px 18px -8px color-mix(in srgb, var(--wp--preset--color--primary) 32%, transparent); --adc-shadow-lg: 0 4px 8px color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent), 0 20px 44px color-mix(in srgb, var(--wp--preset--color--primary) 26%, transparent); } /* ---------- Danh mục nổi bật ---------- */ .adc-featured h2.wp-block-heading { font-size: 22px !important; } /* một hàng duy nhất: số cột = số danh mục; hẹp màn hình thì cuộn ngang */ /* overflow-x:auto cắt luôn cả trục dọc → chừa đệm cho bóng. Tầm với của bóng = blur + spread (ngang) và offset + blur + spread (xuống dưới): mức md toả ngang 10px, xuống 22px nên đệm ngang 12px, dưới 28px. Bù lại bằng margin âm cùng cỡ để vị trí không đổi (track phải nằm trong thẻ [data-adc-rail], không phải con trực tiếp của group constrained, vì WP ép margin ngang của con trực tiếp là auto) */ .adc-catgrid { list-style: none; margin: -8px -12px -28px; padding: 8px 12px 28px; scroll-padding-inline: 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(124px, 1fr); gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .adc-catgrid::-webkit-scrollbar { display: none; } .adc-catgrid li { margin: 0; scroll-snap-align: start; } .adc-catgrid__item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .3rem; height: 100%; padding: 20px 12px; text-align: center; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); border-radius: 8px; color: var(--wp--preset--color--primary); background: var(--wp--preset--color--white); box-shadow: var(--adc-shadow-sm); text-decoration: none; transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease; } .adc-catgrid__item:hover { border-color: var(--wp--preset--color--primary); box-shadow: var(--adc-shadow-md); transform: translateY(-3px); } .adc-catgrid__icon { width: 56px; height: 56px; margin-bottom: .6rem; background: var(--adc-ico) center / contain no-repeat; transition: transform .2s ease; } .adc-catgrid__item:hover .adc-catgrid__icon { transform: translateY(-3px) scale(1.06); } .adc-catgrid__name { font-size: var(--wp--preset--font-size--medium); font-weight: 600; line-height: 1.3; text-wrap: balance; } .adc-catgrid__count { font-size: var(--wp--preset--font-size--small); opacity: .65; } .adc-featured > .wp-block-group:first-child:not(:has(.adc-cathead)) { display: none; } /* tiêu đề cũ trong template đã lưu */ .adc-cathead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--wp--preset--spacing--30); } /* tiêu đề section: chữ lớn, đậm + thanh nhấn cam phía trước để nổi giữa các thẻ nhiều ảnh */ .adc-cathead h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; } .adc-cathead h2.has-icon::before { display: none; } .adc-cathead__ico { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--adc-ico) center / 78% no-repeat, color-mix(in srgb, var(--wp--preset--color--primary) 8%, white); } @media (max-width: 600px) { .adc-cathead__ico { width: 40px; height: 40px; } } .adc-cathead h2::before { content: ""; flex: none; width: 5px; height: 1.1em; border-radius: 3px; background: var(--wp--preset--color--accent); } .adc-catnav { display: flex; gap: 8px; } .adc-rail__actions { display: flex; align-items: center; gap: 20px; } .adc-rail__all { margin: 0; white-space: nowrap; font-size: var(--wp--preset--font-size--small); } /* điện thoại: vuốt tay, bỏ nút prev/next để tiêu đề không bị rớt dòng (vẫn còn dot) */ @media (max-width: 600px) { .adc-rail__actions .adc-catnav { display: none; } .adc-cathead h2 { font-size: 18px !important; } } .adc-catnav__btn { width: 36px; height: 36px; padding: 0; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); border-radius: 8px; cursor: pointer; background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); transition: background-color .2s ease, color .2s ease, opacity .2s ease; } .adc-catnav__btn::before { font-family: "Phosphor-Bold"; font-size: 16px; line-height: 34px; display: block; } .adc-catnav__prev::before { content: "\e138"; } .adc-catnav__next::before { content: "\e13a"; } .adc-catnav__btn:hover:not(:disabled) { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); } .adc-catnav__btn:disabled { opacity: .35; cursor: not-allowed; } .adc-catdots { display: flex; justify-content: center; gap: 6px; margin-top: var(--wp--preset--spacing--30); } .adc-catdots[hidden] { display: none; } .adc-catdots__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; cursor: pointer; background: color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent); transition: width .25s ease, background-color .25s ease; } .adc-catdots__dot.is-active { width: 24px; background: var(--wp--preset--color--primary); } /* ---------- Sản phẩm: slider Bán chạy / Mới về ---------- */ .adc-products { width: min(1180px, calc(100% - 2 * var(--wp--preset--spacing--30))); margin: 0 auto; padding: var(--wp--preset--spacing--50) 0 0; } /* 5 thẻ mỗi trang; đệm quanh track chừa chỗ cho bóng (xem ghi chú ở .adc-catgrid), bù bằng margin âm */ .adc-pgrid { list-style: none; margin: -8px -12px -28px; padding: 8px 12px 28px; scroll-padding-inline: 12px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .adc-pgrid::-webkit-scrollbar { display: none; } .adc-pcard { margin: 0; scroll-snap-align: start; } .adc-pcard a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent); border-radius: 8px; color: var(--wp--preset--color--primary); background: var(--wp--preset--color--white); box-shadow: var(--adc-shadow-sm); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .adc-pcard a:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--primary); box-shadow: var(--adc-shadow-md); } .adc-pcard__thumb { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, white); } .adc-pcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .adc-pcard a:hover .adc-pcard__thumb img { transform: scale(1.06); } /* Hết hàng: ảnh mờ + xám, nhãn giữa ảnh, chữ nhạt đi; vẫn bấm vào xem được */ .adc-pcard.is-soldout .adc-pcard__thumb img { opacity: .5; filter: grayscale(.7); } .adc-pcard.is-soldout .adc-pcard__name, .adc-pcard.is-soldout .adc-pcard__price { opacity: .55; } .adc-pcard__soldout { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; padding: 6px 14px; border-radius: 999px; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--white); background: color-mix(in srgb, var(--wp--preset--color--primary) 88%, transparent); } .adc-pcard__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 14px 14px; } .adc-products.is-category .adc-pcard__cat { display: none; } /* slider theo danh mục: nhãn danh mục trùng tiêu đề */ .adc-pcard__cat { font-size: var(--wp--preset--font-size--small); font-weight: 500; opacity: .6; } .adc-pcard__status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--wp--preset--font-size--small); opacity: .7; } .adc-pcard__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .adc-pcard__status.is-in::before { background: #2e9e5b; } .adc-pcard__status.is-out { opacity: .55; } .adc-pcard__status.is-out::before { background: var(--wp--preset--color--accent); } .adc-pcard__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; font-weight: 500; line-height: 1.3; } .adc-pcard__price { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 8px; margin-top: auto; } .adc-pcard__price ins { text-decoration: none; font-size: 16px; font-weight: 700; color: var(--wp--preset--color--accent); } .adc-pcard__price > .woocommerce-Price-amount, .adc-pcard__price > bdi { font-size: 16px; font-weight: 700; color: var(--wp--preset--color--accent); } .adc-pcard__from { order: 1; margin-right: -2px; font-size: var(--wp--preset--font-size--small); font-weight: 500; opacity: .65; } .adc-pcard__price > .woocommerce-Price-amount { order: 0; } .adc-pcard__price del { font-size: var(--wp--preset--font-size--small); opacity: .5; } .adc-pcard__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } @media (max-width: 960px) { .adc-pgrid { grid-auto-columns: calc((100% - 2 * 16px) / 3); } } @media (max-width: 600px) { .adc-pgrid { grid-auto-columns: calc((100% - 12px) / 2.2); gap: 12px; } } /* Slider sản phẩm nằm trong khung đã có lề (trang sản phẩm, danh mục, sự kiện): bỏ chiều rộng tự chừa lề của .adc-products (dành cho trang chủ, nơi slider nằm sát mép), không thì thụt lề 2 lần; mobile cho hàng thẻ vuốt tràn sát mép màn hình. */ :is(.adc-listing, .adc-catpage, .adc-events__wrap, .adc-event__more) .adc-products { width: auto; } @media (max-width: 782px) { :is(.adc-listing, .adc-catpage, .adc-events__wrap, .adc-event__more) .adc-products .adc-pgrid { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } } /* ---------- Banner xen kẽ (block gốc: nhóm + ảnh + tiêu đề + nút, sửa trực tiếp trong editor) ---------- */ .adc-promos { width: min(1180px, calc(100% - 2 * var(--wp--preset--spacing--30))); margin: 0 auto; padding-top: var(--wp--preset--spacing--50); } .wp-block-columns.adc-promos { gap: 16px; margin-bottom: 0; } .adc-promos--wide { padding-top: var(--wp--preset--spacing--50); } .adc-promo-block { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); aspect-ratio: 388 / 158; overflow: hidden; border-radius: 8px; color: var(--wp--preset--color--white); background: linear-gradient(100deg, var(--wp--preset--color--primary), color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--accent))); box-shadow: var(--adc-shadow-sm); transition: box-shadow .2s ease, transform .2s ease; } .adc-promo-block:hover { transform: translateY(-3px); box-shadow: var(--adc-shadow-md); } .adc-promo-block .adc-promo-block__img { grid-area: 1 / 1; margin: 0; min-height: 0; } .adc-promo-block .adc-promo-block__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .adc-promo-block:hover .adc-promo-block__img img { transform: scale(1.04); } /* lớp phủ navy mờ dần từ trái để chữ trắng luôn đọc được trên mọi ảnh */ .adc-promo-block::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--primary) 82%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent) 42%, transparent 72%); } /* chữ và ảnh cùng một ô lưới (không dùng position:absolute cho chữ, để lớp phủ của nút phủ trọn cả banner) */ .adc-promo-block .adc-promo-block__text { grid-area: 1 / 1; z-index: 2; align-self: center; justify-self: start; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; max-width: 60%; padding: clamp(16px, 3vw, 32px); } .adc-promo-block .adc-promo-block__title { margin: 0; color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; line-height: 1.15; } .adc-promo-block .wp-block-buttons { margin: 0; } .adc-promo-block .wp-block-button__link { padding: 8px 16px; border-radius: 999px; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--white); background: var(--wp--preset--color--accent); text-decoration: none; transition: background-color .2s ease; } .adc-promo-block .wp-block-button__link:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 85%, black); } /* link của nút phủ kín cả banner: bấm đâu trên banner cũng đi tới link */ .adc-promo-block .wp-block-button__link::after { content: ""; position: absolute; inset: 0; z-index: 3; } @media (max-width: 781px) { .wp-block-columns.adc-promos { gap: 16px; } } /* dải banner rộng 5:1 */ .adc-promo-block--wide { min-height: 140px; } @media (min-width: 783px) { .adc-promo-block--wide { aspect-ratio: 5 / 1; } } .adc-promo-block--wide .adc-promo-block__text { max-width: 70%; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px 24px; } /* ---------- Gợi ý hôm nay: lưới nhiều hàng, tải thêm ---------- */ .adc-pgrid--wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; gap: 16px; } @media (max-width: 960px) { .adc-pgrid--wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .adc-pgrid--wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } .adc-picks__foot { display: flex; justify-content: center; margin-top: var(--wp--preset--spacing--30); } .adc-picks__more { padding: 12px 32px; border: 1px solid var(--wp--preset--color--primary); border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; color: var(--wp--preset--color--primary); background: var(--wp--preset--color--white); transition: background-color .2s ease, color .2s ease; } .adc-picks__more:hover:not(:disabled) { color: var(--wp--preset--color--white); background: var(--wp--preset--color--primary); } .adc-picks__more:disabled { opacity: .5; cursor: progress; } .adc-picks__more[hidden] { display: none; } /* Trang chủ: tránh cộng dồn khoảng đệm giữa các section và footer. */ .adc-hero { padding-bottom: var(--wp--preset--spacing--40) !important; } .adc-featured { padding-bottom: 0 !important; } /* ---------- Flash sale ---------- */ .adc-flash { width: min(1180px, calc(100% - 2 * var(--wp--preset--spacing--30))); margin: 0 auto; padding-bottom: var(--wp--preset--spacing--40); } .adc-flash[hidden] { display: none; } .adc-flash__panel { position: relative; overflow: hidden; box-shadow: var(--adc-shadow-lg); padding: clamp(16px, 3vw, 32px); border-radius: 8px; color: var(--wp--preset--color--white); background: url("assets/images/flash-bg.jpg") 0 38% / cover no-repeat, var(--wp--preset--color--primary); } .adc-flash__panel > * { position: relative; } .adc-flash__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--wp--preset--spacing--30); } .adc-flash__title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .adc-flash__title h2 { margin: 0; display: inline-flex; align-items: center; gap: .5rem; font-size: var(--wp--preset--font-size--x-large); font-weight: 800; color: var(--wp--preset--color--white); } .adc-flash__title h2::before { content: ""; width: 1.9em; height: 1.9em; margin: -.4em -.1em -.4em 0; flex: none; background: url("assets/icons/brand/flash-sale.png") center / contain no-repeat; } .adc-flash__timer { display: inline-flex; align-items: center; gap: 4px; font-size: var(--wp--preset--font-size--small); } .adc-flash__timer [hidden] { display: none; } .adc-flash__t b { display: inline-block; min-width: 36px; padding: 6px 8px; text-align: center; font-size: var(--wp--preset--font-size--large); font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 4px; color: var(--wp--preset--color--white); background: var(--wp--preset--color--accent); } .adc-flash__sep { font-weight: 700; font-size: var(--wp--preset--font-size--large); } .adc-flash .adc-link-arrow { margin: 0; } /* dot trên nền navy của panel flash sale */ .adc-flash .adc-catdots { margin-top: 4px; } .adc-flash .adc-catdots__dot { background: color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent); } .adc-flash .adc-catdots__dot.is-active { background: var(--wp--preset--color--white); } .adc-flash .adc-link-arrow a, .adc-flash .adc-link-arrow::after { color: var(--wp--preset--color--white); } .adc-flash .adc-link-arrow:hover a { color: var(--wp--preset--color--accent); } .adc-flash__list { list-style: none; margin: -8px -12px -28px; padding: 8px 12px 28px; scroll-padding-inline: 12px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .adc-flash__list::-webkit-scrollbar { display: none; } .adc-flash__item { margin: 0; scroll-snap-align: start; } .adc-flash__item a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 8px; color: var(--wp--preset--color--primary); background: var(--wp--preset--color--white); text-decoration: none; box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 10px 16px -6px rgba(0, 0, 0, .4); transition: transform .2s ease, box-shadow .2s ease; } /* Hết hàng: ảnh mờ + xám, nhãn giữa ảnh, thanh tiến độ xám; vẫn bấm vào xem được */ .adc-flash__item.is-soldout .adc-flash__thumb img { opacity: .5; filter: grayscale(.7); } .adc-flash__item.is-soldout .adc-flash__name, .adc-flash__item.is-soldout .adc-flash__price { opacity: .55; } .adc-flash__soldout { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; padding: 6px 14px; border-radius: 999px; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--white); background: color-mix(in srgb, var(--wp--preset--color--primary) 88%, transparent); } .adc-flash__stock.is-out { opacity: .6; } .adc-flash__stock.is-out .adc-flash__bar::before { background: color-mix(in srgb, var(--wp--preset--color--primary) 45%, white); } .adc-flash__item a:hover { transform: translateY(-4px); box-shadow: 0 14px 20px -8px rgba(0, 0, 0, .45); } .adc-flash__thumb { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, white); } .adc-flash__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .adc-flash__item a:hover .adc-flash__thumb img { transform: scale(1.06); } /* badge giảm giá: góc trên phải, cách mép 8px (dùng chung thẻ sản phẩm và thẻ flash sale) */ .adc-flash__badge { position: absolute; top: 8px; right: 8px; padding: 4px 8px; border-radius: 6px; font-size: var(--wp--preset--font-size--small); font-weight: 800; color: var(--wp--preset--color--white); background: var(--wp--preset--color--accent); } .adc-flash__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 12px 14px 14px; } .adc-flash__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; font-weight: 500; line-height: 1.3; } .adc-flash__price { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 8px; margin-top: auto; } .adc-flash__price ins { text-decoration: none; font-size: 16px; font-weight: 700; color: var(--wp--preset--color--accent); } .adc-flash__price del { font-size: var(--wp--preset--font-size--small); opacity: .5; } .adc-flash__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .adc-flash__stock { display: flex; flex-direction: column; gap: 6px; } .adc-flash__bar { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, white); } .adc-flash__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px; background: var(--wp--preset--color--accent); } .adc-flash__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; font-size: 12px; line-height: 1.2; } .adc-flash__sold, .adc-flash__left { white-space: nowrap; } .adc-flash__sold { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .adc-flash__left { opacity: .55; } .adc-flash__stock.is-hot .adc-flash__sold::before { content: "\e242"; font-family: "Phosphor-Fill"; font-size: 15px; line-height: 1; margin: -2px 0 -2px -2px; color: var(--wp--preset--color--accent); } /* bán chạy: ngọn lửa (Phosphor Fill) */ @media (max-width: 960px) { .adc-flash__list { grid-auto-columns: calc((100% - 2 * 16px) / 3); } } @media (max-width: 600px) { .adc-flash__list { grid-auto-columns: calc((100% - 12px) / 2.2); gap: 12px; } .adc-flash__title h2 { font-size: var(--wp--preset--font-size--large); } } /* Ẩn khỏi màn hình nhưng vẫn cho trình đọc màn hình / công cụ tìm kiếm đọc (tên site cạnh logo) */ .adc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px !important; padding: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Header: logo trái · thanh tìm kiếm GIỮA · giỏ hàng + thông báo phải ---------- */ .adc-header > .wp-block-group { display: grid !important; grid-template-columns: 1fr minmax(0, 560px) 1fr; align-items: center; } .adc-header > .wp-block-group > .adc-brand { justify-self: start; } .adc-header > .wp-block-group > .adc-search { width: 100%; justify-self: center; } .adc-header > .wp-block-group > .adc-search .wp-block-search__inside-wrapper { width: 100% !important; } .adc-header > .wp-block-group > .wp-block-html, .adc-header > .wp-block-group > .adc-actions { justify-self: end; } .adc-actions { display: flex; align-items: center; gap: 20px; padding-right: 6px; } /* chừa chỗ cho badge nhô ra góc phải */ /* ảnh minh hoạ, không phải nút: trạng thái disable = ảnh mờ + bớt màu, không bấm, con trỏ báo cấm */ .adc-actions__item { position: relative; display: block; width: 40px; height: 40px; cursor: not-allowed; user-select: none; } .adc-actions__item img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(.6); opacity: .75; } /* badge số lượng góc trên phải (hiện 0; xám navy vì tính năng chưa mở) */ .adc-actions__badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; border: 2px solid var(--wp--preset--color--white); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--white); background: color-mix(in srgb, var(--wp--preset--color--primary) 55%, white); } /* nút kính lúp, nút menu: chỉ dùng trên mobile (assets/js/header-mobile.js, mega-menu.js) */ .adc-actions__btn { display: none; } @media (max-width: 782px) { /* một hàng: logo · kính lúp · menu; ô tìm kiếm hiện thành hàng 2 khi bấm kính lúp */ .adc-header { padding-block: 10px !important; padding-inline: 16px 10px !important; } .adc-header > .wp-block-group { grid-template-columns: 1fr auto; row-gap: 10px; } .adc-header > .wp-block-group > .adc-search { grid-column: 1 / -1; grid-row: 2; } .adc-js .adc-header > .wp-block-group > .adc-search { display: none; } /* không có JS: ô tìm luôn hiện */ .adc-js.adc-search-open .adc-header > .wp-block-group > .adc-search { display: block; } .adc-logo img { height: 34px !important; } .adc-actions { gap: 4px; padding-right: 0; } .adc-actions__item { display: none; } /* thông báo, giỏ hàng: chưa mở tính năng, ẩn trên mobile cho gọn */ .adc-js .adc-actions__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wp--preset--color--primary); cursor: pointer; } .adc-actions__btn::before { font-family: "Phosphor-Bold"; font-size: 24px; line-height: 1; } .adc-actions__btn--search::before { content: "\e30c"; } .adc-search-open .adc-actions__btn--search::before { content: "\e4f6"; } .adc-actions__btn--menu::before { content: "\e2f0"; } .adc-actions__btn:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; } /* có JS: topbar ẩn trên mobile (không có JS thì topbar vẫn hiện để còn menu): link trang + liên hệ nằm trong mục "Cửa hàng" của popup Danh mục. Không dùng display: none vì popup (position: fixed) nằm trong topbar; fixed thoát được overflow của khung 0×0 (không transform) nên vẫn phủ toàn màn hình. */ .adc-js .adc-topbar { position: fixed; top: 0; left: 0; width: 0; height: 0; padding: 0 !important; border: 0; overflow: hidden; visibility: hidden; } } /* ---------- Gợi ý tìm kiếm (popover dưới ô search) ---------- */ .adc-search { position: relative; } .adc-suggest { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; background: var(--wp--preset--color--white); border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent); border-radius: 10px; box-shadow: 0 12px 32px rgb(0 0 0 / .12); overflow: hidden; text-align: left; } .adc-suggest[hidden], .adc-suggest [hidden] { display: none; } .adc-suggest__list { list-style: none; margin: 0; padding: 4px; max-height: calc(6 * 64px + 8px); overflow-y: auto; overscroll-behavior: contain; } /* 6 dòng x 64px, dòng thứ 7 trở đi cuộn */ .adc-suggest__item { display: flex; align-items: center; gap: 12px; height: 64px; box-sizing: border-box; padding: 8px; border-radius: 8px; color: var(--wp--preset--color--primary); text-decoration: none; } .adc-suggest__item:hover, .adc-suggest__item.is-active, .adc-suggest__all:hover, .adc-suggest__all.is-active { background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, white); } .adc-suggest__item img { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: 6px; } .adc-suggest__item.is-soldout img { opacity: .5; } .adc-suggest__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .adc-suggest__name { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* giá như thẻ sản phẩm: "Từ" + giá hiện tại (cam, đậm) trước, giá gốc gạch ngang sau */ .adc-suggest__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 13px; } .adc-suggest__price > .woocommerce-Price-amount, .adc-suggest__price ins { order: -1; font-weight: 700; color: var(--wp--preset--color--accent); text-decoration: none; } .adc-suggest__price .adc-pcard__from { order: -2; margin: 0; font-size: 12px; opacity: .65; } .adc-suggest__price del { font-size: 12px; opacity: .5; } .adc-suggest__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .adc-suggest__price em { font-style: normal; opacity: .7; } .adc-suggest__item .adc-flash__badge { position: static; flex: none; padding: 2px 5px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.3; } .adc-suggest__state { padding: 16px; font-size: 14px; text-align: center; opacity: .7; } .adc-suggest__all { display: block; padding: 12px 16px; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); font-size: 14px; font-weight: 600; color: var(--wp--preset--color--accent); text-decoration: none; } /* ---------- Trang danh mục sản phẩm ---------- */ .adc-catpage .adc-pgrid--wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 960px) { .adc-catpage .adc-pgrid--wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .adc-catpage .adc-pgrid--wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .adc-catpage__empty { padding: 32px 0; text-align: center; } .adc-catpage__pages { display: flex; justify-content: center; gap: 8px; margin-top: 32px; } .adc-catpage__pages .page-numbers { min-width: 36px; padding: 6px 10px; border-radius: 8px; text-align: center; text-decoration: none; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent); } .adc-catpage__pages .current { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); } .adc-catpage { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; } .adc-catpage__toggle, .adc-catpage__overlay, .adc-catpage__head, .adc-catpage__total, .adc-catpage__chips, .adc-catpage__more { display: none; } /* chỉ dùng trên mobile */ .adc-catpage .adc-pcard__status.is-in { display: none; } /* chỉ đánh dấu khi hết hàng */ .adc-catpage__actions { display: flex; flex-direction: column-reverse; gap: 8px; } /* desktop: cột lọc cuộn bên trong, nút Áp dụng dính đáy cột (tràn qua padding 20px của cột để che nội dung cuộn bên dưới) */ @media (min-width: 783px) { .adc-catpage__actions { position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 12px 20px 20px; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); background: var(--wp--preset--color--white); } } .adc-catpage__active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; } .adc-catpage__off { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, white); font-size: 13px; font-weight: 600; color: var(--wp--preset--color--primary); text-decoration: none; } .adc-catpage__off::after { font-family: "Phosphor-Bold"; content: "\e4f6"; font-size: 12px; line-height: 1; opacity: .6; } .adc-catpage__off:hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, white); } .adc-catpage .adc-catpage__same { margin-top: 40px; padding-top: 0; } /* hàng "Cùng nhóm …" ở danh mục lá ít sản phẩm */ .adc-catpage__clear-all { padding: 6px 4px; font-size: 13px; font-weight: 600; color: var(--wp--preset--color--accent); text-decoration: none; } .adc-catpage__side { position: sticky; top: calc(var(--adc-sticky-top) + 16px); max-height: calc(100vh - var(--adc-sticky-top) - 32px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 24px; padding: 20px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); border-radius: 12px; background: var(--wp--preset--color--white); } .adc-catpage__filters { display: flex; flex-direction: column; gap: 24px; } .adc-catpage__group h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; } .adc-catpage__cats, .adc-catpage__brackets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .adc-catpage__cats a, .adc-catpage__brackets a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 14px; color: inherit; text-decoration: none; } .adc-catpage__cats a:hover, .adc-catpage__brackets a:hover, .adc-catpage__cats .is-current > a, .adc-catpage__brackets a.is-current { background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, white); } .adc-catpage__cats .is-current > a, .adc-catpage__brackets a.is-current { font-weight: 700; } .adc-catpage__cats em { font-style: normal; opacity: .55; } .adc-catpage__back a { font-weight: 600; color: var(--wp--preset--color--accent); } .adc-catpage__price { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 8px; } .adc-catpage__price input { width: 100%; box-sizing: border-box; padding: 8px; font-size: 13px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent); border-radius: 8px; font-family: inherit; color: inherit; } .adc-catpage__price input:focus { outline: 0; border-color: var(--wp--preset--color--primary); } .adc-catpage__check { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; cursor: pointer; } .adc-catpage__apply { width: 100%; padding: 10px; border: 0; border-radius: 8px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); font: inherit; font-weight: 600; cursor: pointer; } .adc-catpage__apply:hover { background: var(--wp--preset--color--accent); } .adc-catpage__clear { text-align: center; font-size: 14px; } .adc-catpage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .adc-catpage__count { margin: 0; font-size: 14px; opacity: .7; } .adc-catpage__sort label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; } .adc-catpage__sort select { appearance: none; padding: 8px 36px 8px 12px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent); border-radius: 8px; font: inherit; font-size: 14px; color: inherit; cursor: pointer; background: var(--wp--preset--color--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D234D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 14px no-repeat; } /* mũi tên riêng cách mép 12px thay cho mũi tên mặc định dính sát mép */ .adc-catpage__sort select:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } @media (max-width: 782px) { /* đầu trang gọn: breadcrumb sát header, tiêu đề + số sản phẩm, hàng chip danh mục */ main.adc-listing { margin-block-start: 0; padding-top: 12px !important; } .adc-listing > .adc-catpage { margin-block-start: 0; } .adc-catpage { grid-template-columns: minmax(0, 1fr); gap: 0; } .adc-catpage__total { display: block; margin: 2px 0 12px; font-size: 14px; color: color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent); } .adc-catpage__chips { display: block; } .adc-catpage__chips ul { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 12px; overflow-x: auto; list-style: none; scrollbar-width: none; } .adc-catpage__chips ul::-webkit-scrollbar { display: none; } .adc-chip { display: flex; flex: none; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent); border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--wp--preset--color--primary); text-decoration: none; } .adc-chip__icon { width: 26px; height: 26px; margin-left: -8px; background: var(--adc-ico) center / contain no-repeat; } .adc-chip__count { font-size: 12px; font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums; } .adc-chip.is-current { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); } .adc-chip.is-current .adc-chip__count { opacity: .75; } /* thanh "Bộ lọc · Sắp xếp" dính đầu màn hình khi cuộn */ .adc-catpage__bar { position: sticky; top: var(--adc-sticky-top); z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 -16px; border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); background: var(--wp--preset--color--white); } html:not(.adc-js) .adc-catpage__bar { grid-template-columns: 1fr; } .adc-catpage__count { display: none; } .adc-js .adc-catpage .adc-catpage__toggle { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: inherit; cursor: pointer; } .adc-catpage__toggle::before { font-family: "Phosphor-Bold"; content: "\e434"; font-size: 18px; line-height: 1; } .adc-catpage__badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); font-size: 12px; font-weight: 700; } .adc-catpage__sort { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0; border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); } .adc-catpage__sort label { gap: 8px; height: 48px; margin: 0; } .adc-catpage__sort label::before { font-family: "Phosphor-Bold"; content: "\e098"; font-size: 18px; line-height: 1; } .adc-catpage__sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .adc-catpage__sort select { appearance: none; height: auto; padding: 0; border: 0; background: none; font-size: 14.5px; font-weight: 600; cursor: pointer; } .adc-catpage__toggle:focus-visible, .adc-catpage__sort select:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -4px; } .adc-catpage__active { margin: 12px 0 0; } .adc-catpage .adc-pgrid--wrap { margin-top: 14px; } /* cuối danh sách: "Xem thêm" thay cho số trang (không có JS thì vẫn là số trang) */ .adc-js .adc-catpage__more { display: grid; justify-items: center; gap: 10px; padding: 28px 0 8px; } .adc-catpage__more p { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent); font-variant-numeric: tabular-nums; } .adc-catpage__meter { width: 160px; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, white); } .adc-catpage__meter i { display: block; height: 100%; background: var(--wp--preset--color--primary); } .adc-catpage__next { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; border: 1px solid var(--wp--preset--color--primary); border-radius: 10px; font-weight: 600; color: var(--wp--preset--color--primary); text-decoration: none; } .adc-catpage__next[aria-busy] { opacity: .6; pointer-events: none; } .adc-js .adc-catpage__pages { display: none; } /* bảng "Bộ lọc" trượt từ dưới lên; danh mục đã có hàng chip nên ẩn trong bảng */ .adc-catpage__side { position: static; } .adc-js .adc-catpage .adc-catpage__side { position: fixed; z-index: 100; inset: auto 0 0; max-height: 86vh; max-height: 86dvh; gap: 0; padding: 0; border: 0; border-radius: 16px 16px 0 0; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 -12px 32px rgb(0 0 0 / .18); transform: translateY(100%); visibility: hidden; } .adc-js .adc-catpage.is-ready .adc-catpage__side { transition: transform .25s ease, visibility .25s; } .adc-js .adc-catpage .adc-catpage__side.is-open { transform: none; visibility: visible; } .adc-js .adc-catpage .adc-catpage__overlay.is-open { display: block; position: fixed; z-index: 99; inset: 0; background: rgb(13 35 77 / .45); } .adc-js .adc-catpage .adc-catpage__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 6px 16px; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); background: var(--wp--preset--color--white); } .adc-catpage__head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: color-mix(in srgb, var(--wp--preset--color--primary) 18%, white); } .adc-catpage__head h2 { margin: 0; font-size: 17px; font-weight: 700; } .adc-js .adc-catpage .adc-catpage__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wp--preset--color--primary); cursor: pointer; } .adc-catpage__close::before { font-family: "Phosphor-Bold"; content: "\e4f6"; font-size: 22px; line-height: 1; } .adc-js .adc-catpage__group--cats { display: none; } .adc-js .adc-catpage .adc-catpage__filters { gap: 20px; padding: 16px 16px 0; } .adc-js .adc-catpage__brackets { flex-direction: row; flex-wrap: wrap; gap: 8px; } .adc-js .adc-catpage__brackets a { align-items: center; height: 36px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent); border-radius: 999px; font-weight: 500; } .adc-js .adc-catpage__brackets a:hover { background: none; } .adc-js .adc-catpage__brackets a.is-current { border-color: var(--wp--preset--color--primary); background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, white); box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary); font-weight: 700; } .adc-catpage__price input { padding: 10px 12px; font-size: 16px; } /* 16px: iOS không tự phóng to khi chạm */ .adc-js .adc-catpage__check { position: relative; display: inline-flex; height: 36px; margin: 0 8px 8px 0; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent); border-radius: 999px; } .adc-js .adc-catpage__check input { position: absolute; opacity: 0; pointer-events: none; } .adc-js .adc-catpage__check:has(:checked) { border-color: var(--wp--preset--color--primary); background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, white); box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary); font-weight: 700; } .adc-js .adc-catpage__check:has(:focus-visible) { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .adc-js .adc-catpage .adc-catpage__actions { position: sticky; bottom: 0; flex-direction: row; gap: 10px; margin: 4px -16px 0; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); background: var(--wp--preset--color--white); } .adc-js .adc-catpage .adc-catpage__clear { display: flex; align-items: center; height: 46px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent); border-radius: 10px; font-weight: 600; color: var(--wp--preset--color--primary); text-decoration: none; } .adc-js .adc-catpage .adc-catpage__apply { flex: 1; height: 46px; border-radius: 10px; } } /* ---------- Breadcrumb và tiêu đề trang danh sách sản phẩm (danh mục, cửa hàng, tìm kiếm) ---------- */ .adc-listing .wc-block-breadcrumbs { margin-top: 0; margin-bottom: 8px; } .woocommerce-breadcrumb { font-size: 13px; color: var(--wp--preset--color--primary); white-space: nowrap; overflow-x: auto; scrollbar-width: none; } .woocommerce-breadcrumb::-webkit-scrollbar { display: none; } .woocommerce-breadcrumb a { color: color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent); text-decoration: none; } .woocommerce-breadcrumb a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; } .adc-bc-sep { margin: 0 8px; font-size: 12px; opacity: .45; } .adc-listing h1.wp-block-query-title, .adc-listing h1.wp-block-heading { margin: 0 0 24px; font-size: 30px; font-weight: 700; line-height: 1.2; } @media (max-width: 1220px) { .adc-listing { padding-inline: 16px; } } /* nội dung không dính mép màn hình */ @media (max-width: 782px) { /* đặt sau quy tắc gốc ở trên để thắng margin 24px */ .adc-listing .wc-block-breadcrumbs { margin-bottom: 6px; } .adc-listing h1.wp-block-query-title, .adc-listing h1.wp-block-heading { margin: 0; font-size: 24px; } } /* ---------- Trang chi tiết sản phẩm ---------- */ .adc-pp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 8px; } .adc-pp__card { padding: 24px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); border-radius: 12px; background: var(--wp--preset--color--white); box-shadow: var(--adc-shadow-md); } .adc-pp__frame { position: relative; overflow: hidden; border-radius: 8px; background: var(--wp--preset--color--white); } .adc-pp__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } .adc-pp__badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 6px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); font-size: 14px; font-weight: 700; } .adc-pp__soldout { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(255 255 255 / .6); font-size: 20px; font-weight: 700; } .adc-pp__badge[hidden], .adc-pp__soldout[hidden] { display: none; } .adc-pp__info { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .adc-pp__cat { font-size: 13px; font-weight: 600; color: var(--wp--preset--color--accent); text-decoration: none; } .adc-pp__title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.25; } .adc-pp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font-size: 14px; } .adc-pp__stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .adc-pp__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .adc-pp__stock.is-in { color: #2e8b57; } .adc-pp__stock.is-out { color: #b3261e; } .adc-pp__price { font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--wp--preset--color--accent); } .adc-pp__price del { margin-right: 8px; font-size: 18px; font-weight: 500; color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent); } .adc-pp__price ins { text-decoration: none; } .adc-pp__price .adc-pcard__from { margin-right: 8px; font-size: 15px; font-weight: 500; color: color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent); } .adc-pp__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .adc-pp__short { font-size: 15px; line-height: 1.6; } .adc-pp__short p { margin: 0; } .adc-pp__attr { display: flex; flex-direction: column; gap: 8px; } .adc-pp__attrname { font-size: 14px; font-weight: 600; } .adc-pp__opts { display: flex; flex-wrap: wrap; gap: 8px; } .adc-pp__opt { min-width: 44px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent); border-radius: 8px; background: var(--wp--preset--color--white); color: inherit; font: inherit; font-size: 14px; cursor: pointer; } .adc-pp__opt:hover:not(:disabled) { border-color: var(--wp--preset--color--primary); } .adc-pp__opt.is-on { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); font-weight: 600; } .adc-pp__opt:disabled, .adc-pp__opt.is-out { opacity: .4; text-decoration: line-through; cursor: not-allowed; } .adc-pp__qty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .adc-pp__qtylabel { font-size: 14px; font-weight: 600; } .adc-pp__stepper { display: inline-flex; align-items: stretch; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent); border-radius: 8px; overflow: hidden; background: var(--wp--preset--color--white); } .adc-pp__qtybtn { display: grid; place-items: center; width: 40px; border: 0; background: transparent; color: inherit; font-size: 16px; cursor: pointer; } .adc-pp__qtybtn:hover:not(:disabled) { background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, white); } .adc-pp__qtyinput { width: 64px; padding: 10px 4px; border: 0; border-inline: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent); border-radius: 0; text-align: center; font: inherit; font-size: 15px; font-weight: 600; color: inherit; appearance: textfield; -moz-appearance: textfield; } .adc-pp__qtyinput::-webkit-outer-spin-button, .adc-pp__qtyinput::-webkit-inner-spin-button { appearance: none; margin: 0; } .adc-pp__qtyinput:focus { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; } .adc-pp__stepper:has(:disabled) { opacity: .45; } .adc-pp__qtybtn:disabled { cursor: not-allowed; } .adc-pp__qtynote { font-size: 13px; color: var(--wp--preset--color--accent); } .adc-pp__qtynote[hidden] { display: none; } .adc-pp__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .adc-pp__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; border: 1px solid transparent; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; } .adc-pp__btn[hidden] { display: none; } .adc-pp__btn i { flex: none; font-size: 20px; line-height: 1; } .adc-pp__btn--call { flex: 1 1 100%; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); } .adc-pp__btn--call:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 85%, black); } .adc-pp__btn--zalo { flex: 1 1 0; background: #0068ff; color: var(--wp--preset--color--white); } .adc-pp__btn--copy { flex: 1.5 1 0; white-space: nowrap; border-color: color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent); background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); } .adc-pp__btn.is-disabled, .adc-pp__btn:disabled { opacity: .45; pointer-events: none; } .adc-pp__hint { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent); } .adc-pp__hint[hidden], .adc-pp__copybox[hidden] { display: none; } .adc-pp__copybox { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent); border-radius: 8px; font: inherit; font-size: 13px; } .adc-pp__section { margin-top: 48px; } .adc-pp__section h2 { margin: 0 0 16px; font-size: 22px; font-weight: 700; } .adc-pp__detail { margin-top: 24px; } .adc-pp__detail h2 { margin: 0 0 16px; font-size: 22px; font-weight: 700; } .adc-pp__content { max-width: 80ch; line-height: 1.7; } .adc-pp__content > :first-child { margin-top: 0; } .adc-pp__content > :last-child { margin-bottom: 0; } .adc-pp__content h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; } .adc-pp__content p { margin: 0 0 12px; } .adc-pp__content ul { margin: 0 0 12px; padding-left: 1.25em; } .adc-pp__content li { margin-bottom: 4px; } .adc-pp__empty { margin: 0; color: color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent); } .adc-pp__specs { width: 100%; max-width: 720px; border-collapse: collapse; font-size: 15px; } .adc-pp__specs th, .adc-pp__specs td { padding: 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); text-align: left; vertical-align: top; } .adc-pp__specs th { width: 32%; font-weight: 600; background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, white); } .adc-pp__related { margin-top: 56px; } @media (max-width: 782px) { .adc-pp { grid-template-columns: 1fr; gap: 20px; } .adc-pp__card { padding: 16px; } .adc-pp__title { font-size: 24px; } .adc-pp__price { font-size: 26px; } .adc-pp__btn--zalo, .adc-pp__btn--copy { flex: 1 1 100%; } } /* ---------- Trang FAQ ---------- */ .adc-faq { display: flex; flex-direction: column; gap: 32px; } /* chiếm đúng khung nội dung để thẳng hàng trái với tiêu đề; chiều rộng đọc giới hạn ở từng nhóm */ .adc-faq__group { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 820px; } .adc-faq__title { margin: 0 0 4px; font-size: 20px; font-weight: 700; } .adc-faq__item { border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); border-radius: 12px; background: var(--wp--preset--color--white); box-shadow: var(--adc-shadow-sm); } .adc-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; } .adc-faq__item > summary::-webkit-details-marker { display: none; } .adc-faq__item > summary::after { content: "\e136"; flex: none; font-family: "Phosphor-Bold"; font-size: 18px; line-height: 1; transition: transform .15s ease; } /* mũi tên xuống (Phosphor caret-down) */ .adc-faq__item[open] > summary::after { transform: rotate(180deg); } .adc-faq__item > summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; border-radius: 12px; } .adc-faq__answer { padding: 0 20px 18px; line-height: 1.7; } .adc-faq__answer > :first-child { margin-top: 0; } .adc-faq__answer > :last-child { margin-bottom: 0; } .adc-faq__answer p, .adc-faq__answer ul, .adc-faq__answer ol { margin: 0 0 12px; } .adc-faq__answer ul, .adc-faq__answer ol { padding-left: 1.25em; } .adc-faq__empty { padding: 32px 0; } @media (max-width: 782px) { .adc-faq__item > summary { padding: 14px 16px; } .adc-faq__answer { padding: 0 16px 16px; } } /* ---------- Khối bản đồ cửa hàng (adc/store-map) ---------- */ .adc-map { overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, white); box-shadow: var(--adc-shadow-sm); } .adc-map iframe { display: block; width: 100%; height: 380px; border: 0; } .adc-map--empty { display: grid; place-items: center; min-height: 160px; padding: 24px; text-align: center; font-size: 14px; } @media (max-width: 720px) { .adc-map iframe { height: 280px; } } /* ---------- Trang giới thiệu, liên hệ: khung trang, block style (inc/page-design.php), pattern (patterns/) ---------- */ .adc-page__crumbs { padding-top: 1.5rem; padding-bottom: 12px; } .adc-page__crumbs .wc-block-breadcrumbs { margin: 0; } @media (max-width: 782px) { /* mobile: breadcrumb sát header và banner, bớt khoảng trống */ main:has(> .adc-page__crumbs:first-child) { margin-block-start: 0; } .adc-page__crumbs { padding-block: 12px; } .adc-page__crumbs .woocommerce-breadcrumb { margin: 0; } .adc-page__crumbs + * { margin-block-start: 0 !important; } } .adc-page .wp-block-post-content > * { margin-block: 0; } /* các phần tự lo khoảng cách bằng padding, dải full-width nằm sát nhau */ .adc-page + .wp-block-template-part .adc-footer { margin-top: 0; } @media (max-width: 1220px) { .adc-page .wp-block-post-content > :not(.alignfull) { padding-inline: 16px; } } .adc-section { padding-block: clamp(40px, 6vw, 72px); } .adc-section + .adc-section { padding-top: 0; } /* hai phần liền nhau: chỉ một khoảng cách */ .adc-section > h2, .adc-section .wp-block-column > h2 { margin: 0 0 16px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.2; } .adc-section p { line-height: 1.75; } /* Dải màu full-width */ .is-style-adc-band-navy, .is-style-adc-band-accent { padding: clamp(40px, 6vw, 72px) 16px; color: var(--wp--preset--color--white); } .is-style-adc-band-navy { background: var(--wp--preset--color--primary); } .is-style-adc-band-accent { background: var(--wp--preset--color--accent); } .is-style-adc-band-navy :is(h1, h2, h3, h4), .is-style-adc-band-accent :is(h1, h2, h3, h4) { color: var(--wp--preset--color--white); } .is-style-adc-band-navy a:not(.wp-element-button), .is-style-adc-band-accent a:not(.wp-element-button) { color: inherit; } /* Thẻ */ .is-style-adc-card { height: 100%; padding: 24px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); border-radius: 12px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); box-shadow: var(--adc-shadow-sm); } .is-style-adc-card > * { margin-block: 0; } .is-style-adc-card > * + * { margin-top: 10px; } .is-style-adc-card h3 { font-size: 19px; font-weight: 700; line-height: 1.3; } .is-style-adc-card p { line-height: 1.6; color: color-mix(in srgb, var(--wp--preset--color--primary) 78%, transparent); } /* Dòng nhỏ, số liệu */ .is-style-adc-eyebrow { margin-bottom: 12px; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--accent); } .is-style-adc-stat { margin: 0; text-align: center; font-size: 14px; line-height: 1.4; opacity: .85; } .is-style-adc-stat strong { display: block; margin-bottom: 4px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; line-height: 1.1; opacity: 1; } /* Banner: lớp phủ gradient thương hiệu, nội dung thẳng hàng cột 1180px */ .wp-block-cover.is-style-adc-brand { padding: clamp(48px, 7vw, 88px) 16px; color: var(--wp--preset--color--white); } .wp-block-cover.is-style-adc-brand .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(90deg, rgb(13 35 77 / .94) 0%, rgb(13 35 77 / .72) 50%, rgb(13 35 77 / .2) 100%) !important; } .wp-block-cover.is-style-adc-brand .wp-block-cover__inner-container { width: min(1180px, 100%) !important; margin-inline: auto !important; } .wp-block-cover.is-style-adc-brand .wp-block-cover__inner-container > * { max-width: 640px; margin-left: 0 !important; } .wp-block-cover.is-style-adc-brand h1 { margin: 0 0 16px; font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; line-height: 1.08; color: var(--wp--preset--color--white); } .wp-block-cover.is-style-adc-brand p:not(.is-style-adc-eyebrow) { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; opacity: .9; } .wp-block-cover.is-style-adc-brand .wp-block-buttons { margin-top: 28px; } /* Nút */ .wp-block-button:is(.is-style-adc-call, .is-style-adc-zalo, .is-style-adc-light) .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 10px; font-size: 15px; font-weight: 700; line-height: 1.2; } .wp-block-button.is-style-adc-call .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); } .wp-block-button.is-style-adc-call .wp-block-button__link:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 85%, black); } .wp-block-button.is-style-adc-zalo .wp-block-button__link { background: #0068ff; color: var(--wp--preset--color--white); } .wp-block-button.is-style-adc-zalo .wp-block-button__link:hover { background: #0057d9; } .wp-block-button.is-style-adc-light .wp-block-button__link { background: var(--wp--preset--color--white); color: var(--wp--preset--color--accent); } .wp-block-button.is-style-adc-light .wp-block-button__link:hover { background: color-mix(in srgb, var(--wp--preset--color--white) 88%, var(--wp--preset--color--primary)); } .wp-block-button.is-style-adc-call .wp-block-button__link::before, .wp-block-button.is-style-adc-zalo .wp-block-button__link::before { font-family: "Phosphor-Bold"; font-size: 20px; line-height: 1; } .wp-block-button.is-style-adc-call .wp-block-button__link::before { content: "\e3ba"; } .wp-block-button.is-style-adc-zalo .wp-block-button__link::before { content: "\e16c"; } .wp-block-button.is-style-adc-link .wp-block-button__link { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; color: var(--wp--preset--color--primary); font-weight: 700; overflow-wrap: anywhere; } .wp-block-button.is-style-adc-link .wp-block-button__link::after { content: "\e06c"; font-family: "Phosphor-Bold"; font-size: 16px; transition: transform .15s ease; } .wp-block-button.is-style-adc-link .wp-block-button__link:hover { color: var(--wp--preset--color--accent); } .wp-block-button.is-style-adc-link .wp-block-button__link:hover::after { transform: translateX(3px); } .wp-block-button .wp-block-button__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* Icon tròn trước tiêu đề thẻ */ .adc-ico::before { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 50%; background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, white); font-family: "Phosphor-Bold"; font-size: 22px; font-weight: normal; line-height: 1; color: var(--wp--preset--color--primary); } .adc-ico--phone-call::before { content: "\e3ba"; } .adc-ico--chat::before { content: "\e16c"; } .adc-ico--envelope::before { content: "\e218"; } .adc-ico--map-pin::before { content: "\e316"; } /* Trang giới thiệu */ .adc-stats { gap: 24px; } .adc-story { align-items: center; gap: clamp(24px, 5vw, 64px); } .adc-story .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: var(--adc-shadow-md); } .adc-values .wp-block-columns { gap: 20px; } .adc-values .wp-block-image { margin: 0 0 4px; } .adc-values .wp-block-image img { width: 64px; height: 64px; object-fit: contain; } .adc-cta { text-align: center; } .adc-cta h2 { margin: 0 0 8px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; } .adc-cta .wp-block-buttons { justify-content: center; margin-top: 20px; } /* Trang liên hệ */ /* Đầu trang liên hệ: banner ảnh như trang giới thiệu (is-style-adc-brand), chữ rộng hơn, chừa chỗ dưới cho thẻ liên hệ chồng lên */ .wp-block-cover.adc-contact-head { padding-bottom: clamp(104px, 11vw, 136px); } .wp-block-cover.adc-contact-head .wp-block-cover__inner-container > * { max-width: 820px; } @media (min-width: 782px) { .wp-block-cover.adc-contact-head .wp-block-cover__background { background: linear-gradient(90deg, rgb(13 35 77 / .94) 0%, rgb(13 35 77 / .86) 60%, rgb(13 35 77 / .35) 100%) !important; } } /* chữ rộng tới ~2/3 banner: giữ lớp phủ đậm tới đó */ .adc-contact-cards { position: relative; z-index: 2; margin-top: calc(-1 * clamp(56px, 7vw, 72px)) !important; gap: 20px; } .adc-contact-cards .wp-block-buttons { margin-top: 18px; } .adc-contact-visit { align-items: center; gap: clamp(24px, 4vw, 48px); } .adc-address { font-size: 18px; font-weight: 600; line-height: 1.5; } .adc-hours { display: flex; align-items: center; gap: 8px; } .adc-hours::before { content: "\e19a"; font-family: "Phosphor-Bold"; font-size: 18px; } @media (max-width: 781px) { .wp-block-columns.is-not-stacked-on-mobile.adc-stats { flex-wrap: wrap !important; row-gap: 28px; } /* thắng nowrap !important của lõi cho is-not-stacked-on-mobile */ .adc-stats > .wp-block-column { flex-basis: calc(50% - 12px) !important; flex-grow: 0; } .wp-block-cover.is-style-adc-brand { min-height: 380px !important; } .wp-block-cover.is-style-adc-brand .wp-block-cover__background { background: rgb(13 35 77 / .8) !important; } .adc-contact-cards { gap: 16px; } .is-style-adc-card { padding: 20px; } .adc-contact-cards :is(.is-style-adc-call, .is-style-adc-zalo), .adc-contact-cards :is(.is-style-adc-call, .is-style-adc-zalo) .wp-block-button__link { width: 100%; justify-content: center; } } /* ---------- Trang chính sách (templates/page-chinh-sach.html, inc/policies.php) ---------- */ /* đầu trang: banner ảnh is-style-adc-brand như trang giới thiệu, liên hệ, sự kiện */ .adc-policy__summary p { margin: 0; } .adc-policy__updated { margin-top: 12px; color: inherit !important; font-size: 13px; opacity: .75; } /* khối Ngày mang màu primary từ theme.json: theo màu chữ của dải */ .adc-policy__updated time::before { content: "Cập nhật: "; } .adc-policy__body { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 56px; align-items: start; max-width: 1180px; margin: 0 auto; padding: 48px 16px 72px; } .adc-policy-nav { position: sticky; top: calc(var(--adc-sticky-top) + 24px); max-height: calc(100vh - var(--adc-sticky-top) - 48px); overflow-y: auto; font-size: 14px; } .adc-policy-nav__label, .adc-policy-nav__toc > summary { margin: 0 0 8px; font-size: 14px; font-weight: 700; opacity: .6; list-style: none; } .adc-policy-nav__toc > summary::-webkit-details-marker { display: none; } .adc-policy-nav ul, .adc-policy-nav ol { margin: 0; padding: 0; list-style: none; } .adc-policy-nav__pages a { display: block; padding: 9px 12px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; color: inherit; font-weight: 600; text-decoration: none; } .adc-policy-nav__pages a:hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, white); } .adc-policy-nav__pages a.is-current { border-left-color: var(--wp--preset--color--accent); background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, white); } .adc-policy-nav__toc { margin-top: 28px; } .adc-policy-nav__toc a { display: block; padding: 6px 12px; border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); color: inherit; line-height: 1.45; text-decoration: none; opacity: .75; } .adc-policy-nav__toc a:hover { opacity: 1; } .adc-policy-nav__toc a.is-active { border-left-color: var(--wp--preset--color--accent); font-weight: 700; opacity: 1; } .adc-policy-nav a:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .adc-policy-nav__short { display: none; } /* tên ngắn chỉ dùng cho dải tab trên mobile */ .adc-policy__content { min-width: 0; font-size: 16px; line-height: 1.75; } .adc-policy .adc-policy__content > * { margin-block: 0 16px; } /* thắng .adc-page .wp-block-post-content > * (margin 0) */ .adc-policy .adc-policy__content > .adc-keypoints { margin-bottom: 32px; } .adc-policy .adc-policy__content h2 { margin: 40px 0 12px; font-size: 24px; font-weight: 700; line-height: 1.3; scroll-margin-top: calc(var(--adc-sticky-top) + 24px); } .adc-policy__content h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; } .adc-policy__content :is(ul, ol) { padding-left: 1.3em; } .adc-policy__content li + li { margin-top: 6px; } .adc-keypoints { gap: 16px; } .adc-keypoints .is-style-adc-card { padding: 20px 16px; } .adc-policy .adc-keypoints .is-style-adc-stat strong { color: var(--wp--preset--color--accent); } .adc-policy__content .wp-block-table { overflow-x: auto; } .adc-policy__content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; } .adc-policy__content .wp-block-table :is(th, td) { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); text-align: left; } .adc-policy__content .wp-block-table thead th { background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, white); font-weight: 700; } .adc-policy__content .wp-block-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--wp--preset--color--primary) 3%, white); } .adc-policy-contact { margin-top: 40px !important; padding: 24px 28px; border-radius: 14px; background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, white); } .adc-policy-contact .wp-block-buttons { margin-top: 16px; } .adc-policy-note { margin-top: 24px !important; font-size: 14px; opacity: .7; } @media (min-width: 900px) { .adc-policy-nav__toc > summary { pointer-events: none; } } @media (max-width: 899px) { /* dải tab gắn liền dưới banner, dính đầu màn hình khi cuộn; khung .adc-policy-nav nhường chỗ để tab dính theo cả .adc-policy__body */ .adc-policy__body { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 0; } .adc-policy-nav { display: contents; } .adc-policy-nav__label, .adc-policy-nav__full { display: none; } .adc-policy-nav__short { display: inline; } .adc-policy-nav > nav:first-child { position: sticky; top: var(--adc-sticky-top); z-index: 20; margin-inline: -16px; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); background: color-mix(in srgb, var(--wp--preset--color--primary) 4%, white); font-size: 14px; } .adc-policy-nav__pages { display: flex; overflow-x: auto; padding: 0 4px; scrollbar-width: none; } .adc-policy-nav__pages.has-more { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } /* policy-nav.js: còn tab bên phải */ .adc-policy-nav__pages::-webkit-scrollbar { display: none; } .adc-policy-nav__pages a, .adc-policy-nav__pages a:hover { padding: 14px 12px 12px; border: 0; border-radius: 0; background: none; white-space: nowrap; opacity: .6; box-shadow: inset 0 -3px 0 transparent; } .adc-policy-nav__pages a.is-current { background: none; opacity: 1; box-shadow: inset 0 -3px 0 var(--wp--preset--color--accent); } .adc-policy-nav__pages a:focus-visible { outline-offset: -2px; } .adc-policy-nav__toc { margin: 0; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); border-radius: 12px; font-size: 14px; } .adc-policy-nav__toc > summary { display: flex; justify-content: space-between; align-items: center; margin: 0; cursor: pointer; } .adc-policy-nav__toc > summary::after { content: "\e136"; font-family: "Phosphor-Bold"; font-size: 14px; transition: transform .15s ease; } .adc-policy-nav__toc[open] > summary { margin-bottom: 8px; } .adc-policy-nav__toc[open] > summary::after { transform: rotate(180deg); } .adc-policy .adc-policy__content h2 { scroll-margin-top: calc(var(--adc-sticky-top) + 64px); } /* chừa chỗ cho header và dải tab đang dính */ } /* Block style dùng ở footer (inc/page-design.php) */ .is-style-adc-links { margin: 0; padding: 0; list-style: none; } .is-style-adc-links li + li { margin-top: 10px; } .is-style-adc-links a { color: inherit; text-decoration: none; opacity: .8; } .is-style-adc-links a:hover { opacity: 1; text-decoration: underline; } .wp-block-button.is-style-adc-footer-link .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0; background: none; color: inherit; font-weight: 600; } .wp-block-button.is-style-adc-footer-link .wp-block-button__link:hover { text-decoration: underline; } /* ---------- Footer (parts/footer.html — sửa trong Site Editor) ---------- */ .adc-footer { margin-top: var(--wp--preset--spacing--60); padding-inline: 16px; } .adc-page + .wp-block-template-part { margin-block-start: 0; } /* trang kết thúc bằng dải màu: footer nằm sát */ .adc-footer a { color: inherit; } /* đường kẻ trên tràn hết chiều rộng màn hình: border-image outset là ink overflow, không làm trang cuộn ngang */ .adc-footer__cols { --adc-line: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); gap: 32px; margin-block: 0 !important; padding: 44px 0 36px; border-top: 1px solid var(--adc-line); border-image: linear-gradient(var(--adc-line), var(--adc-line)) 1 0 0 0 / 1px 0 0 0 / 0 100vw; } .adc-footer__logo { margin: 0; } .adc-footer__logo img { width: 170px; height: auto; } .adc-footer__intro { max-width: 360px; margin: 14px 0 18px; line-height: 1.7; opacity: .8; } .adc-footer__title { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--wp--preset--color--accent) !important; } .adc-footer__contact { flex-direction: column; align-items: flex-start; gap: 10px; } .adc-footer :is(.adc-fl--phone, .adc-fl--email) .wp-block-button__link::before, .adc-footer__addr::before, .adc-footer__hours::before { flex: none; font-family: "Phosphor-Bold"; font-size: 16px; font-weight: normal; line-height: 1.6; opacity: .8; } .adc-fl--phone .wp-block-button__link::before { content: "\e3b8"; } .adc-fl--email .wp-block-button__link::before { content: "\e218"; } .adc-footer__addr, .adc-footer__hours { display: flex; gap: 8px; margin: 10px 0 0; line-height: 1.6; opacity: .85; } .adc-footer__addr::before { content: "\e316"; } .adc-footer__hours::before { content: "\e19a"; } .adc-footer__bar { padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); font-size: 13px; opacity: .7; } .adc-footer__bar p { margin: 0; } @media (min-width: 783px) { .adc-footer__bar { padding-right: 64px; } } /* chữ bên phải (ghi công ARCHE) không nằm dưới cột nút nổi góc phải */ @media (max-width: 781px) { .wp-block-columns.adc-footer__cols { flex-wrap: wrap !important; } .wp-block-columns.adc-footer__cols > .wp-block-column:first-child { flex-basis: 100% !important; } .wp-block-columns.adc-footer__cols > .wp-block-column:not(:first-child) { flex-basis: calc(50% - 16px) !important; flex-grow: 0; } .adc-footer__bar { flex-direction: column; justify-content: center !important; text-align: center; } } @media (max-width: 599px) { .wp-block-columns.adc-footer__cols > .wp-block-column:not(:first-child) { flex-basis: 100% !important; } } /* ---------- Sự kiện (inc/events.php, templates/archive-adc_event.html, single-adc_event.html) ---------- */ /* đầu trang danh sách: banner ảnh is-style-adc-brand như trang giới thiệu, liên hệ */ .adc-events__wrap { padding: 48px 16px 72px; } .adc-events-list { margin-bottom: 56px; } .adc-events + .adc-events { margin-top: 56px; } .adc-events__title { margin: 0 0 20px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; } .adc-events__empty { padding: 32px; border: 1px dashed color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent); border-radius: 16px; text-align: center; } .adc-events__empty p { margin: 0 0 16px; } /* Thẻ lớn (sự kiện gần nhất) */ .adc-efeature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); border-radius: 16px; background: var(--wp--preset--color--white); box-shadow: var(--adc-shadow-md); } .adc-efeature__media, .adc-ecard__media { position: relative; display: block; overflow: hidden; background: var(--wp--preset--color--primary); } .adc-efeature__media { min-height: 320px; } .adc-efeature__media img, .adc-ecard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .adc-efeature:hover .adc-efeature__media img, .adc-ecard:hover .adc-ecard__media img { transform: scale(1.03); } .adc-efeature__body { display: flex; flex-direction: column; gap: 12px; padding: 32px; } .adc-efeature__title { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.2; } .adc-efeature__title a, .adc-ecard__title a { color: inherit; text-decoration: none; } .adc-efeature__title a:hover, .adc-ecard__title a:hover { color: var(--wp--preset--color--accent); } .adc-efeature__excerpt { margin: 0; line-height: 1.7; opacity: .85; } .adc-efeature__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 8px; } /* Lưới thẻ */ .adc-egrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .adc-efeature + .adc-egrid { margin-top: 20px; } .adc-ecard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); border-radius: 12px; background: var(--wp--preset--color--white); box-shadow: var(--adc-shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .adc-ecard:hover { transform: translateY(-3px); box-shadow: var(--adc-shadow-md); } .adc-ecard__media { aspect-ratio: 16 / 9; } .adc-ecard__ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--wp--preset--color--primary), color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--accent))); } .adc-ecard__ph::before { content: "\e10a"; font-family: "Phosphor-Bold"; font-size: 44px; color: rgb(255 255 255 / .5); } .adc-ecard__date { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 6px 8px; border-radius: 10px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); font-size: 12px; font-weight: 700; line-height: 1.15; box-shadow: var(--adc-shadow-sm); } .adc-ecard__date b { font-size: 22px; font-weight: 800; } .adc-ecard__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; } .adc-ecard__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; } .adc-ecard.is-past .adc-ecard__media img { filter: grayscale(.6); opacity: .85; } .adc-estatus { align-self: flex-start; display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; } .adc-estatus.is-upcoming { background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, white); color: color-mix(in srgb, var(--wp--preset--color--accent) 75%, black); } .adc-estatus.is-past { background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, white); color: color-mix(in srgb, var(--wp--preset--color--primary) 75%, transparent); } .adc-emeta { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; } .adc-emeta li { display: flex; gap: 8px; opacity: .85; } .adc-emeta li::before, .adc-esummary span::before { flex: none; font-family: "Phosphor-Bold"; font-weight: normal; line-height: inherit; } .adc-emeta__when::before, .adc-esummary__when::before { content: "\e19a"; } .adc-emeta__where::before, .adc-esummary__where::before { content: "\e316"; } .adc-emeta__fee::before { content: "\e490"; } /* Nút */ .adc-ebtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color .15s ease; } .adc-ebtn--primary { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); } .adc-ebtn--primary:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 85%, black); } .adc-ebtn--ghost, .adc-ebtn--call { border-color: color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent); background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); } .adc-ebtn--ghost:hover, .adc-ebtn--call:hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, white); } .adc-ebtn--zalo { background: #0068ff; color: var(--wp--preset--color--white); } .adc-ebtn--zalo::before, .adc-ebtn--call::before { font-family: "Phosphor-Bold"; font-size: 18px; font-weight: normal; line-height: 1; } .adc-ebtn--zalo::before { content: "\e16c"; } .adc-ebtn--call::before { content: "\e3ba"; } .adc-ebtn:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } /* Trang chi tiết */ .wp-block-cover.adc-event__hero { background-color: var(--wp--preset--color--primary); } /* không có ảnh đại diện: nền xanh, không nhạt dần sang trắng */ .adc-esummary { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 0; font-size: 16px; line-height: 1.5; opacity: .92; } .adc-esummary span { display: inline-flex; gap: 8px; } .adc-event__body { display: grid; grid-template-columns: minmax(0, 760px) 340px; justify-content: space-between; gap: 48px; align-items: start; max-width: 1180px; margin: 0 auto; padding: 48px 16px 24px; } .adc-event__content { min-width: 0; font-size: 16px; line-height: 1.75; } .adc-event .adc-event__content > * { margin-block: 0 16px; } .adc-event .adc-event__content h2 { margin: 32px 0 12px; font-size: 24px; font-weight: 700; line-height: 1.3; } .adc-event .adc-event__content > :first-child { margin-top: 0; } .adc-event__content :is(ul, ol) { padding-left: 1.3em; } .adc-event__content li + li { margin-top: 6px; } .adc-einfo { position: sticky; top: calc(var(--adc-sticky-top) + 24px); display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); border-radius: 16px; background: var(--wp--preset--color--white); box-shadow: var(--adc-shadow-md); } .adc-einfo__rows { display: flex; flex-direction: column; gap: 14px; margin: 0; } .adc-einfo__row dt { margin-bottom: 2px; font-size: 13px; font-weight: 700; opacity: .6; } .adc-einfo__row dd { margin: 0; font-weight: 600; line-height: 1.5; } .adc-einfo__map { margin-left: 4px; color: var(--wp--preset--color--accent); font-weight: 700; text-decoration: none; white-space: nowrap; } .adc-einfo__map:hover { text-decoration: underline; } .adc-einfo__cta { display: flex; flex-direction: column; gap: 10px; } .adc-einfo__past { margin: 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, white); font-size: 14px; line-height: 1.6; } .adc-event__more { padding: 24px 16px 72px; } .adc-event__more > * + * { margin-top: 56px; } @media (max-width: 899px) { .adc-event__body { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; } .adc-einfo { position: static; order: -1; } .adc-efeature { grid-template-columns: minmax(0, 1fr); } .adc-efeature__media { min-height: 0; aspect-ratio: 16 / 9; } .adc-efeature__body { padding: 20px; } .adc-egrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .adc-egrid { grid-template-columns: minmax(0, 1fr); } .adc-efeature__cta .adc-ebtn { flex: 1 1 100%; } } /* ---------- Nút nổi góc dưới phải (inc/store-info.php, assets/js/float-contact.js) ---------- */ .adc-fab { position: fixed; z-index: 90; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .adc-fab__btn { position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; color: var(--wp--preset--color--white); text-decoration: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent); transition: transform .15s ease, background-color .15s ease; } .adc-fab__btn[hidden] { display: none; } .adc-fab__btn::before { font-family: "Phosphor-Bold"; font-size: 24px; line-height: 1; } .adc-fab__btn:hover { transform: translateY(-2px); } .adc-fab__btn:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; } .adc-fab__btn--zalo { background: #0068ff; } .adc-fab__btn--zalo:hover { background: #0057d9; } .adc-fab__btn--zalo::before { content: "\e16c"; } .adc-fab__btn--call { background: var(--wp--preset--color--accent); } .adc-fab__btn--call:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 85%, black); } .adc-fab__btn--call::before { content: "\e3ba"; } .adc-fab__btn--top { width: 44px; height: 44px; margin-right: 4px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); } .adc-fab__btn--top::before { content: "\e08e"; font-size: 20px; } /* nhãn: hiện bên trái khi rê chuột hoặc focus bằng bàn phím; màn cảm ứng chỉ dùng aria-label */ .adc-fab__label { position: absolute; right: calc(100% + 10px); top: 50%; translate: 0 -50%; padding: 6px 10px; border-radius: 6px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; } @media (hover: hover) { .adc-fab__btn:hover .adc-fab__label { opacity: 1; } } .adc-fab__btn:focus-visible .adc-fab__label { opacity: 1; } @media (max-width: 599px) { .adc-fab { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); gap: 10px; } .adc-fab__btn { width: 48px; height: 48px; } .adc-fab__btn--top { width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .adc-fab__btn { transition: none; } .adc-fab__btn:hover { transform: none; } }