/* HH List + HH Box — xem libs/list-box.php
 * Biến --hhl-* (list) / --hhb-* (hộp) đặt trên widget; Elementor (tab Style) ghi đè theo từng widget.
 * Giá trị mặc định riêng của từng kiểu hộp nằm ở fallback var(--x, mặc định) nên vẫn chỉnh được. */

.elementor-widget-hhv_list,
.elementor-widget-hhv_box {
	--hhl-accent: #bb9b62;
	--hhl-ink: #3e2f26;
	--hhl-muted: #7a6d62;
	--hhl-soft: #faf7f1;
	--hhl-line: #e8e2d6;
	--hhl-gap: 10px;
	--hhl-marker: 22px;
	--hhl-good: #4f7a4a;
	--hhl-bad: #a8473b;
}
.elementor-widget-hhv_box { --hhb-accent: #bb9b62; --hhl-accent: var(--hhb-accent); }

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

/* ================= LIST ================= */
.hhl, .hhl-pc ul, .hhl-group ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.hhl > li, .hhl-pc li, .hhl-group li { position: relative; margin: 0 !important; padding: 0; list-style: none !important; }
.hhl > li::marker, .hhl-pc li::marker, .hhl-group li::marker { content: none; }
.hhl { display: grid; grid-template-columns: repeat(var(--hhl-cols, 1), minmax(0, 1fr)); gap: var(--hhl-gap) 28px; color: var(--hhl-ink); }
.hhl a, .hhl-pc a, .hhl-groups a { color: var(--hhl-accent); text-decoration: underline; text-underline-offset: 2px; }
.hhl-lead, .hhl-title { color: var(--hhl-ink); font-weight: 600; }
.hhl-desc { display: block; color: var(--hhl-muted); font-size: .92em; line-height: 1.5; }

/* 1. Check vàng */
.hhl--check > li { padding-left: calc(var(--hhl-marker) + 12px); }
.hhl--check > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc((1lh - var(--hhl-marker)) / 2);
	width: var(--hhl-marker);
	height: var(--hhl-marker);
	border-radius: 50%;
	background-color: var(--hhl-accent);
	-webkit-mask: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 64%;
}
@supports not (top: 1lh) { .hhl--check > li::before { top: .2em; } }

/* 2. Các bước */
.hhl--steps { counter-reset: hhl-step; gap: calc(var(--hhl-gap) + 8px) 28px; }
.hhl--steps > li { counter-increment: hhl-step; display: grid; grid-template-columns: calc(var(--hhl-marker) * 2.3) 1fr; column-gap: 14px; }
.hhl--steps > li::before { content: counter(hhl-step, decimal-leading-zero); grid-row: span 2; color: var(--hhl-accent); font-family: Merriweather, Georgia, serif; font-size: calc(var(--hhl-marker) * 1.36); font-weight: 700; line-height: 1.1; }
.hhl--steps > li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--hhl-marker) * .9); top: calc(var(--hhl-marker) * 2); bottom: calc(-1 * var(--hhl-gap)); width: 1px; background: var(--hhl-line); }
.hhl--steps .hhl-title { display: block; line-height: 1.4; }

/* 3. Gạch vàng */
.hhl--dash > li { padding-left: 26px; }
.hhl--dash > li::before { content: ""; position: absolute; left: 0; top: calc(.5lh - 1px); width: 14px; height: 2px; background: var(--hhl-accent); }
@supports not (top: 1lh) { .hhl--dash > li::before { top: .8em; } }

/* 4. Icon + tiêu đề + mô tả */
.hhl--icon { grid-template-columns: repeat(var(--hhl-cols, 2), minmax(0, 1fr)); gap: calc(var(--hhl-gap) + 6px) 24px; }
.hhl--icon > li { display: grid; grid-template-columns: calc(var(--hhl-marker) + 18px) 1fr; column-gap: 12px; align-content: start; }
.hhl--icon .hhl-ic { grid-row: span 2; display: grid; place-items: center; width: calc(var(--hhl-marker) + 18px); height: calc(var(--hhl-marker) + 18px); border-radius: 10px; background: var(--hhl-soft); color: var(--hhl-accent); }
.hhl--icon .hhl-ic :is(svg, i) { width: calc(var(--hhl-marker) * .9); height: calc(var(--hhl-marker) * .9); font-size: calc(var(--hhl-marker) * .9); color: var(--hhl-accent); fill: currentColor; }
.hhl--icon .hhl-ic svg.hhl-svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hhl--icon .hhl-title { line-height: 1.35; }

