/* Hộp Tiện Ích (bachhoa2) — trang trong theo mockup đợt 7 (about 930 / shop 1122 / product 992 / contact 1051px -> 1440). Dùng biến màu + thẻ của hti-home.css. */
/* menu: trang trong gạch dưới mục hiện tại (trang chủ gạch mục đầu) */
body:not(.home) #header .header-bottom-nav > li:first-child > a { font-weight: 500 !important; }
body:not(.home) #header .header-bottom-nav > li:first-child > a::after { display: none !important; }
body:not(.home) #header .header-bottom-nav > li.current-menu-item > a, body:not(.home) #header .header-bottom-nav > li.current-menu-ancestor > a, body:not(.home) #header .header-bottom-nav > li.current-menu-parent > a, body.single-product #header .header-bottom-nav > li.menu-item-object-page:nth-child(3) > a, body.tax-product_cat #header .header-bottom-nav > li:nth-child(3) > a { font-weight: 700 !important; }
body:not(.home) #header .header-bottom-nav > li.current-menu-item > a::after, body:not(.home) #header .header-bottom-nav > li.current-menu-ancestor > a::after, body:not(.home) #header .header-bottom-nav > li.current-menu-parent > a::after, body.single-product #header .header-bottom-nav > li:nth-child(3) > a::after, body.tax-product_cat #header .header-bottom-nav > li:nth-child(3) > a::after { content: "" !important; display: block !important; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hti-o); top: auto; width: auto; opacity: 1; }
.woocommerce-page .shop-page-title, .product-page-title, .page-title.shop-page-title { display: none !important; }
html { background-color: #2b2b2b; }
.hti-ipage, .page-template-page-blank #main { background: var(--hti-bg) !important; }
.hti-ipage { padding-bottom: 0; }
.hti-iw { max-width: 1400px; margin: 0 auto; padding: 0 15px; box-sizing: content-box; }
.hti-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 14.5px; color: #6b6b6b; padding: 18px 0 0; }
.hti-crumb a { color: #6b6b6b !important; } .hti-crumb a:hover { color: var(--hti-o2) !important; }
.hti-crumb i { font-style: normal; color: #9a9a9a; } .hti-crumb span { color: var(--hti-o2); }
.hti-ih1 { font-size: 40px; line-height: 1.2; font-weight: 700; color: var(--hti-ink); margin: 14px 0 0; letter-spacing: -.01em; }
.hti-ih1 em { font-style: normal; color: var(--hti-o2); }
.hti-ilead { font-size: 19px; color: #4a4a4a; margin-top: 8px; }
.hti-ipage .hti-pc-n a, .hti-ipage .hti-post-t a { color: var(--hti-ink) !important; }
.hti-isvcs { margin: 34px 0 34px; border: 1px solid var(--hti-line); padding: 16px 0; }
.hti-inl { background: #fdeee0; } .hti-inl .hti-nl { box-sizing: border-box; }
.section.hta-top, .section.htc-top { padding: 0 0 22px !important; }

/* ---------- giới thiệu ---------- */
.hta-hero { margin-top: 24px; height: 380px; border-radius: 8px; overflow: hidden; background: #eadfd3; }
.hta-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.section.hta-story-sec { padding: 0 0 40px !important; }
.hta-story { display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 640fr); gap: 44px; align-items: center; }
.hta-kick { color: var(--hti-o2); font-size: 16.5px; font-weight: 700; letter-spacing: .02em; }
.hta-h2 { font-size: 40px; line-height: 1.18; font-weight: 700; color: var(--hti-ink); margin: 10px 0 18px; letter-spacing: -.01em; }
.hta-p { font-size: 17px; line-height: 1.6; color: #3c3c3c; margin-bottom: 14px; }
.hta-line { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border: 1.5px solid var(--hti-o); border-radius: 5px; color: var(--hti-o2) !important; font-size: 17px; font-weight: 700; background: #fff; margin-top: 8px; white-space: nowrap; }
.hta-line:hover { background: var(--hti-o); color: #fff !important; }
.hta-story-img { height: 398px; border-radius: 8px; overflow: hidden; background: #eadfd3; }
.hta-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hta-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.hta-val { display: flex; gap: 26px; align-items: flex-start; background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 26px 26px 26px 28px; }
.hta-val img { width: 64px; height: 64px; flex: 0 0 64px; }
.hta-val h3 { font-size: 22px; font-weight: 700; color: var(--hti-ink); margin: 2px 0 8px; }
.hta-val div div { font-size: 15.5px; line-height: 1.5; color: #555; }
.section.hta-team-sec { padding: 0 0 36px !important; }
.hta-sub { font-size: 16.5px; color: #555; margin-top: 6px; }
.hta-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.hta-tc { background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 12px 12px 18px; }
.hta-tc-img { height: 250px; border-radius: 4px; overflow: hidden; background: #e9e9e9; }
.hta-tc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hta-tc h3 { font-size: 20px; font-weight: 700; color: var(--hti-ink); margin: 14px 4px 4px; }
.hta-tc > div:last-child { font-size: 15.5px; color: #555; margin: 0 4px; }
.section.hta-trust-sec { padding: 0 0 34px !important; }
.hta-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.hta-tr { background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 22px 16px 20px; text-align: center; }
.hta-tr img { width: 58px; height: 58px; display: block; margin: 0 auto 10px; }
.hta-tr h3 { font-size: 19.5px; font-weight: 700; color: var(--hti-ink); margin: 0 0 4px; }
.hta-tr div { font-size: 15px; color: #555; }
.hta-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 26px; background: #fde6cc; border-radius: 6px; padding: 30px 40px; }
.hta-cta h2 { font-size: 32px; font-weight: 700; color: var(--hti-ink); margin: 0; }
.hta-cta h2 + div { font-size: 17px; color: #4a4a4a; margin-top: 6px; }
.hta-cta-b { display: flex; gap: 20px; flex: 0 0 auto; }
.hta-call { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 60px; padding: 0 44px; background: var(--hti-o); color: #fff !important; border-radius: 5px; font-size: 19px; font-weight: 700; }
.hta-call .hti-ic { font-size: 22px; } .hta-call:hover { background: var(--hti-o2); }
.hta-cta .hta-line { height: 60px; margin: 0; padding: 0 22px; font-size: 18px; border-width: 2px; }

/* ---------- liên hệ ---------- */
.htc-grid { display: grid; grid-template-columns: minmax(0, 790fr) minmax(0, 448fr); gap: 16px; margin-top: 20px; align-items: start; }
.htc-formcard { background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 26px 26px 26px; }
.htc-h2 { font-size: 29px; font-weight: 700; color: var(--hti-ink); margin: 0; }
.htc-h2 em { font-style: normal; color: var(--hti-o2); }
.htc-p { font-size: 16px; color: #4a4a4a; margin: 8px 0 18px; }
.htc-form .htc-f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.htc-form .htc-f2 > p { display: contents; }
.htc-form label { display: block; font-size: 16px; font-weight: 500; color: var(--hti-ink); margin: 0 0 12px; }
.htc-form label i { font-style: normal; color: #e53935; }
.htc-form input[type=text], .htc-form input[type=tel], .htc-form input[type=email], .htc-form select, .htc-form textarea { width: 100%; height: 42px; margin: 6px 0 0; border: 1px solid #d9d9d9 !important; border-radius: 4px; box-shadow: none !important; font-size: 15px; padding: 0 14px; background: #fff; color: var(--hti-ink); }
.htc-form textarea { height: 100px; padding: 12px 14px; min-height: 0; }
.htc-form select { padding-right: 34px; }
.htc-form .wpcf7-submit { display: inline-flex; align-items: center; height: 46px; min-height: 46px; padding: 0 28px; margin: 6px 0 0; border: 0; border-radius: 4px; background: var(--hti-o) !important; color: #fff !important; font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.htc-form .wpcf7-submit:hover { background: var(--hti-o2) !important; }
.htc-form .wpcf7-spinner { position: absolute; }
.htc-note { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #6b6b6b; margin-top: 14px; }
.htc-note img { width: 18px; height: 18px; }
.htc-info { display: flex; flex-direction: column; gap: 14px; }
.htc-card { display: flex; gap: 22px; align-items: center; background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 18px 18px; color: inherit !important; }
.htc-card-o { background: #fdeee0; border-color: #f8dcc0; }
.htc-ic { width: 88px; height: 88px; flex: 0 0 88px; border-radius: 6px; background: #fdeee0; display: flex; align-items: center; justify-content: center; }
.htc-card-o .htc-ic { background: transparent; }
.htc-ic img { width: 50px; height: 50px; }
.htc-ct { display: flex; flex-direction: column; min-width: 0; }
.htc-ct b { font-size: 19px; font-weight: 700; color: var(--hti-ink); }
.htc-big { font-size: 31px; font-weight: 700; color: var(--hti-o2); line-height: 1.25; }
.htc-mail { font-size: 21px; font-weight: 700; color: var(--hti-o2); overflow-wrap: anywhere; line-height: 1.35; }
.htc-ct small { font-size: 14.5px; color: #555; margin-top: 3px; line-height: 1.45; }
.htc-addr { font-size: 17px; color: #333; line-height: 1.5; margin-top: 4px; }
.section.htc-map-sec { padding: 0 0 6px !important; }
.htc-mapcard { background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 16px 14px 14px; }
.htc-map-hd { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 12px 14px; }
.htc-dir { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border: 1.5px solid var(--hti-o); border-radius: 5px; color: var(--hti-o2) !important; font-size: 15.5px; font-weight: 700; white-space: nowrap; }
.htc-map { position: relative; height: 270px; border-radius: 4px; overflow: hidden; background: #eee; }
.htc-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.htc-pin { position: absolute; left: calc(50% + 24px); top: calc(50% - 74px); background: #fff; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.15); padding: 10px 16px; display: flex; flex-direction: column; pointer-events: none; }
.htc-pin b { color: var(--hti-o2); font-size: 15.5px; } .htc-pin span { font-size: 14px; color: #333; }
.htc-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 30px; }
.htc-links a { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 20px 20px; color: inherit !important; }
.htc-links img { width: 48px; height: 48px; flex: 0 0 48px; }
.htc-links span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.htc-links b { font-size: 16.5px; font-weight: 700; color: var(--hti-ink); } .htc-links small { font-size: 13.5px; color: #666; margin-top: 2px; }
.htc-links i { font-style: normal; color: var(--hti-o2); font-size: 28px; line-height: 1; }
.htc-links a:hover { border-color: #f4b36c; }
.htc-faq { margin-top: 14px; background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; }
.htc-faq details + details { border-top: 1px solid var(--hti-line); }
.htc-faq summary { list-style: none; display: flex; align-items: center; gap: 18px; padding: 14px 22px; font-size: 17px; font-weight: 500; color: var(--hti-ink); cursor: pointer; }
.htc-faq summary::-webkit-details-marker { display: none; }
.htc-faq summary::before { content: "+"; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--hti-o); color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.htc-faq details[open] summary::before { content: "−"; }
.htc-faq details > div { padding: 0 22px 16px 66px; font-size: 15.5px; color: #4a4a4a; line-height: 1.55; }
.htc-faq-h { margin-top: 4px; }

/* ---------- cửa hàng ---------- */
.hts-head { padding-bottom: 10px; }
.hts-cats { margin-top: 18px; padding: 0 0 18px; }
.hts-cats .hti-cat.on .hti-cat-ic { background: #ffd6ad; } .hts-cats .hti-cat.on .hti-cat-n { color: var(--hti-o2); font-weight: 700; }
.hts-main { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 22px; align-items: start; }
.hts-fbox { background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; }
.hts-ft { list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px 20px; font-size: 22px; font-weight: 700; color: var(--hti-ink); cursor: default; }
.hts-ft::-webkit-details-marker { display: none; }
.hts-ft img { width: 28px; height: 28px; }
.hts-filter { padding: 0 20px 18px; }
.hts-grp { border-top: 1px solid var(--hti-line); padding: 16px 0 14px; }
.hts-grp:first-child { border-top: 0; padding-top: 6px; }
.hts-grp h4 { font-size: 18px; font-weight: 700; color: var(--hti-ink); margin: 0 0 10px; text-transform: none; letter-spacing: 0; }
.hts-cat { display: block; padding: 8px 14px; font-size: 16px; color: #3c3c3c !important; border-left: 3px solid transparent; border-radius: 0 4px 4px 0; }
.hts-cat.on { background: #fff1e2; border-left-color: var(--hti-o); color: var(--hti-o2) !important; font-weight: 500; }
.hts-cat:hover { color: var(--hti-o2) !important; }
.hts-rng { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hts-rng input[type=number] { width: 100%; height: 44px; margin: 0; border: 1px solid #d9d9d9 !important; border-radius: 4px; box-shadow: none !important; font-size: 15px; padding: 0 12px; -moz-appearance: textfield; }
.hts-rng input::-webkit-outer-spin-button, .hts-rng input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hts-apply { display: block; width: 100%; height: 46px; margin: 12px 0 14px; border: 0; border-radius: 4px; background: var(--hti-o); color: #fff; font-size: 17px; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; }
.hts-apply:hover { background: var(--hti-o2); }
.hts-ck { position: relative; display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: #3c3c3c; font-weight: 400; margin: 0 0 9px; cursor: pointer; }
.hts-ck input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.hts-ck i { width: 18px; height: 18px; flex: 0 0 18px; border: 1.5px solid #bdbdbd; border-radius: 3px; background: #fff; }
.hts-ck input:checked + i { background: var(--hti-o) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; border-color: var(--hti-o); }
.hts-clear { display: inline-flex; align-items: center; gap: 8px; color: var(--hti-o2) !important; font-size: 15.5px; font-weight: 500; margin-top: 6px; }
.hts-clear img { width: 18px; height: 18px; }
.hts-help { display: flex; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 18px 18px; margin-top: 14px; }
.hts-help > img { width: 56px; height: 56px; flex: 0 0 56px; }
.hts-help > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hts-help span { font-size: 15.5px; color: #333; }
.hts-help-ph { font-size: 25px; font-weight: 700; color: var(--hti-ink) !important; line-height: 1.3; }
.hts-help-b { display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 8px; background: var(--hti-o); color: #fff !important; border-radius: 4px; font-size: 16px; font-weight: 700; }
.hts-bar { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 10px 14px 10px 16px; }
.hts-count { font-size: 16px; color: #333; margin-right: auto; }
.hts-sort { display: flex; align-items: center; gap: 18px; margin: 0; font-size: 16px; font-weight: 400; color: #333; }
.hts-sort select { width: 230px; height: 42px; margin: 0; border: 1px solid #d9d9d9; border-radius: 4px; box-shadow: none; font-size: 15px; padding: 0 12px; }
.hts-view { display: flex; gap: 6px; }
.hts-view button { width: 42px; height: 42px; min-height: 0; margin: 0; padding: 0; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; }
.hts-view button img { width: 22px; height: 22px; }
.hts-view button.on { background: #fff1e2; border-color: var(--hti-o); }
.hts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.hts-grid > * { min-width: 0; }
.hts-grid .hti-pc[hidden] { display: none; }
.hts-grid .hti-pc-img { height: 230px; }
.hts-grid.is-list { grid-template-columns: minmax(0, 1fr); }
.hts-grid.is-list .hti-pc { display: grid; grid-template-columns: 220px minmax(0, 1fr) 210px; grid-template-rows: auto auto; column-gap: 22px; align-items: center; }
.hts-grid.is-list .hti-pc-img { grid-row: 1 / 3; height: 180px; }
.hts-grid.is-list .hti-pc-n { min-height: 0; margin-top: 0; } .hts-grid.is-list .hti-add { grid-column: 3; grid-row: 1 / 3; }
.hts-empty { background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 30px; text-align: center; font-size: 16px; margin-top: 12px; }
.hts-pages { display: flex; justify-content: center; gap: 10px; margin: 26px 0 6px; }
.hts-pages button { width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; color: #333; font-size: 17px; font-weight: 500; }
.hts-pages button.on { background: var(--hti-o); border-color: var(--hti-o); color: #fff; }
.hts-pages button[disabled] { opacity: .45; }

/* ---------- chi tiết SP ---------- */
.htp-page .hti-crumb { padding-bottom: 14px; }
.htp-top { display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 520fr); gap: 46px; background: #fff; border-radius: 6px; padding: 18px 24px 22px 18px; }
.htp-main { height: 440px; background: #f3f3f3; border-radius: 4px; overflow: hidden; }
.htp-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.htp-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.htp-thumbs button { height: 142px; min-height: 0; margin: 0; padding: 0; border: 1.5px solid var(--hti-line); border-radius: 4px; background: #f3f3f3; overflow: hidden; }
.htp-thumbs button.on { border: 2px solid var(--hti-o); }
.htp-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.htp-sum { min-width: 0; padding-top: 4px; }
.htp-tag { position: static; display: inline-flex; font-size: 15px; padding: 4px 10px; }
.htp-title { font-size: 33px; line-height: 1.22; font-weight: 700; color: var(--hti-ink); margin: 12px 0 6px; }
.htp-cats { display: flex; gap: 10px; align-items: center; font-size: 15px; } .htp-cats a { color: #777 !important; } .htp-cats i { font-style: normal; color: #aaa; }
.htp-price { background: #fff4e8; border-radius: 4px; padding: 10px 14px; margin: 14px 0 12px; align-items: center; gap: 16px; }
.htp-price .hti-now { font-size: 37px; color: var(--hti-o2); } .htp-price del { font-size: 21px; color: #777; }
.htp-lead { font-size: 16.5px; line-height: 1.55; color: #3c3c3c; }
.htp-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0 6px; }
.htp-feat > div { display: flex; gap: 12px; align-items: center; font-size: 14.5px; line-height: 1.35; color: #3c3c3c; }
.htp-feat img { width: 38px; height: 38px; flex: 0 0 38px; }
.htp-opt { display: flex; align-items: center; gap: 30px; margin-top: 18px; }
.htp-opt > span { width: 96px; font-size: 16.5px; font-weight: 700; color: var(--hti-ink); }
.htp-chip { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 1.5px solid var(--hti-o); border-radius: 5px; color: var(--hti-o2); font-size: 15.5px; font-weight: 500; }
.htp-qty { display: flex; border: 1px solid #d9d9d9; border-radius: 4px; overflow: hidden; }
.htp-qty button { width: 42px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; background: #fff; font-size: 20px; color: #333; }
.htp-qty input { width: 56px !important; height: 40px; margin: 0; border: 0 !important; border-left: 1px solid #d9d9d9 !important; border-right: 1px solid #d9d9d9 !important; box-shadow: none !important; text-align: center; font-size: 16px; padding: 0; -moz-appearance: textfield; }
.htp-qty input::-webkit-outer-spin-button, .htp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.htp-act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.htp-buy { display: flex; align-items: center; justify-content: center; height: 56px; background: var(--hti-o); color: #fff !important; border-radius: 5px; font-size: 19px; font-weight: 700; }
.htp-buy:hover { background: var(--hti-o2); }
.htp-cartform { margin: 0; }
.htp-page button.htp-add { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 56px; min-height: 0; margin: 0; border: 1.5px solid var(--hti-o); border-radius: 5px; background: #fff; color: var(--hti-o2); font-size: 18px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.htp-add .hti-ic { font-size: 22px; } .htp-page button.htp-add:hover { background: #fff4e8; }
.htp-call { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 16.5px; color: #333 !important; } .htp-call .hti-ic { color: var(--hti-o); font-size: 20px; } .htp-call b { color: var(--hti-o2); }
.htp-badges { display: flex; gap: 26px; flex-wrap: wrap; border-top: 1px solid var(--hti-line); margin-top: 18px; padding-top: 16px; }
.htp-badges > div { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #333; }
.htp-badges img { width: 32px; height: 32px; }
.htp-sku { font-size: 13.5px; color: #777; border-top: 1px solid var(--hti-line); margin-top: 14px; padding-top: 10px; }
.htp-box { background: #fff; border-radius: 6px; margin-top: 20px; padding: 0 18px 22px; }
.htp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hti-line); }
.htp-tabs button { height: 60px; min-height: 0; min-width: 160px; margin: 0; padding: 0 28px; border: 0; border-bottom: 3px solid transparent; background: none; font-size: 17px; font-weight: 500; color: #333; text-transform: none; letter-spacing: 0; }
.htp-tabs button.on { color: var(--hti-o2); border-bottom-color: var(--hti-o); font-weight: 700; }
.htp-pane[hidden] { display: none !important; }
.htp-desc { display: grid; grid-template-columns: minmax(0, 780fr) minmax(0, 440fr); gap: 0; }
.htp-desc-l { padding: 22px 26px 4px 8px; }
.htp-h2 { font-size: 29px; font-weight: 700; color: var(--hti-ink); margin: 0 0 10px; }
.htp-desc-l p { font-size: 16.5px; line-height: 1.6; color: #4a4a4a; margin: 0 0 14px; }
.htp-life { margin: 4px 0 14px; height: 380px; border-radius: 4px; overflow: hidden; background: #eee; }
.htp-life img { width: 100%; height: 100%; object-fit: cover; display: block; }
.htp-h3 { font-size: 22px; font-weight: 700; color: var(--hti-ink); margin: 0 0 4px; }
.htp-desc-r { border-left: 1px solid var(--hti-line); padding: 22px 6px 0 26px; }
.htp-card { padding-bottom: 22px; } .htp-card + .htp-card { border-top: 1px solid var(--hti-line); padding-top: 22px; }
.htp-card h3 { font-size: 22px; font-weight: 700; color: var(--hti-ink); margin: 0 0 16px; }
.htp-hl { list-style: none; margin: 0; padding: 0; }
.htp-hl li { display: flex; align-items: flex-start; gap: 16px; font-size: 16.5px; color: #333; margin: 0 0 16px; line-height: 1.45; }
.htp-ck { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--hti-o) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/16px no-repeat; }
.htp-tbl { width: 100%; border-collapse: collapse; border: 1px solid var(--hti-line); margin: 0; }
.htp-tbl th, .htp-tbl td { border: 1px solid var(--hti-line); padding: 12px 14px !important; font-size: 15.5px; text-align: left; vertical-align: top; text-transform: none; letter-spacing: 0; }
.htp-tbl th { width: 44%; font-weight: 400; color: #555; background: #fafafa; }
.htp-tbl td { color: #222; }
.htp-spec { padding: 22px 8px 0; } .htp-spec p { font-size: 16.5px; }
.htp-spec .htp-tbl { max-width: 820px; }
.htp-rel { margin-top: 26px; }
.htp-rel-g { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.htp-rel-g .hti-pc-img { height: 190px; }

/* ---------- trang chính sách + tin tức ---------- */
.hti-doc-w { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; margin-top: 22px; align-items: start; }
.hti-doc { background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 28px 34px 30px; font-size: 16.5px; line-height: 1.7; color: #333; }
.hti-doc h2 { font-size: 24px; font-weight: 700; color: var(--hti-ink); margin: 18px 0 8px; } .hti-doc h2:first-child { margin-top: 0; }
.hti-doc h3 { font-size: 20px; font-weight: 700; color: var(--hti-ink); margin: 14px 0 6px; }
.hti-doc ul, .hti-doc ol { margin: 0 0 14px 22px; } .hti-doc li { margin-bottom: 6px; }
.hti-doc a { color: var(--hti-o2) !important; }
.hti-doc-nav { background: #fff; border: 1px solid var(--hti-line); border-radius: 6px; padding: 16px 0 10px; margin-top: 14px; }
.hti-doc-nav h3 { font-size: 18px; font-weight: 700; color: var(--hti-ink); margin: 0 0 8px; padding: 0 20px; width: auto; box-sizing: border-box; }
.hti-doc-nav a { display: block; padding: 8px 20px; font-size: 15.5px; color: #3c3c3c !important; border-left: 3px solid transparent; }
.hti-doc-nav a.on { background: #fff1e2; border-left-color: var(--hti-o); color: var(--hti-o2) !important; font-weight: 500; }
.hti-doc .woocommerce form.track_order { margin: 0; }
.htb-list { margin-top: 20px; } .htb-grid { margin-top: 0; }
.htb-date { font-size: 14px; color: #888; margin-bottom: 4px; }
.htb-pages { display: flex; justify-content: center; gap: 10px; margin: 24px 0 0; }
.htb-pages .page-numbers { min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; color: #333 !important; }
.htb-pages .page-numbers.current { background: var(--hti-o); border-color: var(--hti-o); color: #fff !important; }
.htb-art { max-width: 960px; margin-top: 18px; } .htb-art .hti-doc { padding: 30px 40px 34px; }
.htb-h1 { margin-top: 4px; font-size: 36px; }
.htb-fig { margin: 22px 0 18px; border-radius: 6px; overflow: hidden; } .htb-fig img { width: 100%; height: 440px; object-fit: cover; display: block; }
.htb-content img { max-width: 100%; height: auto; border-radius: 4px; }
.htb-content h2 { font-size: 24px; } .htb-content h3 { font-size: 20px; }
.htb-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 26px; background: #fff4e8; border-radius: 6px; padding: 18px 22px; font-size: 18px; font-weight: 700; color: var(--hti-ink); }
.htb-cta .hti-btn { margin: 0; color: #fff !important; }
.htb-rel { margin-top: 30px; }

/* ---------- mobile ---------- */
@media (max-width: 849px) {
  .hti-ih1 { font-size: 28px; } .hti-ilead { font-size: 16px; }
  .hti-crumb { font-size: 13px; padding-top: 12px; }
  .hti-ipage .hti-pc-n a, .hti-ipage .hti-post-t a { color: var(--hti-ink) !important; }
.hti-isvcs { margin: 24px 0; }
  .hta-hero { height: 210px; margin-top: 16px; }
  .hta-story { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hta-h2 { font-size: 27px; } .hta-p { font-size: 15.5px; }
  .hta-story-img { height: 230px; }
  .hta-vals, .hta-team { grid-template-columns: minmax(0, 1fr); }
  .hta-val { padding: 18px; gap: 16px; } .hta-val img { width: 48px; height: 48px; flex-basis: 48px; } .hta-val h3 { font-size: 19px; }
  .hta-tc-img { height: 200px; }
  .hta-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hta-tr h3 { font-size: 16px; } .hta-tr div { font-size: 13.5px; } .hta-tr img { width: 44px; height: 44px; }
  .hta-cta { flex-direction: column; align-items: stretch; padding: 22px 18px; gap: 16px; } .hta-cta h2 { font-size: 23px; }
  .hta-cta-b { flex-direction: column; gap: 10px; } .hta-call, .hta-cta .hta-line { height: 52px; font-size: 16.5px; justify-content: center; }
  .htc-grid { grid-template-columns: minmax(0, 1fr); }
  .htc-formcard { padding: 20px 16px; } .htc-h2 { font-size: 23px; }
  .htc-form .htc-f2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .htc-ic { width: 64px; height: 64px; flex-basis: 64px; } .htc-ic img { width: 36px; height: 36px; } .htc-card { gap: 14px; padding: 14px; }
  .htc-big { font-size: 25px; } .htc-mail { font-size: 17px; }
  .htc-map-hd { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 4px 12px; }
  .htc-pin { left: auto; right: 10px; top: 10px; }
  .htc-links { grid-template-columns: minmax(0, 1fr); }
  .htc-faq summary { padding: 12px 14px; font-size: 15.5px; gap: 12px; } .htc-faq details > div { padding: 0 14px 14px 52px; }
  .hts-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hts-main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hts-ft { cursor: pointer; padding: 14px 16px; font-size: 18px; } .hts-ft::after { content: "▾"; margin-left: auto; color: var(--hti-o2); }
  .hts-help { display: none; }
  .hts-bar { flex-wrap: wrap; gap: 10px; } .hts-count { width: 100%; font-size: 14.5px; } .hts-sort span { display: none; } .hts-sort select { width: 200px; } .hts-view { margin-left: auto; }
  .hts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .hts-grid .hti-pc-img { height: 150px; }
  .hts-grid.is-list .hti-pc { grid-template-columns: 110px minmax(0, 1fr); } .hts-grid.is-list .hti-pc-img { height: 110px; } .hts-grid.is-list .hti-add { grid-column: 2; grid-row: auto; }
  .htp-top { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 12px; }
  .htp-main { height: 320px; } .htp-thumbs { gap: 8px; } .htp-thumbs button { height: 76px; }
  .htp-title { font-size: 25px; } .htp-price .hti-now { font-size: 28px; } .htp-price del { font-size: 17px; }
  .htp-feat { grid-template-columns: minmax(0, 1fr); gap: 10px; } .htp-feat span br { display: none; }
  .htp-opt { gap: 14px; } .htp-opt > span { width: 84px; }
  .htp-act { grid-template-columns: minmax(0, 1fr); } .htp-badges { gap: 12px; }
  .htp-box { padding: 0 10px 16px; } .htp-tabs { overflow-x: auto; } .htp-tabs button { min-width: 0; padding: 0 16px; font-size: 15.5px; height: 50px; }
  .htp-desc { grid-template-columns: minmax(0, 1fr); } .htp-desc-l { padding: 16px 4px 0; } .htp-desc-r { border-left: 0; padding: 10px 4px 0; }
  .htp-h2 { font-size: 23px; } .htp-life { height: 220px; } .htp-tbl th, .htp-tbl td { font-size: 14.5px; padding: 10px !important; }
  .htp-rel-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .htp-rel-g .hti-pc-img { height: 140px; }
  .hti-doc-w { grid-template-columns: minmax(0, 1fr); } .hti-doc, .htb-art .hti-doc { padding: 20px 16px; font-size: 15.5px; } .htb-h1 { font-size: 26px; } .htb-fig img { height: 220px; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  .hta-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hta-cta { flex-direction: column; align-items: flex-start; }
  .htc-grid { grid-template-columns: minmax(0, 1fr); }
  .htc-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hts-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hts-main { grid-template-columns: 240px minmax(0, 1fr); }
  .hts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hts-bar { flex-wrap: wrap; } .hts-count { width: 100%; }
  .htp-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } .htp-main { height: 360px; } .htp-thumbs button { height: 96px; }
  .htp-feat { grid-template-columns: minmax(0, 1fr); gap: 8px; } .htp-act { grid-template-columns: minmax(0, 1fr); }
  .htp-desc { grid-template-columns: minmax(0, 1fr); } .htp-desc-r { border-left: 0; }
  .htp-rel-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hti-doc-w { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .htc-links b { font-size: 15px; }
}
/* ruler:auto BEGIN — tools/astra-bridge/lab/ruler_fix.py, đừng sửa tay */
@media (min-width: 850px) {
  body:not(.home) .hta-val img { width: 76px !important; height: 76px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  body:not(.home) .htc-ic img { width: 60px !important; height: 60px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
}
@media (max-width: 849px) {
  body:not(.home) .hta-val img { width: 64px !important; height: 64px !important; }
  body:not(.home) .htc-ic img { width: 50px !important; height: 50px !important; }
}
/* ruler:auto END */