/* HH Table (Bảng) — xem libs/table.php
 * Màu chỉnh được trong Elementor (Kiểu bảng) qua biến --hht-*. Kiểu: .hht--elegant | --striped | --bordered | --card */
.hht {
	--hht-ink: #3e2f26;
	--hht-accent: #bb9b62;
	--hht-muted: #7a6d62;
	--hht-line: #e8e2d6;
	--hht-stripe: #faf7f1;
	--hht-bg: #fff;
	--hht-head-bg: transparent;
	--hht-head-color: var(--hht-ink);
	--hht-align: left;
	--hht-num-align: right;
	--hht-minw: 0px;
	--hht-py: 13px;
	--hht-px: 16px;
	color: var(--hht-ink);
	font-family: Poppins, sans-serif;
}
.hht--compact { --hht-py: 8px; --hht-px: 12px; }
.hht--roomy { --hht-py: 18px; --hht-px: 22px; }

.hht-empty { padding: 14px 16px; border: 1px dashed #c9bfae; border-radius: 6px; background: #faf7f1; color: #7a6d62; font-size: 13px; }

/* Tiêu đề: giống các mục khác của trang (vd "Unit & Pricing") */
.hht .hht__title { margin: 15px 0 20px; padding: 0; font-family: Merriweather, serif; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: none; color: var(--hht-ink); text-align: start; }
@media (max-width: 767px) { .hht .hht__title { font-size: 24px; } }

/* ---------- Khung + cuộn ngang ---------- */
.hht__frame { position: relative; }
.hht__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--hht-line) transparent; }
.hht__scroll:focus-visible { outline: 2px solid var(--hht-accent); outline-offset: 3px; }

/* Bóng mờ báo còn nội dung bên trái / phải (table.js gắn .can-l / .can-r) */
.hht__frame::before, .hht__frame::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 3; width: 28px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.hht__frame::before { left: 0; background: linear-gradient(to right, rgba(62, 47, 38, .14), rgba(62, 47, 38, 0)); }
.hht__frame::after { right: 0; background: linear-gradient(to left, rgba(62, 47, 38, .14), rgba(62, 47, 38, 0)); }
.hht__frame.can-l::before, .hht__frame.can-r::after { opacity: 1; }
.hht--sticky .hht__frame::before { display: none; } /* cột dính tự có bóng */