/* 5. Chip */
.hhl--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hhl--chips > li { padding: 6px 14px; border: 1px solid var(--hhl-line); border-radius: 99px; background: var(--hhl-soft); font-size: .9em; line-height: 1.4; }
.hhl--chips > li::before { content: "•"; margin-right: 6px; color: var(--hhl-accent); }

/* 6. Ưu / nhược */
.hhl-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; color: var(--hhl-ink); }
.hhl-pc__col { padding: 16px 18px; border-radius: 10px; background: var(--hhl-soft); }
.hhl-pc__title { margin: 0 0 8px !important; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hhl-pc__pro .hhl-pc__title { color: var(--hhl-good); }
.hhl-pc__con .hhl-pc__title { color: var(--hhl-bad); }
.hhl-pc li { padding: 0 0 6px 24px; font-size: .95em; }
.hhl-pc li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.hhl-pc__pro li::before { content: "✓"; color: var(--hhl-good); }
.hhl-pc__con li::before { content: "✕"; color: var(--hhl-bad); }

/* 7. Nhóm nhiều cột */
.hhl-groups { color: var(--hhl-ink); }
.hhl-groups__grid { display: grid; grid-template-columns: repeat(var(--hhl-cols, 3), minmax(0, 1fr)); gap: 22px 28px; }
.hhl-group-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; padding-bottom: 8px; border-bottom: 1px solid var(--hhl-line); color: var(--hhl-ink); font-size: 12px; font-weight: 600; letter-spacing: .07em; line-height: 1.3; text-transform: uppercase; }
.hhl-group-title .hhl-svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--hhl-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hhl-group-title em { margin-left: auto; color: var(--hhl-muted); font-style: normal; font-weight: 500; letter-spacing: 0; }
.hhl-group { min-width: 0; }
.hhl-group li { min-width: 0; padding: 3px 0 3px 18px; font-size: .95em; line-height: 1.45; overflow-wrap: break-word; }
.hhl-group li::before { content: ""; position: absolute; left: 0; top: calc(3px + .725em - 1px); width: 9px; height: 2px; background: var(--hhl-accent); }
/* Dấu đầu dòng của kiểu Nhóm (mặc định: gạch) — cỡ theo cỡ chữ mục (em) */
.hhl-groups--m-dot .hhl-group li::before { width: .38em; height: .38em; border-radius: 50%; top: calc(3px + .725em - .19em); }
.hhl-groups--m-check .hhl-group li { padding-left: 1.55em; }
.hhl-groups--m-check .hhl-group li::before {
	width: 1em; height: 1em; border-radius: 50%; top: calc(3px + .725em - .5em);
	background-color: var(--hhl-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
	background-position: center; background-repeat: no-repeat; background-size: 70%;
}
.hhl-groups--m-arrow .hhl-group li::before { width: .42em; height: .42em; top: calc(3px + .725em - .25em); left: .05em; border-right: 2px solid var(--hhl-accent); border-bottom: 2px solid var(--hhl-accent); background: none; transform: rotate(-45deg); }
.hhl-groups--m-none .hhl-group li { padding-left: 0; }
.hhl-groups--m-none .hhl-group li::before { display: none; }
.hhl-groups.is-collapsed .is-extra { display: none; }
.hhl-more {
	display: flex; width: fit-content; align-items: center; gap: 8px;
	margin: 16px var(--hhl-more-mr, auto) 0 var(--hhl-more-ml, 0);
	padding: 9px 18px; border: 1px solid var(--hhl-more-bc, var(--hhl-accent)); border-radius: 6px;
	background: var(--hhl-more-bg, transparent); color: var(--hhl-more-color, var(--hhl-accent));
	font: 600 14px/1.3 Poppins, sans-serif; text-transform: none; letter-spacing: normal; cursor: pointer;
}
.hhl-more[hidden] { display: none; }
.hhl-more:hover, .hhl-more:focus { border-color: var(--hhl-more-bc-h, var(--hhl-more-bc, var(--hhl-accent))); background: var(--hhl-more-bg-h, var(--hhl-soft)); color: var(--hhl-more-color-h, var(--hhl-more-color, var(--hhl-accent))); }
.hhl-more:focus-visible { outline: 2px solid var(--hhl-accent); outline-offset: 2px; }
.hhl-more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.hhl-more[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, 0); }

