/*
Theme Name: DVDL Tín Phát
Theme URI: https://xedulichdongnai.com
Author: DonaWeb
Author URI: https://donathietkeweb.vn
Description: Theme website https://xedulichdongnai.com. Thiết kế bởi DonaWeb
Version: 3.0.0
Requires PHP: 7.4
Text Domain: xedulichdongnai.com
*/

/* =========================================================
   0. DESIGN TOKENS
   Concept: "Bản đồ tuyến đường" — con đường cao tốc nối các
   điểm đến. Vàng đường bộ + xanh biển báo chỉ dẫn + xanh mực
   nhựa đường, thay cho cream/terracotta mặc định của AI.
   ========================================================= */
:root{
  --ink:            #0F2647; /* xanh navy đậm - heading, nền tối */
  --ink-2:          #1E293B; /* chữ thân */
  --primary:        #1B63D8; /* xanh dương biển chỉ dẫn - CTA chính */
  --primary-dark:   #144DAE;
  --accent:         #0E8FB2; /* xanh lam ngả lục - phụ, badge, link */
  --tint:           #E7F1FC;
  --paper:          #F5F9FD; /* nền sáng, hơi ánh xanh */
  --paper-2:        #EAF1FA;
  --line:           #D9E4F2;
  --muted:          #64748B;
  --white:          #FFFFFF;

  --font-display: "Barlow Condensed", "Be Vietnam Pro", sans-serif;
  --font-body:    "Be Vietnam Pro", -apple-system, sans-serif;
  --font-util:    "Barlow", "Be Vietnam Pro", sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(22,35,58,.10);
  --shadow-lg: 0 20px 50px rgba(22,35,58,.16);
  --container: 1180px;
}

/* =========================================================
   1. RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-2);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;}

h1,h2,h3,h4{
  font-family: 'Be Vietnam Pro';
  font-weight:700;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--ink);
  letter-spacing:.2px;
}
h1{font-size:clamp(2.4rem,4.6vw,3.8rem);font-weight:800;}
h2{font-size:clamp(1.9rem,3.4vw,2.4rem);}
h3{font-size:1.3rem;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-util);font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;
  font-size:.8rem;color:var(--accent);
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";width:22px;height:3px;background:var(--primary);border-radius:2px;
}
.section{padding:88px 0;position:relative;}
.section--tight{padding:64px 0;}
.section--dark{background:var(--ink);color:#DCE3EE;}
.section--dark h2, .section--dark h3{color:var(--white);}
.section--alt{background:var(--paper-2);}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.lede{color:var(--muted);font-size:1.05rem;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-util);font-weight:700;
  padding:15px 30px;border-radius:999px;border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  font-size:1rem;
}
.btn-primary{background:var(--primary);color:var(--white);}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow);}
.btn-outline{border-color:var(--white);color:var(--white);}
.btn-outline:hover{background:var(--white);color:var(--ink);}
.btn-ghost{border-color:var(--ink);color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--white);}

/* =========================================================
   2. HEADER
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;padding-bottom:14px;gap:24px;
}
.site-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--ink);}
.site-logo img{height:32px;width:150px;}
.custom-logo-link{width:100px;}
.main-nav ul{display:flex;gap:28px;font-family:var(--font-util);font-weight:600;font-size:.95rem;}
.main-nav a:hover{color:var(--accent);}
.header-cta{display:flex;align-items:center;gap:16px;}
.header-phone{display:flex;align-items:center;gap:8px;font-family:var(--font-util);font-weight:700;color:var(--ink);}
.header-phone i{color:var(--primary-dark);margin-right:2px;}
.nav-toggle{display:none;background:none;border:none;padding:6px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;}

/* =========================================================
   3. HERO — chữ ký thị giác: "tuyến đường" chấm gạch nối
   nội dung sang ảnh xe, như một cung đường trên bản đồ.
   ========================================================= */

/* =========================================================
   HERO DVDL TÍN PHÁT
   Sử dụng trực tiếp với HTML/PHP hiện tại
========================================================= */

.hero {
	--tp-dark: #15294f;
	--tp-blue: #1648b7;
	--tp-blue-light: #2465df;
	--tp-orange: #ffa300;
	--tp-green: #22d477;
	--tp-white: #ffffff;

	position: relative;
	overflow: hidden;
	min-height: 600px;
	padding: 90px 0 115px;
	background:
		radial-gradient(
			circle at 17% 10%,
			rgba(255, 255, 255, 0.08),
			transparent 34%
		),
		linear-gradient(
			125deg,
			var(--tp-dark) 0%,
			var(--tp-blue) 48%,
			var(--tp-blue-light) 100%
		);
	color: var(--tp-white);
	isolation: isolate;
}

/* Vầng sáng nền */
.hero::before {
	content: "";
	position: absolute;
	top: -230px;
	right: 12%;
	z-index: -1;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: rgba(55, 129, 255, 0.18);
	filter: blur(15px);
}

/* Đường cong trắng phía dưới */
.hero::after {
	content: "";
	position: absolute;
	right: -5%;
	bottom: -92px;
	left: -5%;
	height: 150px;
	border-radius: 50% 50% 0 0 / 38% 38% 0 0;
	background: #fff;
	transform: rotate(-0.8deg);
	z-index: 1;
}

.hero > .container {
	position: relative;
	z-index: 3;
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: center;
	gap: 76px;
}

/* =========================================================
   NỘI DUNG BÊN TRÁI
========================================================= */

.hero-content {
	max-width: 540px;
}

.hero-badge {
	width: fit-content;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 26px;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.09);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 10px 24px rgba(5, 27, 71, 0.12);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.hero-badge svg {
	width: 14px;
	height: 14px;
	color: #33df82;
	fill: currentColor;
	flex: 0 0 auto;
}

.hero h1 {
	margin: 0;
	max-width: 570px;
	color: #fff;
	font-size: clamp(42px, 4.6vw, 50px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -2.4px;
	font-family:system-ui;
}

/*
 * Đổi phần sau dấu “–” thành màu vàng bằng CSS
 * Không cần chỉnh lại heading trong ACF.
 */
.hero h1 {
	text-wrap: balance;
}

.hero-sub {
	max-width: 500px;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.62;
}

/* =========================================================
   NÚT LIÊN HỆ
========================================================= */

.hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.hero-actions .btn {
	min-height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 25px;
	border: 1px solid transparent;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		background 0.25s ease,
		border-color 0.25s ease;
}

.hero-actions .btn:hover {
	color: #fff;
	transform: translateY(-3px);
}

.hero-actions .btn svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.hero-actions .btn-primary {
	min-width: 190px;
	background: var(--tp-orange);
	color: #fff;
	box-shadow: 0 14px 34px rgba(255, 163, 0, 0.28);
}

.hero-actions .btn-primary:hover {
	background: #ffb01f;
	box-shadow: 0 17px 40px rgba(255, 163, 0, 0.35);
}

.hero-actions .btn-primary svg {
	width: 34px;
	height: 34px;
	padding: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
}

.hero-actions .btn-ghost {
	min-width: 195px;
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.09);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.hero-actions .btn-ghost:hover {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.16);
}

/* =========================================================
   DANH SÁCH ƯU ĐIỂM
========================================================= */

.hero-features {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 25px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.hero-feature {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: rgba(255, 255, 255, 0.84);
	font-size: 13px;
	font-weight: 500;
}

.hero-feature .dot {
	width: 29px;
	height: 29px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.09);
	color: #49c5ff;
	font-size: 12px;
	font-weight: 800;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* =========================================================
   HÌNH ẢNH BÊN PHẢI
========================================================= */

.hero-media {
	position: relative;
	min-width: 0;
	padding: 5px;
	border-radius: 25px;
	background: rgba(255, 255, 255, 0.23);
	box-shadow: 0 28px 75px rgba(3, 18, 55, 0.36);
}

/* Ánh sáng sau ảnh */
.hero-media::before {
	content: "";
	position: absolute;
	inset: 12% -8% -10% 8%;
	z-index: -1;
	border-radius: 50%;
	background: rgba(41, 116, 255, 0.38);
	filter: blur(48px);
}

/* Ẩn SVG đường route cũ nếu không phù hợp */
.hero-media > svg {
	display: none;
}

.hero-media-frame {
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: 20px;
	background: #dce7f6;
}

.hero-media-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.01) 55%,
			rgba(5, 25, 67, 0.13) 100%
		);
}

.hero-media-frame img {
	width: 100%;
	height: 370px;
	display: block;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
	transition: transform 0.6s ease;
}

.hero-media:hover .hero-media-frame img {
	transform: scale(1.025);
}

/* =========================================================
   CÁC THẺ NỔI TRÊN HÌNH
========================================================= */

.hero-pin {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	border-radius: 13px;
	background: #fff;
	color: #25324a;
	box-shadow: 0 13px 35px rgba(3, 22, 61, 0.23);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* Ghi đè inline style top/right trong PHP */
.hero-media > .hero-pin:not(.hero-pin--bl) {
	top: 40px !important;
	right: -21px !important;
}

.hero-media > .hero-pin:not(.hero-pin--bl) svg {
	width: 15px;
	height: 15px;
	color: #09ba67;
}

/* Rating */
.hero-pin--bl {
	top: 42%;
	bottom: auto;
	left: -30px;
}

.hero-pin--bl::before {
	content: "★★★★★";
	color: var(--tp-orange);
	font-size: 11px;
	letter-spacing: 1px;
}

.hero-pin--bl .badge-dot {
	display: none;
}

/* Chấm trang trí */
.hero-media::after {
	content: "";
	position: absolute;
	top: -44px;
	right: 18%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #25b8d1;
	box-shadow:
		-335px 405px 0 1px #2e74dd,
		-350px 390px 0 -2px #2e74dd;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
	.hero {
		padding-top: 75px;
		padding-bottom: 125px;
	}

	.hero > .container {
		grid-template-columns: 1fr;
		gap: 58px;
	}

	.hero-content {
		max-width: 690px;
		margin: 0 auto;
		text-align: center;
	}

	.hero-badge {
		margin-right: auto;
		margin-left: auto;
	}

	.hero-sub {
		margin-right: auto;
		margin-left: auto;
	}

	.hero-actions,
	.hero-features {
		justify-content: center;
	}

	.hero-media {
		width: min(720px, 100%);
		margin: 0 auto;
	}

	.hero-media-frame img {
		height: 410px;
	}
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
	.hero {
		min-height: auto;
		padding: 48px 0 96px;
	}

	.hero::after {
		bottom: -112px;
		height: 150px;
	}

	.hero > .container {
		width: min(100% - 30px, 600px);
		gap: 43px;
	}

	.hero-content {
		text-align: left;
	}

	.hero-badge {
		margin-right: 0;
		margin-left: 0;
		margin-bottom: 20px;
		padding: 8px 13px;
		font-size: 11px;
	}

	.hero h1 {
		max-width: 100%;
		font-size: 39px;
		line-height: 1.1;
		letter-spacing: -1.5px;
		text-wrap: initial;
	}

	.hero-sub {
		margin-top: 19px;
		font-size: 15px;
		line-height: 1.58;
	}

	.hero-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-top: 27px;
	}

	.hero-actions .btn {
		width: 100%;
		min-width: 0;
		min-height: 51px;
		padding: 0 13px;
		font-size: 13px;
	}

	.hero-actions .btn-primary svg {
		width: 29px;
		height: 29px;
		padding: 7px;
	}

	.hero-features {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 9px;
		margin-top: 23px;
	}

	.hero-feature {
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		min-height: 72px;
		padding: 9px 4px;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.065);
		font-size: 10px;
		text-align: center;
	}

	.hero-feature .dot {
		width: 27px;
		height: 27px;
	}

	.hero-media {
		padding: 4px;
		border-radius: 18px;
	}

	.hero-media-frame {
		border-radius: 14px;
	}

	.hero-media-frame img {
		height: 255px;
	}

	.hero-pin {
		padding: 9px 11px;
		border-radius: 10px;
		font-size: 10px;
	}

	.hero-media > .hero-pin:not(.hero-pin--bl) {
		top: 15px !important;
		right: 9px !important;
	}

	.hero-pin--bl {
		top: auto;
		bottom: 14px;
		left: 9px;
	}

	.hero-pin--bl::before {
		font-size: 8px;
	}

	.hero-media::after {
		display: none;
	}
}

/* Điện thoại nhỏ */
@media (max-width: 480px) {
	.hero h1 {
		font-size: 26px;
	}

	.hero-actions {
		grid-template-columns: 1fr;
	}

	.hero-actions .btn {
		min-height: 52px;
		font-size: 14px;
	}

	.hero-media-frame img {
		height: 225px;
	}

	.hero-pin--bl::before {
		display: none;
	}
}

/* =========================================================
   4. ROUTES — "Thuê Xe Du Lịch Đi" — cung đường chấm gạch
   chạy giữa các thẻ, biểu tượng ghim tại mỗi điểm đến.
   ========================================================= */
.routes{position:relative;}
.routes-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  position:relative;
}
.route-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.route-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.route-card-media{aspect-ratio:4/3;position:relative;background:var(--ink);}
.route-card-media img{width:100%;height:100%;object-fit:cover;opacity:.92;}
.route-card-pin{
  position:absolute;top:12px;left:12px;background:var(--primary);color:var(--white);
  font-family:var(--font-util);font-weight:800;font-size:.75rem;
  padding:5px 10px;border-radius:999px;display:flex;align-items:center;gap:6px;
}
.route-card-body{padding:18px 18px 20px;}
.route-card-from{font-family:var(--font-util);font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;}
.route-card-to{font-family:var(--font-display);font-weight:700;font-size:1.28rem;color:var(--ink);margin-bottom:10px;}
.route-card-link{font-family:var(--font-util);font-weight:700;font-size:.85rem;color:var(--accent);display:inline-flex;align-items:center;gap:6px;}
.route-card-link i{transition:transform .18s ease;font-size:.78rem;}
.route-card:hover .route-card-link i{transform:translateX(4px);}

@media (max-width:1024px){.routes-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.routes-grid{grid-template-columns:1fr;}}

/* =========================================================
   5. WHY CHOOSE US
   ========================================================= */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.why-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 24px;transition:border-color .2s ease, transform .2s ease;
}
.why-card:hover{border-color:var(--primary);transform:translateY(-4px);}
.why-icon{
  width:52px;height:52px;border-radius:12px;background:var(--tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.why-icon i{font-size:24px;color:var(--accent);}
.why-card h3{margin-bottom:8px;font-size:1.15rem;}
.why-card p{color:var(--muted);font-size:.94rem;margin:0;}

@media (max-width:1024px){.why-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr;}}

/* =========================================================
   6. PROCESS — cung đường ngang nối các mốc đặt xe
   ========================================================= */
.process-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.process-track::before{
  content:"";position:absolute;top:26px;left:6%;right:6%;height:3px;
  background:repeating-linear-gradient(90deg,var(--primary) 0 14px,transparent 14px 24px);
  z-index:0;
}
.process-step{position:relative;z-index:1;text-align:left;}
.process-num{
  width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:800;font-size:1.3rem;margin-bottom:18px;box-shadow:var(--shadow);
}
.process-step h3{font-size:1.1rem;margin-bottom:8px;}
.process-step p{color:var(--muted);font-size:.92rem;margin:0;}

@media (max-width:900px){
  .process-track{grid-template-columns:1fr 1fr;}
  .process-track::before{display:none;}
}
@media (max-width:560px){.process-track{grid-template-columns:1fr;}}

/* =========================================================
   7. TESTIMONIALS
   ========================================================= */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testi-card{
  background:var(--white);border-radius:var(--radius);padding:26px 24px;
  box-shadow:var(--shadow);
}
.testi-stars{color:var(--primary);letter-spacing:2px;margin-bottom:14px;font-size:1rem;}
.testi-content{color:var(--ink-2);font-size:.96rem;margin-bottom:20px;}
.testi-person{display:flex;align-items:center;gap:12px;}
.testi-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--tint);}
.testi-name{font-weight:700;font-family:var(--font-util);font-size:.92rem;}
.testi-trip{color:var(--muted);font-size:.8rem;}

@media (max-width:900px){.testi-grid{grid-template-columns:1fr;}}

/* =========================================================
   8. BLOG
   ========================================================= */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s ease;}
.blog-card:hover{transform:translateY(-4px);}
.blog-card-media{aspect-ratio:16/10;background:var(--ink);}
.blog-card-media img{width:100%;height:100%;object-fit:cover;}
.blog-card-body{padding:20px 20px 22px;}
.blog-card-date{font-family:var(--font-util);font-size:.78rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.blog-card h3{font-size:1.08rem;margin-bottom:10px;}
.blog-card h3 a:hover{color:var(--accent);}
.blog-card-excerpt{color:var(--muted);font-size:.9rem;}

@media (max-width:900px){.blog-grid{grid-template-columns:1fr;}}

/* =========================================================
   9. FAQ
   ========================================================= */
.faq-list{max-width:800px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;background:none;border:none;text-align:left;
  padding:22px 4px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-util);font-weight:700;font-size:1.02rem;color:var(--ink);
}
.faq-q .plus{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:transform .2s ease;
}
.faq-item.active .faq-q .plus{transform:rotate(45deg);background:var(--primary);color:var(--white);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a-inner{padding:0 40px 22px 4px;color:var(--muted);font-size:.95rem;}

/* =========================================================
   10. CTA STRIP / FOOTER
   ========================================================= */
.cta-strip{
  background:var(--ink);color:var(--white);border-radius:var(--radius);
  padding:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-strip h3{color:var(--white);margin-bottom:6px;}
.cta-strip p{color:#B8C2D4;margin:0;}

.site-footer{background:var(--ink);color:#B8C2D4;padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:48px;}
.footer-logo{font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--white);margin-bottom:12px;}
.footer-col h4{color:var(--white);font-family:var(--font-util);font-size:.9rem;text-transform:uppercase;letter-spacing:.8px;margin-bottom:16px;}
.footer-col ul li{margin-bottom:10px;font-size:.92rem;}
.footer-col a:hover{color:var(--primary);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* =========================================================
   11. RESPONSIVE NAV
   ========================================================= */
@media (max-width:860px){
  .main-nav{
    position:fixed;top:70px;left:0;right:0;bottom:0;background:var(--white);
    padding:24px;transform:translateY(-110%);transition:transform .25s ease;z-index:40;
  }
  .main-nav.open{transform:translateY(0);}
  .main-nav ul{flex-direction:column;gap:4px;}
  .main-nav ul li a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
  .header-phone span{display:none;}
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* =========================================================
   12. STATS BAR (trong section Quy Trình)
   ========================================================= */
.stats-bar{
  margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;border-top:1px solid var(--line);padding-top:44px;
}
.stat-item{text-align:center;}
.stat-num{
  font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.6vw,2.7rem);
  color:var(--primary);line-height:1;margin-bottom:8px;
}
.stat-label{font-family:var(--font-util);font-size:.86rem;color:var(--muted);font-weight:600;}
@media (max-width:700px){.stats-bar{grid-template-columns:1fr 1fr;}}

/* =========================================================
   13. FLEET — Đội Xe
   ========================================================= */
.fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.fleet-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s ease;}
.fleet-card:hover{transform:translateY(-6px);}
.fleet-media{position:relative;aspect-ratio:4/3;background:var(--ink);}
.fleet-media img{width:100%;height:100%;object-fit:cover;}
.fleet-seats{
  position:absolute;top:12px;left:12px;background:var(--primary);color:var(--white);
  font-family:var(--font-util);font-weight:800;font-size:.75rem;padding:5px 12px;border-radius:999px;
}
.fleet-count{
  position:absolute;bottom:12px;right:12px;background:rgba(15,38,71,.72);color:var(--white);
  font-family:var(--font-util);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;
}
.fleet-body{padding:20px 22px 24px;}
.fleet-body .eyebrow-sm{font-family:var(--font-util);font-size:.76rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.fleet-body h3{margin-bottom:4px;}
.fleet-model{font-family:var(--font-util);font-weight:600;color:var(--muted);font-size:.9rem;margin-bottom:10px;}
.fleet-desc{color:var(--muted);font-size:.92rem;margin-bottom:14px;}
.fleet-amenities{font-family:var(--font-util);font-size:.8rem;color:var(--accent);margin-bottom:18px;}
.fleet-body .btn{width:100%;padding:12px 20px;font-size:.92rem;}

@media (max-width:1024px){.fleet-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.fleet-grid{grid-template-columns:1fr;}}

/* =========================================================
   14. GALLERY — Khoảnh Khắc
   ========================================================= */
.gallery-grid{
  column-count:4;column-gap:16px;
}
.gallery-item{
  position:relative;margin-bottom:16px;border-radius:var(--radius-sm);overflow:hidden;
  break-inside:avoid;box-shadow:var(--shadow);
}
.gallery-item img{width:100%;display:block;transition:transform .3s ease;}
.gallery-item:hover img{transform:scale(1.05);}
.gallery-caption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;
  background:linear-gradient(0deg,rgba(15,38,71,.85),transparent);
  color:var(--white);font-family:var(--font-util);font-weight:700;font-size:.85rem;
}
@media (max-width:1024px){.gallery-grid{column-count:3;}}
@media (max-width:700px){.gallery-grid{column-count:2;}}

/* =========================================================
   15. PRICING — Bảng Giá
   ========================================================= */
.pricing-list{display:flex;flex-direction:column;gap:22px;}
.pricing-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow);
}
.pricing-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.pricing-title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--ink);}
.pricing-title .ic{font-size:1.4rem;}
.pricing-sub{color:var(--muted);font-size:.9rem;margin-top:4px;}
.pricing-badge{
  background:var(--tint);color:var(--accent);font-family:var(--font-util);font-weight:700;
  font-size:.75rem;padding:5px 12px;border-radius:999px;white-space:nowrap;
}
.pricing-table{width:100%;border-collapse:collapse;font-family:var(--font-util);font-size:.92rem;}
.pricing-table th{
  text-align:left;padding:10px 12px;color:var(--muted);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid var(--line);
}
.pricing-table td{padding:12px 12px;border-bottom:1px solid var(--line);}
.pricing-table td.price{font-weight:800;color:var(--primary);}
.pricing-table tr:last-child td{border-bottom:none;}
.pricing-seat{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--tint);color:var(--accent);font-weight:800;font-size:.72rem;margin-right:8px;
}
.pricing-card .btn{margin-top:18px;}
.pricing-more{text-align:center;margin-top:36px;}

@media (max-width:600px){
  .pricing-card{padding:20px;overflow-x:auto;}
  .pricing-table{min-width:420px;}
}

/* =========================================================
   16. FINAL CTA (full section, khác cta-strip)
   ========================================================= */
.final-cta{
  text-align:center;padding:96px 0;
}
.final-cta h2{color:var(--white);}
.final-cta p{color:#B8C7DE;max-width:520px;margin:0 auto 32px;font-size:1.05rem;}
.final-cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}

/* =========================================================
   17. FLOATING CHAT WIDGET
   ========================================================= */
.floating-chat{
  position:fixed;right:20px;bottom:88px;z-index:60;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end;
}
.floating-chat a{
  width:52px;height:52px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:center;transition:transform .18s ease;
  border:1px solid var(--line);
}
.floating-chat a:hover{transform:scale(1.08);}
.floating-chat a i{font-size:22px;color:var(--ink);}
.floating-chat a.fc-zalo span{font-family:var(--font-util);font-weight:800;font-size:.9rem;color:var(--primary);}
.floating-chat a.fc-call{background:var(--primary);}
.floating-chat a.fc-call i{color:var(--white);}
.floating-chat a[href^="https://m.me"] i,.floating-chat a i.fa-facebook-messenger{color:var(--accent);}

.sticky-call-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:59;
  background:var(--primary);color:var(--white);text-align:center;
  padding:14px 16px;font-family:var(--font-util);font-weight:800;font-size:.95rem;
  box-shadow:0 -6px 20px rgba(15,38,71,.18);
}
@media (max-width:640px){
  .sticky-call-bar{display:block;}
  .floating-chat{bottom:76px;right:14px;}
  .floating-chat a{width:46px;height:46px;}
  body{padding-bottom:54px;}
}
.header-phone-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#FFC65C 0%,#F2A93B 45%,#E08A1F 100%);
  border-radius:999px;padding:5px 22px 5px 5px;
  box-shadow:0 6px 16px rgba(224,138,31,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.header-phone-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(224,138,31,.45);}
.header-phone-icon{
  width:36px;height:36px;border-radius:50%;background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.header-phone-icon i{color:#E08A1F;font-size:15px;}
.header-phone-number{
  font-family:var(--font-util);font-weight:800;font-size:1rem;color:#FFFFFF;
  letter-spacing:.3px;white-space:nowrap;
}

/* =========================================================
   SECTION QUY TRÌNH ĐẶT XE + THỐNG KÊ
========================================================= */

#quy-trinh.section {
	--process-blue: #2878f0;
	--process-green: #18c799;
	--process-orange: #ff970f;
	--process-dark: #18233b;
	--process-muted: #7d879b;

	position: relative;
	overflow: hidden;
	padding: 88px 0 0;
	background:
		radial-gradient(
			circle at 28% 35%,
			rgba(71, 147, 255, 0.08),
			transparent 32%
		),
		radial-gradient(
			circle at 78% 32%,
			rgba(255, 190, 92, 0.09),
			transparent 28%
		),
		linear-gradient(180deg, #fffdfa 0%, #f8fbff 100%);
}

#quy-trinh > .container {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
}

/* =========================================================
   TIÊU ĐỀ
========================================================= */

#quy-trinh .section-head {
	margin-bottom: 68px;
}

#quy-trinh .section-head.center {
	text-align: center;
}

#quy-trinh .eyebrow {
	display: block;
	margin-bottom: 8px;
	color: #2777ef;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

#quy-trinh .section-head h2 {
	margin: 0;
	color: var(--process-dark);
	font-size: clamp(31px, 3.6vw, 44px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -1.5px;
	font-family:"Be Vietnam Pro";
}

/* Tô màu phần "3 Bước" bằng gradient */
#quy-trinh .section-head h2 {
	background:
		linear-gradient(
			90deg,
			var(--process-dark) 0%,
			var(--process-dark) 60%,
			#2b78f0 60%,
			#2b78f0 100%
		);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Dòng mô tả nhỏ dưới tiêu đề giống ảnh */
#quy-trinh .section-head::after {
	content: "Quy trình đặt xe cực kỳ đơn giản";
	display: block;
	margin-top: 10px;
	color: #98a1b2;
	font-size: 14px;
	font-weight: 400;
}

/* =========================================================
   TRACK 3 BƯỚC
========================================================= */

#quy-trinh .process-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 70px;
	padding: 0 34px 82px;
}

/* Đường nối ngang */
#quy-trinh .process-track::before {
	content: "";
	position: absolute;
	top: 48px;
	right: 16.5%;
	left: 16.5%;
	height: 2px;
	background:
		linear-gradient(
			90deg,
			#66bcff 0%,
			#54d6c0 48%,
			#ffca58 100%
		);
	opacity: 0.65;
}

#quy-trinh .process-step {
	position: relative;
	z-index: 2;
	min-width: 0;
	padding-top: 102px;
	text-align: center;
}

/* Ô icon lớn */
#quy-trinh .process-step::before {
	position: absolute;
	top: 17px;
	left: 50%;
	width: 62px;
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 17px;
	transform: translateX(-50%);
	font-size: 25px;
	font-weight: 700;
	box-shadow: 0 15px 30px rgba(30, 73, 131, 0.08);
}

/* Bước 1 */
#quy-trinh .process-step:nth-child(1)::before {
	content: "⌕";
	background: #edf7ff;
	color: var(--process-blue);
	font-family: Arial, sans-serif;
	font-size: 35px;
	transform: translateX(-50%) rotate(-35deg);
}

/* Bước 2 */
#quy-trinh .process-step:nth-child(2)::before {
	content: "✓";
	background: #ecfff8;
	color: var(--process-green);
	border: 1px solid rgba(24, 199, 153, 0.08);
}

/* Bước 3 */
#quy-trinh .process-step:nth-child(3)::before {
	content: "♧";
	background: #fff8e9;
	color: var(--process-orange);
	font-size: 30px;
}

/* Số thứ tự */
#quy-trinh .process-num {
	position: absolute;
	top: 0;
	left: calc(50% + 47px);
	z-index: 4;
	min-width: 27px;
	height: 27px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	border-radius: 9px;
	color: #fff;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 8px 18px rgba(30, 81, 145, 0.16);
}

/* Màu từng số */
#quy-trinh .process-step:nth-child(1) .process-num {
	background: var(--process-blue);
}

#quy-trinh .process-step:nth-child(2) .process-num {
	background: var(--process-green);
}

#quy-trinh .process-step:nth-child(3) .process-num {
	background: var(--process-orange);
}

/* Tiêu đề mỗi bước */
#quy-trinh .process-step h3 {
	margin: 0 0 14px;
	color: #29344a;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	font-family: 'Be Vietnam Pro';
}

/* Nội dung mỗi bước */
#quy-trinh .process-step p {
	max-width: 280px;
	margin: 0 auto;
	color: var(--process-muted);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
}

/* =========================================================
   THANH THỐNG KÊ XANH TRÀN MÀN HÌNH
========================================================= */

#quy-trinh .stats-bar {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	padding: 60px max(30px, calc((100vw - 1180px) / 2)) 64px;
	background:
		radial-gradient(
			circle at 52% 0%,
			rgba(65, 136, 255, 0.34),
			transparent 45%
		),
		linear-gradient(
			115deg,
			#153784 0%,
			#164ebc 45%,
			#2363e4 100%
		);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Ánh sáng nền */
#quy-trinh .stats-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.035) 50%,
			transparent 100%
		);
}

/* Mỗi thống kê */
#quy-trinh .stat-item {
	position: relative;
	z-index: 2;
	min-width: 0;
	text-align: center;
}

/* Icon vuông phía trên */
#quy-trinh .stat-icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.1);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 10px 25px rgba(0, 27, 89, 0.12);
	font-size: 18px;
	line-height: 1;
}

#quy-trinh .stat-icon i {
	display: block;
	font-size: 18px;
	line-height: 1;
}

#quy-trinh .stat-item:nth-child(1) .stat-icon {
	color: #74d0ff;
}

#quy-trinh .stat-item:nth-child(2) .stat-icon {
	color: #5fe0e4;
}

#quy-trinh .stat-item:nth-child(3) .stat-icon {
	color: #ffd538;
}

#quy-trinh .stat-item:nth-child(4) .stat-icon {
	color: #ff8ab8;
}
/* Số */
#quy-trinh .stat-num {
	margin-bottom: 7px;
	color: #fff;
	font-size: clamp(32px, 3vw, 43px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -1.5px;
	text-shadow: 0 5px 20px rgba(3, 24, 67, 0.18);
}

/* Tô màu dấu + hoặc một phần số bằng hiệu ứng */
#quy-trinh .stat-item:first-child .stat-num {
	color: #fff;
}

/* Nhãn */
#quy-trinh .stat-label {
	color: rgba(255, 255, 255, 0.95);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
	#quy-trinh.section {
		padding-top: 72px;
	}

	#quy-trinh .section-head {
		margin-bottom: 58px;
	}

	#quy-trinh .process-track {
		gap: 35px;
		padding-right: 0;
		padding-left: 0;
	}

	#quy-trinh .process-track::before {
		right: 16%;
		left: 16%;
	}

	#quy-trinh .process-step p {
		font-size: 12px;
	}

	#quy-trinh .stats-bar {
		padding-right: 30px;
		padding-left: 30px;
	}
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
	#quy-trinh.section {
		padding-top: 58px;
	}

	#quy-trinh > .container {
		width: min(100% - 30px, 600px);
	}

	#quy-trinh .section-head {
		margin-bottom: 46px;
	}

	#quy-trinh .eyebrow {
		font-size: 10px;
		letter-spacing: 1.4px;
	}

	#quy-trinh .section-head h2 {
		font-size: 30px;
		line-height: 1.2;
		letter-spacing: -1px;
		background: none;
		color: var(--process-dark);
	}

	#quy-trinh .section-head::after {
		margin-top: 8px;
		font-size: 12px;
	}

	/* Chuyển quy trình thành dạng dọc */
	#quy-trinh .process-track {
		display: block;
		padding: 0 0 54px;
	}

	#quy-trinh .process-track::before {
		top: 32px;
		bottom: 82px;
		left: 31px;
		width: 2px;
		height: auto;
		background:
			linear-gradient(
				180deg,
				#66bcff 0%,
				#54d6c0 50%,
				#ffca58 100%
			);
	}

	#quy-trinh .process-step {
		min-height: 135px;
		padding: 4px 0 35px 88px;
		text-align: left;
	}

	#quy-trinh .process-step:last-child {
		min-height: auto;
		padding-bottom: 0;
	}

	#quy-trinh .process-step::before {
		top: 0;
		left: 0;
		width: 62px;
		height: 62px;
		transform: none;
	}

	#quy-trinh .process-step:nth-child(1)::before {
		transform: rotate(-35deg);
	}

	#quy-trinh .process-num {
		top: -8px;
		left: 50px;
		display:none;
	}

	#quy-trinh .process-step h3 {
		margin-bottom: 8px;
		font-size: 16px;
	}

	#quy-trinh .process-step p {
		max-width: 100%;
		margin: 0;
		font-size: 12px;
		line-height: 1.6;
	}

	/* Thống kê 2 cột */
	#quy-trinh .stats-bar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 38px 16px;
		padding: 48px 20px 52px;
	}

	#quy-trinh .stat-num {
		font-size: 34px;
	}

	#quy-trinh .stat-label {
		font-size: 11px;
	}
}

/* Điện thoại nhỏ */
@media (max-width: 420px) {
	#quy-trinh .section-head h2 {
		font-size: 27px;
	}

	#quy-trinh .process-step {
		padding-left: 80px;
	}

	#quy-trinh .process-step::before {
		width: 56px;
		height: 56px;
	}

	#quy-trinh .process-track::before {
		left: 28px;
	}

	#quy-trinh .process-num {
		left: 45px;
	}

	#quy-trinh .stat-num {
		font-size: 30px;
	}
}
/* ================================================== SINGLE POST - DVDL TÍN PHÁT
================================================== */
.tp-single-page{ padding:60px 20px 90px; background:#f5f8fd; color:#1e293b;
}
.tp-single-container{ width:100%; max-width:1280px; margin:0 auto;
}
.tp-single-layout{ display:grid; grid-template-columns:minmax(0, 2.35fr) minmax(280px, 1fr); gap:42px; align-items:start;
}
/* ================================================== ARTICLE
================================================== */
.tp-single-article{ min-width:0; padding:42px 48px; background:#ffffff; border:1px solid #e7edf6; border-radius:24px; box-shadow:0 16px 45px rgba(15, 23, 42, .06);
}
/* ================================================== BREADCRUMB
================================================== */
.tp-single-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:28px; color:#64748b; font-size:14px; line-height:1.5;
}
.tp-single-breadcrumb a{ display:inline-flex; align-items:center; gap:7px; color:#64748b; text-decoration:none; transition:color .25s ease;
}
.tp-single-breadcrumb a:hover{ color:#2563eb;
}
.tp-breadcrumb-separator{ display:inline-flex; color:#a8b3c4; font-size:11px;
}
.tp-breadcrumb-current{ display:block; max-width:420px; overflow:hidden; color:#94a3b8; text-overflow:ellipsis; white-space:nowrap;
}
/* ================================================== HEADER
================================================== */
.tp-single-header{ margin-bottom:30px;
}
.tp-single-category{ display:inline-flex; align-items:center; min-height:32px; margin-bottom:16px; padding:6px 14px; border-radius:50px; background:#eaf2ff; color:#2563eb; font-size:13px; font-weight:800; letter-spacing:.7px; text-decoration:none; text-transform:uppercase;
}
.tp-single-title{ margin:0; color:#152238; font-size:42px; font-weight:900; letter-spacing:-1px; line-height:1.2;
}
.tp-single-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:20px; color:#718096; font-size:14px;
}
.tp-single-meta span{ display:inline-flex; align-items:center; gap:8px;
}
.tp-single-meta i{ color:#2563eb;
}
/* ================================================== FEATURED IMAGE
================================================== */
.tp-single-thumbnail{ overflow:hidden; margin:0 0 36px; border-radius:20px; background:#e8eef7; box-shadow:0 12px 35px rgba(15, 23, 42, .10);
}
.tp-single-thumbnail img{ display:block; width:100%; height:auto; max-height:560px; object-fit:cover;
}
/* ================================================== ENTRY CONTENT
================================================== */
.tp-single-content{ color:#334155; font-size:17px; line-height:1.82; overflow-wrap:anywhere;
}
.tp-single-content > *:first-child{ margin-top:0;
}
.tp-single-content > *:last-child{ margin-bottom:0;
}
.tp-single-content p{ margin:0 0 22px;
}
.tp-single-content h2{ position:relative; margin:46px 0 22px; padding-left:18px; color:#172033; font-size:30px; font-weight:900; letter-spacing:-.4px; line-height:1.3;
}
.tp-single-content h2::before{ position:absolute; top:5px; bottom:5px; left:0; width:5px; border-radius:10px; background:linear-gradient(180deg, #2563eb, #fbbf24); content:"";
}
.tp-single-content h3{ margin:34px 0 16px; color:#1e3a6d; font-size:23px; font-weight:850; line-height:1.4;
}
.tp-single-content h4{ margin:28px 0 14px; color:#1e293b; font-size:19px; font-weight:800; line-height:1.45;
}
.tp-single-content a{ color:#2563eb; font-weight:650; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.tp-single-content a:hover{ color:#1745b7;
}
.tp-single-content strong{ color:#1e293b; font-weight:800;
}
.tp-single-content ul,
.tp-single-content ol{ margin:0 0 24px; padding-left:26px;
}
.tp-single-content li{ margin-bottom:9px; padding-left:4px;
}
.tp-single-content ul li::marker{ color:#2563eb;
}
.tp-single-content ol li::marker{ color:#2563eb; font-weight:800;
}
.tp-single-content blockquote{ position:relative; margin:32px 0; padding:24px 28px 24px 65px; border:0; border-radius:16px; background:#eff6ff; color:#334155; font-size:17px; font-style:italic; line-height:1.75;
}
.tp-single-content blockquote::before{ position:absolute; top:22px; left:24px; color:#2563eb; font-family:"Font Awesome 6 Free"; font-size:24px; font-style:normal; font-weight:900; content:"\f10d";
}
.tp-single-content blockquote p:last-child{ margin-bottom:0;
}
/* ================================================== IMAGES
================================================== */
.tp-single-content img{ display:block; max-width:100%; height:auto; margin:28px auto; border-radius:14px;
}
.tp-single-content figure{ max-width:100%; margin:32px 0;
}
.tp-single-content figure img{ margin:0 auto;
}
.tp-single-content figcaption{ margin-top:10px; color:#77869a; font-size:14px; font-style:italic; line-height:1.55; text-align:center;
}
.tp-single-content .aligncenter{ display:block; margin-right:auto; margin-left:auto;
}
.tp-single-content .alignleft{ float:left; margin:8px 28px 20px 0;
}
.tp-single-content .alignright{ float:right; margin:8px 0 20px 28px;
}
/* ================================================== TABLE
================================================== */
.tp-single-content .wp-block-table,
.tp-single-content .table-responsive{ width:100%; margin:30px 0; overflow-x:auto; border-radius:14px; box-shadow:0 8px 25px rgba(15, 23, 42, .06); -webkit-overflow-scrolling:touch;
}
.tp-single-content table{ width:100%; min-width:620px; margin:0; border-collapse:collapse; background:#ffffff; font-size:15px;
}
.tp-single-content table th,
.tp-single-content table td{ padding:15px 18px; border:1px solid #dfe7f2; text-align:left; vertical-align:middle;
}
.tp-single-content table th{ background:#1d4ed8; color:#ffffff; font-weight:800;
}
.tp-single-content table tr:nth-child(even) td{ background:#f8fafc;
}
/* ================================================== CONTACT CTA
================================================== */
.tp-single-contact{ display:grid; grid-template-columns:64px minmax(0, 1fr) auto; gap:20px; align-items:center; margin-top:48px; padding:26px; border-radius:20px; background:linear-gradient(120deg, #10295d 0%, #1e5ae4 100%); color:#ffffff; box-shadow:0 16px 35px rgba(29, 78, 216, .22);
}
.tp-single-contact-icon{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:18px; background:rgba(255, 255, 255, .13); font-size:25px;
}
.tp-single-contact-label{ margin-bottom:4px; color:#fbbf24; font-size:13px; font-weight:900; letter-spacing:1px; text-transform:uppercase;
}
.tp-single-contact-title{ font-size:22px; font-weight:900; line-height:1.3;
}
.tp-single-contact-content p{ margin:7px 0 0; color:#dbe7ff; font-size:14px; line-height:1.6;
}
.tp-single-contact-actions{ display:flex; flex-direction:column; gap:10px; min-width:165px;
}
.tp-single-contact-actions a{ display:flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:0 18px; border-radius:11px; font-size:14px; font-weight:850; text-decoration:none; white-space:nowrap; transition:transform .25s ease, box-shadow .25s ease;
}
.tp-single-contact-actions a:hover{ transform:translateY(-2px);
}
.tp-contact-call{ background:#fbbf24; color:#10295d; box-shadow:0 8px 22px rgba(251, 191, 36, .25);
}
.tp-contact-zalo{ border:1px solid rgba(255, 255, 255, .30); background:rgba(255, 255, 255, .12); color:#ffffff;
}
/* ================================================== TAGS
================================================== */
.tp-single-tags{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:32px; padding-top:24px; border-top:1px solid #e8eef6;
}
.tp-tags-label{ display:inline-flex; align-items:center; gap:7px; color:#475569; font-size:14px; font-weight:800;
}
.tp-single-tags a{ display:inline-flex; align-items:center; padding:7px 12px; border-radius:50px; background:#f1f5f9; color:#475569; font-size:13px; font-weight:700; text-decoration:none; transition:.25s ease;
}
.tp-single-tags a:hover{ background:#2563eb; color:#ffffff;
}
/* ================================================== SIDEBAR
================================================== */
.tp-single-sidebar{ min-width:0;
}
.tp-sidebar-sticky{ position:sticky; top:110px;
}
.tp-single-sidebar .widget{ margin-bottom:24px; padding:26px; border:1px solid #e6edf7; border-radius:20px; background:#ffffff; box-shadow:0 12px 35px rgba(15, 23, 42, .05);
}
.tp-single-sidebar .widget-title,
.tp-single-sidebar .wp-block-heading{ position:relative; margin:0 0 20px; padding-bottom:13px; color:#172033; font-size:20px; font-weight:900;
}
.tp-single-sidebar .widget-title::after,
.tp-single-sidebar .wp-block-heading::after{ position:absolute; bottom:0; left:0; width:48px; height:4px; border-radius:10px; background:#2563eb; content:"";
}
.tp-single-sidebar ul{ margin:0; padding:0; list-style:none;
}
.tp-single-sidebar li{ padding:11px 0; border-bottom:1px solid #edf1f6;
}
.tp-single-sidebar li:last-child{ border-bottom:0;
}
.tp-single-sidebar a{ color:#334155; font-size:15px; font-weight:650; line-height:1.55; text-decoration:none; transition:color .25s ease;
}
.tp-single-sidebar a:hover{ color:#2563eb;
}
.tp-single-sidebar img{ max-width:100%; height:auto; border-radius:12px;
}
/* ================================================== PAGE LINKS
================================================== */
.tp-page-links{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:30px;
}
.tp-page-links a,
.tp-page-links > span:not(:first-child){ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:#edf3ff; color:#2563eb; text-decoration:none;
}
/* ================================================== TABLET
================================================== */
@media (max-width:1024px){ .tp-single-layout{ grid-template-columns:minmax(0, 1fr) 300px; gap:28px; } .tp-single-article{ padding:34px 30px; } .tp-single-title{ font-size:36px; } .tp-single-content h2{ font-size:27px; } .tp-single-contact{ grid-template-columns:56px minmax(0, 1fr); } .tp-single-contact-icon{ width:56px; height:56px; } .tp-single-contact-actions{ grid-column:1 / -1; flex-direction:row; } .tp-single-contact-actions a{ flex:1; }
}
/* ================================================== MOBILE
================================================== */
@media (max-width:767px){ .tp-single-page{ padding:24px 14px 60px; } .tp-single-layout{ display:block; } .tp-single-article{ padding:24px 18px; border-radius:18px; } .tp-single-breadcrumb{ margin-bottom:20px; font-size:12px; } .tp-breadcrumb-current{ max-width:170px; } .tp-single-category{ margin-bottom:12px; font-size:11px; } .tp-single-title{ font-size:29px; letter-spacing:-.4px; line-height:1.25; } .tp-single-meta{ gap:11px 16px; margin-top:16px; font-size:12px; } .tp-single-thumbnail{ margin:0 0 28px; border-radius:14px; } .tp-single-thumbnail img{ max-height:none; } .tp-single-content{ font-size:16px; line-height:1.75; } .tp-single-content p{ margin-bottom:19px; } .tp-single-content h2{ margin:36px 0 18px; padding-left:14px; font-size:24px; line-height:1.35; } .tp-single-content h2::before{ width:4px; } .tp-single-content h3{ margin:28px 0 14px; font-size:20px; } .tp-single-content h4{ font-size:18px; } .tp-single-content blockquote{ padding:22px 20px 22px 50px; font-size:15px; } .tp-single-content blockquote::before{ top:21px; left:18px; font-size:20px; } .tp-single-content .alignleft, .tp-single-content .alignright{ float:none; margin:24px auto; } .tp-single-contact{ display:block; margin-top:38px; padding:22px 18px; text-align:center; } .tp-single-contact-icon{ margin:0 auto 14px; } .tp-single-contact-title{ font-size:20px; } .tp-single-contact-actions{ display:flex; flex-direction:column; margin-top:18px; } .tp-single-contact-actions a{ width:100%; } .tp-single-sidebar{ margin-top:28px; } .tp-sidebar-sticky{ position:static; } .tp-single-sidebar .widget{ padding:22px 20px; border-radius:16px; }
}
/* ================================================== ARCHIVE PAGE - DVDL TÍN PHÁT
================================================== */
.tp-archive-page{ padding:55px 20px 90px; background:#f5f8fd; color:#1e293b;
}
.tp-archive-container{ width:100%; max-width:1280px; margin:0 auto;
}
/* ================================================== BREADCRUMB
================================================== */
.tp-archive-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:28px; color:#718096; font-size:14px; line-height:1.5;
}
.tp-archive-breadcrumb a{ display:inline-flex; align-items:center; gap:7px; color:#64748b; text-decoration:none; transition:color .25s ease;
}
.tp-archive-breadcrumb a:hover{ color:#2563eb;
}
.tp-archive-breadcrumb > span{ display:inline-flex; color:#aab4c3; font-size:11px;
}
.tp-archive-breadcrumb strong{ color:#334155; font-weight:750;
}
/* ================================================== ARCHIVE HEADER
================================================== */
.tp-archive-header{ position:relative; overflow:hidden; margin-bottom:45px; padding:48px; border:1px solid #dfe8f5; border-radius:26px; background: radial-gradient(circle at 90 %, rgba(37,99,235,.12), transparent 30%), linear-gradient(135deg,#ffffff 0%,#f3f7ff 100%); box-shadow:0 15px 40px rgba(15,23,42,.05); text-align:center;
}
.tp-archive-header::before{ position:absolute; inset:0; background-image:radial-gradient(rgba(37,99,235,.10) 1px,transparent 1px); background-size:22px 22px; content:""; pointer-events:none;
}
.tp-archive-header > *{ position:relative; z-index:1;
}
.tp-archive-label{ display:block; margin-bottom:13px; color:#2563eb; font-size:14px; font-weight:900; letter-spacing:2px; text-transform:uppercase;
}
.tp-archive-title{ margin:0; color:#172033; font-size:44px; font-weight:900; letter-spacing:-.8px; line-height:1.2;
}
.tp-archive-description,
.tp-archive-default-description{ max-width:760px; margin:18px auto 0; color:#64748b; font-size:18px; line-height:1.65;
}
.tp-archive-description p{ margin:0;
}
/* ================================================== LAYOUT
================================================== */
.tp-archive-layout{ display:grid; grid-template-columns:minmax(0,2.35fr) minmax(280px,1fr); gap:38px; align-items:start;
}
.tp-archive-main{ min-width:0;
}
/* ================================================== POST GRID
================================================== */
.tp-post-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px;
}
.tp-post-card{ overflow:hidden; border:1px solid #e4ebf5; border-radius:22px; background:#ffffff; box-shadow:0 12px 35px rgba(15,23,42,.055); transition:transform .3s ease,box-shadow .3s ease;
}
.tp-post-card:hover{ transform:translateY(-6px); box-shadow:0 20px 45px rgba(15,23,42,.10);
}
/* ================================================== POST IMAGE
================================================== */
.tp-post-thumbnail{ position:relative; display:block; overflow:hidden; width:100%; aspect-ratio:16 / 10; background:#eaf0f8;
}
.tp-post-thumbnail img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;
}
.tp-post-card:hover .tp-post-thumbnail img{ transform:scale(1.06);
}
.tp-post-placeholder{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(135deg,#e8f0ff,#dbe7ff); color:#2563eb; font-size:48px;
}
.tp-post-view{ position:absolute; right:18px; bottom:18px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#ffffff; color:#2563eb; box-shadow:0 8px 20px rgba(15,23,42,.18); opacity:0; transform:translateY(10px); transition:.3s ease;
}
.tp-post-card:hover .tp-post-view{ opacity:1; transform:translateY(0);
}
/* ================================================== POST CONTENT
================================================== */
.tp-post-body{ padding:25px 26px 28px;
}
.tp-post-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 15px; margin-bottom:14px; color:#718096; font-size:12px;
}
.tp-post-meta span,
.tp-post-meta a{ display:inline-flex; align-items:center; gap:7px;
}
.tp-post-meta a{ color:#718096; text-decoration:none;
}
.tp-post-meta a:hover{ color:#2563eb;
}
.tp-post-meta i{ color:#2563eb;
}
.tp-post-title{ margin:0 0 14px; font-size:23px; font-weight:900; letter-spacing:-.25px; line-height:1.38;
}
.tp-post-title a{ display:-webkit-box; overflow:hidden; color:#172033; text-decoration:none; -webkit-box-orient:vertical; -webkit-line-clamp:2; transition:color .25s ease;
}
.tp-post-title a:hover{ color:#2563eb;
}
.tp-post-excerpt{ display:-webkit-box; overflow:hidden; min-height:78px; margin-bottom:20px; color:#64748b; font-size:15px; line-height:1.7; -webkit-box-orient:vertical; -webkit-line-clamp:3;
}
.tp-post-readmore{ display:inline-flex; align-items:center; gap:9px; color:#2563eb; font-size:14px; font-weight:850; text-decoration:none;
}
.tp-post-readmore i{ transition:transform .25s ease;
}
.tp-post-readmore:hover i{ transform:translateX(5px);
}
/* ================================================== PAGINATION
================================================== */
.tp-archive-pagination{ margin-top:42px;
}
.tp-archive-pagination .nav-links{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px;
}
.tp-archive-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:44px; height:44px; padding:0 14px; border:1px solid #dce5f2; border-radius:11px; background:#ffffff; color:#475569; font-size:14px; font-weight:800; text-decoration:none; box-shadow:0 5px 16px rgba(15,23,42,.04); transition:.25s ease;
}
.tp-archive-pagination .page-numbers:hover,
.tp-archive-pagination .page-numbers.current{ border-color:#2563eb; background:#2563eb; color:#ffffff;
}
.tp-archive-pagination .prev,
.tp-archive-pagination .next{ padding:0 18px;
}
/* ================================================== EMPTY ARCHIVE
================================================== */
.tp-archive-empty{ padding:60px 25px; border:1px solid #e3eaf4; border-radius:22px; background:#ffffff; text-align:center; box-shadow:0 12px 35px rgba(15,23,42,.05);
}
.tp-empty-icon{ display:flex; align-items:center; justify-content:center; width:78px; height:78px; margin:0 auto 20px; border-radius:22px; background:#edf4ff; color:#2563eb; font-size:32px;
}
.tp-archive-empty h2{ margin:0 0 12px; color:#172033; font-size:28px; font-weight:900;
}
.tp-archive-empty p{ max-width:480px; margin:0 auto 24px; color:#64748b; font-size:16px; line-height:1.7;
}
.tp-archive-empty > a{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 22px; border-radius:12px; background:#2563eb; color:#ffffff; font-weight:800; text-decoration:none;
}
/* ================================================== SIDEBAR
================================================== */
.tp-archive-sidebar{ min-width:0;
}
.tp-archive-sidebar-sticky{ position:sticky; top:110px;
}
.tp-archive-sidebar .widget{ margin-bottom:24px; padding:26px; border:1px solid #e5ecf6; border-radius:20px; background:#ffffff; box-shadow:0 12px 35px rgba(15,23,42,.05);
}
.tp-archive-sidebar .widget-title,
.tp-archive-sidebar .wp-block-heading{ position:relative; margin:0 0 20px; padding-bottom:13px; color:#172033; font-size:20px; font-weight:900;
}
.tp-archive-sidebar .widget-title::after,
.tp-archive-sidebar .wp-block-heading::after{ position:absolute; bottom:0; left:0; width:48px; height:4px; border-radius:10px; background:#2563eb; content:"";
}
.tp-archive-sidebar ul{ margin:0; padding:0; list-style:none;
}
.tp-archive-sidebar li{ padding:11px 0; border-bottom:1px solid #edf1f6;
}
.tp-archive-sidebar li:last-child{ border-bottom:0;
}
.tp-archive-sidebar a{ color:#334155; text-decoration:none;
}
/* ================================================== FALLBACK CONTACT WIDGET
================================================== */
.tp-archive-contact-widget{ padding:30px 26px; border-radius:22px; background:linear-gradient(135deg,#10295d,#1f5be6); color:#ffffff; text-align:center; box-shadow:0 16px 38px rgba(29,78,216,.22);
}
.tp-contact-widget-icon{ display:flex; align-items:center; justify-content:center; width:66px; height:66px; margin:0 auto 18px; border-radius:19px; background:rgba(255,255,255,.14); font-size:27px;
}
.tp-contact-widget-label{ margin-bottom:7px; color:#fbbf24; font-size:13px; font-weight:900; letter-spacing:1px; text-transform:uppercase;
}
.tp-contact-widget-title{ font-size:25px; font-weight:900;
}
.tp-archive-contact-widget p{ margin:12px 0 22px; color:#dbe7ff; font-size:14px; line-height:1.65;
}
.tp-archive-contact-widget > a{ display:flex; align-items:center; justify-content:center; gap:9px; min-height:48px; margin-top:11px; border-radius:12px; font-size:15px; font-weight:850; text-decoration:none;
}
.tp-widget-call{ background:#fbbf24; color:#10295d;
}
.tp-widget-zalo{ border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.12); color:#ffffff;
}
/* ================================================== TABLET
================================================== */
@media(max-width:1024px){ .tp-archive-layout{ grid-template-columns:minmax(0,1fr) 280px; gap:28px; } .tp-post-grid{ grid-template-columns:1fr; } .tp-post-title{ font-size:22px; } .tp-archive-title{ font-size:38px; }
}
/* ================================================== MOBILE
================================================== */
@media(max-width:767px){ .tp-archive-page{ padding:25px 14px 60px; } .tp-archive-breadcrumb{ margin-bottom:20px; font-size:12px; } .tp-archive-header{ margin-bottom:30px; padding:34px 20px; border-radius:20px; } .tp-archive-label{ font-size:12px; } .tp-archive-title{ font-size:31px; line-height:1.25; } .tp-archive-description, .tp-archive-default-description{ font-size:16px; } .tp-archive-layout{ display:block; } .tp-post-grid{ grid-template-columns:1fr; gap:22px; } .tp-post-card{ border-radius:18px; } .tp-post-body{ padding:22px 20px 24px; } .tp-post-title{ font-size:21px; } .tp-post-excerpt{ min-height:auto; font-size:15px; } .tp-post-view{ display:none; } .tp-archive-pagination{ margin-top:32px; } .tp-archive-pagination .page-numbers{ min-width:40px; height:40px; padding:0 12px; } .tp-archive-pagination .prev span, .tp-archive-pagination .next span{ display:none; } .tp-archive-sidebar{ margin-top:30px; } .tp-archive-sidebar-sticky{ position:static; } .tp-archive-sidebar .widget{ padding:22px 20px; border-radius:17px; }
}
.testi-slider-wrap{ position:relative;
}
.testi-swiper{ overflow:hidden; padding:8px 4px 45px;
}
.testi-swiper .swiper-wrapper{ align-items:stretch;
}
.testi-swiper .swiper-slide{ height:auto;
}
.testi-card{ height:100%; display:flex; flex-direction:column; background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:18px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.testi-stars{ margin-bottom:16px; color:#f6a800; font-size:18px; letter-spacing:2px;
}
.testi-content{ flex:1; margin:0 0 22px; color:var(--text, #1d2a3a); font-size:15px; line-height:1.75;
}
.testi-person{ display:flex; align-items:center; gap:12px;
}
.testi-avatar{ width:52px; height:52px; flex:0 0 52px; object-fit:cover; border-radius:50%; background:#eef5ff; border:2px solid #dceaff;
}
.testi-avatar--letter{ display:flex; align-items:center; justify-content:center; color:var(--accent, #0a5ecf); font-family:var(--font-display); font-size:20px; font-weight:800;
}
.testi-info{ min-width:0;
}
.testi-name{ color:var(--text, #1d2a3a); font-size:15px; font-weight:800; line-height:1.4;
}
.testi-location{ color:var(--muted, #738198); font-weight:400;
}
.testi-trip{ margin-top:3px; color:var(--accent, #0a5ecf); font-size:13px; font-weight:600;
}
.testi-nav{ position:absolute; top:50%; z-index:10; display:flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:0; border-radius:50%; background:#fff; color:var(--accent, #0a5ecf); box-shadow:0 8px 24px rgba(0,0,0,.12); cursor:pointer; transform:translateY(-50%); transition:.2s ease;
}
.testi-nav:hover{ background:var(--accent, #0a5ecf); color:#fff;
}
.testi-prev{ left:-20px;
}
.testi-next{ right:-20px;
}
.testi-pagination{ bottom:5px !important;
}
.testi-pagination .swiper-pagination-bullet{ width:8px; height:8px; background:#a9bad1; opacity:1;
}
.testi-pagination .swiper-pagination-bullet-active{ width:24px; border-radius:20px; background:var(--accent, #0a5ecf);
}
@media(max-width:1100px){ .testi-prev{ left:4px; } .testi-next{ right:4px; }
}
@media(max-width:767px){ .testi-swiper{ padding-bottom:40px; } .testi-card{ padding:20px; } .testi-nav{ display:none; }
}
/* =====================================================
   SECTION BÀI VIẾT TRANG CHỦ
===================================================== */
#bai-viet {
	position: relative;
	padding: 90px 0;
	background:
		radial-gradient(circle at 8% 15%, rgba(0, 168, 89, 0.09), transparent 24%),
		radial-gradient(circle at 95% 85%, rgba(250, 166, 26, 0.10), transparent 25%),
		linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%);
	overflow: hidden;
}

/* Họa tiết nền */
#bai-viet::before {
	content: "";
	position: absolute;
	top: 70px;
	left: -90px;
	width: 220px;
	height: 220px;
	border: 40px solid rgba(0, 168, 89, 0.05);
	border-radius: 50%;
	pointer-events: none;
}

#bai-viet::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: 40px;
	width: 180px;
	height: 180px;
	background: rgba(250, 166, 26, 0.06);
	border-radius: 50%;
	pointer-events: none;
}

#bai-viet .container {
	position: relative;
	z-index: 2;
}

/* =====================================================
   TIÊU ĐỀ SECTION
===================================================== */
#bai-viet .section-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

#bai-viet .eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 8px 16px;
	border: 1px solid rgba(0, 168, 89, 0.18);
	border-radius: 50px;
	background: rgba(0, 168, 89, 0.08);
	color: #00894a;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#bai-viet .eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #00a859;
	box-shadow: 0 0 0 5px rgba(0, 168, 89, 0.12);
}

#bai-viet .section-head h2 {
	position: relative;
	margin: 0;
	color: #17352a;
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

#bai-viet .section-head h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 18px auto 0;
	border-radius: 10px;
	background: linear-gradient(90deg, #00a859, #faa61a);
}

#bai-viet .section-head .lede {
	max-width: 620px;
	margin: 18px auto 0;
	color: #63706b;
	font-size: 16px;
	line-height: 1.75;
}

/* =====================================================
   GRID BÀI VIẾT
===================================================== */
#bai-viet .blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
}

/* =====================================================
   CARD BÀI VIẾT
===================================================== */
#bai-viet .blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	border: 1px solid rgba(22, 72, 52, 0.08);
	border-radius: 20px;
	background: #ffffff;
	box-shadow: 0 10px 35px rgba(21, 58, 43, 0.08);
	overflow: hidden;
	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

#bai-viet .blog-card:hover {
	transform: translateY(-8px);
	border-color: rgba(0, 168, 89, 0.25);
	box-shadow: 0 22px 50px rgba(21, 58, 43, 0.15);
}

/* Đường màu phía trên card */
#bai-viet .blog-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 4;
	width: 0;
	height: 4px;
	background: linear-gradient(90deg, #00a859, #faa61a);
	transform: translateX(-50%);
	transition: width 0.35s ease;
}

#bai-viet .blog-card:hover::before {
	width: 100%;
}

/* =====================================================
   HÌNH ẢNH
===================================================== */
#bai-viet .blog-card-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: #e9f4ee;
	overflow: hidden;
}

#bai-viet .blog-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 45%,
		rgba(12, 46, 31, 0.20) 100%
	);
	opacity: 0;
	transition: opacity 0.35s ease;
}

#bai-viet .blog-card:hover .blog-card-media::after {
	opacity: 1;
}

#bai-viet .blog-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.6s ease,
		filter 0.35s ease;
}

#bai-viet .blog-card:hover .blog-card-media img {
	transform: scale(1.075);
	filter: saturate(1.06);
}

/* Icon mũi tên khi hover ảnh */
#bai-viet .blog-card-media::before {
	content: "↗";
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #ffffff;
	color: #00a859;
	font-size: 21px;
	font-weight: 700;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16);
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease,
		background 0.25s ease,
		color 0.25s ease;
}

#bai-viet .blog-card:hover .blog-card-media::before {
	opacity: 1;
	transform: translateY(0);
}

#bai-viet .blog-card-media:hover::before {
	background: #00a859;
	color: #ffffff;
}

/* =====================================================
   NỘI DUNG CARD
===================================================== */
#bai-viet .blog-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px 24px 26px;
}

/* Ngày đăng */
#bai-viet .blog-card-date {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin-bottom: 14px;
	color: #74817b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

#bai-viet .blog-card-date::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border: 2px solid #00a859;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(0, 168, 89, 0.10);
}

/* Tiêu đề bài viết */
#bai-viet .blog-card h3 {
	margin: 0 0 13px;
	font-size: 20px;
	font-weight: 750;
	line-height: 1.42;
	letter-spacing: -0.015em;
}

#bai-viet .blog-card h3 a {
	display: -webkit-box;
	color: #17352a;
	text-decoration: none;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	transition: color 0.25s ease;
}

#bai-viet .blog-card h3 a:hover,
#bai-viet .blog-card:hover h3 a {
	color: #00a859;
}

/* Mô tả */
#bai-viet .blog-card-excerpt {
	display: -webkit-box;
	margin: 0;
	color: #68746f;
	font-size: 15px;
	line-height: 1.75;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Đường kẻ trang trí cuối card */
#bai-viet .blog-card-body::after {
	content: "Xem chi tiết  →";
	display: block;
	width: fit-content;
	margin-top: auto;
	padding-top: 19px;
	color: #008d4d;
	font-size: 14px;
	font-weight: 700;
	transition:
		color 0.25s ease,
		transform 0.25s ease;
}

#bai-viet .blog-card:hover .blog-card-body::after {
	color: #faa61a;
	transform: translateX(4px);
}

/* =====================================================
   THÔNG BÁO CHƯA CÓ BÀI
===================================================== */
#bai-viet > .container > .lede {
	max-width: 700px;
	margin: 0 auto;
	padding: 30px;
	border: 1px dashed rgba(0, 168, 89, 0.35);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.75);
	color: #68746f;
	text-align: center;
}

/* =====================================================
   TABLET
===================================================== */
@media (max-width: 991px) {
	#bai-viet {
		padding: 72px 0;
	}

	#bai-viet .section-head {
		margin-bottom: 36px;
	}

	#bai-viet .blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	#bai-viet .blog-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: calc(50% - 12px);
		width: 100%;
		margin: 0 auto;
	}
}

/* =====================================================
   MOBILE
===================================================== */
@media (max-width: 767px) {
	#bai-viet {
		padding: 58px 0;
	}

	#bai-viet::before,
	#bai-viet::after {
		display: none;
	}

	#bai-viet .section-head {
		margin-bottom: 30px;
	}

	#bai-viet .eyebrow {
		margin-bottom: 12px;
		padding: 7px 13px;
		font-size: 11px;
	}

	#bai-viet .section-head h2 {
		font-size: 29px;
		line-height: 1.25;
	}

	#bai-viet .section-head h2::after {
		width: 52px;
		height: 3px;
		margin-top: 14px;
	}

	#bai-viet .section-head .lede {
		margin-top: 14px;
		font-size: 15px;
		line-height: 1.65;
	}

	#bai-viet .blog-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	#bai-viet .blog-card:last-child:nth-child(odd) {
		grid-column: auto;
		max-width: none;
		margin: 0;
	}

	#bai-viet .blog-card {
		border-radius: 17px;
	}

	#bai-viet .blog-card:hover {
		transform: translateY(-4px);
	}

	#bai-viet .blog-card-media {
		aspect-ratio: 16 / 9;
	}

	#bai-viet .blog-card-body {
		padding: 20px 20px 22px;
	}

	#bai-viet .blog-card h3 {
		font-size: 19px;
	}

	#bai-viet .blog-card-excerpt {
		font-size: 14px;
		line-height: 1.7;
	}

	#bai-viet .blog-card-media::before {
		right: 14px;
		bottom: 14px;
		width: 38px;
		height: 38px;
		font-size: 19px;
		opacity: 1;
		transform: none;
	}
}

/* =====================================================
   MOBILE NHỎ
===================================================== */
@media (max-width: 420px) {
	#bai-viet {
		padding: 50px 0;
	}

	#bai-viet .section-head h2 {
		font-size: 26px;
	}

	#bai-viet .blog-card-body {
		padding: 18px;
	}

	#bai-viet .blog-card h3 {
		font-size: 18px;
	}
}