/* ---------- Bảng (reset style bảng của theme) ---------- */
.hht .hht__table { display: table; width: 100%; min-width: 100%; margin: 0; border: 0; white-space: normal; border-collapse: separate; border-spacing: 0; table-layout: auto; background: transparent; font-size: 15px; line-height: 1.5; }
.hht .hht__table th, .hht .hht__table td { min-width: var(--hht-minw); padding: var(--hht-py) var(--hht-px); border: 0; background: var(--hht-bg); color: inherit; text-align: var(--hht-align); vertical-align: middle; }
.hht .hht__table thead th { background: var(--hht-head-bg); color: var(--hht-head-color); font-size: 13px; font-weight: 600; letter-spacing: .05em; line-height: 1.35; text-transform: uppercase; white-space: nowrap; }
.hht .hht__table tbody th { font-weight: 600; }
.hht--rowhead .hht__table tbody th { width: 32%; }
.hht .hht__table .is-num { text-align: var(--hht-num-align); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Căn riêng hàng tiêu đề cột / cột tiêu đề dòng (để trống = theo Căn chữ) */
.hht .hht__table thead th { text-align: var(--hht-head-align, var(--hht-align)); }
.hht .hht__table thead .is-num { text-align: var(--hht-head-align, var(--hht-num-align)); }
.hht .hht__table tbody th { text-align: var(--hht-rowhead-align, var(--hht-align)); }
.hht .hht__table a { color: var(--hht-accent); text-decoration: underline; text-underline-offset: 2px; }
.hht .hht__table a:hover { color: var(--hht-ink); }

/* ---------- Kiểu: Thanh lịch ---------- */
.hht--elegant .hht__table thead th { border-bottom: calc(var(--hht-line-w, 1px) + 1px) solid var(--hht-accent); }
.hht--elegant .hht__table tbody > tr > * { border-bottom: var(--hht-line-w, 1px) solid var(--hht-line); }
/* Hover đổi nền hàng; chế độ "Mỗi dòng thành một thẻ" chỉ có hover từ 768px (điện thoại chạm vào thẻ không đổi nền cả bảng) */
.hht--elegant:where(:not(.hht--m-stack)) .hht__table tbody > tr:hover > * { background-color: var(--hht-stripe); }
@media (min-width: 768px) { .hht--elegant:where(.hht--m-stack) .hht__table tbody > tr:hover > * { background-color: var(--hht-stripe); } }

/* ---------- Kiểu: Kẻ sọc ---------- */
.hht--striped { --hht-head-bg: var(--hht-ink); --hht-head-color: #fff; }
.hht--striped .hht__scroll { border-radius: 6px; }
.hht--striped .hht__table tbody > tr:nth-child(even) > * { background-color: var(--hht-stripe); }
.hht--striped .hht__table tbody > tr:last-child > * { border-bottom: var(--hht-line-w, 1px) solid var(--hht-line); }

/* ---------- Kiểu: Có viền ô ---------- */
.hht--bordered { --hht-head-bg: var(--hht-stripe); }
/* Viền ngoài vẽ trên khung (.hht__frame) để "Bo góc" không cắt mất viền ở 4 góc; ô chỉ kẻ đường bên trong.
   Viền ngoài chỉnh trong Elementor (Khung & đường kẻ → Viền ngoài bảng) sẽ thay viền này. */
.hht--bordered .hht__frame { border: var(--hht-line-w, 1px) solid var(--hht-line); }
.hht--bordered .hht__table th, .hht--bordered .hht__table td { border-right: var(--hht-line-w, 1px) solid var(--hht-line); border-bottom: var(--hht-line-w, 1px) solid var(--hht-line); }
.hht--bordered .hht__table tr > :last-child { border-right: 0; }
.hht--bordered .hht__table > :last-child > tr:last-child > * { border-bottom: 0; }
.hht--bordered .hht__table thead th { letter-spacing: .02em; text-transform: none; font-size: 14px; }

/* ---------- Kiểu: Thẻ ---------- */
.hht--card { --hht-head-bg: var(--hht-accent); --hht-head-color: #fff; }
.hht--card .hht__frame { border: 1px solid var(--hht-line); border-radius: 10px; background: var(--hht-bg); box-shadow: 0 6px 24px rgba(62, 47, 38, .07); overflow: hidden; }
.hht--card .hht__table tbody > tr:not(:last-child) > * { border-bottom: var(--hht-line-w, 1px) solid var(--hht-line); }
/* Hover đổi nền hàng; chế độ "Mỗi dòng thành một thẻ" chỉ có hover từ 768px (điện thoại chạm vào thẻ không đổi nền cả bảng) */
.hht--card:where(:not(.hht--m-stack)) .hht__table tbody > tr:hover > * { background-color: var(--hht-stripe); }
@media (min-width: 768px) { .hht--card:where(.hht--m-stack) .hht__table tbody > tr:hover > * { background-color: var(--hht-stripe); } }

/* ---------- Cột / dòng nổi bật, dòng tổng (sau các kiểu để thắng nền sọc / hover) ---------- */
.hht .hht__table tbody > tr > .is-hl, .hht .hht__table tfoot > tr > .is-hl { background-color: color-mix(in srgb, var(--hht-accent) 10%, var(--hht-bg)); }
.hht--striped .hht__table tbody > tr:nth-child(even) > .is-hl { background-color: color-mix(in srgb, var(--hht-accent) 14%, var(--hht-bg)); }
.hht .hht__table thead > tr > .is-hl { background: var(--hht-accent); color: #fff; }
.hht--card .hht__table thead > tr > .is-hl { background: var(--hht-ink); }
.hht .hht__table tbody > tr.is-hl-row > * { background-color: color-mix(in srgb, var(--hht-accent) 16%, var(--hht-bg)); font-weight: 600; }
.hht .hht__table tfoot > tr > * { border-top: var(--hht-total-bw, 2px) var(--hht-total-bs, solid) var(--hht-total-bc, var(--hht-ink)); background-color: var(--hht-total-bg, var(--hht-bg)); color: var(--hht-total-color, inherit); font-weight: 600; }

/* ---------- Sắp xếp ---------- */
.hht .hht__sort { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; cursor: pointer; }
.hht .hht__sort:hover, .hht .hht__sort:focus { background: none; color: inherit; }
.hht .hht__sort:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.hht__arrow { position: relative; width: 8px; height: 12px; flex: 0 0 auto; opacity: .45; }
.hht__arrow::before, .hht__arrow::after { content: ""; position: absolute; left: 0; border: 4px solid transparent; }
.hht__arrow::before { top: -3px; border-bottom-color: currentColor; }
.hht__arrow::after { bottom: -3px; border-top-color: currentColor; }
th[aria-sort] .hht__arrow { opacity: 1; }
th[aria-sort="ascending"] .hht__arrow::after, th[aria-sort="descending"] .hht__arrow::before { opacity: .25; }

/* ---------- Cột đầu dính khi cuộn ngang ---------- */
.hht--sticky .hht__table tr > :first-child { position: sticky; left: 0; z-index: 1; }
.hht--sticky .hht__frame.can-l .hht__table tr > :first-child { box-shadow: 6px 0 10px -6px rgba(62, 47, 38, .25); }
.hht--sticky .hht__table thead tr > :first-child { z-index: 2; }

/* ---------- Điện thoại ---------- */
@media (max-width: 767px) {
	.hht { --hht-py: 10px; --hht-px: 12px; }
	.hht .hht__table { font-size: 14px; }
	.hht .hht__table thead th { font-size: 12px; }

	/* Cuộn ngang: ô chữ không bị bóp thành nhiều dòng hẹp */
	.hht--m-scroll .hht__table td:not(.is-num), .hht--m-scroll .hht__table tbody th { min-width: max(var(--hht-minw), 7.5em); }
	.hht--m-scroll.hht--rowhead .hht__table tbody th { min-width: max(var(--hht-minw), 6.5em); }

	/* Thu nhỏ vừa màn hình */
	.hht--m-fit .hht__table { font-size: 12.5px; }
	.hht--m-fit .hht__table th, .hht--m-fit .hht__table td { padding: 8px 6px; min-width: 0; }
	.hht--m-fit .hht__table thead th, .hht--m-fit .hht__table .is-num { white-space: normal; }
	.hht--m-fit .hht__table thead th { font-size: 10.5px; letter-spacing: .02em; }

	/* Mỗi dòng thành một thẻ */
	/* !important: thắng viền / bo góc / bóng của khung chỉnh trong Elementor (mỗi thẻ đã có khung riêng) */
	.hht--m-stack .hht__frame { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
	.hht--m-stack .hht__frame::before, .hht--m-stack .hht__frame::after { display: none; }
	.hht--m-stack .hht__scroll { overflow: visible; border-radius: 0 !important; }
	.hht--m-stack .hht__table, .hht--m-stack .hht__table tbody, .hht--m-stack .hht__table tfoot, .hht--m-stack .hht__table tr { display: block; width: 100%; border: 0; }
	.hht--m-stack .hht__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.hht--m-stack .hht__table tr { margin: 0 0 12px; border: 1px solid var(--hht-line); border-radius: 8px; background: var(--hht-bg); overflow: hidden; }
	.hht--m-stack .hht__table tr > * { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; min-width: 0; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--hht-line); background: var(--hht-bg); text-align: right; }
	.hht--m-stack .hht__table tr > :last-child { border-bottom: 0; }
	.hht--m-stack.hht--rowhead .hht__table tbody th { width: auto; } /* bỏ 32% của cột tiêu đề dòng: mỗi ô là 1 hàng của thẻ */
	.hht--m-stack .hht__table tr > [data-label]::before { content: attr(data-label); flex: 0 0 auto; max-width: 50%; color: var(--hht-muted); font-size: 12px; font-weight: 500; letter-spacing: .03em; text-align: left; text-transform: uppercase; }
	/* Ô đầu = tên thẻ */
	.hht--m-stack .hht__table tr > :first-child { justify-content: flex-start; background: var(--hht-stripe); font-weight: 600; text-align: left; }
	.hht--m-stack .hht__table tr > :first-child::before { display: none; }
	.hht--m-stack .hht__table tr.is-hl-row { border-color: var(--hht-accent); }
	.hht--m-stack .hht__table tr.is-hl-row > :first-child { background: var(--hht-accent); color: #fff; }
	.hht--m-stack .hht__table tfoot tr { border: var(--hht-total-bw, 2px) var(--hht-total-bs, solid) var(--hht-total-bc, var(--hht-ink)); }
	.hht--m-stack .hht__table tfoot > tr > * { border-top: 0; border-bottom: 1px solid var(--hht-line); background-color: var(--hht-total-bg, var(--hht-bg)); }
	.hht--m-stack .hht__table tfoot > tr > :last-child { border-bottom: 0; }
	.hht--m-stack .hht__table .is-num { white-space: normal; }
}

.hht__note { margin-top: 10px; color: var(--hht-muted); font-size: 13px; line-height: 1.55; }
.hht__note p { margin: 0 0 4px; }