/*
 * Tan Van Xuan - design tokens + base reset.
 * Values ported from demo/README.md ("Quy uoc style"). Component markup keeps
 * inline styles for layout (matches the reference design 1:1) but resolves
 * colors/fonts through these custom properties instead of raw hex/values.
 */

:root {
	/* Colors */
	--color-dark: #12241a;      /* nen toi, footer, header phu */
	--color-dark-2: #0e2417;    /* hero */
	--color-brand: #1f7a3c;     /* nut chinh, link */
	--color-brand-hover: #14572c;
	--color-brand-light: #3fa34d; /* nut tren nen toi */
	--color-green-100: #6cc47c;
	--color-green-200: #a7d4b3;
	--color-green-300: #c4d4c9;
	--color-accent-brown: #8a6a3a;
	--color-bg: #fff;
	--color-bg-soft: #f7f6f1;
	--color-bg-soft-2: #f4f2ec;
	--color-border: #e6e4dc;
	--color-border-2: #eeece5;
	--color-text: #12241a;
	--color-text-soft: #41514a;
	--color-text-soft-2: #5c6a60;
	--color-text-soft-3: #6d7a70;

	/* Typography */
	--font-body: 'Be Vietnam Pro', system-ui, sans-serif;
	--font-serif: 'Noto Serif', serif;

	/* Shadows */
	--shadow-dropdown: 0 18px 44px rgba(18, 36, 26, .14);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--color-bg);
	font-family: var(--font-body);
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--color-brand);
	text-decoration: none;
}

a:hover {
	color: var(--color-brand-hover);
}

img {
	max-width: 100%;
}

button {
	font-family: inherit;
}

/* Dropdown: open on hover, stays open while pointer is over the panel. */
.nav-drop {
	position: relative;
	display: inline-flex;
	padding-bottom: 14px;
	margin-bottom: -14px;
}

.nav-drop > .drop-panel {
	display: none;
}

.nav-drop:hover > .drop-panel,
.nav-drop:focus-within > .drop-panel {
	display: flex;
}

/* Dropdown caret (inline SVG in header.php): flips up and takes the brand
   color while its menu is open. */
.tvx-caret {
	flex: none;
	margin-top: 1px;
	opacity: .65;
	transition: transform .2s ease, opacity .2s ease, color .2s ease;
}

.nav-drop:hover .tvx-caret,
.nav-drop:focus-within .tvx-caret {
	color: var(--color-brand);
	opacity: 1;
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.tvx-caret {
		transition: none;
	}
}

/* Category tabs on the "Danh muc day du" catalog page. */
.tvx-cat-tab.is-active {
	background: var(--color-dark);
	border-color: var(--color-dark);
	color: #fff;
}

/*
 * Contact page (page-lien-he.php): restyles the site's real Contact Form 7
 * form ("Lien he trai", form id 594) to match the redesign's card look from
 * demo/lien-he.html. That form predates this theme and carries its own old
 * markup/classes (callbackform, form-popup__input, custom-buttonf...) with
 * no matching CSS anywhere in the new theme, so it was rendering as a bare
 * unstyled browser form. Only visual styling here — the form's fields,
 * wording and validation are untouched.
 */
.callbackform {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 34px;
	background: var(--color-bg-soft-2);
	border: 1px solid var(--color-border);
	border-radius: 12px;
}

.callbackform .h2-baslik-popup {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--color-text);
}

.callbackform .paragraf-popup {
	margin: 0 0 4px;
	font-size: 14.5px;
	color: var(--color-text-soft-2);
}

.callbackform .h2-baslik-popup br,
.callbackform .paragraf-popup br {
	display: none;
}

.callbackform .form-popup {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.callbackform .form-popup__grup p {
	margin: 0;
}

.callbackform .form-popup__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
}

.callbackform .form-popup__row .form-popup__grup {
	margin: 0;
}

.callbackform .form-popup__label {
	display: block;
	margin-bottom: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-text);
}

.callbackform .form-popup__input,
.callbackform .wpcf7-quiz,
.callbackform select.form-popup__input {
	width: 100%;
	padding: 14px 15px;
	background: var(--color-bg);
	border: 1px solid #d9ded8;
	border-radius: 7px;
	font-family: inherit;
	font-size: 15px;
	color: var(--color-text);
}

.callbackform textarea.form-popup__input {
	min-height: 60px;
	resize: vertical;
}

/* "Ban dang o buoc nao" — CF7 radio field styled as pill buttons. */
.callbackform .wpcf7-form-control-wrap[data-name="buoc"] .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.callbackform .wpcf7-form-control-wrap[data-name="buoc"] .wpcf7-list-item {
	margin: 0;
}

.callbackform .wpcf7-form-control-wrap[data-name="buoc"] input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.callbackform .wpcf7-form-control-wrap[data-name="buoc"] .wpcf7-list-item-label {
	display: inline-flex;
	padding: 9px 14px;
	background: var(--color-bg);
	border: 1px solid #d9ded8;
	border-radius: 99px;
	font-size: 13.5px;
	color: var(--color-text);
	cursor: pointer;
}

.callbackform .wpcf7-form-control-wrap[data-name="buoc"] input[type="radio"]:checked + .wpcf7-list-item-label {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: #fff;
	font-weight: 600;
}

