/* Hạ Long Base — CSS bổ sung cho theme.json. Dùng chung cho site và trình soạn thảo. */

:root {
	--hb-radius: 24px;
	--hb-lime-hover: #CBEA4A;
	--hb-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Khoảng cách: các section full-width nối liền nhau. */
.hb-main > .alignfull,
.hb-main .wp-block-post-content > .alignfull,
.hb-site-header,
footer.wp-block-template-part {
	margin-block-start: 0 !important;
}
.hb-main { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ----- Header ----- */
.hb-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .hb-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .hb-site-header { top: 0; } }

.hb-topbar p { margin: 0; }
.hb-topbar a { color: var(--wp--preset--color--lime); white-space: nowrap; }

.hb-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
	backdrop-filter: saturate(1.4) blur(8px);
}
.hb-brand { margin: 0; flex: none; line-height: 0; }
/* Logo SVG có lề trong 20/880, kéo sát mép trái cho thẳng hàng nội dung. */
.hb-brand img { display: block; height: 46px; width: auto; margin-left: -4px; }

.hb-nav .wp-block-navigation-item__content { padding: 0.25rem 0; }
.hb-nav .current-menu-item > .wp-block-navigation-item__content,
.hb-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.hb-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); text-decoration: none; }
.hb-header__cta .wp-block-button__link { padding: 0.65rem 1.4rem; background: var(--wp--preset--color--lime); color: var(--wp--preset--color--primary); }
.hb-header__cta .wp-block-button__link:hover { background: var(--hb-lime-hover); }

/* Màn vừa (có thêm nút Tài khoản): ẩn CTA "Nhận tư vấn" (đã có nút Zalo/Gọi nổi), thu khoảng cách menu. */
@media (max-width: 1100px) {
	.hb-header__cta { display: none !important; }
	.hb-header .hb-nav, .hb-header__right { gap: 1.25rem !important; }
}

/* Màn hẹp: ẩn nút CTA (đã có nút Zalo/Gọi nổi), menu chuyển thành nút hamburger. */
@media (max-width: 600px) {
	.hb-header__cta { display: none !important; }
	.hb-brand img { height: 38px; }
	.hb-topbar p { font-size: 0.8125rem; }
	.hb-hide-sm { display: none; }
	/* Chừa chỗ cho nút Zalo/Gọi nổi. */
	.hb-footer { padding-bottom: 150px !important; }
}

/* ----- Chữ nhấn, nhãn ----- */
/* Chữ nhấn: vệt lime như bút dạ quang. */
.hb-grad {
	background: linear-gradient(transparent 60%, var(--wp--preset--color--lime) 60%, var(--wp--preset--color--lime) 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-inline: 0.08em;
}
.hb-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: fit-content;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}
.has-text-align-center.hb-eyebrow { margin-inline: auto !important; }
.hb-eyebrow::before {
	content: "";
	width: 22px;
	height: 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--sky);
	box-shadow: 0 0 0 4px rgba(24, 184, 166, .16);
}
.hb-hero h1 { margin-block: 0.25rem 0; }
.hb-hero > .has-large-font-size { color: var(--wp--preset--color--body); max-width: 680px; margin-inline: auto !important; }
.hb-hero .wp-block-column > .has-large-font-size { color: var(--wp--preset--color--body); max-width: 600px; }
.hb-tagline { margin-top: var(--wp--preset--spacing--50) !important; color: var(--wp--preset--color--muted); font-weight: 600; letter-spacing: 0.01em; }
.hb-hero__art img { width: 100%; height: auto; display: block; }
@media (max-width: 781px) { .hb-hero__art { max-width: 360px; margin-inline: auto; } }
.hb-narrow { max-width: 640px; margin-inline: auto !important; }
.hb-link-strong { margin: 0; font-weight: 600; }

