/* Lớp giao diện cho site nhập từ Next.js: photcaosu.com, photchandau.net (23/09/2026), tranquyet.net (24/09) — nạp SAU CSS của theme
 * và snippet critical. Nạp bởi hd-giao-dien-nextjs-cu.php.
 *
 * VÌ SAO: site nhập từ bản Next.js; khối lưới cỡ, thẻ sản phẩm, phân trang, nút liên hệ chỉ còn là <ul>
 * trần (hàng trăm dòng gạch đầu dòng), và chữ dùng lẫn 3 font (Arvo tiêu đề, Open Sans menu, font hệ thống
 * ép từ snippet critical cho p/span). Tệp này thống nhất font Be Vietnam Pro (tự host, hd-be-vietnam-pro.css)
 * và trình bày lại các khối theo class mà nội dung đã được gắn (hd-chip, hd-the-sp, hd-the, hd-lien-ket,
 * hd-lien-he, hd-nhan, hd-ghi-chu). Gỡ tệp này là site trở lại như cũ.
 *
 * Phạm vi: .page-wrapper (trang, bài) + .term-description (mô tả danh mục WooCommerce) + .taxonomy-description
 * (mô tả chuyên mục bài viết) + .woocommerce-Tabs-panel
 * (tab Mô tả sản phẩm): tranquyet là WooCommerce, nội dung danh mục/sản phẩm nằm trong .shop-container, không có
 * .page-wrapper, nên chỉ ghi .page-wrapper là lớp này không chạm tới 330 trang hàng.
 */
:root {
	--hd-font: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--hd-chu: #1f2a37;
	--hd-chu-nhat: #5b6675;
	--hd-dam: #0b2447;
	--hd-chinh: #0f5f94;
	--hd-chinh-dam: #002977;
	--hd-nen: #f4f7fb;
	--hd-vien: #dbe3ee;
	--hd-bo: 10px;
	--fs-experimental-link-color: #0f5f94;
	--fs-experimental-link-color-hover: #002977;
}

/* ---------- Chữ: một font cho toàn site ---------- */
html body, body p, body span, body li, body td, body th, body dd, body dt, body input, body select, body textarea,
body button, body .button, body h1, body h2, body h3, body h4, body h5, body h6, body .nav > li > a,
body .nav-dropdown > li > a, body .heading-font, body .alt-font, body .off-canvas, body .footer, body .absolute-footer {
	font-family: var(--hd-font) !important;
}
body { color: var(--hd-chu); font-size: 16px; line-height: 1.7; }
@media (max-width: 549px) { body { font-size: 15.5px; } }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) li, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) dd, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) td { color: var(--hd-chu); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) h1, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .entry-title, h1.entry-title {
	color: var(--hd-dam); font-weight: 700; font-size: 32px; line-height: 1.25; letter-spacing: -.01em; margin-bottom: .6em;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) h2 {
	color: var(--hd-dam); font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -.005em;
	margin: 1.9em 0 .7em; padding-top: .9em; border-top: 1px solid var(--hd-vien);
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) h3 { color: var(--hd-dam); font-weight: 600; font-size: 19px; line-height: 1.4; margin: 1.3em 0 .5em; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) h4 { color: var(--hd-dam); font-weight: 600; font-size: 17px; }
@media (max-width: 549px) {
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) h1, h1.entry-title { font-size: 25px; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) h2 { font-size: 20.5px; margin-top: 1.5em; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) h3 { font-size: 17.5px; }
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p { margin-bottom: 1.05em; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) strong, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) b { font-weight: 600; color: var(--hd-dam); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) a { color: var(--hd-chinh); text-underline-offset: 2px; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p a, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) li:not([class]) > a, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) td a { text-decoration: underline; text-decoration-color: rgba(15, 95, 148, .35); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) a:hover { color: var(--hd-chinh-dam); text-decoration-color: currentColor; }
/* Đoạn văn không dàn trọn 1250px: dòng dài quá khó đọc */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .entry-content > p, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) > .row > .col > .col-inner > p { max-width: 860px; }

