/* =========================================================
   CSS SECTION DỊCH VỤ & THẾ MẠNH (.home_dv)
   ========================================================= */
.home_dv {
	padding-left: 5px;
	padding-right: 5px;
}

.home_dv .col {
	padding-bottom: 15px !important;
}

/* ---------------------------------------------------------
   1. KHỐI DỊCH VỤ (.home_dv .dichvu)
   --------------------------------------------------------- */
.home_dv .dichvu h2 {
	color: var(--color-black);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 4px;
}

.home_dv .dichvu h5 {
	color: var(--color-main-light);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 14px;
}

.home_dv .dichvu p {
	color: var(--news-muted);
	font-size: 15px;
	line-height: 1.45;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}

.home_dv .dichvu p svg {
	flex-shrink: 0; /* Giữ icon tròn đỏ không bị méo khi chữ xuống 2 dòng */
	fill: var(--color-sub) !important;
	margin-right: 10px !important;
}

/* ---------------------------------------------------------
   2. KHỐI THẾ MẠNH CẠNH TRANH (.home_dv .themanh)
   --------------------------------------------------------- */
.home_dv .themanh h2 {
	background-color: var(--color-sub);
	color: var(--color-white);
	font-size: 21px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 5px;
	margin-bottom: 14px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
}

.home_dv .themanh h5 {
	display: inline-block;
	background-color: rgba(26, 86, 196, 0.1); /* Nền xanh nhạt tự động theo tông xanh */
	color: var(--color-main-light);
	font-size: 13.5px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 5px;
	margin-bottom: 8px;
}

.home_dv .themanh h3 {
	color: var(--color-black);
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 8px;
}

.home_dv .themanh p {
	color: var(--news-muted);
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 8px;
}

/* Tự động thêm dấu (+) màu đỏ cho các thẻ p từ dòng thứ 2 trở đi */
.home_dv .themanh p:not(:first-of-type) {
	position: relative;
	padding-left: 22px;
}

.home_dv .themanh p:not(:first-of-type)::before {
	content: "+";
	color: var(--color-sub);
	font-size: 20px;
	font-weight: 700;
	position: absolute;
	left: 0;
	top: -2px;
	line-height: 1.2;
}

/* ---------------------------------------------------------
   3. KHỐI BÃI XE KHẮP NƠI (.home_dv .baixekhapnoi)
   --------------------------------------------------------- */
.home_dv .baixekhapnoi h5 {
	display: inline-block;
	background-color: rgba(26, 86, 196, 0.1);
	color: var(--color-main-light);
	font-size: 13.5px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 5px;
	margin-bottom: 8px;
}

.home_dv .baixekhapnoi h3 {
	color: var(--color-black);
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 8px;
}

.home_dv .baixekhapnoi p {
	color: var(--news-muted);
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 8px;
}

/* Nút Gọi màu đỏ trải dài 100% chiều ngang */
.home_dv .baixekhapnoi .button.primary {
	background-color: var(--color-sub) !important;
	color: var(--color-white) !important;
	width: 100%;
	margin-top: 8px;
	margin-bottom: 20px;
	padding: 4px 0;
	border-radius: 6px !important;
	font-size: 17px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.3px;
}

.home_dv .baixekhapnoi .button.primary:hover {
	background-color: var(--color-sub-hover) !important;
}

/* Bo góc ảnh chụp xe bên dưới nút gọi */
.home_dv .baixekhapnoi .img .img-inner {
	border-radius: 12px;
	overflow: hidden;
}

/* =========================================================
   CSS SECTION THỜI GIAN XE ĐẾN (.home_thoigian)
   ========================================================= */
.home_thoigian {
	padding-top: 10px !important;
	padding-bottom: 20px !important;
}

/* ---------------------------------------------------------
   1. KHỐI TIÊU ĐỀ NỀN HỒNG NHẠT (.home_thoigian .title)
   --------------------------------------------------------- */
.home_thoigian .title {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 18px !important;
}