/* ----- Nút ----- */
.wp-block-button__link { transition: background-color .2s var(--hb-ease), transform .2s var(--hb-ease), box-shadow .2s var(--hb-ease); }
.wp-block-button:not(.is-style-hb-ghost):not(.hb-tab) .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(7, 63, 58, .2); text-decoration: none; }
.hb-btn-arrow .wp-block-button__link::after {
	content: "→";
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 0.6rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	font-size: 0.85rem;
}
.is-style-hb-ghost .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1.5px #BFE0D9;
}
.is-style-hb-ghost .wp-block-button__link:hover { background: var(--wp--preset--color--ice); color: var(--wp--preset--color--primary-dark); text-decoration: none; }
.is-style-hb-lime .wp-block-button__link { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--primary); }
.is-style-hb-lime .wp-block-button__link:hover { background: var(--hb-lime-hover); color: var(--wp--preset--color--primary); }
.is-style-hb-lime.hb-btn-arrow .wp-block-button__link::after { background: rgba(7, 63, 58, .1); }
.hb-btn-sm .wp-block-button__link { padding: 0.45rem 1rem; font-size: var(--wp--preset--font-size--small); }

/* ----- Lưới: dùng Grid của WordPress (số cột chỉnh theo Máy tính / Máy tính bảng / Điện thoại trong thanh bên). ----- */
.hb-grid > * { margin: 0 !important; }
.hb-grid + .hb-grid { margin-top: var(--wp--style--block-gap, 1.25rem) !important; }
.hb-grid--footer { gap: 2rem !important; }

/* Danh sách bài viết (post-template là <ul>). */
ul.hb-grid { list-style: none; padding: 0; }

/* ----- Thẻ ----- */
.is-style-hb-card {
	border-radius: var(--hb-radius);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	position: relative;
	overflow: hidden;
}
.is-style-hb-card > * { margin-block: 0; }
.is-style-hb-card > * + * { margin-block-start: 0.75rem; }

.hb-section-head { margin-bottom: var(--wp--preset--spacing--50); }
.hb-section-head h2, .hb-section-head p { margin: 0; }

/* Lĩnh vực */
.hb-sector { display: flex; flex-direction: column; transition: transform .25s var(--hb-ease), box-shadow .25s var(--hb-ease); }
.hb-sector:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--card); }
.hb-sector h3 { margin-top: 0.25rem; }
.hb-sector__count { font-weight: 600; margin: 0; }
.hb-sector__img { margin-top: auto !important; padding-top: 1.25rem; }
.hb-sector__img img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 14px; display: block; }
.hb-grid--3 .hb-sector__img img { aspect-ratio: 16 / 8; }
.hb-arrow { margin: 0; }
.hb-arrow a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-size: 1.25rem;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(7, 63, 58, .1);
	text-decoration: none !important;
}
/* Cả thẻ bấm được. */
.hb-arrow a::after { content: ""; position: absolute; inset: 0; }

.is-style-hb-chip {
	margin: 0;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	font-weight: 500;
	box-shadow: 0 1px 2px rgba(7, 63, 58, .06);
}
.hb-chips { position: relative; z-index: 1; }

/* Tab dịch vụ */
.hb-tabs {
	width: fit-content;
	margin: var(--wp--preset--spacing--50) auto var(--wp--preset--spacing--60) !important;
	padding: 0.35rem;
	gap: 0.25rem !important;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}
.hb-tab .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--muted);
	padding: 0.55rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}
.hb-tab .wp-block-button__link:hover { background: rgba(255, 255, 255, .7); color: var(--wp--preset--color--ink); text-decoration: none; }
.hb-tab.is-active .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 3px rgba(7, 63, 58, .12);
}
.hb-tab-panel + .hb-tab-panel { margin-top: var(--wp--preset--spacing--60); }
.hb-tabs-ready .hb-tab-panel { margin-top: 0; }
.hb-tab-panel[hidden] { display: none !important; }