.callbackform .wpcf7-form-control-wrap[data-name="buoc"] input[type="radio"]:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

.callbackform .form-popup__input:focus,
.callbackform .wpcf7-quiz:focus {
	outline: none;
	border-color: var(--color-brand);
}

.callbackform .wpcf7-form-control-wrap[data-name^="quiz"] label {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.callbackform .wpcf7-quiz-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-text);
}

.callbackform .custom-buttonf {
	width: 100%;
	padding: 17px;
	background: var(--color-brand);
	color: #fff;
	border: none;
	border-radius: 7px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.callbackform .custom-buttonf:hover {
	background: var(--color-brand-hover);
}

.callbackform .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	color: #a83232;
}

.callbackform .wpcf7-response-output {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	border-radius: 7px;
	font-size: 14px;
}

.callbackform .wpcf7-mail-sent-ok {
	background: #eaf3ec;
	border-color: var(--color-brand);
	color: var(--color-brand-hover);
}

.callbackform .wpcf7-validation-errors,
.callbackform .wpcf7-mail-sent-ng {
	background: #fbeceb;
	border-color: #d94a4a;
	color: #a83232;
}

/* Product photo gallery (zoom + thumbnail slider) on single-product.php. */
.tvx-gallery-main {
	position: relative;
	display: block;
	cursor: zoom-in;
}

.tvx-gallery-zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(18, 36, 26, .55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	pointer-events: none;
}

.tvx-gallery-thumbs {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 2px;
}

.tvx-gallery-thumbs::-webkit-scrollbar {
	height: 5px;
}

.tvx-gallery-thumbs::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 99px;
}

.tvx-gallery-thumb {
	flex: 0 0 76px;
	width: 76px;
	height: 76px;
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
	border: 2px solid transparent;
	cursor: pointer;
	scroll-snap-align: start;
	background: var(--color-bg-soft-2);
}

.tvx-gallery-thumb.is-active {
	border-color: var(--color-brand);
}

.tvx-gallery-arrow {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-text-soft);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

/* "Thong tin san pham" label on single-product.php. */
.tvx-info-tab {
	background: var(--color-bg-soft-2);
	color: var(--color-text-soft-2);
}

.tvx-info-tab.is-active {
	background: var(--color-brand);
	color: #fff;
}

/*
 * Preloader: full-screen logo + spinning ring, slides away once the page has
 * loaded (main.js adds .tvx-page-loaded to <body>). Ported from the old
 * "blue" theme (.preloader in assets/css/style68b3.css).
 */
.tvx-preloader {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
	transition: top 1s cubic-bezier(.86, 0, .09, 1), opacity .5s ease 1s, visibility 0s linear 1.5s;
}

.tvx-preloader figure {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 140px;
	margin: 0;
	border: 1px solid rgba(0, 0, 0, .164);
	border-radius: 50%;
	animation: tvx-fadeup .3s;
}

.tvx-preloader figure::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
	border-top-color: var(--color-brand);
	border-radius: 50%;
	animation: tvx-rotate .6s linear infinite;
}

.tvx-preloader img {
	display: inline-block;
	height: 90px;
	width: auto;
}

.tvx-page-loaded .tvx-preloader {
	top: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.tvx-page-loaded .tvx-preloader figure::after {
	animation-play-state: paused;
}

@keyframes tvx-fadeup {
	0% { transform: translateY(20px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes tvx-rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/*
 * Floating contact buttons (Facebook, Messenger, Zalo, 2 phone lines), fixed
 * bottom-left with a pulsing ring. Ported from the old "blue" theme's
 * #button-contact-vr (footer.php). Hidden on small screens like the original.
 */
.tvx-contact-vr {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99998;
}

.tvx-contact-vr-item {
	position: relative;
	display: block;
	width: 90px;
	height: 90px;
	margin-top: -5px;
	--tvx-vr-color: #e60808;
	--tvx-vr-fill: rgb(230 8 8 / .7);
}

.tvx-contact-vr-circle-fill {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 65px;
	height: 65px;
	border: 2px solid transparent;
	border-radius: 50%;
	background-color: var(--tvx-vr-fill);
	box-shadow: 0 0 0 0 var(--tvx-vr-color);
	transform-origin: 50% 50%;
	animation: tvx-vr-zoom 1.3s infinite;
}

.tvx-contact-vr-icon {
	position: absolute;
	top: 25px;
	left: 25px;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--tvx-vr-color);
	animation: tvx-vr-shake 1s infinite ease-in-out;
}

.tvx-contact-vr-icon a {
	display: block;
	width: 100%;
	height: 100%;
}

.tvx-contact-vr-icon img {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 27px;
	max-height: 25px;
	transform: translate(-50%, -50%);
}

.tvx-contact-vr-facebook {
	--tvx-vr-color: #1877f2;
	--tvx-vr-fill: rgb(24 119 242 / .7);
}

.tvx-contact-vr-facebook .tvx-contact-vr-icon img {
	max-width: 35px;
	max-height: 35px;
}

.tvx-contact-vr-zalo {
	--tvx-vr-color: #2196f3;
	--tvx-vr-fill: rgb(33 150 243 / .7);
}

.tvx-contact-vr-phone1 {
	--tvx-vr-color: #81d742;
	--tvx-vr-fill: rgb(129 215 66 / .7);
}

.tvx-contact-vr-phone2 {
	--tvx-vr-color: #1e73be;
	--tvx-vr-fill: rgb(30 115 190 / .7);
}

@keyframes tvx-vr-shake {
	0%, 50%, 100% { transform: rotate(0) scale(1) skew(1deg); }
	10%, 30% { transform: rotate(-25deg) scale(1) skew(1deg); }
	20%, 40% { transform: rotate(25deg) scale(1) skew(1deg); }
}

@keyframes tvx-vr-zoom {
	0% { transform: scale(.9); }
	70% { transform: scale(1); box-shadow: 0 0 0 15px transparent; }
	100% { transform: scale(.9); box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 736px) {
	.tvx-contact-vr {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tvx-preloader figure::after,
	.tvx-contact-vr-circle-fill,
	.tvx-contact-vr-icon {
		animation: none;
	}
}

/*
 * Mobile bottom contact bar (Menu / Lien he / Goi ngay / Messenger / Zalo),
 * shown at <= 850px. Ported from the old "blue" theme's
 * #phongvt-contact-footer-outer (footer.php).
 */
.tvx-contact-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 100;
	display: none;
	width: 100%;
}

.tvx-contact-bar-inner {
	position: relative;
	display: flex;
	max-width: 1200px;
	margin: auto;
	padding-top: 5px;
	border-bottom: 15px solid #fff;
}

.tvx-contact-bar-inner::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: 100%;
	height: 65px;
	background: url(../images/bar-bg.svg) center top / 100% no-repeat;
	pointer-events: none;
}

.tvx-contact-bar-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 25%;
	padding: 11px 0 0;
	border: 0;
	background: none;
	color: #313131;
	font: inherit;
	text-align: center;
	cursor: pointer;
}

.tvx-contact-bar-btn > img {
	width: 30px;
	height: 30px;
}

.tvx-contact-bar-label {
	display: block;
	max-width: 100%;
	padding: 0 2px;
	overflow: hidden;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tvx-contact-bar-center .tvx-contact-bar-label {
	position: absolute;
	left: 50%;
	bottom: 2px;
	transform: translateX(-50%);
}

.tvx-contact-bar-center .tvx-contact-bar-label > span {
	display: inline-block;
	padding: 0 8px;
	border-radius: 30px;
	background-image: linear-gradient(92.83deg, #0e68c8 0, #02a4a5 100%);
	color: #fff;
}

.tvx-contact-bar-center-icon {
	position: absolute;
	top: -28px;
	left: 50%;
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-image: linear-gradient(92.83deg, #f90000 0, #950099 100%);
	box-shadow: rgb(0 0 0 / 15%) 0 -3px 10px 0;
	transform: translateX(-50%);
}

.tvx-contact-bar-center-icon img {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 20px;
	height: auto;
	transform: translate(-50%, -50%);
}

.tvx-contact-bar-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	box-shadow: 0 0 0 0 #0e68c8;
	transform: translate(-50%, -50%);
	animation: tvx-bar-pulse 1.3s infinite;
}

@keyframes tvx-bar-pulse {
	70% { box-shadow: 0 0 0 15px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/*
 * Responsive header: below 1200px the desktop nav no longer fits on one line,
 * so it's swapped for a hamburger that opens .tvx-side-menu. Keep the
 * breakpoint in sync with the matchMedia call in main.js.
 */
.tvx-header-nav {
	display: flex;
}

.tvx-header-burger {
	display: none;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 11px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: var(--color-bg);
	cursor: pointer;
}

.tvx-header-burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--color-text);
	transition: transform .3s, opacity .3s;
}

.tvx-menu-open .tvx-header-burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.tvx-menu-open .tvx-header-burger span:nth-child(2) {
	opacity: 0;
}

.tvx-menu-open .tvx-header-burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* 1200-1279px: with the "Tin tuc" item the nav only fits on one line if
   spacing and type are tightened slightly. */
@media (min-width: 1200px) and (max-width: 1279px) {
	.tvx-header-nav {
		gap: 8px 12px !important;
		font-size: 14.5px !important;
	}

	.tvx-header-main {
		gap: 18px !important;
	}

	.tvx-header-cta {
		padding: 11px 16px !important;
	}
}

@media (max-width: 1199px) {
	.tvx-header-nav {
		display: none;
	}

	.tvx-header-burger {
		display: flex;
	}

	.tvx-header-main {
		gap: 12px !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
}

@media (max-width: 600px) {
	.tvx-topbar {
		justify-content: center !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}

	.tvx-topbar-address {
		display: none;
	}

	.tvx-header-logo img {
		height: 40px !important;
	}

	.tvx-header-main {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.tvx-header-cta {
		padding: 10px 14px !important;
		font-size: 13px !important;
	}
}

/*
 * Mobile side menu (old theme's .side-widget), opened by the header hamburger
 * and the bottom bar's "Menu" button.
 */
.tvx-side-menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	width: 340px;
	max-width: 86vw;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--color-bg);
	box-shadow: 0 0 30px rgba(18, 36, 26, .2);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .35s;
}

.tvx-side-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(18, 36, 26, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s, visibility 0s linear .35s;
}

.tvx-menu-open {
	overflow: hidden;
}

.tvx-menu-open .tvx-side-menu {
	transform: none;
	visibility: visible;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.tvx-menu-open .tvx-side-menu-overlay {
	opacity: 1;
	visibility: visible;
	transition: opacity .35s;
}

.tvx-side-menu-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 14px 20px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
}

.tvx-side-menu-head img {
	display: block;
	height: 40px;
	width: auto;
}

.tvx-side-menu-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--color-bg-soft-2);
	color: var(--color-text);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.tvx-side-menu-nav {
	display: flex;
	flex-direction: column;
}

.tvx-side-menu-nav > a,
.tvx-side-menu-nav summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	padding: 0 20px;
	border-bottom: 1px solid var(--color-border-2);
	color: var(--color-text);
	font-size: 15.5px;
	font-weight: 600;
}

.tvx-side-menu-nav summary {
	list-style: none;
	cursor: pointer;
}

.tvx-side-menu-nav summary::-webkit-details-marker {
	display: none;
}

.tvx-side-menu-nav summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-3px);
	transition: transform .25s;
}

.tvx-side-menu-nav details[open] > summary {
	color: var(--color-brand);
}

.tvx-side-menu-nav details[open] > summary::after {
	transform: rotate(-135deg) translateY(-3px);
}

.tvx-side-menu-nav details > div {
	display: flex;
	flex-direction: column;
	padding: 6px 0;
	border-bottom: 1px solid var(--color-border-2);
	background: var(--color-bg-soft);
}

.tvx-side-menu-nav details a {
	display: block;
	padding: 11px 20px 11px 32px;
	color: var(--color-text-soft);
	font-size: 14.5px;
}

.tvx-side-menu-nav a.is-current {
	color: var(--color-brand);
	font-weight: 700;
}

.tvx-side-menu-cta {
	display: block;
	margin: 20px 20px 0;
	padding: 14px;
	border-radius: 8px;
	background: var(--color-brand);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.tvx-side-menu-foot {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
	padding: 20px 20px 28px;
	color: var(--color-text-soft-3);
	font-size: 13.5px;
	line-height: 1.5;
}

.tvx-side-menu-foot a {
	color: var(--color-brand);
	font-size: 15px;
	font-weight: 700;
}

@media (max-width: 850px) {
	.tvx-contact-bar {
		display: block;
	}

	/* Keep the footer's last line clear of the fixed bar. */
	body {
		padding-bottom: 70px;
	}

	/* The floating buttons duplicate the bar and would overlap it. */
	.tvx-contact-vr {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tvx-contact-bar-pulse {
		animation: none;
	}

	.tvx-side-menu,
	.tvx-side-menu-overlay,
	.tvx-header-burger span {
		transition: none !important;
	}
}

/*
 * Post archives (archive.php): breadcrumb, page header with category tabs,
 * 4/3/2/1-column post grid and numbered pagination.
 */
.tvx-crumbs {
	padding: 14px 5vw;
	background: var(--color-bg-soft-2);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-soft-2);
	font-size: 13.5px;
}

.tvx-crumbs a {
	color: var(--color-text-soft-2);
}

.tvx-crumbs a:hover {
	color: var(--color-brand);
}

.tvx-crumbs .breadcrumb_last {
	color: var(--color-text);
	font-weight: 600;
}

.tvx-archive-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 56px 5vw 40px;
	background: var(--color-bg-soft);
	border-bottom: 1px solid var(--color-border);
}

.tvx-archive-eyebrow {
	color: var(--color-brand);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tvx-archive-title {
	margin: 0;
	max-width: 880px;
	color: var(--color-text);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.02em;
}

.tvx-archive-desc {
	max-width: 720px;
	color: var(--color-text-soft);
	font-size: 17px;
	line-height: 1.65;
}

.tvx-archive-desc p {
	margin: 0;
}

.tvx-archive-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--color-text-soft-3);
	font-size: 14px;
}

.tvx-archive-tabs {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	overflow-x: auto;
	scrollbar-width: none;
}

.tvx-archive-tabs::-webkit-scrollbar {
	display: none;
}

.tvx-archive-tabs a {
	flex: 0 0 auto;
	padding: 10px 18px;
	border: 1px solid var(--color-border);
	border-radius: 99px;
	background: var(--color-bg);
	color: var(--color-text-soft);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: border-color .2s, color .2s, background .2s;
}

.tvx-archive-tabs a:hover {
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.tvx-archive-tabs a.is-active {
	border-color: var(--color-brand);
	background: var(--color-brand);
	color: #fff;
}

.tvx-archive-body {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 56px 5vw 72px;
}

.tvx-post-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 24px;
}

.tvx-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--color-bg);
	transition: box-shadow .25s, transform .25s, border-color .25s;
}

.tvx-post-card:hover {
	border-color: transparent;
	box-shadow: 0 16px 36px rgba(18, 36, 26, .12);
	transform: translateY(-3px);
}

.tvx-post-card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-bg-soft-2);
}

.tvx-post-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s;
}

.tvx-post-card:hover .tvx-post-card-img {
	transform: scale(1.05);
}

.tvx-post-card-noimg {
	background: repeating-linear-gradient(135deg, #e9eee9 0 10px, #e2e8e2 10px 20px);
}

.tvx-post-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 20px;
}

.tvx-post-card-cat {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 99px;
	background: #eaf3ec;
	color: var(--color-brand);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tvx-post-card-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tvx-post-card-title a {
	color: var(--color-text);
}

/* Whole card is clickable through the title link (one link per card for
   crawlers/screen readers; the image link is aria-hidden). */
.tvx-post-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tvx-post-card:hover .tvx-post-card-title a {
	color: var(--color-brand);
}

.tvx-post-card-excerpt {
	margin: 0;
	color: var(--color-text-soft-2);
	font-size: 14.5px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tvx-post-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--color-border-2);
	color: var(--color-text-soft-3);
	font-size: 13px;
}

.tvx-post-card-more {
	color: var(--color-brand);
	font-weight: 700;
}

.tvx-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
}

.tvx-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background: var(--color-bg);
	color: var(--color-text);
	font-size: 15px;
	font-weight: 600;
	transition: border-color .2s, color .2s, background .2s;
}

.tvx-pager a.page-numbers:hover {
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.tvx-pager .page-numbers.current {
	border-color: var(--color-brand);
	background: var(--color-brand);
	color: #fff;
}

.tvx-pager .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--color-text-soft-3);
}

.tvx-archive-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 48px 0;
	color: var(--color-text-soft-2);
	font-size: 16px;
	text-align: center;
}

.tvx-archive-empty p {
	margin: 0;
}

.tvx-archive-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	margin: 0 5vw 72px;
	padding: 32px 36px;
	border-radius: 14px;
	background: var(--color-dark);
	color: var(--color-green-300);
}

.tvx-archive-cta div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 680px;
}

.tvx-archive-cta strong {
	color: #fff;
	font-size: 21px;
	font-weight: 800;
}

.tvx-archive-cta span {
	font-size: 15px;
	line-height: 1.6;
}

.tvx-archive-cta a {
	flex: 0 0 auto;
	padding: 14px 24px;
	border-radius: 8px;
	background: var(--color-brand-light);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.tvx-archive-cta a:hover {
	background: var(--color-brand);
	color: #fff;
}

@media (max-width: 1199px) {
	.tvx-post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	.tvx-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
	}
}

@media (max-width: 599px) {
	.tvx-archive-head {
		padding: 36px 16px 28px;
	}

	.tvx-archive-desc {
		font-size: 15.5px;
	}

	.tvx-archive-body {
		gap: 36px;
		padding: 32px 16px 48px;
	}

	.tvx-crumbs {
		padding: 12px 16px;
	}

	.tvx-post-grid {
		grid-template-columns: 1fr;
	}

	.tvx-pager .tvx-pager-text {
		display: none;
	}

	/* Worst case is 9 items (prev, 1, …, n-1, n, n+1, …, last, next):
	   34px + 4px gaps fits a 343px-wide phone content column. */
	.tvx-pager {
		gap: 4px;
	}

	.tvx-pager .page-numbers {
		min-width: 34px;
		height: 38px;
		padding: 0 6px;
		border-radius: 8px;
		font-size: 14px;
	}

	.tvx-pager .page-numbers.dots {
		min-width: 0;
		padding: 0 2px;
	}

	.tvx-archive-cta {
		margin: 0 16px 48px;
		padding: 26px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tvx-post-card,
	.tvx-post-card-img {
		transition: none;
	}

	.tvx-post-card:hover,
	.tvx-post-card:hover .tvx-post-card-img {
		transform: none;
	}
}

/*
 * Single blog post (single.php): header, cover image, readable content
 * column + sticky sidebar, tags/share/prev-next, related posts row.
 */
.tvx-single-head {
	padding: 48px 5vw 0;
	background: var(--color-bg-soft);
}

.tvx-single-head-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 1160px;
	margin: 0 auto;
	padding-bottom: 40px;
}

.tvx-single-title {
	margin: 0;
	max-width: 900px;
	color: var(--color-text);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.tvx-single-lead {
	margin: 0;
	max-width: 760px;
	color: var(--color-text-soft);
	font-size: 18px;
	line-height: 1.65;
}

.tvx-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--color-text-soft-3);
	font-size: 14px;
}

.tvx-single-cover {
	margin: 0;
	padding: 0 5vw;
	background: linear-gradient(to bottom, var(--color-bg-soft) 50%, var(--color-bg) 50%);
}

.tvx-single-cover-img {
	display: block;
	width: 100%;
	max-width: 1160px;
	height: auto;
	max-height: 560px;
	margin: 0 auto;
	object-fit: cover;
	border-radius: 14px;
}

.tvx-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	max-width: 1160px;
	margin: 0 auto;
	padding: 48px 5vw 64px;
	box-sizing: content-box;
}

.tvx-single-main {
	min-width: 0;
}

/* Long-form article typography. */
.tvx-prose {
	color: var(--color-text-soft);
	font-size: 17.5px;
	line-height: 1.8;
	overflow-wrap: break-word;
}

.tvx-prose > :first-child {
	margin-top: 0;
}

.tvx-prose p,
.tvx-prose ul,
.tvx-prose ol,
.tvx-prose blockquote,
.tvx-prose figure,
.tvx-prose table {
	margin: 0 0 1.25em;
}

.tvx-prose h2,
.tvx-prose h3,
.tvx-prose h4 {
	color: var(--color-text);
	font-weight: 800;
	line-height: 1.3;
	scroll-margin-top: 90px;
}

.tvx-prose h2 {
	margin: 1.8em 0 .7em;
	font-size: clamp(23px, 2.2vw, 28px);
}

.tvx-prose h3 {
	margin: 1.5em 0 .6em;
	font-size: clamp(19px, 1.8vw, 22px);
	font-weight: 700;
}

.tvx-prose h4 {
	margin: 1.3em 0 .5em;
	font-size: 18px;
	font-weight: 700;
}

.tvx-prose strong {
	color: var(--color-text);
}

.tvx-prose a {
	color: var(--color-brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.tvx-prose ul,
.tvx-prose ol {
	padding-left: 1.4em;
}

.tvx-prose li {
	margin-bottom: .45em;
}

.tvx-prose li::marker {
	color: var(--color-brand);
}

.tvx-prose img {
	height: auto;
	border-radius: 10px;
}

.tvx-prose figure {
	max-width: 100%;
}

.tvx-prose figcaption,
.tvx-prose .wp-caption-text {
	margin-top: 8px;
	color: var(--color-text-soft-3);
	font-size: 14px;
	text-align: center;
}

.tvx-prose .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.tvx-prose blockquote {
	padding: 18px 24px;
	border-left: 4px solid var(--color-brand);
	border-radius: 0 10px 10px 0;
	background: var(--color-bg-soft);
	color: var(--color-text);
	font-style: italic;
}

.tvx-prose blockquote p:last-child {
	margin-bottom: 0;
}

.tvx-prose table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 15.5px;
}

.tvx-prose th,
.tvx-prose td {
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.tvx-prose th {
	background: var(--color-bg-soft-2);
	color: var(--color-text);
}

.tvx-prose iframe {
	max-width: 100%;
}

/* Easy Table of Contents box, inserted into the content by the plugin. */
.tvx-prose #ez-toc-container {
	width: auto;
	margin: 0 0 1.8em;
	padding: 18px 22px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--color-bg-soft);
	box-shadow: none;
}

.tvx-prose #ez-toc-container .ez-toc-title {
	color: var(--color-text);
	font-size: 16px;
	font-weight: 800;
}

.tvx-prose #ez-toc-container a {
	color: var(--color-text-soft);
	text-decoration: none;
}

.tvx-prose #ez-toc-container a:hover {
	color: var(--color-brand);
}

.tvx-single-foot {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--color-border);
}

.tvx-single-tags,
.tvx-single-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 700;
}

.tvx-single-tags a,
.tvx-single-share a,
.tvx-single-share button {
	padding: 7px 14px;
	border: 1px solid var(--color-border);
	border-radius: 99px;
	background: var(--color-bg);
	color: var(--color-text-soft);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .2s, color .2s;
}

.tvx-single-tags a:hover,
.tvx-single-share a:hover,
.tvx-single-share button:hover {
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.tvx-single-share button.is-copied {
	border-color: var(--color-brand);
	background: var(--color-brand);
	color: #fff;
}

.tvx-single-adjacent {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.tvx-single-adjacent a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	color: var(--color-text);
	transition: border-color .2s, box-shadow .2s;
}

.tvx-single-adjacent a:hover {
	border-color: var(--color-brand);
	box-shadow: 0 10px 24px rgba(18, 36, 26, .08);
}

.tvx-single-adjacent .is-next {
	grid-column: 2;
	text-align: right;
}

.tvx-single-adjacent span {
	color: var(--color-brand);
	font-size: 13px;
	font-weight: 700;
}

.tvx-single-adjacent strong {
	font-size: 15.5px;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Sidebar */
.tvx-single-side {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-self: start;
	position: sticky;
	top: 24px;
}

.admin-bar .tvx-single-side {
	top: 56px;
}

.tvx-side-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--color-bg);
}

.tvx-side-title {
	margin: 0;
	color: var(--color-brand);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tvx-side-cta {
	border: 0;
	background: var(--color-dark);
	color: var(--color-green-300);
}

.tvx-side-cta strong {
	color: #fff;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
}

.tvx-side-cta p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
}

.tvx-side-cta-btn {
	padding: 13px;
	border-radius: 8px;
	background: var(--color-brand-light);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.tvx-side-cta-btn:hover {
	background: var(--color-brand);
	color: #fff;
}

.tvx-side-cta-phone {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.tvx-side-posts,
.tvx-side-cats {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tvx-side-posts li + li {
	border-top: 1px solid var(--color-border-2);
}

.tvx-side-posts a {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 0;
	color: var(--color-text);
}

.tvx-side-posts li:first-child a {
	padding-top: 0;
}

.tvx-side-posts img {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
}

.tvx-side-posts span {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tvx-side-posts strong {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tvx-side-posts a:hover strong {
	color: var(--color-brand);
}

.tvx-side-posts time {
	color: var(--color-text-soft-3);
	font-size: 12.5px;
}

.tvx-side-cats a {
	display: flex;
	justify-content: space-between;
	padding: 9px 0;
	color: var(--color-text-soft);
	font-size: 14.5px;
	font-weight: 500;
}

.tvx-side-cats li + li a {
	border-top: 1px solid var(--color-border-2);
}

.tvx-side-cats a:hover,
.tvx-side-cats a.is-active {
	color: var(--color-brand);
}

.tvx-side-cats a.is-active {
	font-weight: 700;
}

.tvx-side-cats span {
	color: var(--color-text-soft-3);
	font-size: 13px;
}

/* Related posts */
.tvx-related {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 56px 5vw 64px;
	background: var(--color-bg-soft);
	border-top: 1px solid var(--color-border);
}

.tvx-related-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
}

.tvx-related-head h2 {
	margin: 0;
	color: var(--color-text);
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 800;
}

.tvx-related-head a {
	font-size: 15px;
	font-weight: 700;
}

.tvx-related + .tvx-archive-cta {
	margin-top: 56px;
}

@media (max-width: 1023px) {
	.tvx-single-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.tvx-single-side {
		position: static;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

@media (max-width: 599px) {
	.tvx-single-head {
		padding: 28px 16px 0;
	}

	.tvx-single-head-inner {
		padding-bottom: 24px;
	}

	.tvx-single-cover {
		padding: 0 16px;
	}

	.tvx-single-cover-img {
		border-radius: 10px;
	}

	.tvx-single-layout {
		padding: 28px 16px 40px;
	}

	.tvx-prose {
		font-size: 16.5px;
		line-height: 1.75;
	}

	.tvx-single-adjacent {
		grid-template-columns: minmax(0, 1fr);
	}

	.tvx-single-adjacent .is-next {
		grid-column: auto;
	}

	.tvx-related {
		padding: 40px 16px 48px;
	}

	.tvx-related .tvx-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.tvx-related .tvx-post-card-excerpt,
	.tvx-related .tvx-post-card-more {
		display: none;
	}

	.tvx-related .tvx-post-card-body {
		padding: 12px;
	}

	.tvx-related .tvx-post-card-title {
		font-size: 14.5px;
	}
}

/*
 * "Cam nang gia cong" hub (page-cam-nang.php): one section per topic
 * cluster with a 3-column card grid.
 */
.tvx-guide-cluster {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 56px 5vw;
	scroll-margin-top: 20px;
}

.tvx-guide-cluster.is-alt {
	background: var(--color-bg-soft);
}

.tvx-guide-cluster-head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	align-items: flex-end;
	justify-content: space-between;
}

.tvx-guide-cluster-head > div:first-child {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 720px;
}

.tvx-guide-cluster-num {
	color: var(--color-accent-brown);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tvx-guide-cluster-head h2 {
	margin: 0;
	color: var(--color-text);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 800;
}

.tvx-guide-cluster-head p {
	margin: 0;
	color: var(--color-text-soft-2);
	font-size: 16px;
	line-height: 1.6;
}

.tvx-guide-cluster-links {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-end;
	font-size: 14.5px;
	font-weight: 700;
}

.tvx-guide-cluster-links a + a {
	color: var(--color-text-soft-2);
	font-weight: 600;
}

.tvx-guide-empty {
	margin: 0;
	color: var(--color-text-soft-3);
}

.tvx-post-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 899px) {
	.tvx-post-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tvx-guide-cluster-links {
		align-items: flex-start;
	}
}

@media (max-width: 599px) {
	.tvx-guide-cluster {
		padding: 40px 16px;
	}

	.tvx-post-grid--3 {
		grid-template-columns: 1fr;
	}
}

/*
 * Side-menu group whose label is itself a link ("Dich vu gia cong"): tapping
 * the text opens the page, tapping the chevron area expands the group. A
 * link inside <summary> takes the click itself, so no JS is needed.
 */
.tvx-side-menu-nav details.has-link > summary {
	padding-right: 12px;
}

.tvx-side-menu-nav details.has-link > summary > a {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	align-self: stretch;
	padding: 0;
	color: inherit;
	font: inherit;
}

.tvx-side-menu-nav details.has-link > summary::after {
	margin: 0 12px 0 28px;
}

/*
 * Quy trinh don hang: six-step list. Desktop keeps number | content | meta
 * columns; on mobile the meta drops under the content so the text keeps width.
 */
.tvx-step-row {
	display: grid;
	grid-template-columns: 80px 1fr 200px;
	gap: 24px;
	align-items: start;
	padding: 26px 0;
}

.tvx-step-row__num {
	font-family: var(--font-serif);
	font-size: 26px;
	color: var(--color-brand-light);
}

.tvx-step-row__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.tvx-step-row__title {
	font-size: 19px;
	color: var(--color-text);
}

.tvx-step-row__desc {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--color-text-soft-2);
}

.tvx-step-row__meta {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--color-accent-brown);
}

@media (max-width: 767px) {
	.tvx-step-row {
		grid-template-columns: 44px 1fr;
		gap: 8px 14px;
		padding: 20px 0;
	}

	.tvx-step-row__num {
		font-size: 22px;
		line-height: 1.3;
	}

	.tvx-step-row__title {
		font-size: 17px;
	}

	.tvx-step-row__desc {
		font-size: 15px;
	}

	.tvx-step-row__meta {
		grid-column: 2;
		font-size: 13.5px;
	}
}

/* ------------------------------------------------------------------
 * Company profile flip book (page-ho-so-nang-luc.php + js/profile.js)
 * ------------------------------------------------------------------ */

.tvx-flip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding: 48px 5vw 36px;
	background: radial-gradient(ellipse at 50% 35%, #1d3b2a 0%, var(--color-dark-2) 70%);
	color: #fff;
	scroll-margin-top: 16px;
}

.tvx-flip__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 100%;
}

/* Width follows the viewport height so a whole spread (two A4 pages,
   ratio 2 * 990/1400) fits on screen together with the toolbar. */
.tvx-flip__book-wrap {
	flex: 0 1 auto;
	width: min(100%, 1320px, calc((100vh - 250px) * 1.414));
	min-width: min(100%, 540px);
}

/* No-JS fallback: a plain column of pages. */
.tvx-flip__book {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 620px;
	margin: 0 auto;
}

.tvx-flip.is-ready .tvx-flip__book {
	display: block;
	max-width: none;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45));
}

.tvx-flip__page {
	background: #fff;
	overflow: hidden;
}

.tvx-flip__page img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

.tvx-flip__nav {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	cursor: pointer;
	transition: background .2s, border-color .2s, opacity .2s;
}

.tvx-flip.is-ready .tvx-flip__nav {
	display: inline-flex;
}

.tvx-flip__nav:hover:not(:disabled) {
	background: var(--color-brand-light);
	border-color: var(--color-brand-light);
}

.tvx-flip__nav:disabled,
.tvx-flip__tool:disabled {
	opacity: .3;
	cursor: default;
}

.tvx-flip__toolbar {
	display: none;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(6px);
}

.tvx-flip.is-ready .tvx-flip__toolbar {
	display: inline-flex;
}

.tvx-flip__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background .2s;
}

.tvx-flip__tool:hover:not(:disabled) {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.tvx-flip__tool--step {
	display: none;
}

.tvx-flip__counter {
	min-width: 84px;
	padding: 0 8px;
	text-align: center;
	font-size: 14px;
	color: var(--color-green-300);
	font-variant-numeric: tabular-nums;
}

.tvx-flip__counter strong {
	color: #fff;
}

.tvx-flip__sep {
	width: 1px;
	height: 20px;
	margin: 0 6px;
	background: rgba(255, 255, 255, .2);
}

.tvx-flip__thumbs {
	display: none;
	gap: 10px;
	width: 100%;
	max-width: 1320px;
	padding: 4px 2px 10px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.tvx-flip.is-ready .tvx-flip__thumbs {
	display: flex;
}

.tvx-flip__thumb {
	position: relative;
	flex: 0 0 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s, border-color .2s, transform .2s;
}

.tvx-flip__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

.tvx-flip__thumb span {
	position: absolute;
	right: 3px;
	bottom: 3px;
	padding: 1px 5px;
	border-radius: 3px;
	background: rgba(18, 36, 26, .8);
	font-size: 10.5px;
	font-weight: 600;
	color: #fff;
}

.tvx-flip__thumb:hover {
	opacity: .9;
	transform: translateY(-2px);
}

.tvx-flip__thumb.is-active {
	opacity: 1;
	border-color: var(--color-brand-light);
}

/* Fullscreen: native :fullscreen or the .is-fullscreen fallback (iOS). */
.tvx-flip:fullscreen,
.tvx-flip.is-fullscreen {
	justify-content: center;
	padding: 20px 3vw;
	overflow: auto;
}

.tvx-flip.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.tvx-flip:fullscreen .tvx-flip__book-wrap,
.tvx-flip.is-fullscreen .tvx-flip__book-wrap {
	width: min(100%, calc((100vh - 170px) * 1.414));
}

.tvx-flip-toc {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}

.tvx-flip-toc__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background: var(--color-bg);
	color: var(--color-text);
	transition: border-color .2s, transform .2s;
}

.tvx-flip-toc__item:hover {
	border-color: var(--color-brand);
	color: var(--color-text);
	transform: translateY(-2px);
}

.tvx-flip-toc__num {
	font-family: var(--font-serif);
	font-size: 24px;
	color: var(--color-brand-light);
}

.tvx-flip-toc__title {
	font-size: 16px;
	font-weight: 600;
}

.tvx-flip-toc__page {
	font-size: 13px;
	color: var(--color-text-soft-3);
	white-space: nowrap;
}


.cate-product-main .attachment-large {
	height: auto;
}

@media (max-width: 767px) {
	.tvx-flip {
		padding: 28px 16px 24px;
	}

	.tvx-flip.is-ready .tvx-flip__nav {
		display: none;
	}

	.tvx-flip__tool--step {
		display: inline-flex;
	}

	.tvx-flip__book-wrap,
	.tvx-flip:fullscreen .tvx-flip__book-wrap,
	.tvx-flip.is-fullscreen .tvx-flip__book-wrap {
		width: min(100%, calc((100vh - 170px) * .707));
		min-width: 0;
	}

	.tvx-flip__thumb {
		flex-basis: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tvx-flip__thumb,
	.tvx-flip-toc__item {
		transition: none;
	}
}