@media (max-width: 1024px) {
	.hhl-groups__grid { grid-template-columns: repeat(var(--hhl-cols, 2), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.hhl--icon { grid-template-columns: repeat(var(--hhl-cols, 1), minmax(0, 1fr)); }
	.hhl-pc { grid-template-columns: 1fr; }
	/* Điện thoại: số cột nhóm tự theo chiều rộng (bỏ qua 'Số cột' của máy tính, vốn Elementor áp luôn cho điện thoại) */
	.hhl-groups__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
	/* Mục trong nhóm 2 cột (tên tiện ích thường ngắn) */
	/* Mục trong nhóm 2 cột khi nhóm đủ rộng (tên tiện ích ngắn): auto-fill theo chiều rộng nhóm, tối đa 2 cột.
	   Không dùng container query: Safari iOS tính sai chiều cao lưới (để lại khoảng trống lớn dưới nút "Xem tất cả"). */
	.hhl-groups:not(.hhl-groups--m1) .hhl-group ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(8.5em, calc(50% - 7px)), 1fr)); column-gap: 14px; }
	.hhl-more { margin-left: var(--hhl-more-ml, auto); margin-right: var(--hhl-more-mr, auto); } /* nút Xem tất cả: mặc định căn giữa */
}

/* ================= BOX ================= */
.hhb { box-sizing: border-box; color: var(--hhb-ink, #4a3c32); }
.hhb *, .hhb *::before, .hhb *::after, .hhl, .hhl *, .hhl-pc *, .hhl-groups * { box-sizing: border-box; }
.hhb-title { margin: 0 !important; padding: 0; color: var(--hhb-title, #3e2f26); }
.hhb-content > :first-child { margin-top: 0; }
.hhb-content > :last-child { margin-bottom: 0; }
.hhb-content p { margin: 0 0 8px; }
.hhb-content a { color: var(--hhb-accent); }
/* List gõ trong ô nội dung → kiểu Gạch vàng */
.hhb-content ul { margin: 8px 0 !important; padding: 0 !important; list-style: none !important; }
.hhb-content ul > li { position: relative; margin: 0 0 6px !important; padding-left: 24px; list-style: none !important; }
.hhb-content ul > li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 2px; background: var(--hhb-accent); }
/* Khoảng cách tiêu đề → nội dung / list và nội dung → list: chỉnh ở tab Style (--hhb-title-gap, --hhb-list-gap) */
.hhb .hhb-list { margin-top: 0; }
.hhb .hhb-label { margin-bottom: 0; }
.hhb .hhb-label + .hhb-content, .hhb .hhb-label + .hhb-list { margin-top: var(--hhb-title-gap, 10px); }
.hhb .hhb-content + .hhb-list { margin-top: var(--hhb-list-gap, 14px); }
.hhb--usp .hhb-body > .hhb-list:first-child { margin-top: 12px; } /* giữ bố cục USP như trước */

/* Nhãn (icon + tiêu đề) của Tóm tắt / Lưu ý / Mẹo */
.hhb-label { display: flex; align-items: center; gap: 10px; }
.hhb-label .hhb-title { font-size: 13px; font-weight: 600; letter-spacing: .07em; line-height: 1.3; text-transform: uppercase; }
.hhb-ic { display: inline-flex; flex: 0 0 auto; }
.hhb-ic :is(svg, i) { width: 20px; height: 20px; font-size: 20px; }
.hhb-ic svg.hhl-svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Khung chung (Tóm tắt, Lưu ý, Mẹo, USP, Liên hệ) */
.hhb--summary, .hhb--warn, .hhb--tip, .hhb--usp, .hhb--cta { border: var(--hhb-bw, 0) solid var(--hhb-bc, transparent); }

/* 1. Tóm tắt nhanh */
.hhb--summary { padding: var(--hhb-pad, 20px 24px); border-left: var(--hhb-bw, 4px) solid var(--hhb-bc, var(--hhb-accent)); border-radius: var(--hhb-r, 0 10px 10px 0); background: var(--hhb-bg, #faf7f1); }
.hhb--summary .hhb-label { color: var(--hhb-title, #a3854f); }
.hhb--summary .hhb-label .hhb-title { color: inherit; }

/* 2. Lưu ý */
.hhb--warn { padding: var(--hhb-pad, 18px 22px); border-width: var(--hhb-bw, 1px); border-color: var(--hhb-bc, #ecd2c2); border-radius: var(--hhb-r, 10px); background: var(--hhb-bg, #fbf1ea); }
.hhb--warn .hhb-label { color: var(--hhb-title, #b4532a); }
.hhb--warn .hhb-label .hhb-title { color: inherit; }
.hhb--warn { --hhl-accent: var(--hhb-title, #b4532a); }

/* 3. Mẹo */
.hhb--tip { position: relative; padding: var(--hhb-pad, 18px 22px); border-width: var(--hhb-bw, 1px); border-style: dashed; border-color: var(--hhb-bc, var(--hhb-accent)); border-radius: var(--hhb-r, 10px); background: var(--hhb-bg, transparent); }
.hhb--tip.has-icon { padding-left: 64px; }
.hhb--tip .hhb-ic { position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--hhb-accent); color: #fff; }
.hhb--tip .hhb-ic :is(svg, i) { width: 18px; height: 18px; font-size: 16px; color: #fff; }

/* 4. Số liệu nổi bật */
.hhb--stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: var(--hhb-pad, 0); border-top: 2px solid var(--hhb-title, #3e2f26); border-bottom: 1px solid var(--hhb-bc, #e8e2d6); border-radius: var(--hhb-r, 0); background: var(--hhb-bg, transparent); }
.hhb-stat { padding: 16px 18px 14px 0; text-align: var(--hhb-stat-align, left); }
.hhb-stat + .hhb-stat { padding-left: 18px; border-left: 1px solid var(--hhb-bc, #e8e2d6); }
.hhb-stat b { display: block; color: var(--hhb-title, #3e2f26); font-family: Merriweather, Georgia, serif; font-size: 30px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hhb-stat b small { margin-left: 3px; color: var(--hhb-accent); font-size: .5em; font-weight: 700; }
.hhb-stat span { display: block; margin-top: 2px; color: #7a6d62; font-size: 13px; line-height: 1.45; }

/* 5. Trích dẫn */
.hhb--quote { position: relative; margin: 0; padding: var(--hhb-pad, 8px 0 8px 56px); border-radius: var(--hhb-r, 0); background: var(--hhb-bg, transparent); }
.hhb--quote::before { content: "\201C"; position: absolute; left: 0; top: -14px; color: var(--hhb-accent); font-family: Merriweather, Georgia, serif; font-size: 80px; line-height: 1; }
.hhb--quote .hhb-quote { margin: 0; padding: 0; border: 0; background: none; }
.hhb--quote .hhb-quote p { margin: 0; color: var(--hhb-title, #3e2f26); font-family: Merriweather, Georgia, serif; font-size: 1.2em; font-style: italic; line-height: 1.6; }
.hhb-cite { margin-top: 8px; color: #7a6d62; font-size: 13px; }
.hhb-cite b { color: var(--hhb-title, #3e2f26); font-weight: 600; }

/* 6. Kêu gọi liên hệ */
.hhb--cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: var(--hhb-pad, 22px 26px); border-radius: var(--hhb-r, 12px); background: var(--hhb-bg, #3e2f26); color: var(--hhb-ink, #d9cbb8); }
.hhb--cta .hhb-body { flex: 1 1 260px; min-width: 0; }
.hhb--cta .hhb-title { margin-bottom: 4px !important; color: var(--hhb-title, #fff); font-family: Merriweather, Georgia, serif; font-size: 1.15em; font-weight: 700; line-height: 1.35; }
.hhb--cta .hhb-content { font-size: .95em; }
.hhb--cta .hhb-content a { color: inherit; }
.hhb-btn { flex: 0 0 auto; display: inline-block; border: 0 solid transparent; padding: 11px 22px; border-radius: 6px; background: var(--hhb-btn, var(--hhb-accent)); color: var(--hhb-btn-color, #fff) !important; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none !important; transition: filter .2s; }
.hhb-btn:hover, .hhb-btn:focus { background: var(--hhb-btn-h, var(--hhb-btn, var(--hhb-accent))); color: var(--hhb-btn-color-h, var(--hhb-btn-color, #fff)) !important; filter: var(--hhb-btn-filter, brightness(.92)); }
.hhb-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* 7. Điểm nổi bật dự án (USP) */
.hhb--usp { overflow: hidden; border-width: var(--hhb-bw, 1px); border-color: var(--hhb-bc, #e8e2d6); border-radius: var(--hhb-r, 12px); background: var(--hhb-bg, #fff); }
.hhb--usp .hhb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; padding: 18px 24px 16px; border-bottom: 1px solid var(--hhb-bc, #e8e2d6); background: var(--hhb-head-bg, #faf7f1); }
.hhb-eyebrow { display: block; margin-bottom: 4px; color: var(--hhb-accent); font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.hhb--usp .hhb-title { font-family: Merriweather, Georgia, serif; font-size: 1.25em; font-weight: 700; line-height: 1.35; text-wrap: balance; }
.hhb-badge { padding: 4px 10px; border: 1px solid var(--hhb-accent); border-radius: 99px; color: var(--hhb-accent); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.hhb--usp .hhb-body { padding: var(--hhb-pad, 18px 24px 20px); }
.hhb--usp .hhb-list .hhl--check, .hhb--usp .hhb-list .hhl--dash { grid-template-columns: repeat(var(--hhl-cols, 2), minmax(0, 1fr)); }
.hhb--usp .hhb-foot { padding: 12px 24px; border-top: 1px solid var(--hhb-bc, #e8e2d6); }
.hhb-link { color: var(--hhb-link-color, var(--hhb-accent)) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; }
.hhb-link:hover { color: var(--hhb-link-color-h, var(--hhb-title, #3e2f26)) !important; text-decoration: underline !important; }

@media (max-width: 767px) {
	.hhb--usp .hhb-head, .hhb--usp .hhb-foot { padding-left: 18px; padding-right: 18px; }
	.hhb--usp .hhb-body { padding: var(--hhb-pad, 16px 18px 18px); }
	.hhb--usp .hhb-list .hhl--check, .hhb--usp .hhb-list .hhl--dash { grid-template-columns: repeat(var(--hhl-cols, 1), minmax(0, 1fr)); }
	.hhb--stats { grid-template-columns: 1fr; }
	.hhb-stat { padding-right: 0; text-align: var(--hhb-stat-align, center); } /* điện thoại: mặc định căn giữa */
	.hhb-stat + .hhb-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--hhb-bc, #e8e2d6); }
	.hhb--cta .hhb-btn { width: var(--hhb-btn-w-m, 100%); text-align: center; }
	.hhb--tip.has-icon { padding-left: var(--hhb-pad-l-m, 18px); }
	.hhb--tip .hhb-ic { position: static; width: 28px; height: 28px; }
	.hhb--tip .hhb-ic :is(svg, i) { width: 16px; height: 16px; font-size: 14px; }
	.hhb--quote { padding: var(--hhb-pad, 6px 0 6px 44px); }
	.hhb--quote::before { font-size: 64px; }
}