/* Thẻ dịch vụ */
.hb-service {
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-direction: column;
	transition: box-shadow .25s var(--hb-ease), transform .25s var(--hb-ease);
}
.hb-service:hover { box-shadow: var(--wp--preset--shadow--card); transform: translateY(-2px); }
.hb-service > * + * { margin-block-start: 0; }
.hb-service__media { position: relative; }
.hb-service__media .wp-block-image { margin: 0; }
.hb-service__media img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
.hb-badge {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	z-index: 1;
	margin: 0;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: #fff;
	font-size: 0.75rem;
	font-weight: 600;
}
.hb-service__body { padding: clamp(1.25rem, 3vw, 1.5rem); display: flex; flex-direction: column; flex: 1; }
.hb-service__body > * { margin-block: 0; }
.hb-service__body > * + * { margin-block-start: 0.5rem; }
.hb-service__cat { font-weight: 600; }
.hb-service__foot { margin-top: auto !important; padding-top: 1rem; align-items: center; }

/* Lý do */
.hb-reason__num {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	margin-bottom: 0.5rem !important;
}

/* ----- CTA + form ----- */
.hb-cta { background-image: radial-gradient(45% 80% at 100% 0%, rgba(24, 184, 166, .28) 0%, rgba(7, 63, 58, 0) 70%), radial-gradient(35% 60% at 0% 100%, rgba(217, 243, 107, .14) 0%, rgba(7, 63, 58, 0) 70%); }
.hb-cta h2 { color: #fff; }
.hb-cta p { color: rgba(255, 255, 255, .92); }
.hb-lead { max-width: 560px; margin: var(--wp--preset--spacing--50) auto 0; }
.hb-lead__row {
	display: flex;
	gap: 0.5rem;
	padding: 0.4rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(7, 63, 58, .18);
}
.hb-lead__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0.7rem 1rem;
	font: inherit;
	color: var(--wp--preset--color--ink);
}
.hb-lead__input:focus { outline: none; }
.hb-lead__row:focus-within { outline: 3px solid var(--wp--preset--color--sky); outline-offset: 2px; }
.hb-lead__btn {
	border: 0;
	border-radius: 999px;
	padding: 0.7rem 1.4rem;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--primary);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}
.hb-lead__btn:hover { background: var(--hb-lime-hover); }
.hb-lead__consent {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin-top: 0.9rem;
	font-size: 0.8125rem;
	text-align: left;
	color: rgba(255, 255, 255, .9);
}
.hb-lead__consent input { margin-top: 0.2rem; accent-color: var(--wp--preset--color--lime); }
.hb-lead__consent a { color: #fff; text-decoration: underline; }
.hb-lead__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hb-lead__msg {
	margin-top: 0.9rem;
	padding: 0.6rem 1rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, .15);
	color: #fff !important;
	font-weight: 500;
}
.hb-lead__msg--ok { background: rgba(24, 184, 166, .35); }
/* Form đặt ngoài nền xanh (vd. trong bài viết). */
:not(.hb-cta) > .hb-lead .hb-lead__row { box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--border); }
:not(.hb-cta) > .hb-lead .hb-lead__consent { color: var(--wp--preset--color--muted); }
:not(.hb-cta) > .hb-lead .hb-lead__consent a { color: var(--wp--preset--color--primary); }
:not(.hb-cta) > .hb-lead .hb-lead__btn { background: var(--wp--preset--color--primary); color: #fff; }
:not(.hb-cta) > .hb-lead .hb-lead__btn:hover { background: var(--wp--preset--color--green); }
@media (max-width: 480px) {
	.hb-lead__row { flex-direction: column; border-radius: 20px; }
	.hb-lead__btn { width: 100%; }
}

/* ----- Footer ----- */
.hb-footer__title {
	font-size: 0.8125rem !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 0.75rem !important;
}
.hb-footer p { margin: 0 0 0.4rem; font-size: var(--wp--preset--font-size--small); }
.hb-footer__links { list-style: none; padding: 0; margin: 0; font-size: var(--wp--preset--font-size--small); }
.hb-footer__links li + li { margin-top: 0.45rem; }
.hb-footer { color: rgba(255, 255, 255, .82); }
.hb-footer__title { color: var(--wp--preset--color--lime) !important; }
.hb-footer a { color: rgba(255, 255, 255, .82); }
.hb-footer a:hover { color: var(--wp--preset--color--lime); }
.hb-footer__logo { margin-bottom: 1.25rem !important; line-height: 0; }
.hb-footer__logo img { height: 44px; width: auto; margin-left: -4px; }
.hb-footer .wp-block-separator { color: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .16); }
.hb-footer .hb-footer__copy { color: rgba(255, 255, 255, .6); }

/* ----- Bài viết ----- */
.hb-post-card { padding: 0; border: 1px solid var(--wp--preset--color--border); display: flex; flex-direction: column; }
.hb-post-card > * + * { margin-block-start: 0; }
.hb-post-card .wp-block-post-featured-image { margin: 0; }
.hb-post-card .wp-block-post-featured-image img { border-radius: 0; }
.hb-post-card__body { padding: 1.25rem 1.4rem 1.4rem; }
.hb-post-card__body > * { margin-block: 0; }
.hb-post-card__body > * + * { margin-block-start: 0.5rem; }
.hb-post-card .wp-block-post-excerpt__excerpt { margin: 0; }
.single .wp-block-post-content :where(p, li, td) > a { text-decoration: underline; text-underline-offset: 2px; }
.wp-block-button__link, .hb-link-strong a, .hb-footer a, .hb-topbar a { text-decoration: none !important; }
.hb-link-strong a:hover, .hb-footer a:hover { text-decoration: underline !important; }
.wp-block-post-content img { border-radius: 14px; }

/* ----- Nút Zalo / Gọi nổi ----- */
.hb-float {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.hb-float__btn {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: #fff !important;
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none !important;
	/* Viền trắng để không chìm khi đè lên dải nền xanh. */
	box-shadow: 0 0 0 3px #fff, 0 8px 24px rgba(7, 63, 58, .25);
	transition: transform .2s var(--hb-ease);
}
.hb-float__btn:hover { transform: scale(1.06); }
.hb-float__btn--zalo { background: var(--wp--preset--color--primary); }
.hb-float__btn--call { background: var(--wp--preset--color--danger); }

/* ----- Chung ----- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Bảng giá sản phẩm [hb_pricing] */
.hb-pricing { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-block: var(--wp--preset--spacing--50); }
.hb-pricing__plan { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border: 1px solid var(--wp--preset--color--border); border-radius: 20px; background: var(--wp--preset--color--white); }
.hb-pricing__plan > * { margin: 0; }
.hb-pricing__note { align-self: flex-start; padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--wp--preset--color--ice); color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.hb-pricing__name { font-size: var(--wp--preset--font-size--medium); }
.hb-pricing__price { font-size: 1.75rem; font-weight: 700; color: var(--wp--preset--color--ink); }
.hb-pricing__period { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.hb-pricing__btn { margin-top: auto; padding: 0.75rem 1rem; border-radius: 999px; background: var(--wp--preset--color--primary); color: #fff; font-weight: 600; text-align: center; text-decoration: none; }
.hb-pricing__btn:hover { background: var(--wp--preset--color--green); color: #fff; }
.hb-pricing__demo { grid-column: 1 / -1; margin: 0; text-align: center; }
.hb-pricing__btn--ghost { display: inline-block; border: 1.5px solid var(--wp--preset--color--primary); background: transparent; color: var(--wp--preset--color--primary); }
.hb-pricing__btn--ghost:hover { background: var(--wp--preset--color--ice); color: var(--wp--preset--color--primary); }
.hb-pricing--empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-radius: 20px; background: var(--wp--preset--color--surface); }

/* Nút Đăng nhập / Tài khoản (webapp) ở đầu trang — giữ cả trên điện thoại. */
.hb-header__account .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; border-width: 1.5px; white-space: nowrap; }
.hb-header__account .hb-avatar { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-left: -0.5rem; border-radius: 999px; background: var(--wp--preset--color--ice); color: var(--wp--preset--color--primary); font-size: 0.8rem; font-weight: 700; }