.home_thoigian .title .col-inner {
	background-color: rgba(238, 0, 0, 0.08); /* Nền đỏ hồng nhạt tràn viền */
	padding: 12px 15px;
}

.home_thoigian .title h2 {
	color: var(--color-sub);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0;
}

/* ---------------------------------------------------------
   2. KHỐI 15 PHÚT & 30 PHÚT (.muoilam & .bamuoi)
   --------------------------------------------------------- */
.home_thoigian .muoilam,
.home_thoigian .bamuoi {
	padding-bottom: 15px !important;
}

/* Khung thẻ xám bo góc, chừa lề trái 76px cho Icon đồng hồ */
.home_thoigian .muoilam .col-inner,
.home_thoigian .bamuoi .col-inner {
	background-color: #F4F5F7;
	border-radius: 10px;
	padding: 16px 15px 16px 76px;
	position: relative;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Đưa thẻ <p> đầu tiên (chứa SVG đồng hồ) sang góc trái */
.home_thoigian .muoilam p:first-of-type,
.home_thoigian .bamuoi p:first-of-type {
	position: absolute;
	left: 16px;
	top: 18px;
	margin: 0 !important;
	line-height: 1;
}

.home_thoigian .muoilam svg,
.home_thoigian .bamuoi svg {
	width: 46px;
	height: 46px;
	display: block;
}

.home_thoigian .muoilam svg path,
.home_thoigian .bamuoi svg path {
	fill: var(--color-black) !important;
}

/* Tiêu đề 15 Phút & Tối Đa 30 Phút màu xanh */
.home_thoigian .muoilam h4,
.home_thoigian .bamuoi h4 {
	color: var(--color-main-light);
	font-size: 17px;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 6px;
}

/* Đoạn văn mô tả các Quận/Huyện */
.home_thoigian .muoilam p:not(:first-of-type),
.home_thoigian .bamuoi p:not(:first-of-type) {
	color: var(--news-muted);
	font-size: 14.5px;
	line-height: 1.5;
	margin-bottom: 0;
}

/* Chữ in đậm tên các Quận */
.home_thoigian .muoilam p strong,
.home_thoigian .bamuoi p strong {
	color: var(--color-text-main);
	font-weight: 700;
}

/* =========================================================
   CSS KHUNG LIÊN HỆ DẠNG CARD (.home_hotline .khunglienhe)
   ========================================================= */
.home_hotline .khunglienhe {
	padding-bottom: 20px !important;
}

/* Khung bao ngoài bo góc, nền xanh đậm */
.home_hotline .khunglienhe .icon-box {
	background-color: var(--color-main);
	border: 1px solid var(--color-main-light);
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Ép ảnh Icon Box từ 60px bung ra 100% khung như ảnh mẫu */
.home_hotline .khunglienhe .icon-box-img {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 14px 0 !important;
}

.home_hotline .khunglienhe .icon-box-img img {
	width: 100% !important;
	height: 300px;
	object-fit: cover;
	border-radius: 12px;
	padding: 0 !important;
	display: block;
}

/* Tiêu đề Ba Gác Quận 12 */
.home_hotline .khunglienhe .icon-box-text h3 {
	color: var(--color-white);
	font-size: 20px;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 8px;
}

/* Đoạn mô tả bên dưới */
.home_hotline .khunglienhe .icon-box-text p {
	color: var(--color-white);
	opacity: 0.9;
	font-size: 14.5px;
	line-height: 1.5;
	margin-bottom: 16px;
}

/* Làm nổi bật dòng chữ Sếp Tuấn yêu cầu */
.home_hotline .khunglienhe .icon-box-text p strong {
	background-color: transparent !important;
	font-weight: 400 !important;
	padding: 0 !important;
}

/* Nút Liên hệ ngay trải dài 100% */
.home_hotline .khunglienhe .button.primary {
	background: linear-gradient(180deg, var(--color-sub) 0%, var(--color-sub-hover) 100%) !important;
	border: none !important;
	color: var(--color-white) !important;
	width: 100%;
	margin: 0 !important;
	padding: 6px 15px;
	border-radius: 10px !important;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(238, 0, 0, 0.4);
}

.home_hotline .khunglienhe .button.primary:hover {
	background: linear-gradient(180deg, var(--color-sub-hover) 0%, var(--color-sub) 100%) !important;
}
/* =========================================
HIỆU ỨNG PHÁT SÁNG + RUN NHẸ (.home_dv .baixekhapnoi)
========================================= */
.home_dv .baixekhapnoi .button {
	position: relative;
	display: inline-block;
	overflow: hidden;
	transform-origin: center center;
	animation: home_dv_glow_pulse 2.2s ease-in-out infinite;
	will-change: transform, box-shadow;
}

/* Vệt ánh sáng trắng lướt ngang qua mặt nút */
.home_dv .baixekhapnoi .button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.45) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-25deg);
	animation: home_dv_shine_sweep 2.2s ease-in-out infinite;
	pointer-events: none;
}

/* Khi di chuột vào thì dừng để khách dễ bấm */
.home_dv .baixekhapnoi .button:hover {
	animation-play-state: paused;
}
.home_dv .baixekhapnoi .button:hover::after {
	animation-play-state: paused;
}

/* Keyframes: Tỏa quầng sáng + nhích rất nhẹ (chỉ 2 độ) */
@keyframes home_dv_glow_pulse {
	0%, 100% {
		transform: scale(1) rotate(0deg);
		box-shadow: 0 0 0 0 rgba(238, 0, 0, 0.55), 0 4px 12px rgba(238, 0, 0, 0.25);
	}
	25% {
		transform: scale(1.03) rotate(-1.5deg);
	}
	50% {
		transform: scale(1.04) rotate(1.5deg);
		box-shadow: 0 0 0 12px rgba(238, 0, 0, 0), 0 6px 20px rgba(238, 0, 0, 0.55);
	}
	75% {
		transform: scale(1.02) rotate(-1deg);
	}
}

/* Keyframes: Vệt sáng chạy qua nút */
@keyframes home_dv_shine_sweep {
	0% {
		left: -120%;
	}
	45%, 100% {
		left: 160%;
	}
}
/* =========================================
1. FIX NÚT GỌI ĐỎ DÀI (KHÔNG BỊ NGHIÊNG LỆCH, CHỈ PHÁT SÁNG + NHỊP ĐẬP)
========================================= */
.home_dv .baixekhapnoi .button {
	position: relative;
	overflow: hidden;
	transform-origin: center center;
	animation: home_dv_glow_straight 2s ease-in-out infinite !important;
	will-change: transform, box-shadow;
}

/* Vệt ánh sáng trắng lướt ngang qua mặt nút */
.home_dv .baixekhapnoi .button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 55%;
	height: 100%;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.45) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-25deg);
	animation: home_dv_shine_sweep 2s ease-in-out infinite;
	pointer-events: none;
}

/* Giữ nút luôn thẳng 100%, chỉ tỏa sóng sáng và nhấp nhô nhẹ */
@keyframes home_dv_glow_straight {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(238, 0, 0, 0.6), 0 4px 12px rgba(238, 0, 0, 0.3);
	}
	50% {
		transform: scale(1.02);
		box-shadow: 0 0 0 10px rgba(238, 0, 0, 0), 0 6px 20px rgba(238, 0, 0, 0.6);
	}
}

@keyframes home_dv_shine_sweep {
	0% {
		left: -120%;
	}
	50%, 100% {
		left: 150%;
	}
}

/* =========================================
2. KÉO 2 NÚT ZALO & PHONE VÀO TRONG KHUNG WEB Ở GIỮA
========================================= */
#button-contact-vr {
	right: max(12px, calc(50vw - 260px)) !important;
	left: auto !important;
/* 	bottom: 20px !important; */
	z-index: 99999 !important;
}

@media (max-width: 600px) {
	#button-contact-vr {
		right: 10px !important;
		bottom: 15px !important;
	}
}