/* Menu */
.header-bottom-nav > li > a, .nav > li > a { font-weight: 600; letter-spacing: .01em; }
.nav-dropdown > li > a { font-size: 14.5px; }

/* ---------- Danh sách thường: gạch đầu dòng gọn ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul:not([class]):not(.nav):not(.menu), :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ol:not([class]) { padding-left: 1.25em; margin-bottom: 1.2em; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul:not([class]) > li { list-style: none; position: relative; margin-bottom: .45em; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul:not([class]) > li::before {
	content: ""; position: absolute; left: -1.05em; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--hd-chinh);
}

/* ---------- Chip: lưới cỡ, số trang, cỡ lân cận ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: .4em 0 1.5em; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip > li { margin: 0; list-style: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip > li::before { display: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip > li > a, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip > li > span {
	display: inline-block; padding: 6px 13px; border: 1px solid var(--hd-vien); border-radius: 999px; background: #fff;
	font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--hd-dam); text-decoration: none; white-space: nowrap;
	transition: background .15s, border-color .15s, color .15s;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip > li > a:hover { background: var(--hd-chinh); border-color: var(--hd-chinh); color: #fff; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip > li > span, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip > li.hd-dang-xem > span {
	background: var(--hd-dam); border-color: var(--hd-dam); color: #fff;
}
/* photchandau gắn sẵn class hd-luoi-size (mu-plugin hd-luoi-kich-thuoc) cho lưới cỡ: cùng kiểu chip */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-luoi-size { gap: 8px !important; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-luoi-size > li { border-color: var(--hd-vien) !important; border-radius: 999px !important; padding: 0 !important; background: #fff; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-luoi-size > li::before { display: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-luoi-size > li > a { padding: 6px 12px; text-align: center; color: var(--hd-dam); font-size: 14px; text-decoration: none; border-radius: 999px; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-luoi-size > li > a:hover { background: var(--hd-chinh); color: #fff; }
/* lưới cỡ dài (hàng trăm cỡ): cột đều nhau cho dễ dò */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip.hd-chip-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip.hd-chip-luoi > li > a { display: block; text-align: center; }
/* chip dài trong lưới (sơ đồ trang tranquyet: "Vòng bi HRB 6007-2RZ", "O-ring NBR (Nitrile N70)") bị nowrap cắt cụt trong ô
   118px: cho xuống dòng, bo góc vừa để chip 2 dòng không méo. Chip cỡ ngắn ("190x5") vẫn một dòng như cũ. */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip.hd-chip-luoi > li { min-width: 0; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip.hd-chip-luoi > li > :is(a, span) { white-space: normal; overflow-wrap: anywhere; border-radius: 12px; height: 100%; }

/* ---------- Ô link: danh mục và tài liệu liên quan ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-ket {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; list-style: none; padding: 0; margin: .5em 0 1.6em;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-ket > li { margin: 0; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-ket > li::before { display: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-ket > li > a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 100%;
	padding: 11px 14px; border: 1px solid var(--hd-vien); border-radius: var(--hd-bo); background: var(--hd-nen);
	color: var(--hd-dam); font-size: 14.5px; font-weight: 500; line-height: 1.4; text-decoration: none;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-ket > li > a::after { content: "→"; color: var(--hd-chinh); flex: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-ket > li > a:hover { border-color: var(--hd-chinh); background: #fff; }

/* ---------- Thẻ sản phẩm ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the-sp {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: .6em 0 1.8em;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the-sp > li { margin: 0; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the-sp > li::before { display: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the-sp > li > a {
	display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--hd-vien);
	border-radius: var(--hd-bo); background: #fff; text-decoration: none; transition: box-shadow .15s, border-color .15s;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the-sp > li > a:hover { border-color: var(--hd-chinh); box-shadow: 0 6px 18px rgba(11, 36, 71, .08); }
.hd-the-sp .hd-ten { color: var(--hd-dam); font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.hd-the-sp .hd-ma { color: var(--hd-chu-nhat); font-size: 13px; }
.hd-the-sp .hd-kho {
	align-self: flex-start; margin-top: 2px; padding: 2px 9px; border-radius: 999px; background: #e7f5ee; color: #17784a;
	font-size: 12.5px; font-weight: 600;
}
.hd-the-sp .hd-bao-gia { margin-top: auto; padding-top: 6px; color: var(--hd-chinh); font-size: 13.5px; font-weight: 600; }

/* ---------- Thẻ danh mục / bài viết ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; list-style: none; padding: 0; margin: .6em 0 1.8em;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the > li { margin: 0; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the > li::before { display: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the > li > a {
	display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--hd-vien); border-radius: var(--hd-bo);
	background: #fff; color: var(--hd-chu-nhat); font-size: 14.5px; line-height: 1.55; text-decoration: none;
	transition: box-shadow .15s, border-color .15s;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the > li > a > strong:first-child { display: block; margin-bottom: 6px; color: var(--hd-dam); font-size: 16px; line-height: 1.4; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the .hd-ngay { display: block; margin-bottom: 4px; color: var(--hd-chinh); font-size: 12.5px; font-weight: 600; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the > li > a > .hd-ngay + strong { display: block; margin-bottom: 6px; color: var(--hd-dam); font-size: 16px; line-height: 1.4; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the .hd-trich { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--hd-chu-nhat); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the > li > a:hover { border-color: var(--hd-chinh); box-shadow: 0 6px 18px rgba(11, 36, 71, .08); }
/* thẻ bài có ảnh (danh sách bài của bản Next.js cũ, nhuaviet): ảnh trên, ngày, tiêu đề, trích */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the > li > a > img.hd-anh-the { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; margin: 0 0 10px; }

/* ---------- Nút liên hệ ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-he { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: .6em 0 1.4em; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-he > li { margin: 0; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-he > li::before { display: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-he > li > a {
	display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; font-weight: 600;
	font-size: 15px; line-height: 1.2; text-decoration: none; border: 1.5px solid var(--hd-chinh); color: var(--hd-chinh); background: #fff;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-he > li > a[href^="tel:"] { background: var(--hd-chinh); color: #fff; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-he > li > a[href^="tel:"]::before { content: "☎"; font-size: 14px; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-he > li > a:hover { background: var(--hd-chinh-dam); border-color: var(--hd-chinh-dam); color: #fff; }
/* Điện thoại: lưới cột cố định thay cho flex-wrap. Với flex, số hàng phụ thuộc bề rộng chữ: font dự phòng hẹp cho
   2 nút một hàng, Be Vietnam Pro 600 về thì nút rớt hàng và đẩy cả trang xuống 50px (CLS 0,098 trang chủ tranquyet
   24/09/2026). Lưới chia theo bề rộng khung nên font nào cũng ra cùng số hàng. */
@media (max-width: 549px) {
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-he { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-he > li > a { display: flex; justify-content: center; padding: 10px 12px; font-size: 14px; white-space: nowrap; }
}

:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-nut { margin: .4em 0 .6em; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-nut > a {
	display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 999px; background: #e8712a; color: #fff;
	font-weight: 700; text-decoration: none;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-nut > a:hover { background: #c95b18; color: #fff; }

/* ---------- Thanh phân trang ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-trang { display: flex; flex-wrap: wrap; gap: 6px; margin: .4em 0 1.4em; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-trang > a, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-trang > span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
	border: 1px solid var(--hd-vien); border-radius: 8px; background: #fff; color: var(--hd-dam); font-size: 14.5px;
	font-weight: 600; text-decoration: none;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-trang > a:hover { border-color: var(--hd-chinh); color: var(--hd-chinh); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-trang > .hd-dang { background: var(--hd-dam); border-color: var(--hd-dam); color: #fff; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-trang > .hd-dang-cach { border: 0; background: none; min-width: 0; padding: 0 2px; color: var(--hd-chu-nhat); }

/* ---------- Nhãn nhỏ và ghi chú (đầu mục giả của bản Next.js cũ) ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-nhan {
	margin: 1.6em 0 .3em; color: var(--hd-chinh); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
/* nhãn đứng ngay trên H2: đường kẻ phân mục chuyển lên trên nhãn để nhãn dính với tiêu đề của nó */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-nhan:has(+ h2) { max-width: none; margin-top: 1.9em; padding-top: 1.3em; border-top: 1px solid var(--hd-vien); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-nhan + h2 { margin-top: .15em; padding-top: 0; border-top: 0; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-ghi-chu { color: var(--hd-chu-nhat); font-size: 14px; margin-bottom: .8em; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-cta-tieu-de { margin: 2em 0 .2em; color: var(--hd-dam); font-size: 20px; font-weight: 700; }
/* khung báo giá cuối bài (daytetchen): tiêu đề + một câu + nút gọi/Zalo gom vào một ô nền nhạt */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .hd-cta { margin: 1.8em 0; padding: 20px 22px 8px; border: 1px solid var(--hd-vien); border-left: 4px solid var(--hd-chinh); border-radius: var(--hd-bo); background: var(--hd-nen); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .hd-cta p.hd-cta-tieu-de { margin: 0 0 .3em; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .hd-cta p { max-width: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .hd-cta ul.hd-lien-he { margin-bottom: .8em; }
/* dòng giá tham khảo "17.000–71.000 ₫/mét" */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-gia { margin: .2em 0 .15em; color: var(--hd-chinh); font-size: 26px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-gia + p.hd-ghi-chu { margin-bottom: 1.4em; }
@media (max-width: 549px) { :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .hd-cta { padding: 16px 16px 6px; } :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-gia { font-size: 22px; } }

/* ---------- Bảng ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table {
	width: 100%; border-collapse: separate; border-spacing: 0; margin: .6em 0 1.6em; border: 1px solid var(--hd-vien);
	border-radius: var(--hd-bo); overflow: hidden; font-size: 15px;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table th, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table td { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--hd-vien); text-align: left; vertical-align: top; line-height: 1.5; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table tr:last-child td { border-bottom: 0; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table thead th { background: var(--hd-dam); color: #fff; font-weight: 600; font-size: 14px; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table tbody tr:nth-child(even) td { background: var(--hd-nen); }
/* bảng 2 cột (thông số): cột nhãn đậm, rộng cố định */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table:not(:has(thead)) td:first-child { width: 38%; color: var(--hd-dam); font-weight: 600; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table .hd-en { display: inline-block; margin-top: 2px; color: var(--hd-chu-nhat); font-size: 12.5px; font-weight: 400; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table th, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table td, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) dl dt, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) dl dd { text-transform: none; letter-spacing: 0; }
@media (max-width: 700px) {
	/* bảng nhiều cột (có thead): cuộn ngang trong khung; bảng thông số 2 cột: xuống dòng, không cuộn */
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table:has(thead) { display: block; overflow-x: auto; white-space: nowrap; font-size: 14px; -webkit-overflow-scrolling: touch; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table:not(:has(thead)) { table-layout: fixed; font-size: 14.5px; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table:not(:has(thead)) td { word-break: break-word; padding: 9px 10px; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table:not(:has(thead)) td:first-child { width: 42%; }
	/* Bảng tối đa 4 cột vừa khung điện thoại khi cho xuống dòng: không ép một dòng rồi bắt cuộn ngang (cột cuối bị che,
	   tranquyet /oring-nbr/ 24/09). Chỉ bảng từ 5 cột (bảng size) mới cuộn. */
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table:has(thead):not(:has(tr > :nth-child(5))) {
		display: table; white-space: normal; width: 100%; min-width: 0;
	}
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table:has(thead):not(:has(tr > :nth-child(5))) :is(th, td) { padding: 8px 9px; word-break: break-word; }
	/* hd-bang-thong-so-co-duong-ke.php ép mọi bảng trong khung cuộn rộng tối thiểu 460px: bảng thông số 2 cột (th scope=row)
	   bị cắt chữ bên phải. Bảng không thead và bảng ≤4 cột trả về vừa khung. */
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .hd-bang-cuon > table:is(:not(:has(thead)), :has(thead):not(:has(tr > :nth-child(5)))) {
		display: table; min-width: 0; width: 100%;
	}
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table:not(:has(thead)) th[scope="row"] { width: 42%; white-space: normal; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) table caption { white-space: normal; text-align: left; }
}

/* ---------- Hỏi đáp <details> ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details {
	margin: 0 0 10px; border: 1px solid var(--hd-vien); border-radius: var(--hd-bo); background: #fff; overflow: hidden;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer;
	list-style: none; color: var(--hd-dam); font-weight: 600;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details > summary::-webkit-details-marker { display: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details > summary h3 { margin: 0 !important; font-size: 16.5px; font-weight: 600; line-height: 1.45; color: inherit; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details > summary::after {
	content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--hd-nen); color: var(--hd-chinh);
	display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; transition: transform .2s;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details[open] > summary::after { transform: rotate(45deg); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details[open] > summary { border-bottom: 1px solid var(--hd-vien); background: var(--hd-nen); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details > *:not(summary) { padding: 0 18px; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details > p:first-of-type { padding-top: 12px; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details > p:last-child { padding-bottom: 14px; margin-bottom: 0; }

/* ---------- Báo giá và giao hàng (<dl>) ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) dl {
	display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: .6em 0 1.2em; border: 1px solid var(--hd-vien);
	border-radius: var(--hd-bo); overflow: hidden; max-width: 620px;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) dl dt, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) dl dd { margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--hd-vien); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) dl dt { background: var(--hd-nen); color: var(--hd-chu-nhat); font-weight: 600; font-size: 14px; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) dl dd { font-weight: 600; color: var(--hd-dam); }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) dl dt:nth-last-of-type(1), :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) dl dd:last-of-type { border-bottom: 0; }

/* ---------- Ô tìm cỡ ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .hd-tim-size input {
	border: 1px solid var(--hd-vien); border-radius: 999px; box-shadow: none; padding: 0 18px; height: 44px; font-size: 15px;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .hd-tim-size input:focus { border-color: var(--hd-chinh); outline: 3px solid rgba(15, 95, 148, .15); }

/* ---------- Ảnh: gallery 4:3, chú thích dưới ảnh, bản vẽ ---------- */
.hd-crm-gallery.wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; }
.hd-crm-gallery.wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; height: auto; width: 100%; border-radius: 8px; }
/* Gallery 4 hoặc 8 ảnh trong lưới 3 cột để trơ 1–2 ảnh ở hàng cuối: máy tính hiện 4 cột cho tròn hàng.
   Đếm theo -of-type: gallery có <figcaption> chung đứng CUỐI nên :last-child không bao giờ là ảnh. */
@media (min-width: 600px) {
	.hd-crm-gallery.wp-block-gallery.has-nested-images:has(> figure.wp-block-image:last-of-type:nth-of-type(4n)) > figure.wp-block-image:not(#individual-image) {
		width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * .75);
	}
}
/* Điện thoại xếp 2 cột: gallery số ảnh lẻ (3, 5…) để ảnh đầu tràn cả hàng, không bỏ trơ một ảnh cuối */
@media (max-width: 599px) {
	.hd-crm-gallery.wp-block-gallery.has-nested-images:has(> figure.wp-block-image:last-of-type:nth-of-type(odd)) > figure.wp-block-image:first-child:not(#individual-image) { width: 100%; }
}
/* class "gallery" (để lightbox Flatsome gom ảnh) kéo theo margin âm của lưới Flatsome: trả về thẳng lề chữ */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .wp-block-gallery.has-nested-images { align-items: flex-start !important; margin: 0 0 1.6em !important; padding: 0 !important; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .wp-block-gallery.has-nested-images figure.wp-block-image { display: block !important; height: auto !important; align-self: flex-start !important; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .wp-block-gallery.has-nested-images figure.wp-block-image img { flex: none !important; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static; background: none; color: var(--hd-chu-nhat); text-shadow: none; max-height: none; overflow: visible;
	padding: .4em .15em 0; margin: 0; font-size: 13px; line-height: 1.4; text-align: center;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { display: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) figure:not(.wp-block-image):not(.wp-block-gallery) { margin: 0 auto 1.4em; text-align: center; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) figure:not(.wp-block-image):not(.wp-block-gallery) img { max-height: 460px; width: auto; max-width: 100%; object-fit: contain; border-radius: 8px; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) figure.hd-ban-ve { padding: 10px; border: 1px solid var(--hd-vien); border-radius: var(--hd-bo); background: #fff; max-width: 980px; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) figure.hd-ban-ve img { width: 100%; max-height: none; border-radius: 0; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) figcaption { font-size: 13.5px; color: var(--hd-chu-nhat); text-align: center; margin-top: .45em; }

/* ---------- Mobile: lưới gọn hơn ---------- */
@media (max-width: 549px) {
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip.hd-chip-luoi { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip > li > a, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-chip > li > span { padding: 6px 8px; font-size: 13px; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the-sp { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the-sp > li > a { padding: 10px 11px; }
	.hd-the-sp .hd-ten { font-size: 14px; }
	.hd-the-sp .hd-ma { font-size: 12px; word-break: break-all; }
	.hd-the-sp .hd-kho { font-size: 11.5px; padding: 1px 7px; }
	.hd-the-sp .hd-bao-gia { font-size: 12.5px; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-the, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-lien-ket { grid-template-columns: 1fr; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) dl { grid-template-columns: 38% 1fr; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details > summary { padding: 12px 14px; }
	:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) details > summary h3 { font-size: 15.5px; }
}

/* ---------- Huy hiệu tiêu chuẩn, ô số liệu, link lẻ (thẻ của bản Next.js cũ) ---------- */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-huy-hieu, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-so-lieu {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; list-style: none; padding: 0; margin: .6em 0 1.6em;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-huy-hieu > li, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-so-lieu > li {
	margin: 0; padding: 12px 14px; border: 1px solid var(--hd-vien); border-radius: var(--hd-bo); background: var(--hd-nen);
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-huy-hieu > li::before, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-so-lieu > li::before { display: none; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-huy-hieu abbr {
	display: inline-block; margin-bottom: 4px; padding: 2px 9px; border-radius: 6px; background: var(--hd-dam); color: #fff;
	font-size: 13px; font-weight: 700; text-decoration: none; letter-spacing: .02em;
}
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-huy-hieu span, :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-so-lieu span { display: block; color: var(--hd-chu-nhat); font-size: 14px; line-height: 1.45; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) ul.hd-so-lieu strong { display: block; color: var(--hd-chinh); font-size: 26px; font-weight: 700; line-height: 1.2; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-link-le { margin: .2em 0 1em; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-link-le > a { font-weight: 600; text-decoration: none; }
/* mã hàng (SKU) ngay dưới tên biến thể và trong ô tiêu đề bảng so sánh */
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-ma { margin: -.35em 0 .7em; color: var(--hd-chu-nhat); font-size: 13px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) th .hd-ma { display: block; margin-top: 2px; color: var(--hd-chu-nhat); font-size: 11.5px; font-weight: 500; letter-spacing: .01em; word-break: break-all; }
:is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) p.hd-link-le > a:hover { text-decoration: underline; }

/* ---------- Khung trang ---------- */
/* mobile: thanh hotline chữ hoa xuống 2 dòng, trong khi thanh nút đáy màn hình đã có Hotline/Zalo -> ẩn cho header gọn */
@media (max-width: 549px) { #top-bar.header-top { display: none !important; } }
.header-top .html_topbar_left strong { letter-spacing: .02em; font-weight: 600; }
/* tiêu đề trang 404 / tìm kiếm nằm ngoài :is(.page-wrapper, .term-description, .taxonomy-description, .woocommerce-Tabs-panel) */
/* chỉ trang tìm kiếm / 404: #main h1 chung sẽ đè H1 trắng của hero trang chủ tự dựng (daytetchen .dtc-h1) */
body.search #main h1, body.error404 #main h1, .page-title-inner h1, .archive-page-header h1 { font-weight: 700; color: var(--hd-dam); }
.search-results .page-title, .archive-page-header .page-title { text-transform: none; letter-spacing: 0; }
.nav-dropdown > li > a { color: var(--hd-dam); font-weight: 500; }
.nav-dropdown > li > a:hover { color: var(--hd-chinh); }

/* ---------- Mục lục ---------- */
#ez-toc-container, .ez-toc-v2_0_17, div#ez-toc-container {
	border: 1px solid var(--hd-vien) !important; border-radius: var(--hd-bo) !important; background: var(--hd-nen) !important; box-shadow: none !important;
}
#ez-toc-container .ez-toc-title { color: var(--hd-dam) !important; font-weight: 700 !important; }

/* ---------- Thẻ sản phẩm WooCommerce (tranquyet) ----------
 * Nhãn danh mục in hoa của Flatsome cao đúng 1 dòng (line-height 1.2) và overflow:hidden để cắt "…": dấu thanh trên chữ
 * hoa tiếng Việt bị cắt mất ("KHỚP NỐI" hiện thành "KHƠP NÔI", đo 24/09/2026). Nới chiều cao dòng, giữ cắt "…". */
.product-small p.category { line-height: 1.7; font-size: 11px; padding-top: 1px; }
/* H1 trang danh mục SP (hd-seo-product-category-h1.php in ngoài .page-wrapper): cùng kiểu H1 với trang, SP, bài —
   trước đó ăn màu xám mặc định của theme. */
h1.hd-category-title { color: var(--hd-dam); font-weight: 700; font-size: 32px; line-height: 1.25; letter-spacing: -.01em; margin-bottom: .6em; }
@media (max-width: 549px) { h1.hd-category-title { font-size: 25px; } }

/* ---------- Mô tả chuyên mục bài viết (tranquyet /kien-thuc/) ----------
 * Flatsome đặt mô tả trong .archive-page-header .text-center nên cả khối chữ, bảng, thẻ bị căn giữa. Trang lưu trữ
 * cũng không nạp CSS khối gallery của lõi WP (mô tả term không đi qua bộ dựng khối) nên gallery rơi về ảnh nhỏ
 * xếp dọc: dựng lưới ở đây, 3 cột (4 cột khi đủ 4/8 ảnh), điện thoại 2 cột. */
.archive-page-header .text-center:has(> .taxonomy-description) { text-align: left; }
/* wpautop bọc từng chú thích khối (<!-- wp:image -->) trong <p> rỗng: chúng thành ô trống trong lưới gallery */
.taxonomy-description p:empty { display: none; }
.taxonomy-description .wp-block-gallery.has-nested-images { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.taxonomy-description .wp-block-gallery.has-nested-images:has(> figure.wp-block-image:last-of-type:nth-of-type(4n)) { grid-template-columns: repeat(4, 1fr); }
.taxonomy-description .wp-block-gallery.has-nested-images > figure.wp-block-image { width: auto !important; margin: 0; }
.taxonomy-description .wp-block-gallery.has-nested-images > figure.wp-block-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
@media (max-width: 599px) { .taxonomy-description .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } }