@charset "UTF-8";
/* =============================================================================
   wp.css — phần CHỈ CÓ ở bản WordPress (bản HTML không có): thanh admin, ảnh WP, trang danh mục,
   danh sách tin, phân trang, giỏ hàng/thanh toán. Nạp sau style.css + trang-con.css.
   ============================================================================= */

/* thanh quản trị WP (đang đăng nhập) — header dính phải tụt xuống */
.admin-bar .hd.dinh .hd-main, .admin-bar .hd.dinh .hd-nav { top: 46px; }
@media (min-width: 783px) { .admin-bar .hd.dinh .hd-main, .admin-bar .hd.dinh .hd-nav { top: 32px; } }
@media (max-width: 600px) { .admin-bar .hd.dinh .hd-main { top: 0; } }

.o-bay { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.hd-logo .logo-anh { height: 36px; width: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ảnh WordPress có sẵn width/height → ép theo khung của thẻ */
.the-sp .anh img { aspect-ratio: auto; height: 11.5rem; } /* gốc .product-item .img-wrap cao 11.5rem ở mọi khổ (điện thoại 184px, kể cả thẻ hẹp trong băng trượt) */
.the-fs .khung img { width: 100%; }
.nhom-anh img, .nb-phai img, .km-trai img, .nhom-bento img, .rv-video img, .tin-anh img, .km-muc .anh img { max-width: 100%; }
.rv-sp .anh img { width: 100%; height: 100%; object-fit: contain; }
.sp-anh-lon img, .o-nho img { max-width: 100%; }

/* nội dung soạn bằng trình soạn thảo */
.noi-dung-bai .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.noi-dung-bai .alignleft { float: left; margin: 0 16px 10px 0; }
.noi-dung-bai .alignright { float: right; margin: 0 0 10px 16px; }
.noi-dung-bai figure { margin: 0 0 16px; }
.noi-dung-bai figcaption { font-size: 13px; color: var(--chu-phu); text-align: center; margin-top: 6px; }
/* Bảng trong nội dung (bài viết, trang, mô tả sản phẩm) kẻ giống bảng Thông số kỹ thuật. !important để đè width, height, viền ghi thẳng trong bảng cũ; nền ô đặt riêng thì giữ */
:is(.noi-dung-bai, .sp-mota .noi-dung) table { width: 100% !important; height: auto !important; margin: 0; border: 1px solid #ddddde !important; border-collapse: separate !important; border-spacing: 0; border-radius: 16.67px; overflow: hidden; }
:is(.noi-dung-bai, .sp-mota .noi-dung) tr { height: auto !important; border: 0 !important; }
:is(.noi-dung-bai, .sp-mota .noi-dung) td,
:is(.noi-dung-bai, .sp-mota .noi-dung) th { height: auto !important; padding: 8px 12.4px; border: 0 !important; font-size: var(--c13, 13px); line-height: 1.5; vertical-align: middle; }
:is(.noi-dung-bai, .sp-mota .noi-dung) th { font-weight: 700; text-align: left; }
:is(.noi-dung-bai, .sp-mota .noi-dung) thead tr,
:is(.noi-dung-bai, .sp-mota .noi-dung) tbody tr:nth-child(even) { background: var(--xam); }
/* Bảng không có thead nhưng dòng đầu là th: dòng đầu xám, kẻ xen kẽ lệch đi một dòng */
:is(.noi-dung-bai, .sp-mota .noi-dung) tbody:has(> tr:first-child > th) > tr:nth-child(even) { background: transparent; }
:is(.noi-dung-bai, .sp-mota .noi-dung) tbody:has(> tr:first-child > th) > tr:nth-child(odd) { background: var(--xam); }
@media (min-width: 768px) {
	:is(.noi-dung-bai, .sp-mota .noi-dung) table { border-radius: 1.042rem; }
	:is(.noi-dung-bai, .sp-mota .noi-dung) td,
	:is(.noi-dung-bai, .sp-mota .noi-dung) th { padding: .781rem 1.302rem; }
}
.cs-dan { margin-bottom: 20px; }

/* đếm ngược ở trang sản phẩm */
.sp-dem { justify-content: flex-start; margin: -8px 0 18px; }
.sp-dem .o { width: 40px; height: 40px; font-size: 17px; background: var(--cam); color: #fff; }
.sp-dem .hai-cham { color: var(--cam); }

/* =============================================================================
   TRANG DANH MỤC SẢN PHẨM
   ============================================================================= */
.dm-trang { background: var(--xam); }
.dm-ten { font-size: 25px; line-height: 30px; font-weight: 700; text-align: center; padding: 16.67px 10px 24px; } /* gốc h1.sec-title.product-category-title */
.dm { padding: 0 0 50px; }
.dm-banner { position: relative; margin-bottom: 32px; }
.dm-banner .swiper { border-radius: 10px; }
.dm-banner img { width: 100%; height: auto; aspect-ratio: 1180 / 512; object-fit: cover; border-radius: 10px; }
.dm-banner .mui-ten { opacity: 0; transition: opacity .2s; }
.dm-banner:hover .mui-ten { opacity: 1; }
.dm-banner .mui-ten.truoc { left: 4px; }
.dm-banner .mui-ten.sau { right: 4px; }
.dm-con { display: none; } /* chip xếp hàng chỉ từ 768; điện thoại dùng băng trượt .dm-con-truot */
.dm-con-ten { margin-bottom: 13.84px; font-size: 16.67px; line-height: 29.17px; font-weight: 700; color: #333; }
.dm-logo { display: flex; gap: 12px; overflow-x: auto; margin-bottom: 26.67px; scrollbar-width: none; } /* gốc .brand-swiper: điện thoại 5 ô/lượt cách 12 · 768: 6 cách 12 · 992: 8 cách 16 · 1200: 12 cách 20 */
.dm-logo::-webkit-scrollbar { display: none; }
.dm-logo a { flex: none; display: grid; place-items: center; width: calc((100% - 4 * 12px) / 5); aspect-ratio: 1; padding: 11.66px; border-radius: 16.67px; background: #fff; border: 1px solid transparent; transition: border-color .2s; }
.dm-logo a:hover, .dm-logo a.dang-xem { border-color: var(--chinh); }
.dm-logo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.dm-logo span { padding: 0 4px; text-align: center; font-size: 11px; line-height: 13px; font-weight: 700; color: var(--chu); }
.dm-con a { flex: none; background: #fff; border-radius: 50px; padding: 6.67px 26.67px; font-size: 13.33px; line-height: 23.33px; font-weight: 600; color: var(--chu); text-align: center; transition: all .4s; }
.dm-con a:hover, .dm-con a.dang-xem { background: var(--chinh); color: #fff; } /* gốc .brand-item.item-without-image */
.dm-con-truot { margin-bottom: 26.67px; }
.dm-con-truot .swiper-slide a { display: block; background: #fff; border-radius: 50px; padding: 6.67px 26.67px; font-size: 13.33px; line-height: 23.33px; font-weight: 600; color: var(--chu); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .4s; }
.dm-con-truot .swiper-slide a + a { margin-top: 12px; }
.dm-con-truot .swiper-slide a:hover, .dm-con-truot .swiper-slide a.dang-xem { background: var(--chinh); color: #fff; }
/* chấm như .swiper-pagination gốc (điện thoại ô 16px, chấm .3125rem, ô đang xem viền cam) */
.dm-con-truot .swiper-pagination { position: relative; inset: auto; margin-top: 20px; display: flex; justify-content: center; align-items: center; }
.dm-con-truot .swiper-pagination-bullet { position: relative; width: 16px; height: 16px; margin: 0 1.664px !important; border-radius: 50%; border: 1px solid transparent; background: transparent; opacity: 1; transition: all .4s ease-in-out; }
.dm-con-truot .swiper-pagination-bullet::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--chinh); }
.dm-con-truot .swiper-pagination-bullet-active { border-color: var(--chinh); }
.dm-loc h2 { font-size: 18px; line-height: 25px; font-weight: 700; color: #333; margin-bottom: 18px; }
.dm-loc-hang { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.dm-bo-loc { position: relative; align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 10.83px; padding-bottom: 10px; } /* rộng hết hàng: bảng lọc căn giữa theo cả hàng như gốc */
.o-loc { position: static; } /* điện thoại: bảng lọc bám theo cả hàng nút (left 0) — bám từng nút thì nút thứ 2 trở đi tràn mép phải */
/* gốc (màn <500px): cuộn qua hàng lọc thì ghim hàng lọc dưới dải logo (top 50px, đè phần ô tìm) — JS thêm .dinh */
@media (max-width: 499px) { .dm-bo-loc.dinh { position: fixed; top: 50px; left: 0; width: 100vw; z-index: 1000; padding: 10px; background: #fff; box-shadow: 0 0 10px #dedede; } }
.nut-loc { display: flex; align-items: center; justify-content: center; gap: 8.33px; height: 33.33px; font-size: 11.66px; line-height: 11.66px; padding: 8.33px 13.33px; border-radius: 83.33px; border: 1px solid rgba(153, 153, 153, .5); background: #fff; transition: all .4s ease-in-out; } /* gốc .filter-title */
.nut-loc svg, .sap-hien svg { color: #666; } /* gốc: mũi tên #666 nét 1.5/12 */
.nut-loc svg { width: 12px; height: 12px; } /* gốc svg width="12" cố định mọi khổ */
.nut-loc.co-chon { border-color: var(--chinh); color: var(--chinh); background: var(--chinh-nhat); }
.nut-loc.co-chon svg { color: var(--chinh); }
.bang-loc { display: none; flex-wrap: wrap; gap: 8.33px; position: absolute; left: 50%; top: calc(100% - 10px); transform: translateX(-50%); z-index: 99; width: 333.33px; max-width: calc(100vw - 20px); background: #fff; border-radius: 16.67px; box-shadow: 0 0 10px #dedede; padding: 21.66px 18.33px; } /* gốc .filter-list (điện thoại căn giữa hàng nút) */
.o-loc.mo .bang-loc { display: flex; }
.chip-loc { display: contents; }
.chip-loc label { cursor: pointer; }
.chip-loc input { position: absolute; opacity: 0; pointer-events: none; }
.chip-loc span { display: block; font-size: 11.66px; line-height: 11.66px; padding: 8.33px 13.33px; border-radius: 83.33px; border: 1px solid rgba(153, 153, 153, .5); } /* gốc .filter-item > label */
.chip-loc input:checked + span { border-color: var(--chinh); color: var(--chinh); background: var(--chinh-nhat); }
.xem-kq { width: max-content; padding: 10px 30px; font-size: 12.5px; line-height: 12.5px; border-radius: 83.33px; } /* gốc .button.button-black.btn-search-list-product */
.bo-loc-xoa { font-size: 12px; color: var(--chinh); text-decoration: underline; }
.dm-sap { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } /* gốc (điện thoại): nhãn 1 dòng, ô chọn dòng dưới */
.dm-sap > span { font-size: 15px; line-height: 25px; font-weight: 700; color: #333; white-space: nowrap; }
.o-sap { position: relative; }
.sap-hien { display: flex; align-items: center; justify-content: space-between; gap: 8.33px; width: 225px; padding: 10.83px 20px; border-radius: 83.33px; border: 1px solid rgba(153, 153, 153, .5); background: #fff; font-size: 11.66px; line-height: 11.66px; font-weight: 500; } /* gốc .sort-current: rộng 14.0625rem, đệm .677rem 1.25rem */
.sap-hien span { margin-left: 8.33px; }
.sap-hien svg { width: 15.84px; height: 15.84px; }
/* gốc .sort-list: các nút rời nằm ngay dưới, cách nhau .3125rem, ẩn cách đang chọn; rê vào viền + chữ cam */
.o-sap ul { display: none; position: absolute; left: 0; top: 100%; z-index: 99; width: 100%; }
.o-sap.mo ul { display: block; }
.o-sap li.dang-chon { display: none; }
.o-sap li button { width: 100%; text-align: left; }
.o-sap li button { display: flex; align-items: center; margin-top: 5px; padding: 10.83px 20px; background: #fff; border: 1px solid rgba(153, 153, 153, .5); border-radius: 83.33px; white-space: nowrap; transition: all .4s ease-in-out; }
.o-sap li button svg { width: 15.84px; height: 15.84px; color: #000; transition: color .4s ease-in-out; }
.o-sap li button span { margin: 0 auto 0 8.33px; font-size: 11.66px; line-height: 11.66px; font-weight: 500; }
.o-sap li button:hover { border-color: var(--chinh); background: var(--chinh-nhat); color: var(--chinh); }
.o-sap li button:hover svg { color: var(--chinh); }
.luoi-sp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 56.67px; } /* gốc .product-list.grid-5: mt 3.542rem, điện thoại gap 8px */
.dm .trong { text-align: center; padding: 40px 0; color: var(--chu-phu); }
/* gốc .content-category: cao hơn 500px mới thu gọn (500px + lớp mờ 300px), chữ 14/15px dòng 25px cố định, font sans-serif */
.dm-mota { position: relative; margin-top: 24px; padding: 14px 16px; background: #fff; border-radius: 12px; }
.dm-mota .noi-dung-bai { position: relative; overflow: hidden; transition: max-height .6s; }
.dm-mota.thu-gon .noi-dung-bai { max-height: 200px; }
.dm-mota.thu-gon .noi-dung-bai::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; z-index: 2; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%); }
.dm-mota .noi-dung-bai, .dm-mota .noi-dung-bai * { font-family: inherit; }
.dm-mota .noi-dung-bai p, .dm-mota .noi-dung-bai li { font-size: 14px; line-height: 1.6; font-weight: 400; color: #333; }
.dm-mota .noi-dung-bai p { margin: 0 0 8px; }
.dm-mota .noi-dung-bai h2 { font-size: 20px; line-height: 24px; font-weight: 700; color: #333; margin: 12px 0 6px; }
.dm-mota .noi-dung-bai h3 { font-size: 18px; line-height: 24px; font-weight: 700; color: #333; margin: 10px 0 4px; }
.dm-mota .noi-dung-bai ul { font-size: 14px; line-height: 1.6; margin: 0 0 8px; padding-left: 20px; list-style: disc; }
.dm-mota .noi-dung-bai li { margin-bottom: 2px; }
.dm-mota .noi-dung-bai > :last-child { margin-bottom: 0; }
.dm-mota > .nut { position: relative; z-index: 4; display: flex; width: max-content; margin: 10px auto 0; padding: 6px 12px 6px 16px; font-size: 13px; line-height: 1.4; font-weight: 500; border-radius: 999px; }
.dm-mota > .nut .ic { width: 16px; height: 16px; }
.dm-mota .mo, .dm-mota .dong { display: inline-flex; align-items: center; gap: 4px; }
.dm-mota.ngan > .nut { display: none; } /* ngắn hơn 500px: không thu gọn, không có nút (như gốc) */
.dm-mota .dong { display: none; }
.dm-mota:not(.thu-gon) .mo { display: none; }
.dm-mota:not(.thu-gon) .dong { display: inline-flex; }

/* danh sách tin (index.php) — số đo theo trang "Danh sách tin tức" của gốc */
.ds-tin { background: var(--xam); padding: 32px 0 56px; }
.ds-tin-ten, .ds-tin-muc { font-size: 25px; line-height: 30px; font-weight: 700; text-align: center; color: #000; }
.ds-tin-ten { margin: 16.67px 0 30px; }
.ds-tin-muc { margin-bottom: 30px; }
.ds-tin .tin-ngay { font-size: 11px; line-height: 20px; margin-bottom: 10px; }
.tin-noi-bat { display: flex; flex-direction: column; gap: 16.67px; margin-bottom: 40px; }
.tnb-lon { position: relative; border-radius: 16.67px; overflow: hidden; }
.tnb-lon .phu { position: absolute; inset: 0; z-index: 4; }
.tnb-lon .tnb-anh { position: relative; }
.tnb-lon .tnb-anh::before { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(0deg, rgba(0, 0, 0, .79) 0%, rgba(0, 0, 0, 0) 100%); }
.tnb-lon img { width: 100%; height: auto; aspect-ratio: 370 / 208; object-fit: cover; }
.tnb-lon .tnb-chu { position: absolute; left: 0; right: 12px; bottom: 0; z-index: 5; padding: 24px; color: #fff; pointer-events: none; }
.tnb-lon .tnb-chu a { pointer-events: auto; }
.tnb-lon .tin-ngay, .tnb-lon .tin-ngay .muc { color: #fff; margin-bottom: 5px; }
.tnb-lon .tin-ngay .muc::before { background: #fff; }
.tnb-lon h3 { font-size: 18px; line-height: 22.68px; font-weight: 600; color: #fff; }
.tnb-lon .tom-tat { display: none; font-size: .729rem; line-height: .938rem; margin-top: .625rem; }
.tnb-nho { display: flex; flex-direction: column; gap: 12px; }
.tnb-muc { display: flex; align-items: center; }
.tnb-muc .tnb-anh { flex: 0 0 160px; height: 105px; border-radius: 8px; overflow: hidden; margin-right: 20px; }
.tnb-muc .tnb-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tnb-muc:hover .tnb-anh img { transform: scale(1.04); }
.tnb-muc .tnb-chu { min-width: 0; }
.tnb-muc .tin-ngay { margin-bottom: 5px; }
.tnb-muc h3 { font-size: 16px; line-height: 20.16px; font-weight: 600; color: var(--chu); transition: color .2s; }
.tnb-muc:hover h3 { color: var(--chinh); }
.tab-cm ul { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.tab-cm ul::-webkit-scrollbar { display: none; }
.tab-cm li { flex: 0 0 auto; }
.tab-cm a { display: flex; justify-content: center; min-width: 116.67px; margin: 0 6.67px; padding: 6.67px 16.67px; border-radius: 83px; border: 1px solid #c9c9c9; font-size: 11.66px; line-height: 16.67px; font-weight: 500; color: var(--chu); white-space: nowrap; }
.tab-cm a:hover { color: var(--chinh); border-color: var(--chinh); }
.tab-cm .dang a, .tab-cm .dang a:hover { color: #fff; border-color: transparent; background: var(--chinh-tab) border-box; }
.luoi-tin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin-top: 40px; }
.luoi-tin .tin-anh { margin-bottom: 14px; }
.luoi-tin .tin-muc h3 { font-size: 16px; line-height: 20.16px; }
.ds-tin .trong { margin-top: 40px; text-align: center; }
.xem-them-tin { display: flex; width: max-content; margin: 40px auto 0; padding: 8.34px 25px; font-size: 11.66px; line-height: 11.66px; }
.xem-them-tin.dang-tai { opacity: .6; pointer-events: none; }
/* trang kết quả tìm kiếm — theo gốc section.search-page */
.tkq { background: var(--xam); padding: 32px 0; }
.tkq-ten { margin: 0 0 16.75px; font-size: 25px; line-height: 30px; font-weight: 700; text-align: center; color: #000; }
.tkq-nhom { margin-bottom: 50px; }
.tkq-nhom h2 { margin: 0 0 19.92px; font-size: 24px; line-height: normal; font-weight: 700; color: #000; }
.tkq-nhom .luoi-sp { margin-top: 0; gap: 8px; }
.phan-trang { display: flex; justify-content: center; gap: 6px; margin-top: 30px; }
.phan-trang .page-numbers { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 13px; font-weight: 600; color: var(--chu); }
.phan-trang .page-numbers.current { background: var(--chinh); color: #fff; }

/* giỏ hàng / thanh toán / tài khoản: chỉ chỉnh khung, giữ CSS gốc WooCommerce */
.cs-woo .woo-nd { background: #fff; border-radius: 15px; padding: 20px 16px; font-size: 14px; }
.cs-woo .woo-nd .button, .cs-woo .woo-nd button.button { background: var(--nut) !important; color: #fff !important; border-radius: 40px !important; }

/* đăng nhập / đăng ký / quên mật khẩu — thẻ giữa nền xám như /dang-nhap của gốc */
.tk { background: var(--xam); padding: 40px 0 56px; }
.tk-the, .tk .woocommerce-ResetPassword { max-width: 735px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 28px 16px; box-shadow: 0 3px 15px rgba(0, 0, 0, .1); }
.tk-ten { margin-bottom: 6px; text-align: center; font-size: 30px; line-height: 38px; font-weight: 700; color: var(--chinh-dam); }
.tk-mota { margin-bottom: 6px; text-align: center; font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--chu); }
.tk-chuyen { margin-bottom: 20px; text-align: center; font-size: 11.66px; line-height: 15px; font-weight: 500; color: var(--chu); }
.tk-chuyen a, .tk-quen:hover { color: var(--chinh); }
.tk-o { margin-bottom: 18px; }
.tk-o label, .tk-nhan { display: block; margin-bottom: 8px; font-size: 13px; line-height: 17px; color: var(--chu); }
.tk-o input[type=text], .tk-o input[type=email], .tk-o input[type=tel], .tk-o input[type=password], .tk .woocommerce-ResetPassword input.input-text {
  width: 100%; height: 40px; padding: 0 20px; border: 1px solid #b5b5b5; border-radius: 75px; background: #fff; font: inherit; font-size: 13px; color: var(--chu);
}
.tk-o input:focus, .tk .woocommerce-ResetPassword input:focus { outline: none; border-color: var(--chinh); }
.tk-mk { position: relative; display: block; }
.tk-mk input { padding-right: 52px !important; }
.tk-mat { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: 0; background: none; color: #555; cursor: pointer; }
.tk-mat svg { width: 100%; height: 100%; }
.tk-mat.dang-hien { color: var(--chinh); }
.tk-dong { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; font-size: 13px; color: var(--chu); }
.tk-nho { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tk-nho input, .tk-chon input { accent-color: var(--chinh); }
.tk-quen { color: var(--chu); }
.tk-nut, .tk .woocommerce-ResetPassword .button {
  display: block; width: 100%; height: 40px; border: 1px solid var(--nut) !important; border-radius: 75px !important; background: var(--nut) !important; color: #fff !important;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tk-nut:hover { background: #e84700 !important; }
.tk .tk-nut { float: none; margin: 0; } /* woocommerce.css cho nút đăng nhập float:left → thẻ mất lề dưới */
.tk-ghi { margin-bottom: 18px; font-size: 13px; color: #777; }
.tk .woocommerce form.login, .tk .woocommerce form.register { margin: 0; padding: 0; border: 0; border-radius: 0; }
.tk .show-password-input { display: none !important; } /* Woo tự chèn nút con mắt — theme đã có .tk-mat */
.tk .password-input { display: block; }
.tk-hai { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
.tk-chon { display: flex; align-items: center; gap: 22px; height: 40px; font-size: 13px; color: var(--chu); }
.tk-chon label { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.tk .woocommerce-error, .tk .woocommerce-message, .tk .woocommerce-info { max-width: 735px; margin: 0 auto 16px; border-radius: 14px; }
.tk .woocommerce-privacy-policy-text { margin-bottom: 16px; font-size: 12px; line-height: 18px; color: #777; }
.tk .woocommerce-ResetPassword p { margin-bottom: 16px; font-size: 13px; line-height: 20px; color: var(--chu); }
.tk .woocommerce-ResetPassword .form-row { float: none; width: 100%; padding: 0; }
.tk .woocommerce-ResetPassword label { display: block; margin-bottom: 8px; }
/* đăng nhập điện thoại — theo login-style.css của gốc (rem × 16) */
@media (max-width: 767px) {
	.tk { padding: 33.33px 0; }
	.tk-the, .tk .woocommerce-ResetPassword { width: calc(100% - 25px); padding: 16.67px; }
	.tk-ten { margin-bottom: 8.33px; font-size: 21.67px; line-height: 1.2; }
	.tk-mota { margin-bottom: 8.33px; font-size: 13.33px; line-height: 16.67px; }
	.tk-chuyen { margin-bottom: 25px; line-height: 16.67px; }
	.tk-o { margin-bottom: 13.33px; }
	.tk-o label, .tk-nhan { margin-bottom: 5px; font-size: 11.66px; line-height: 16.67px; }
	.tk-o input[type=text], .tk-o input[type=email], .tk-o input[type=tel], .tk-o input[type=password], .tk .woocommerce-ResetPassword input.input-text { height: 33.33px; padding: 0 13.33px; font-size: 13.33px; }
	.tk-dong { margin-bottom: 13.33px; font-size: 11.66px; line-height: 16.67px; }
	.tk-nut, .tk .woocommerce-ResetPassword .button { height: 33.33px; font-size: 13.33px; line-height: 13.33px; }
}

/* giỏ hàng trống — như /gio-hang của gốc */
.cs-woo { padding: 60px 0; } /* gốc section.cart-page / checkout-page */
.cs-woo:has(.gio-trong) .cs-ten { display: none; }
.cs-woo .woo-nd:has(.gio-trong) { background: none; padding: 0; }
.gio-trong { padding: 0 10px; text-align: center; }
.gio-trong p { font-size: 16px; color: #000; }
.gio-trong .nut { margin-top: 16.67px; padding: 10px 30px; font-size: 12.5px; line-height: 12.5px; font-weight: 500; }

/* tài khoản đã đăng nhập: menu trái + nội dung */
.cs-woo .woocommerce-MyAccount-navigation ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 18px; padding: 0; list-style: none; }
.cs-woo .woocommerce-MyAccount-navigation li a { display: block; white-space: nowrap; padding: 8px 16px; border-radius: 40px; border: 1px solid var(--vien); font-size: 13px; color: var(--chu); }
.cs-woo .woocommerce-MyAccount-navigation li.is-active a, .cs-woo .woocommerce-MyAccount-navigation li a:hover { background: var(--chinh); border-color: var(--chinh); color: #fff; }
.cs-woo .woocommerce-MyAccount-content { font-size: 14px; line-height: 22px; }
.cs-woo .woocommerce-MyAccount-content a { color: var(--chinh); }
.cs-woo input.input-text, .cs-woo select, .cs-woo textarea { border: 1px solid #c9c9c9; border-radius: 10px; padding: 9px 14px; font: inherit; font-size: 14px; }
.cs-woo .select2-container .select2-selection--single { height: 40px; border-color: #c9c9c9; border-radius: 10px; }
.cs-woo .select2-container .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 14px; }
.cs-woo .select2-container .select2-selection--single .select2-selection__arrow { height: 38px; }
.cs-woo table.shop_table { border-radius: 12px; }
.cs-woo #place_order, .cs-woo .checkout-button { font-size: 15px !important; padding: 14px 20px !important; }
.cs-woo .cross-sells ul.products li.product img { height: 160px; width: 100%; object-fit: contain; }
.cs-woo .cross-sells h2, .cs-woo .cart_totals h2, .cs-woo #order_review_heading, .cs-woo .woocommerce-billing-fields h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }

@media (min-width: 768px) and (max-width: 1199px) {
	.tk-the, .tk .woocommerce-ResetPassword { padding: 36px 48px; }
	.cs-woo .woocommerce { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 24px; }
	.cs-woo .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.cs-woo .woocommerce-MyAccount-navigation ul { flex-direction: column; overflow: visible; }
	.cs-woo .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) { display: block; }
}

/* ---------------- TRANG DANH MỤC ≥768 — gốc dùng luật máy tính cho mọi khổ (rem = 16px dưới 1200), rồi đè ≤1199 / ≤991 ---------------- */
@media (min-width: 768px) {
	.dm-ten { font-size: 1.823rem; line-height: 2.083rem; padding: 1.042rem 0 2.604rem; } /* gốc h1.sec-title.product-category-title: chữ 1.823rem, lề 1.042rem 0 2.604rem */
	.dm { padding: 0 0 5.052rem; }
	.dm-banner { margin-bottom: 1.667rem; }
	.dm-banner .swiper, .dm-banner img { border-radius: 1.042rem; }
	.dm-banner .mui-ten.truoc { left: -1.042rem; }
	.dm-banner .mui-ten.sau { right: -1.042rem; }
	.dm-con { display: flex; gap: .625rem; padding: 0; margin-bottom: 1.667rem; overflow: visible; flex-wrap: wrap; }
	.dm-con-truot { display: none; }
	.dm-con a { padding: .417rem 1.667rem; border-radius: 3.472rem; font-size: .833rem; line-height: 1.458rem; }
	.dm-con-ten { margin-bottom: .865rem; font-size: 1.042rem; line-height: 1.823rem; }
	.dm-logo { margin-bottom: 1.667rem; }
	.dm-logo a { width: calc((100% - 5 * 12px) / 6); padding: .729rem; border-radius: 1.042rem; }
	.dm-logo span { font-size: .7rem; line-height: .85rem; }
	.dm-loc h2 { font-size: 1.042rem; line-height: 1.823rem; margin-bottom: .865rem; }
	.dm-loc-hang { flex-direction: row; justify-content: space-between; align-items: center; gap: 0; }
	.dm-bo-loc { gap: .677rem; padding-bottom: 0; }
	.o-loc { position: relative; }
	.nut-loc { gap: .521rem; height: 2.083rem; font-size: .729rem; line-height: .729rem; padding: .521rem .833rem; border-radius: 5.208rem; }
	.bang-loc { left: 0; top: 100%; transform: none; width: 20.833rem; gap: .521rem; border-radius: 1.042rem; padding: 1.354rem 1.146rem; }
	.chip-loc span { font-size: .729rem; line-height: .729rem; padding: .521rem .833rem; border-radius: 5.208rem; }
	.xem-kq { padding: .417rem 1.5625rem; font-size: .78125rem; line-height: .78125rem; border-radius: 5.208rem; }
	.bo-loc-xoa { font-size: .729rem; }
	.dm-sap { flex-direction: row; align-items: center; gap: 1.042rem; }
	.dm-sap > span { font-size: .781rem; line-height: 1.823rem; }
	.dm-sap:only-child { margin-left: auto; } /* không có bộ lọc: ô sắp xếp vẫn nằm bên phải như khi có */
	.sap-hien { width: 14.0625rem; gap: .521rem; padding: .677rem 1.25rem; border-radius: 5.208rem; font-size: .729rem; line-height: .729rem; }
	.sap-hien span { margin-left: .521rem; }
	.sap-hien svg { width: .99rem; height: .99rem; }
	.o-sap li button { margin-top: .3125rem; padding: .677rem 1.25rem; border-radius: 5.208rem; }
	.o-sap li button svg { width: .99rem; height: .99rem; }
	.o-sap li button span { margin-left: .521rem; font-size: .729rem; line-height: .729rem; }
	.luoi-sp { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5625rem 1.25rem; margin-top: 3.542rem; } /* gốc .grid-5 = repeat(5, 1fr) */
}
@media (min-width: 768px) and (hover: hover) { .o-loc:hover .bang-loc { display: flex; } }
@media (min-width: 1200px) { .xem-kq:hover { background: #fff; color: #000; } } /* gốc .button-black:hover */
@media (min-width: 992px) { .dm-logo { gap: 16px; } .dm-logo a { width: calc((100% - 7 * 16px) / 8); } }
@media (min-width: 1200px) { .dm-logo { gap: 20px; } .dm-logo a { width: calc((100% - 11 * 20px) / 12); } }
@media (min-width: 768px) { .tkq-nhom .luoi-sp { gap: 1.5625rem 1.25rem; } } /* trang tìm kiếm dùng cùng lưới .grid-5 của gốc */
@media (min-width: 768px) and (max-width: 1199px) {
	.luoi-sp { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* gốc .product-list.grid-5 ≤1199 */
}
@media (min-width: 768px) and (max-width: 991px) {
	.luoi-sp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* gốc .tablet-flex-col: lọc 1 hàng (rộng hết, cách dưới 20px), sắp xếp xuống hàng dưới căn trái */
	.dm-loc-hang { flex-direction: column; align-items: flex-start; }
	.dm-bo-loc { width: 100%; margin-bottom: 20px; }
}

/* ---------------- DESKTOP ≥1200 (rem = 1vw) ---------------- */
@media (min-width: 1200px) {
	.admin-bar .hd.dinh .hd-nav { top: 32px; }
	.hd-logo .logo-anh { height: 2.85rem; }
	.sp-dem { margin: -1rem 0 1.6rem; }
	.sp-dem .o { width: 2.8rem; height: 2.8rem; font-size: 1.1rem; }

	.ds-tin { padding: 4.375rem 0 6.146rem; }
	.ds-tin-ten, .ds-tin-muc { font-size: 1.823rem; line-height: 2.083rem; }
	.ds-tin-ten { margin: 1.042rem 0 2.396rem; }
	.ds-tin-muc { margin-bottom: 2.396rem; }
	.ds-tin-muc.trai { text-align: left; }
	.ds-tin .tin-ngay { font-size: .729rem; line-height: .938rem; margin-bottom: .625rem; }
	.tin-noi-bat { display: grid; grid-template-columns: 48.472rem minmax(0, 1fr); gap: 1.042rem; align-items: center; margin-bottom: 6.979rem; }
	.tnb-lon { border-radius: 1.042rem; }
	.tnb-lon img { aspect-ratio: auto; height: 28.226rem; }
	.tnb-lon .tnb-anh::before { right: auto; width: 67%; background: linear-gradient(90deg, rgba(0, 0, 0, .79) 0%, rgba(0, 0, 0, 0) 100%); }
	.tnb-lon .tnb-chu { left: 2.083rem; right: auto; bottom: 2.083rem; width: 22.43rem; padding: 0; }
	.tnb-lon .tin-ngay { margin-bottom: .625rem; }
	.tnb-lon h3 { font-size: 1.146rem; line-height: 1.444rem; }
	.tnb-lon .tom-tat { display: -webkit-box; }
	.tnb-nho { gap: .729rem; }
	.tnb-muc .tnb-anh { flex-basis: 9.896rem; height: 6.51rem; border-radius: 1.042rem; margin-right: 1.563rem; }
	.tnb-muc .tin-ngay { margin-bottom: .625rem; }
	.tnb-muc h3 { font-size: 1.042rem; line-height: 1.312rem; }
	.tab-cm ul { justify-content: center; overflow: visible; flex-wrap: wrap; }
	.tab-cm a { min-width: 7.292rem; margin: 0 .417rem; padding: .417rem 1.042rem; border-radius: 5.208rem; font-size: .729rem; line-height: 1.042rem; }
	.luoi-tin { grid-template-columns: repeat(4, 19.688rem); gap: 2.292rem 1.458rem; margin-top: 3.958rem; }
	.luoi-tin .tin-anh { margin-bottom: 1.563rem; }
	.luoi-tin .tin-muc h3 { font-size: 1.042rem; line-height: 1.302rem; }
	.ds-tin .trong { margin-top: 3.958rem; }
	.xem-them-tin { margin-top: 3.75rem; padding: .521rem 1.563rem; font-size: .781rem; line-height: .781rem; }
	.tkq { padding: 5.208rem 0; }
	.tkq-ten { margin-bottom: 1.221rem; font-size: 1.823rem; line-height: 2.083rem; }
	.tkq-nhom h2 { margin-bottom: 1.245rem; font-size: 1.5rem; }
	.phan-trang { gap: .4rem; margin-top: 2.6rem; }
	.phan-trang .page-numbers { min-width: 2.4rem; height: 2.4rem; font-size: .833rem; }

	.cs-woo .woo-nd { border-radius: 1.042rem; padding: 2rem 2.4rem; font-size: .9rem; }

	/* đăng nhập / đăng ký (đo ở 1440: thẻ 735px, chữ tiêu đề 37.5px) */
	.tk { padding: 5.208rem 0; }
	.tk-the, .tk .woocommerce-ResetPassword { max-width: 51.042rem; border-radius: 1.111rem; padding: 2.604rem 3.646rem; box-shadow: 0 .208rem 1.042rem rgba(0, 0, 0, .1); }
	.tk-ten { margin-bottom: .521rem; font-size: 2.604rem; line-height: 3.125rem; }
	.tk-mota { margin-bottom: .521rem; font-size: .938rem; line-height: 1.25rem; }
	.tk-chuyen { margin-bottom: 1.563rem; font-size: .729rem; line-height: 1.042rem; }
	.tk-o { margin-bottom: 1.563rem; }
	.tk-o label, .tk-nhan { margin-bottom: .625rem; font-size: .833rem; line-height: 1.146rem; }
	.tk-o input[type=text], .tk-o input[type=email], .tk-o input[type=tel], .tk-o input[type=password], .tk .woocommerce-ResetPassword input.input-text { height: 2.604rem; padding: 0 1.563rem; border-radius: 5.208rem; font-size: .833rem; }
	.tk-mk input { padding-right: 3.6rem !important; }
	.tk-mat { right: 1.042rem; width: 1.667rem; height: 1.667rem; }
	.tk-dong { margin-bottom: 1.563rem; font-size: .833rem; line-height: 1.25rem; }
	.tk-nut, .tk .woocommerce-ResetPassword .button { height: 2.604rem; border-radius: 5.208rem !important; font-size: .833rem; }
	.tk-ghi, .tk .woocommerce-ResetPassword p { margin-bottom: 1.2rem; font-size: .833rem; line-height: 1.3rem; }
	.tk-hai { gap: 0 1.4rem; }
	.tk-chon { gap: 1.5rem; height: 2.604rem; font-size: .833rem; }
	.tk .woocommerce-error, .tk .woocommerce-message, .tk .woocommerce-info { max-width: 51.042rem; margin-bottom: 1rem; border-radius: 1rem; }
	.tk .woocommerce-privacy-policy-text { margin-bottom: 1.1rem; font-size: .76rem; line-height: 1.2rem; }
	.cs-woo { padding: 6.25rem 0; }
	.gio-trong p { font-size: 1rem; }
	.gio-trong .nut { margin-top: 1.042rem; padding: .781rem 1.563rem; font-size: .781rem; line-height: .781rem; }
	.cs-woo .woocommerce { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 2rem; }
	.cs-woo .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.cs-woo .woocommerce-MyAccount-navigation ul { flex-direction: column; overflow: visible; }
	.cs-woo .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) { display: block; }
	.cs-woo .woocommerce-MyAccount-navigation li a { padding: .6rem 1.1rem; font-size: .9rem; }
	.cs-woo .woocommerce-MyAccount-content { font-size: .95rem; line-height: 1.5rem; }
}

/* nội dung cũ dựng bằng Flatsome (inc/tuong-thich-flatsome.php): row = hàng cột co giãn, sản phẩm = lưới thẻ của theme */
.fs-row, .fs-row_inner, .fs-row_inner_1, .fs-vc_row { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 16px; }
.fs-col, .fs-col_inner, .fs-col_inner_1, .fs-vc_column { flex: 1 1 260px; min-width: 0; }
/* visibility= của hàng Flatsome, cùng mốc với Flatsome */
@media (max-width: 549px) { .hide-for-small { display: none !important; } }
@media (min-width: 550px) { .show-for-small { display: none !important; } }
@media (max-width: 849px) { .hide-for-medium { display: none !important; } }
@media (min-width: 850px) { .show-for-medium { display: none !important; } }
[class^="fs-"].hidden { display: none !important; }
.fs-anh img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 0 auto 12px; }
.fs-tieu-de { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 18px; line-height: 24px; font-weight: 700; margin: 16px 0 12px; }
.fs-tieu-de .fs-xem { font-size: 13px; font-weight: 600; color: var(--chinh); white-space: nowrap; }
.fs-nut { display: inline-flex; margin: 8px 0 16px; padding: 10px 24px; }
.fs-sp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
@media (min-width: 768px) { .fs-sp { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .fs-sp { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* nội dung soạn ở site cũ gắn cứng cỡ chữ / phông (bofit 30/10/2026: 929 span + p, strong có style="font-size:75% | 14px | 12pt…",
   52 chỗ font-family; One không có) → bỏ qua, chữ theo đúng kiểu theme như One. Không sửa dữ liệu, chỉ đè lúc hiển thị.
   Tiêu đề h2/h3 gắn cứng (2 sản phẩm) trả về đúng cỡ tiêu đề của theme ở từng khổ. */
:is(.noi-dung-bai, .sp-mota .noi-dung) :is(span, p, strong, b, em, i, u, a, li, td, th, div, font)[style*="font-size"],
:is(.noi-dung-bai, .sp-mota .noi-dung) font[size] { font-size: inherit !important; }
:is(.noi-dung-bai, .sp-mota .noi-dung) [style*="font-family"],
:is(.noi-dung-bai, .sp-mota .noi-dung) font[face] { font-family: inherit !important; }
/* Link trong nội dung màu xanh theme, kể cả link cũ đặt màu riêng; nút, thẻ sản phẩm, mục lục giữ màu của chúng (bài viết đã có luật ở trang-con.css) */
.sp-mota .noi-dung a:not(.nut, .the-sp a, .ez-toc-link, .ez-toc-btn, .azp-call-btn) { color: var(--chinh); }
:is(.noi-dung-bai, .sp-mota .noi-dung) a:not(.nut, .azp-call-btn, .ez-toc-btn)[style*="color"],
:is(.noi-dung-bai, .sp-mota .noi-dung) a:not(.nut, .azp-call-btn, .ez-toc-btn) [style*="color"],
:is(.noi-dung-bai, .sp-mota .noi-dung) a:not(.nut, .azp-call-btn, .ez-toc-btn) font[color] { color: var(--chinh) !important; }
/* tiêu đề viết TÁCH selector, không dùng :is() — :is() lấy độ ưu tiên của vế mạnh nhất nên đè mất luật @media bên dưới */
.noi-dung-bai h2[style*="font-size"], .sp-mota .noi-dung h2[style*="font-size"] { font-size: 19px !important; }
.noi-dung-bai h3[style*="font-size"], .sp-mota .noi-dung h3[style*="font-size"] { font-size: 17px !important; }
@media (min-width: 768px) {
  .sp-mota .noi-dung h2[style*="font-size"] { font-size: 1.35rem !important; }
  .sp-mota .noi-dung h3[style*="font-size"] { font-size: 1.215rem !important; }
}
@media (min-width: 1200px) {
  .noi-dung-bai h2[style*="font-size"] { font-size: 1.35rem !important; }
  .noi-dung-bai h3[style*="font-size"] { font-size: 1.215rem !important; }
}
/* h1 nằm trong nội dung cũ (bofit) — theme không có kiểu h1 cho nội dung nên trình duyệt phóng 2em → hiện như h2 của theme */
.noi-dung-bai h1, .sp-mota .noi-dung h1 { font-size: 19px; line-height: 24px; font-weight: 700; margin: 0 0 16px; }
@media (min-width: 768px) { .sp-mota .noi-dung h1 { font-size: 1.35rem; line-height: 1.619rem; margin-bottom: 1.12rem; } }
@media (min-width: 1200px) { .noi-dung-bai h1 { font-size: 1.35rem; line-height: 1.619rem; margin-bottom: 1.12rem; } }
/* ảnh trong mô tả sản phẩm dựng lại (az_noi_dung_tron): căn giữa, không tràn khung */
.sp-mota .noi-dung img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px; }

/* tắt sao ở đầu trang sản phẩm (ô sp_sao_tinh_trang): mã SP / thương hiệu thành mục đầu thì khỏi thụt lề; không còn gì thì bỏ cả hàng */
.sp-meta .ma:first-child, .sp-meta .hang-sx:first-child { margin-left: 0; }
.sp-meta:not(:has(*)) { display: none; }
/* Tạm ẩn dòng Thương hiệu theo lời anh Vinh (04/11/2026), bỏ 2 dòng này là hiện lại. Dòng thứ 2 để không thừa khoảng trống khi hàng không còn gì khác */
.sp-meta .hang-sx { display: none; }
.sp-meta:not(:has(> :not(.hang-sx))) { display: none; }
/* Sao của plugin kk-star ngay dưới mô tả dài, luôn thấy kể cả khi mô tả đang thu gọn. Chữ không mờ 50% như mặc định của plugin để đủ tương phản */
.sp-sao { margin-bottom: 16px; font-size: var(--c13, 13px); line-height: 1.4; }
.sp-sao .kk-star-ratings .kksr-legend { margin: 0 0 0 8px; font-size: inherit !important; line-height: inherit; color: var(--chu-phu); }
.sp-sao .kk-star-ratings .kksr-muted { opacity: 1; }

/* mô tả ngắn chung trong hộp mua (ô sp_mo_ta_ngan) */
.sp-mo-ta-ngan { margin: 0 0 16px; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--chu); }
.sp-mo-ta-ngan li { display: flex; align-items: flex-start; gap: 8px; }
.sp-mo-ta-ngan li + li { margin-top: 8px; }
.sp-mo-ta-ngan svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--chinh); }

/* hotline khi tắt ô nhắn tin (.mot-o): luôn gọn một hàng, nút gọi cam bên phải giữ nguyên, hẹp thì nhãn tự xuống dòng */
.lien-he-mua.mot-o { padding-top: 16px; border-top: 1px solid var(--vien-ft); }
.lien-he-mua.mot-o .o { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.lien-he-mua.mot-o .td { flex: 1 1 auto; min-width: 0; margin: 0; line-height: 1.3; }
.lien-he-mua.mot-o .sdt { display: inline-flex; flex: none; width: auto; margin: 0; padding: 8px 14px; border: 0; background: var(--cam-dam); color: #fff; white-space: nowrap; }
.lien-he-mua.mot-o .sdt svg { width: 18px; height: 18px; margin: 0 2px 0 0; color: #fff; }
.lien-he-mua.mot-o .sdt:hover { background: var(--cam); color: #fff; }

/* ô Thông tin công ty có dòng trống = nhiều cột (footer.php); dòng đầu mỗi cột là tiêu đề */
.ft-chu.nhieu-o { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 1.5rem; }
.ft-ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--chinh-dam); color: #fff; }
.ft-ic .ic { width: 13px; height: 13px; }
.the-tt .ic { flex: none; width: 16px; height: 16px; margin-right: 5px; color: var(--chinh-dam); }
.ft-tt:has(.the-tt .ic) { flex-wrap: wrap; }
@media (max-width: 767px) { .ft-chu.nhieu-o { grid-auto-flow: row; gap: 8px; } }

/* Trang danh mục gọn (tuỳ chọn dm_gon, mặc định tắt): tên + chip + sắp xếp gộp thành đầu trang thấp.
   Dưới 1200: tên + sắp xếp 1 hàng, chip hàng dưới (điện thoại trượt ngang). Từ 1200: cả 3 một hàng. */
.vet-dan:has(+ .dm-gon) { padding-top: 8px; padding-bottom: 0; }
.dm-gon .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding-top: 8px; }
.dm-gon .wrap > * { grid-column: 1 / -1; min-width: 0; order: 4; }
.dm-gon .dm-banner { order: 0; margin-bottom: 0; }
.dm-gon .dm-ten { grid-column: 1; order: 1; padding: 0; text-align: left; }
.dm-gon .dm-con { order: 2; display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 -10px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
.dm-gon .dm-con::-webkit-scrollbar { display: none; }
.dm-gon .dm-con a { padding: 6px 16px; line-height: 1.4; white-space: nowrap; }
.dm-gon .dm-loc { order: 3; }
.dm-gon .dm-loc:not(.co-loc) { grid-column: 2; order: 1; }
.dm-gon .dm-sap > span { display: none; } /* ô sắp xếp đã có icon + title, bỏ nhãn cho gọn */
.dm-gon .sap-hien { width: 160px; gap: 6px; padding: 6px 12px; white-space: nowrap; } /* rộng cố định: đủ cho nhãn dài nhất, đổi cách sắp không làm nút co giãn, hộp thả xuống thẳng hàng với nút */
.dm-gon .sap-hien span { margin: 0 auto 0 0; }
.dm-gon .sap-hien svg { width: 16px; height: 16px; }
/* gốc là các viên rời, nổi trên lưới sản phẩm thì đè lên ảnh và nút tim, khó đọc: gom thành một hộp nền trắng */
.dm-gon .o-sap ul { top: calc(100% + 6px); left: auto; right: 0; width: 100%; padding: 4px; background: #fff; border: 1px solid rgba(153, 153, 153, .35); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.dm-gon .o-sap li button { margin: 0; padding: 8px; border: 0; border-radius: 8px; background: transparent; }
.dm-gon .o-sap li button:hover { background: var(--chinh-nhat); color: var(--chinh); }
.dm-gon .luoi-sp { margin-top: 6px; }
@media (min-width: 768px) {
	.dm-gon .dm-con { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 1200px) {
	.dm-gon .wrap { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px; }
	.dm-gon .dm-con { grid-column: 2; order: 1; }
	.dm-gon .dm-loc:not(.co-loc) { grid-column: 3; }
}

/* Submenu ☰ gọn (tuỳ chọn menu_gon, mặc định tắt): danh sách hẹp mở cạnh đúng dòng đang rê, mỗi mục có icon */
.mega.gon > ul { box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.mega.gon > ul > li { position: relative; }
.mega.gon .mega-con {
	left: calc(100% + .833rem + 6px); top: -8px; width: max-content; min-width: 230px; max-width: 340px; min-height: 0; padding: 6px;
	flex-direction: column; flex-wrap: nowrap; border: 1px solid var(--vien-ft, #e6e6e6); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	transform: translateY(6px); transition: all .2s ease-in-out;
}
.mega.gon .mega-con::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: calc(.833rem + 8px); } /* cầu nối: đưa chuột ngang sang không bị mất menu */
.mega.gon > ul > li:nth-last-child(-n+4) > .mega-con { top: auto; bottom: -8px; } /* mấy dòng cuối mở ngược lên cho khỏi tràn màn hình */
.mega.gon .mega-con > li { width: auto; padding: 0; margin: 0; }
.mega.gon .mega-con > li > a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-weight: 500; white-space: nowrap; }
.mega.gon .mega-con > li > a .ic { flex: none; width: 20px; height: 20px; color: var(--chinh); }
.mega.gon .mega-con > li > a:hover { background: var(--nen-nhom-le, var(--chinh-nhat)); }
.mega.gon .mega-con ul { margin: 0 0 4px 40px; }
.mega-nhan { margin-top: 4px; padding: 10px 0 4px; border-top: 1px solid #eee; font-size: var(--c12, 12px); font-weight: 700; letter-spacing: .04em; color: var(--chu-phu); }

/* Thẻ mô tả rộng hết 2 cột (tuỳ chọn sp_mota_rong, mặc định tắt): xuống hàng riêng dưới ảnh + hộp mua, thẳng mép ảnh và mép hộp mua. Điện thoại vẫn theo order của .sp-hang */
@media (min-width: 768px) {
	.sp-hang.mota-rong .sp-anh { margin-bottom: 24px; }
	.sp-hang.mota-rong > .sp-mota { grid-column: 1 / -1; min-width: 0; margin-top: 16px; }
}
@media (min-width: 1200px) {
	.sp-hang.mota-rong > .sp-mota { width: calc(100% - 6.25rem); justify-self: center; } /* trừ 2 lề 3,125rem của .sp-trai và .sp-phai */
}

/* Đầu trang + menu điện thoại, máy tính bảng gọn (tuỳ chọn menu_gon, mặc định tắt): nút ☰ ở đầu trang, ngăn kéo danh sách có icon như menu máy tính */
.hd-nut-menu { display: none; }
@media (max-width: 991px) {
	.hd-nut-menu { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-right: 8px; border-radius: 50%; background: var(--nen-nut-menu); color: var(--chinh); }
	.hd-nut-menu .ic { width: 22px; height: 22px; }
	.mcat.gon { display: block; padding: 0; background: rgba(0, 0, 0, 0); transform: none; visibility: hidden; transition: background .25s, visibility .25s; }
	.mcat.gon.mo { background: rgba(0, 0, 0, .45); visibility: visible; }
	.mcat-hop { display: flex; flex-direction: column; width: min(86vw, 360px); height: 100%; background: #fff; border-radius: 0 16px 16px 0; overflow: hidden; box-shadow: 8px 0 24px rgba(0, 0, 0, .15); transform: translateX(-100%); transition: transform .25s ease-in-out; }
	.mcat.gon.mo .mcat-hop { transform: none; }
	.mcat-dau { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; background: var(--hd-nen); color: #fff; font-size: var(--c16, 16px); line-height: 1.4; font-weight: 700; }
	.mcat-dong { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; }
	.mcat-dong .ic { width: 18px; height: 18px; }
	.mcat-ds { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 96px; } /* chừa thanh đáy */
	.mcat-ds > li > a { display: flex; align-items: center; gap: 10px; padding: 11px 8px; border-radius: 8px; font-size: var(--c14, 14px); line-height: 1.3; font-weight: 500; color: #333; }
	.mcat-ds > li > a .ic { flex: none; width: 22px; height: 22px; color: #333; }
	.mcat-ds > li > a .mui { width: 16px; height: 16px; margin-left: auto; color: #949494; transition: transform .2s; }
	.mcat-ds > li.mo > a { background: var(--chinh-nhat); color: var(--chinh-dam); font-weight: 600; }
	.mcat-ds > li.mo > a .ic { color: var(--chinh-dam); }
	.mcat-ds > li.mo > a .mui { transform: rotate(90deg); }
	.mcat-con { display: none; margin: 4px 0 8px 18px; padding-left: 8px; border-left: 2px solid var(--chinh-nhat); }
	.mcat-ds > li.mo > .mcat-con { display: block; }
	.mcat-con a { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; font-size: var(--c14, 14px); line-height: 1.3; font-weight: 500; color: #333; }
	.mcat-con a .ic { flex: none; width: 20px; height: 20px; color: var(--chinh); }
	.mcat-con a:active { background: var(--chinh-nhat); }
	.mcat-con .mcat-xem { font-weight: 600; color: var(--chinh-dam); }
	.mcat-nhan { margin: 6px 8px 0; padding: 10px 0 4px; border-top: 1px solid #eee; font-size: var(--c12, 12px); font-weight: 700; letter-spacing: .04em; color: var(--chu-phu); }
}
@media (max-width: 767px) {
	/* 1 hàng: ☰ · logo · ô tìm kiếm; gợi ý tìm kiếm neo theo cả hàng cho đủ rộng */
	.hd-gon .hd-main { padding: 10px 0; }
	.hd-gon .hd-row { position: relative; flex-wrap: nowrap; justify-content: flex-start; }
	.hd-gon .hd-logo { flex: none; margin-right: 10px; }
	.hd-gon .hd-logo .chu small { display: none; }
	.hd-gon .hd-search { position: static; flex: 1; width: auto; min-width: 0; min-height: 36px; margin: 0; padding: 0 6px 0 14px; }
	.hd-gon .goi-y { margin-top: 10px; }
}

/* Ô số lượng + nút Mua hàng có icon giỏ hàng, ngay trên hotline (tuỳ chọn sp_dat_hang) */
.mua-hang-hang { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mua-hang-hang .nut-dat-hang { flex: 1; width: auto; min-width: 0; height: 46px; margin-bottom: 0; padding: 0 8px; box-sizing: border-box; }
.chon-sl { flex: none; display: flex; align-items: stretch; height: 46px; box-sizing: border-box; overflow: hidden; border: 1px solid var(--vien-ft, #ddd); border-radius: 8.33px; background: #fff; }
.chon-sl button { width: 34px; height: 100%; min-height: 0; padding: 0; font-size: 18px; line-height: 1; color: var(--chu); }
.chon-sl button:hover { background: var(--chinh-nhat); }
.chon-sl input { width: 38px; height: 100%; min-height: 0; padding: 0; border: 0; outline: 0; background: transparent; text-align: center; font-size: 16px; font-weight: 600; color: var(--chu); appearance: textfield; -moz-appearance: textfield; }
.chon-sl input::-webkit-outer-spin-button, .chon-sl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nut-tuvan.nut-dat-hang { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--nut-cam); }
.nut-dat-hang .ic { flex: none; width: 22px; height: 22px; color: #fff; }
.nut-dat-hang strong { text-transform: none; }
.thanh-mua .nut-mua .ic { flex: none; width: 20px; height: 20px; margin-right: 6px; color: #fff; }
.thanh-mua a.nut-goi, .thanh-mua a.nut-mua { flex: 1 1 0; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.thanh-mua a.nut-goi { gap: 8px; padding: 0 10px; color: var(--chinh); background: #fff; border: 1px solid var(--chinh); }
.nut-goi-ic { display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; color: #fff; background: var(--chinh); border-radius: 50%; }
.nut-goi-ic svg { width: 17px; height: 17px; }

/* Logo ảnh: đầu trang theo cỡ chữ logo, chân trang đặt trên khối màu chủ đạo vì logo trắng */
.hd-gon .hd-logo { width: auto; }
.hd-gon .hd-logo .logo-anh { width: auto; height: 40px; }
@media (max-width: 767px) { .hd-gon .hd-logo .logo-anh { height: 30px; } }
.ft-logo.co-anh { flex: none; display: block; width: max-content; }
.ft-logo.co-anh img { display: block; width: auto; height: 30px; }

/* Video trong nội dung cũ dựng bằng Flatsome */
.fs-video { aspect-ratio: 16 / 9; margin: 12px 0; }
.fs-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* azpos.vn: thông số, thuộc tính, thương hiệu, danh mục và từ khoá ở trang sản phẩm */
.product_meta { margin-top: 16px; font-size: 13px; line-height: 1.7; color: #5b6472; }
.product_meta > span { display: block; }
.product_meta a, .hang-sx a { color: var(--chinh); }
/* Khối cuối mô tả sản phẩm (azpos-contact-call, block-key-may-in-bill): phẳng, cùng 3 màu với thẻ dưới tên sản phẩm. #mo-ta để thắng luật chung của .sp-mota .noi-dung */
#mo-ta .azp-after-description { margin-top: 24px; padding-top: 20px; border-top: 1px solid #eef0f3; font-size: 14px; line-height: 1.7; }
#mo-ta .azp-after-description .fs-row { margin: 0 0 16px; }
#mo-ta .azp-after-description .fs-row:last-child { margin-bottom: 0; }
#mo-ta .azp-after-description h3 { margin: 0 0 14px; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--chinh); text-align: center; }
#mo-ta .azp-after-description .fs-anh img { width: 100%; margin: 0 0 12px; border-radius: 12px; }
#mo-ta .azp-after-description .fs-anh:last-child img { margin-bottom: 0; }
#mo-ta .azp-after-description .azposcontact { padding: 18px 20px; background: #f7f9fc; border: 1px solid #e6ecf5; border-radius: 12px; }
#mo-ta .azp-after-description .azposcontact p { margin: 0; }
#mo-ta .azp-after-description .azposcontact a:not(.fs-nut):not(.azp-call-btn) { color: var(--chinh); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#mo-ta .azp-after-description .fs-nut { margin: 14px 0 0; padding: 10px 22px; background: var(--nut); color: #fff; font-size: 14px; line-height: 1.4; font-weight: 600; text-decoration: none; white-space: normal; }
#mo-ta .azp-after-description .fs-nut:hover { background: var(--nut-dam); }
#mo-ta .azp-feat-list { margin: 0 0 14px; padding: 4px 16px; background: #f7f9fc; border: 1px solid #e6ecf5; border-radius: 12px; }
#mo-ta .azp-feat-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
#mo-ta .azp-feat-item + .azp-feat-item { border-top: 1px solid #e6ecf5; }
#mo-ta .azp-feat-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--chinh-nhat); color: var(--chinh); }
#mo-ta .azp-feat-item:nth-child(2) .azp-feat-icon { background: #e7f6ee; color: #17703f; }
#mo-ta .azp-feat-item:nth-child(3) .azp-feat-icon { background: #fff1e6; color: #b24a00; }
#mo-ta .azp-feat-text { font-size: 14px; line-height: 1.4; font-weight: 500; }
#mo-ta .azp-call-btn { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; padding: 10px 14px; background: var(--cam-dam); border-radius: 12px; color: #fff; text-decoration: none; }
#mo-ta .azp-call-btn__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: rgba(255, 255, 255, .2); border-radius: 10px; }
#mo-ta .azp-call-btn__text { display: flex; flex-direction: column; line-height: 1.25; }
#mo-ta .azp-call-btn__label { font-size: 13px; font-weight: 600; }
#mo-ta .azp-call-btn__num { font-size: 19px; font-weight: 800; }
#mo-ta .azp-call-note { margin: 0; font-size: 12px; line-height: 1.5; color: #6b7280; text-align: center; }
/* Trang không nạp FontAwesome: vẽ đúng 4 icon khối này dùng bằng mặt nạ SVG, khỏi tải cả bộ font */
#mo-ta .azp-after-description .fa { display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#mo-ta .azp-after-description .fa-line-chart { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h2v16h16v2H3zM7 14l4-4 3 3 5-6 1.5 1.3-6.3 7.7-3-3-2.8 2.8z'/%3E%3C/svg%3E"); }
#mo-ta .azp-after-description .fa-shield { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5z'/%3E%3C/svg%3E"); }
#mo-ta .azp-after-description .fa-bolt { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E"); }
#mo-ta .azp-after-description .fa-phone { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11 11 0 0 0 3.6.6 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.2.2 2.4.6 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
/* Từ 550 đến 849px Flatsome hiện cả 2 hàng chữ của khối, ở đây chỉ giữ hàng có nút gọi */
@media (max-width: 849px) {
	#mo-ta .azp-after-description .blockkeyword.hide-for-small { display: none; }
}
.hd-gon .hd-gio { display: flex; align-items: center; gap: 8px; color: #fff; }
.hd-gon .hd-gio svg { flex: none; width: 22px; height: 22px; margin: 0; }
.hd-gon .hd-gio span { margin: 0; font-size: 13px; font-weight: 600; }

/* Giá Online: 2 thẻ chọn cách mua, ngay dưới khối giá xanh */
.chon-gia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.o-gia { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: 10px 12px; text-align: left; background: #fff; border: 1px solid #c7c7c8; border-radius: 10px; color: inherit; }
.o-gia strong, .o-gia b, .o-gia em, .o-gia span { display: block; }
.o-gia strong { font-size: var(--c13, 13px); line-height: 1.3; font-weight: 600; color: #000; }
.o-gia b { margin-top: 4px; font-size: var(--c16, 16px); line-height: 1.3; font-weight: 700; color: var(--chinh); }
.o-gia em { font-size: var(--c12, 12px); line-height: 1.3; font-style: normal; font-weight: 500; color: #b24a00; }
.o-gia span { margin-top: 4px; font-size: var(--c12, 12px); line-height: 1.35; color: var(--chu-phu); }
.o-gia .dau-tick { position: absolute; top: -10px; right: 8px; display: none; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 10px; background: #c85000; color: #fff; font-size: var(--c12, 12px); line-height: 1.2; font-style: normal; font-weight: 600; white-space: nowrap; } /* nằm trên viền thẻ nên không chiếm chỗ của tên gói. #c85000: chữ trắng đạt tương phản 4,5:1, --cam-dam chỉ 3,6:1 */
.o-gia .dau-tick svg { display: block; flex: none; width: 16px; height: 16px; margin: -1px -3px -1px 0; stroke-width: 3; }
.o-gia .dau-tick svg circle { display: none; }
.o-gia.dang-chon { border-color: var(--cam); background: var(--cam-nhat); }
.o-gia.dang-chon .dau-tick { display: inline-flex; }

/* azpos.vn: điện thoại .sp-trai, .sp-phai là display: contents nên mọi khối thêm phải có order, nếu không sẽ chen lên trước ảnh và giá */
.sp-moc-anh { order: 1; min-width: 0; }
.sp-moc-tomtat { order: 5; min-width: 0; }
.sp-moc-lienhe { order: 6; min-width: 0; }
.sp-mota-cum { order: 9; min-width: 0; }
.sp-moc-anh:empty, .sp-moc-tomtat:empty, .sp-moc-lienhe:empty { display: none; }
@media (min-width: 768px) {
	.sp-hang.mota-rong > .sp-mota-cum { grid-column: 1 / -1; margin-top: 16px; }
}
@media (min-width: 1200px) {
	.sp-hang.mota-rong > .sp-mota-cum { width: calc(100% - 6.25rem); justify-self: center; }
}

/* azpos.vn: đầu trang. Hotline là nút cam phẳng, icon gọi trong vòng tròn trắng. Giỏ hàng chỉ có icon và số */
.hd-items { gap: 16px; }
.hd-goi { display: flex; flex: none; align-items: center; gap: 10px; padding: 5px 18px 5px 5px; background: var(--cam); border-radius: 999px; color: #fff; white-space: nowrap; transition: background .15s; }
.hd-goi:hover { background: var(--cam-dam); color: #fff; }
.hd-goi-ic { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; background: #fff; border-radius: 50%; color: var(--cam); }
.hd-goi-ic svg { width: 20px; height: 20px; }
.hd-goi-chu { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.hd-goi-chu small { font-size: 11px; font-weight: 500; }
.hd-goi-chu b { font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.hd-gio, .hd-gon .hd-gio { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; }
.hd-gio svg, .hd-gon .hd-gio svg { width: 28px; height: 28px; margin: 0; }
.hd-gio-so { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; background: var(--cam); border-radius: 9px; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; }

/* Thanh đáy điện thoại: hotline màu cam, giỏ hàng có số */
.thanh-day .day-goi a, .thanh-day .day-goi a span { color: var(--cam); }
.thanh-day .day-gio a { position: relative; }
.thanh-day .day-gio .hd-gio-so { top: -2px; right: calc(50% - 22px); }

/* Mô tả ngắn của WooCommerce trong hộp mua */
.sp-mo-ta-ngan-woo { margin: 0 0 16px; font-size: 14px; line-height: 1.55; }
.sp-mo-ta-ngan-woo p { margin: 0 0 8px; }
.sp-mo-ta-ngan-woo ul { margin: 0; padding: 0; list-style: none; }
.sp-mo-ta-ngan-woo li { position: relative; padding-left: 16px; }
.sp-mo-ta-ngan-woo li + li { margin-top: 6px; }
.sp-mo-ta-ngan-woo li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; background: var(--chinh); border-radius: 50%; }
/* 3 dòng chính sách dưới nút mua */
.sp-chinh-sach-ngan { margin: 0 0 14px; font-size: 13px; }
.sp-chinh-sach-ngan svg { width: 16px; height: 16px; }
.sp-chinh-sach-ngan li + li { margin-top: 6px; }

/* Toàn trang một font như Oneway: nội dung cũ có chữ đặt font riêng, plugin có form và FAQ tự đặt font */
main [style*="font-family"], main font[face], .azp-after-description :not(i), .wpcf7 :not(i), .ez-toc-container, .ez-toc-container * { font-family: inherit !important; }
.wpcf7 input[type=submit] { padding: 10px 24px; background: var(--nut); border: 0; border-radius: 8px; color: #fff; font-weight: 600; cursor: pointer; }
.wpcf7 input[type=submit]:hover { background: var(--nut-dam); }

/* Thẻ dưới tên sản phẩm (az_gd sp_the_nhan): xoay vòng xanh theme, xanh lá, cam; nền nhạt, chữ đậm cùng tông, tương phản từ 4,9:1 */
.sp-nhan { flex-wrap: wrap; row-gap: 6px; }
.sp-nhan .diem { background: var(--chinh-nhat); color: var(--chinh); white-space: nowrap; }
.sp-nhan .diem:nth-of-type(3n+2) { background: #e7f6ee; color: #17703f; }
.sp-nhan .diem:nth-of-type(3n+3) { background: #fff1e6; color: #b24a00; }
@media (max-width: 767px) {
	.sp-nhan { gap: 8px; }
	.sp-nhan .nhan { padding-left: 14px; padding-right: 14px; }
}

/* Mục lục plugin Easy TOC: thẻ phẳng cùng tông với khối cuối mô tả, rộng hết khung, máy tính chia 2 cột cho đỡ dài. Lặp ID để thắng CSS của plugin, khỏi dùng !important */
#ez-toc-container#ez-toc-container { display: block; float: none; width: 100%; box-sizing: border-box; margin: 0 0 20px; padding: 14px 18px; background: #f7f9fc; border: 1px solid #e6ecf5; border-radius: 12px; box-shadow: none; }
#ez-toc-container#ez-toc-container .ez-toc-title-container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; cursor: pointer; }
#ez-toc-container#ez-toc-container .ez-toc-btn::after { content: ""; position: absolute; inset: 0; } /* bấm cả hàng tiêu đề là mở, như bản đang chạy */
#ez-toc-container#ez-toc-container .ez-toc-title { display: block; margin: 0; font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--chinh); }
#ez-toc-container#ez-toc-container .ez-toc-title-toggle { display: block; flex: none; margin: 0; }
#ez-toc-container#ez-toc-container .ez-toc-btn { margin: 0; padding: 2px 4px; background: transparent; border: 0; box-shadow: none; }
#ez-toc-container#ez-toc-container nav > ul { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e6ecf5; }
#ez-toc-container#ez-toc-container ul { margin: 0; padding: 0; list-style: none; }
#ez-toc-container#ez-toc-container li { margin: 0; padding: 0; font-size: 14px; break-inside: avoid; }
#ez-toc-container#ez-toc-container ul ul { margin-left: 16px; }
#ez-toc-container#ez-toc-container li a { display: flex; align-items: flex-start; padding: 5px 8px; border-radius: 8px; font-size: 14px; line-height: 1.45; font-weight: 500; color: #333; text-decoration: none; }
#ez-toc-container#ez-toc-container li a::before { flex: none; float: none; margin-right: 8px; font-weight: 600; color: var(--chinh); }
#ez-toc-container#ez-toc-container li a:hover { background: var(--chinh-nhat); color: var(--chinh); text-decoration: none; }
@media (min-width: 992px) {
	.noi-dung-bai #ez-toc-container#ez-toc-container nav > ul { column-count: 2; column-gap: 20px; } /* mô tả sản phẩm hẹp nên giữ 1 cột */
}
/* Bấm link mục lục: tiêu đề không chui xuống dưới đầu trang đang ghim (cao 48–51px) */
html { scroll-padding-top: 64px; }
/* Ảnh có chú thích: WordPress ghi chiều rộng cố định lên figure (tới 1920px), làm cả trang tràn ngang */
.wp-caption { max-width: 100%; margin: 0 auto 16px; } /* bỏ lề 40px mặc định của figure, không thì ảnh lệch phải và bị cắt mép */

/* Đánh giá nằm cuối sản phẩm, rộng bằng khối mô tả */
@media (min-width: 768px) {
	.sp-hang.mota-rong > .sp-danhgia { grid-column: 1 / -1; min-width: 0; margin-top: 24px; }
}
@media (min-width: 1200px) {
	.sp-hang.mota-rong > .sp-danhgia { width: calc(100% - 6.25rem); justify-self: center; }
}

/* Thư viện ảnh của WordPress: đúng số cột đã chọn ở từng thư viện (toàn site 1.341 thư viện: 910 cái 3 cột, 377 cái 2 cột). Điện thoại từ 4 cột trở lên giảm còn 2 cho ảnh đỡ nhỏ */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; margin: 0 0 16px; }
.gallery-columns-1 { grid-template-columns: minmax(0, 1fr); }
.gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gallery-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gallery-columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gallery-columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.gallery-columns-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.gallery-item { min-width: 0; margin: 0; }
.gallery-icon img { display: block; width: 100%; height: auto; margin: 0; }
.gallery-caption { padding-top: 4px; font-size: 12px; line-height: 1.4; text-align: center; }
@media (max-width: 549px) {
	.gallery-columns-4, .gallery-columns-5, .gallery-columns-6, .gallery-columns-7, .gallery-columns-8, .gallery-columns-9 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Khung bọc bảng trong nội dung (bai-viet.php): bảng rộng hơn màn hình cuộn ngang trong khung, cả trang không bị giãn */
.bang-cuon { margin: 0 0 16px; overflow-x: auto; }

/* Chân trang theo Oneway (anh Vinh 04/11/2026): cỡ chữ lấy từ style.css, cột Tổng đài đứng đầu bên trái có icon, hàng dưới chỉ còn logo và 3 cột thông tin công ty. Bộ Công Thương và thanh toán tắt bằng cài đặt (bct_link trống, the_tt "-") */
.ft { border-top: 1px solid rgba(199, 199, 200, .6); }
.ft-cot.rong { margin-top: 0; }
.ft-tong-dai li a { display: flex; align-items: center; gap: 8px; }
.ft-tong-dai .ft-ic .ic { width: 13px; height: 13px; }
.ft-cty { margin-bottom: 0; }
.ft-chu { color: #333; }
@media (max-width: 991px) {
	.ft-cot:nth-child(n+4) { margin-top: 20px; }
}
@media (max-width: 767px) {
	.ft-dangky input:not([type=submit]) { font-size: 16px; } /* iPhone không tự phóng to khi gõ */
	.ft-tong-dai b { display: block; } /* số điện thoại xuống dòng riêng, không gãy giữa chừng */
	.ft-logo.co-anh { margin-bottom: 12px; }
	.ft-chu { flex: 0 0 100%; padding-left: 0; margin-bottom: 0; }
}
@media (min-width: 768px) {
	.ft-tong-dai li a { gap: .417rem; }
	.ft-tong-dai .ft-ic { width: 1.354rem; height: 1.354rem; }
	.ft-tong-dai .ft-ic .ic { width: .75rem; height: .75rem; }
	.ft-ketnoi a { width: 1.771rem; height: 1.771rem; }
	.ft-duoi { padding: 1.354rem 0; }
	.ft-cty { width: 100%; padding-right: 0; justify-content: flex-start; }
	.ft-logo.co-anh img { height: 2rem; }
	.ft-chu { flex: 1; width: auto; margin: 0; }
}

/* Nút livechat (plugin azpos-chat-nut). Điện thoại: nút của theme, cùng hình nút tròn của plugin, chỗ nút Zalo cũ, căn giữa với nút lên đầu trang. Máy bảng có thanh đáy nên nâng nút của plugin lên trên thanh */
#chatfb { display: none; }
@media (max-width: 767px) {
	#chatfb { position: fixed; right: 12px; bottom: 96px; z-index: 990; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--chinh); color: #fff; box-shadow: 0 6px 18px rgba(9, 75, 185, .35); }
	#chatfb .cham { position: absolute; top: 1px; right: 1px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
	#azpos-chat-cham { top: 1px; right: 1px; margin-left: 0 !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
	body #azpos-chat-nut { right: 12px; bottom: 96px; }
}

/* Trang chủ: trước khi Swiper chạy mỗi ô rộng 100%, thẻ đầu phình hết hàng rồi co lại làm cả hàng giật (CLS 0,03–0,06). Khai sẵn đúng số thẻ và khoảng cách như cấu hình trong main.js: .sw-noibat 2/3/4/5 thẻ cách 12px, .sw-flash 2/3/4/5 thẻ liền nhau */
.sw-noibat:not(.swiper-initialized) .swiper-slide { width: calc((100% - 12px) / 2); margin-right: 12px; }
.sw-flash:not(.swiper-initialized) .swiper-slide { width: 50%; }
@media (min-width: 768px) {
	.sw-noibat:not(.swiper-initialized) .swiper-slide { width: calc((100% - 24px) / 3); }
	.sw-flash:not(.swiper-initialized) .swiper-slide { width: 33.333%; }
}
@media (min-width: 992px) {
	.sw-noibat:not(.swiper-initialized) .swiper-slide { width: calc((100% - 36px) / 4); }
	.sw-flash:not(.swiper-initialized) .swiper-slide { width: 25%; }
}
@media (min-width: 1200px) {
	.sw-noibat:not(.swiper-initialized) .swiper-slide { width: calc((100% - 48px) / 5); }
	.sw-flash:not(.swiper-initialized) .swiper-slide { width: 20%; }
}

/* Trang rộng (page-blank, page-blank-landingpage): nội dung cũ trải theo khung trang. Nền section và banner tràn hết bề ngang, ruột vẫn thẳng khung */
.tr-rong { padding: 16px 0 40px; overflow-x: clip; }
.tr-rong .fs-section { padding: var(--fs-dem, 0) 0; }
.tr-rong .fs-section + .fs-section { margin-top: 24px; }
.tr-rong .fs-nen, .tr-rong .fs-ux_banner { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); background: linear-gradient(var(--fs-phu, transparent), var(--fs-phu, transparent)), var(--fs-anh, none) center / cover no-repeat; background-color: var(--fs-mau, transparent); }
.tr-rong .fs-nen { padding-top: var(--fs-dem, 24px); padding-bottom: var(--fs-dem, 24px); }
.tr-rong .fs-ux_banner { display: flex; min-height: min(var(--fs-cao, 360px), 60vh); }
.tr-rong .fs-col .fs-nen, .tr-rong .fs-col .fs-ux_banner { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; background-size: 100% 100%, contain; } /* banner nằm trong cột: gọn trong cột, ảnh không bị phóng cắt */
.tr-rong .fs-text_box { width: 100%; padding: 16px; background: var(--fs-mau, transparent); }
.tr-rong .noi-dung-bai > br, .tr-rong .noi-dung-bai > p:empty { display: none; }
.tr-rong .fs-ux_banner > .fs-x-trai { order: -1; }
.tr-rong .fs-ux_banner > .fs-anh img { margin-bottom: 0; }
.tr-rong .fs-chu-sang, .tr-rong .fs-chu-sang :is(h1, h2, h3, h4, h5, p, li, strong, .fs-tieu-de) { color: #fff; }
.tr-rong .fs-y-tren { align-self: flex-start; }
.tr-rong .fs-y-giua { align-self: center; }
.tr-rong .fs-y-duoi { align-self: flex-end; }
.tr-rong .fs-row > .fs-col, .tr-rong .fs-text_box { min-width: 0; }
.tr-rong .ta-giua { text-align: center; }
.tr-rong .ta-giua .fs-anh { margin-left: auto; margin-right: auto; }
.tr-rong .fs-giua-hang { justify-content: center; }
.tr-rong .noi-dung-bai ul { padding-left: 20px; }
.tr-rong [class*="fa-check"]::before { content: "✓"; margin-right: 4px; font-style: normal; font-weight: 700; color: var(--cam-dam); }
.tr-rong .fs-featured_box { margin-bottom: 16px; }
.tr-rong .fs-featured_box .fs-anh { max-width: 100%; }
.tr-rong .fs-featured_box .fs-anh img { width: 100%; margin: 0; }
.tr-rong .fs-featured_box .fs-icon { aspect-ratio: 1; background: currentColor; -webkit-mask: var(--fs-icon) center / contain no-repeat; mask: var(--fs-icon) center / contain no-repeat; }
.tr-rong article.price { color: #fff; text-align: center; } /* khối giá của trang bida, trà sữa nằm trên ảnh nền tối */
.tr-rong li:has(span[style*="#ffffff" i]) { color: #fff; } /* chấm đầu dòng theo màu chữ trắng ghi trong nội dung */
.tr-rong .fs-vi-giua { text-align: center; }
.tr-rong .fs-vi-giua .fs-anh { margin: 0 auto 8px; }
.tr-rong .fs-vi-giua .fs-tieu-de { justify-content: center; }
.tr-rong .fs-vi-trai { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; }
.tr-rong .fs-vi-trai .fs-anh { grid-row: 1 / span 9; }
.tr-rong .fs-vi-trai > :not(.fs-anh) { grid-column: 2; }
/* Nút dùng chung màu --nut anh Vinh đã chốt, không theo màu riêng trong nội dung cũ */
.tr-rong .noi-dung-bai a.fs-nut, .tr-rong .noi-dung-bai a.button { display: inline-flex; align-items: center; justify-content: center; margin: 8px 0 16px; padding: 10px 24px; border-radius: 83px !important; background: var(--nut); color: #fff; font-weight: 600; text-decoration: none; }
.tr-rong .noi-dung-bai a.fs-nut:hover, .tr-rong .noi-dung-bai a.button:hover { background: var(--nut-dam); color: #fff; }
.tr-rong .noi-dung-bai a.button > br, .tr-rong .noi-dung-bai a.button > i { display: none; } /* nội dung cũ lưu sẵn HTML nút của Flatsome, có br thừa và icon từ font không còn dùng */
@media (max-width: 767px) {
	.tr-rong .fs-ux_banner { flex-direction: column; align-items: center; min-height: min(var(--fs-cao, 360px), 90vw); gap: 12px; } /* banner chỉ có ảnh nền vẫn phải có chiều cao */
	.tr-rong .fs-cot-rong { display: none; }
	.tr-rong .fs-ux_banner > .fs-anh { order: -1; align-self: center; }
}
@media (min-width: 768px) {
	.tr-rong :is(.fs-col, .fs-col_inner, .fs-col_inner_1)[style*="--span"] { flex: 1 1 calc(var(--span) / 12 * 100% - 16px); }
	.tr-rong .fs-text_box { width: var(--fs-rong, 60%); padding: 24px; }
	.tr-rong .fs-x-giua { margin-left: auto; margin-right: auto; }
	.tr-rong .fs-x-phai { margin-left: auto; }
}

/* az-bai-oneway: font, cỡ chữ bài viết theo bài Oneway (.post-content), anh yêu cầu 04/11. Thân bài cỡ px cố định ở mọi khổ như gốc.
   Giữ font theme cho thẻ sản phẩm, form, nút, bài liên quan vì các khối này nằm trong nội dung nhưng không phải chữ bài. */
.bv .noi-dung-bai { font-family: sans-serif; font-size: 15px; line-height: 25px; }
.bv .noi-dung-bai :is(h1, h2):not(.azp-lienquan__title) { font-size: 20px !important; line-height: 24px; }
.bv .noi-dung-bai :is(h3, h4):not(.azp-lq__ten) { font-size: 18px !important; line-height: 24px; }
.bv .noi-dung-bai :is(strong, b) { font-weight: 700; } /* strong trong H2 mặc định lên 900: sans-serif ra Arial Black, thiếu dấu tiếng Việt nên chữ lệch nét */
.bv .noi-dung-bai :is(.the-sp, .wpcf7, .nut, .azp-lienquan) { font-family: "Plus Jakarta Sans", sans-serif; }
.bv .bv-ngay { font-size: 11px; line-height: 20px; }
.bv #ez-toc-container#ez-toc-container .ez-toc-title { font-size: 16px; line-height: 20.16px; }
.bv #ez-toc-container#ez-toc-container li,
.bv #ez-toc-container#ez-toc-container li a { font-size: 1.042rem; line-height: 1.354rem; }
@media (min-width: 768px) {
	.bv .bv-ngay { font-size: .729rem; line-height: .938rem; }
	.bv .bv-ten { font-size: 1.823rem; line-height: 2.083rem; }
	.bv .bv-tomtat { font-size: 1.042rem; line-height: 1.458rem; }
	.bv #ez-toc-container#ez-toc-container .ez-toc-title { font-size: 1.302rem; line-height: 1.354rem; }
}

/* Banner 3 ảnh trang chủ: ảnh chính 1544×720, ảnh nhỏ 772×348; đặt sẵn tỉ lệ để trang không giật khi ảnh tải */
.s-bn3 { padding: 10px 0 0; background: var(--nen-nhom-le, #fff); }
.bn3 img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* ảnh không đẩy cao ô: chiều cao do ô chính quyết định */
.bn3-chinh, .bn3-phu { position: relative; display: block; overflow: hidden; border-radius: 12px; }
.bn3-chinh { aspect-ratio: 1544 / 720; }
.bn3-phu { display: none; }
.bn3-chinh.bn3-khung { display: flex; }
.bn3-khung { flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--chinh); background: #e5f0ff; border: 1px dashed rgba(0, 41, 87, .35); font-size: 14px; text-align: center; }
.bn3-khung b { font-weight: 700; }
@media (min-width: 768px) {
	.s-bn3 { padding-top: 16px; }
	.bn3 { display: grid; margin: 0 4.167rem; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
	.bn3.mot-anh { grid-template-columns: 1fr; grid-template-rows: auto; }
	.bn3-chinh { grid-row: 1 / 3; }
	.bn3.mot-anh .bn3-chinh { grid-row: auto; }
	.bn3-phu { display: block; min-height: 0; }
	.bn3-phu.bn3-khung { display: flex; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.bn3 { margin: 0 1rem; }
}

/* Ảnh thông báo Bộ Công Thương dưới cột cuối chân trang: ảnh gốc 300×90 */
.ft-bct { display: block; width: 150px; margin-top: 14px; }
.ft-cot ul:empty { display: none; }
.ft-cot ul:empty + .ft-bct { margin-top: 0; }
.ft-bct img { display: block; width: 100%; height: auto; }