/* Hà Tiên UI QA fixes — staging only, 29/08/2026. */

/* Global touch targets and CTA labels. */
.ht-btn,
a.ht-btn,
button:not(.htai-chat__launcher),
input[type="submit"],
input[type="button"] {
  min-height: 56px;
}

input:is([type="text"],[type="search"],[type="email"],[type="tel"],[type="url"],[type="number"],[type="password"]),
select {
  min-height: 56px !important;
  font-size: 18px !important;
  line-height: 28px !important;
}

textarea {
  min-height: 144px !important;
  font-size: 18px !important;
  line-height: 28px !important;
}

.variations label,
.woo-variation-items-wrapper label,
.variable-items-wrapper .variable-item {
  min-height: 48px !important;
  min-width: 48px !important;
}

.ht-btn--chinh,
.ht-header__cta,
.htsp-nut--chinh,
.ht-cta__btn {
  background-color: var(--ht-gold-strong) !important;
  border-color: var(--ht-gold) !important;
  color: var(--ht-on-gold) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.ht-btn,
.ht-header__cta,
.htsp-nut,
.ht-cta__btn {
  white-space: nowrap;
}

/* Desktop header: keep the legacy Max Mega Menu output on one readable row. */
@media (min-width: 1120px) {
  .ht-header__inner {
    gap: 12px;
  }

  .ht-header__inner > .custom-logo-link {
    flex: 0 0 auto;
  }

  .ht-header__inner > .ht-nav {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
  }

  .ht-nav > ul {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ht-nav #mega-menu-wrap-primary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ht-nav #mega-menu-wrap-primary > .mega-menu-toggle {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ht-nav #mega-menu-primary {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ht-nav #mega-menu-primary > .mega-menu-item {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .ht-nav #mega-menu-primary > .mega-menu-item > .mega-menu-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 0 8px !important;
    font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
  }

  .ht-nav #mega-menu-primary > .mega-menu-item-has-children > .mega-menu-link::after {
    content: "▾" !important;
    display: inline-block !important;
    margin-left: 4px !important;
    font-family: "Be Vietnam Pro", sans-serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .ht-nav #mega-menu-primary > .mega-menu-item > .mega-sub-menu {
    position: absolute !important;
    top: 52px !important;
    left: 0 !important;
    z-index: 1000 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: min(880px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 18px !important;
    border: 1px solid rgba(194,154,98,.42) !important;
    border-radius: 0 0 10px 10px !important;
    background: var(--ht-surface-inverse) !important;
    color: var(--ht-on-inverse) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.28) !important;
  }

  .ht-nav #mega-menu-primary > .mega-menu-item {
    position: relative !important;
  }

  .ht-nav #mega-menu-primary > .mega-menu-item:nth-child(3) > .mega-sub-menu {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .ht-nav #mega-menu-primary > .mega-menu-item:nth-last-child(-n+2) > .mega-sub-menu {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
  }

  .ht-nav #mega-menu-primary > .mega-menu-item > .mega-sub-menu .mega-sub-menu {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .ht-nav #mega-menu-primary > .mega-menu-item > .mega-sub-menu a {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif !important;
    font-size: 17px !important;
    line-height: 26px !important;
    white-space: normal !important;
    color: var(--ht-on-inverse) !important;
  }

  .ht-nav #mega-menu-primary > .mega-menu-item:hover > .mega-sub-menu,
  .ht-nav #mega-menu-primary > .mega-menu-item:focus-within > .mega-sub-menu,
  .ht-nav #mega-menu-primary > .mega-menu-item.mega-toggle-on > .mega-sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .ht-btn.ht-header__cta {
    flex: 0 0 auto;
    min-height: 56px !important;
    height: 56px !important;
    margin-left: 4px !important;
    padding: 0 16px !important;
  }
}

/* Mobile header and drawer targets. */
@media (max-width: 1119px) {
  .ht-menu-toggle {
    min-height: 56px !important;
    min-width: 56px !important;
  }

  .ht-menu a {
    min-height: 56px !important;
    font-size: 18px !important;
    line-height: 28px !important;
  }
}

/* Typography exceptions left by legacy/shop rules.

   04/09/2026 — TACH LAM HAI. Luat cu gom NHAN va VAN XUOI vao cung 17px
   !important, nen no de len ca hai luat 18px dat dung cho van xuoi:
     .ht-donvi__ten  (ten don vi trong khoi tac gia)  -> phai 18
     .htsp-nguon     (cau ghi nguon hang tren trang SP) -> phai 18
   Hai cho nay do duoc 17px tren trang that va la VAN XUOI, san 18px.
   Cac bo chon con lai la NHAN/breadcrumb: san 14, giu 17px la dat. */
.products .is-smaller,
p.category.is-smaller,
.ht-card .ht-meta,
.htsp-breadcrumb li,
.woocommerce-breadcrumb {
  font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 28px !important;
}

/* van xuoi: san 18px */
.ht-donvi__ten,
.htsp-nguon {
  font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif !important;
  font-size: max(18px, 1.125rem) !important;
  line-height: 1.6 !important;
}

body.single-post article figcaption {
  font-size: 17px !important;
  line-height: 28px !important;
}

/* Product imagery follows the locked 1:1 standard. */
body.home .col-inner > h2[style*="text-align: justify"] {
  text-align: left !important;
  word-spacing: normal !important;
  text-wrap: balance;
}

@media (max-width: 767px) {
  body.home .banner.show-for-small .banner-bg::after,
  body.home .banner.show-for-medium .banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--ht-surface-inverse), rgba(10,16,19,.42));
    pointer-events: none;
  }

  body.home .banner.show-for-small .banner-layers :is(h1,h2,h3),
  body.home .banner.show-for-medium .banner-layers :is(h1,h2,h3) {
    color: var(--ht-on-inverse) !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.58) !important;
  }
}

@media (max-width: 1119px) {
  body.home .banner.hide-for-medium {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}

/* Product imagery follows the locked 1:1 standard. */
li.product a.ht-sp-anh,
.products .product .box-image,
.products .product .product-small .box-image {
  aspect-ratio: 1 / 1 !important;
}

li.product a.ht-sp-anh img,
.products .product .box-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Mobile archives/search: avoid cramped image-text rows. */
@media (max-width: 640px) {
  ul.products {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .ht-luoi {
    grid-template-columns: 1fr !important;
  }

  .ht-luoi .ht-card,
  body.search .ht-card {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ht-luoi .ht-card__media,
  body.search .ht-card__media {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    box-shadow: inset 0 -1px 0 var(--ht-border, rgba(0,0,0,.14)) !important;
  }

  .ht-luoi .ht-card__body,
  body.search .ht-card__body {
    padding: 18px !important;
  }

  .ht-card :is(h1,h2,h3),
  body.search .ht-card :is(h1,h2,h3) {
    font-size: 44px !important;
    line-height: 34px !important;
  }

  .ht-card .ht-meta {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  body.search .ht-card__body p,
  .ht-luoi .ht-card__body p:not(.ht-meta) {
    font-size: 18px !important;
    line-height: 30px !important;
    -webkit-line-clamp: 3 !important;
  }

  body.single-post article h1,
  body.single-post h1.entry-title,
  body.single-product h1.product-title,
  body.single-product h1.product_title {
    font-size: 44px !important;
    line-height: 50px !important;
    letter-spacing: -.01em !important;
    text-align: left !important;
    word-spacing: normal !important;
  }

  body.single-post article h2,
  .entry-content :where(h2) {
    font-size: 32px !important;
    line-height: 42px !important;
  }

  body.single-post article h3,
  .entry-content :where(h3) {
    font-size: 24px !important;
    line-height: 34px !important;
  }

  .ht-breadcrumb ol {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .ht-breadcrumb li:not(:first-child):not(:last-child) {
    display: none !important;
  }

  .ht-breadcrumb li:first-child {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .ht-breadcrumb li:last-child {
    flex: 1 1 auto !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Old product tables: local horizontal scroll, never page-wide clipping. */
body.single-product .entry-content table:not(.htsp-bang),
body.single-product .woocommerce-Tabs-panel table:not(.htsp-bang),
body.single-product .product-short-description table:not(.htsp-bang) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

body.single-product table th,
body.single-product table td {
  font-size: 17px !important;
  line-height: 28px !important;
}

/* Keep the floating assistant usable without covering a large mobile area. */
@media (max-width: 767px) {
  .htai-chat {
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .htai-chat.htai-chat--floating .htai-chat__launcher {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 4px !important;
  }

  .htai-chat__launcher-media {
    width: 40px !important;
    height: 40px !important;
  }

  .ht-footer {
    padding-block: 40px !important;
    padding-bottom: 84px !important;
  }

  .ht-footer__luoi {
    gap: 24px !important;
  }

  .ht-footer h2 {
    margin-bottom: 8px !important;
  }

  .ht-footer a {
    min-height: 48px !important;
  }

  body.single-product .htai-chat {
    bottom: max(88px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 1119px) {
  .ht-menu #mega-menu-wrap-primary > .mega-menu-toggle,
  .ht-menu #mega-menu-primary .mega-sub-menu {
    display: none !important;
  }

  .ht-menu #mega-menu-primary {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ht-menu #mega-menu-primary > .mega-menu-item {
    display: block !important;
    width: 100% !important;
  }

  .ht-menu #mega-menu-primary > .mega-menu-item > .mega-menu-link {
    display: flex !important;
    min-height: 56px !important;
    padding: 10px 12px !important;
    font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
    white-space: normal !important;
  }

  body:has(.ht-menu[data-mo="1"]) .htai-chat {
    display: none !important;
  }
}

.htsp-nut,
.ht-cta__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 56px !important;
  height: auto !important;
  padding-block: 14px !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  .htsp-anh__dai {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .htsp-anh__dai > li,
  .htsp-anh__nho {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    align-self: start !important;
  }
}

/* P1: the legacy solution comparison table must stay readable. */
.ht-ai-table-wrap,
.htai-article__table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ht-border, var(--ht-border));
  border-radius: 10px;
  background: var(--ht-surface, var(--ht-surface));
}

.ht-ai-table,
.htai-article__specs {
  color: var(--ht-text, var(--ht-text)) !important;
  background: var(--ht-surface, var(--ht-surface)) !important;
}

.ht-ai-table :is(th,td),
.htai-article__specs :is(th,td) {
  color: inherit !important;
  background: transparent !important;
  border-color: var(--ht-border, var(--ht-border)) !important;
  font-size: 17px !important;
  line-height: 28px !important;
}

.ht-ai-table thead th,
.htai-article__specs thead th {
  background: var(--ht-tint-gold, color-mix(in srgb,var(--ht-gold) 5%,var(--ht-surface-soft))) !important;
  color: var(--ht-text, var(--ht-text)) !important;
  font-weight: 700 !important;
}

@media (max-width: 640px) {
  .ht-ai-table,
  .htai-article__specs {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ht-ai-table thead,
  .htai-article__specs thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  .ht-ai-table :is(tbody,tr),
  .htai-article__specs :is(tbody,tr) {
    display: block !important;
    width: 100% !important;
  }

  .ht-ai-table tr,
  .htai-article__specs tr {
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--ht-border, var(--ht-border)) !important;
  }

  .ht-ai-table tr:last-child,
  .htai-article__specs tr:last-child {
    border-bottom: 0 !important;
  }

  .ht-ai-table td,
  .htai-article__specs td {
    display: grid !important;
    grid-template-columns: minmax(104px, .75fr) minmax(0, 1.25fr) !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 8px 0 !important;
    border: 0 !important;
  }

  .ht-ai-table td::before,
  .htai-article__specs td::before {
    content: attr(data-label);
    color: var(--ht-text-muted, var(--ht-text)) !important;
    font-weight: 700 !important;
  }
}

/* P1: no light-mode heading token may survive on a dark canvas.

   04/09/2026 — BO `!important` o luat tieu de ben duoi (body :where(main)
   :where(h1..h4)). Ly do do duoc: luat nay ep MOI tieu de trong main ve
   --ht-text ke ca tieu de nam trong PANEL DAO MAU (nen sang trong che do toi,
   vd .htx-market-main cua trang xuat khau) -> chu #E8E8E3 tren nen #E8E8E3,
   tuong phan 1,0:1, chu VO HINH. Khi luat nay ra doi, cac Hub con dung token
   sang; nay 12 khuon do duoc 0 loi mau o ca hai che do nen bua ta khong con
   can. Giu luat, bo !important — de khoi co pham vi rieng (do uu tien cao hon
   :where = 0) tu quyet mau cua no. */
@media (prefers-color-scheme: dark) {
  .ht-header .ht-nav #mega-menu-primary > .mega-menu-item > .mega-menu-link {
    color: var(--ht-on-inverse) !important;
  }

  .ht-header .ht-menu-toggle {
    color: var(--ht-on-inverse) !important;
    background: var(--ht-surface-inverse) !important;
    border-color: var(--ht-border-inverse) !important;
  }

  body :where(main, .ht-noidung) :where(h1,h2,h3,h4) {
    color: var(--ht-text, var(--ht-on-inverse));
  }

  .ht-ai-table-wrap,
  .htai-article__table-wrap,
  .ht-ai-table,
  .htai-article__specs {
    background: var(--ht-surface, var(--ht-surface-inverse)) !important;
    color: var(--ht-text, var(--ht-on-inverse)) !important;
    border-color: var(--ht-border, var(--ht-border-inverse)) !important;
  }

  .ht-ai-table thead th,
  .htai-article__specs thead th {
    background: rgba(194,154,98,.18) !important;
    color: var(--ht-text, var(--ht-on-inverse)) !important;
  }

  .ht-ai-table td::before,
  .htai-article__specs td::before {
    color: var(--ht-on-inverse-soft) !important;
  }
}

/* ═══ TAB SẢN PHẨM CỦA WOOCOMMERCE ═══════════════════════════════════════
   Đo 03/09/2026 sau khi bật chế độ Tối: chữ tab "Mô tả" theo token
   var(--ht-text) đã lật sáng (#E8E8E3), nhưng NỀN tab lấy từ CSS lõi của
   WooCommerce ghi cứng #FFFFFF nên đứng yên → 1,10:1.
   Đè nền bằng token chung để hai bên lật cùng nhau.                      */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  background: var(--ht-surface-soft) !important;
  border-color: var(--ht-border) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--ht-surface) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ht-text) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--ht-surface) !important;
  color: var(--ht-text) !important;
}

/* ═══ NHÃN KHUNG CHAT — SÀN CỠ CHỮ ═══════════════════════════════════════
   `.htai-chat__launcher-label` được CSS của plugin chatbot đặt 13px, dưới sàn
   14px của bảng cỡ chữ chốt 26/08/2026. Bộ nhớ dự án ghi rõ KHÔNG ĐỤNG plugin
   chatbot đang chạy, nên đè đúng một thuộc tính ở tệp mu-plugin mình sở hữu.
   Chỉ đổi cỡ chữ, không đổi màu, vị trí hay hành vi.                       */
.htai-chat__launcher-label { font-size: 14px !important; }

/* 04/09/2026: mo ta san pham co <span style="color: #ff0000">Hay lien he...</span>
   — do #ff0000 tren nen sang chi 4,0:1. Quy ve token trang thai (sang #9A4339 = 5,99:1;
   toi #D5958A). !important vi style noi tuyen. */
[style*="color: #ff0000"], [style*="color:#ff0000"], [style*="color: red"], [style*="color:red"] { color: var(--ht-error) !important; }

/* 04/09: lien ket CTA cuoi bai cao 41px -> 44 */
.ht-cta__links li a{display:inline-flex;align-items:center;min-height:44px}

/* 04/09/2026: nhanh con trong NGAN KEO dien thoai/tablet (<=1119px) phai hien khi
   muc cha bat mega-toggle-on (theme.js). zz-ht-menu-dep chi phu <=767px. */
@media (max-width: 1119px) {
  .ht-menu li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; }
  .ht-menu li.mega-menu-item:not(.mega-toggle-on) > ul.mega-sub-menu { display: none !important; }
  .ht-menu ul.mega-sub-menu { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; position: static !important; }
  .ht-menu ul.mega-sub-menu > li.mega-menu-item { display: block !important; width: 100% !important; }
  .ht-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { display: flex !important; align-items: center; min-height: 48px; padding-left: 1rem !important; }
}

/* 04/09/2026: nhanh con trong ngan keo bi ep 226px roi 105px (chu 89px) vi luat
   `#mega-menu-wrap-primary #mega-menu-primary > li…{width:auto!important}` cua
   zz-ht-menu-dep (2 id) thang `.ht-menu ul.mega-sub-menu` (0 id). Dung 3 id de thang. */
@media (max-width: 1119px) {
  #ht-menu #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu,
  #ht-menu #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item,
  #ht-menu #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; float: none !important; box-sizing: border-box !important;
  }
  #ht-menu #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { display: flex !important; align-items: center; padding-left: 1.25rem !important; }
  #ht-menu #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { padding-left: 2.25rem !important; }
}

/* 07/09/2026: fix trang san pham (Hai yeu cau) —
   1) bo sticky anh (anh khong con bi keo theo khi cuon)
   2) anh nho lai + mo ta rong hon (2:3 = 40/60) cho can doi, cao cap hon */
body.single-product .htsp-anh{position:static!important;top:auto!important}
body.single-product div.product.type-product{grid-template-columns:minmax(0,2fr) minmax(0,3fr)!important}