/* ==========================================================================
   Banner đầu trang chủ – [hp_home_hero]
   ========================================================================== */
.hp-hero {
	--hh-primary: var(--hp-primary, #006ead);
	--hh-primary-50: var(--hp-primary-50, #e8f3fa);
	--hh-accent: var(--hp-accent, #ffd200);
	--hh-ink: var(--hp-ink, #1b2430);
	--hh-muted: var(--hp-muted, #6b7684);
	--hh-line: var(--hp-line, #e5e9ef);
	--hh-radius: 12px;
	--hh-gap: 14px;
	--hh-cat-w: 270px;
	--hh-side-w: 340px;
	padding: 18px 0 8px;
	width: 100%;
	font-family: var(--hp-font, Roboto, "Segoe UI", Arial, sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--hh-ink);
}
.hp-hero *, .hp-hero *::before, .hp-hero *::after { box-sizing: border-box; }
.hp-hero span, .hp-hero p { line-height: inherit; font-family: inherit; }
.hp-hero ul { list-style: none; margin: 0; padding: 0; }
.hp-hero a { text-decoration: none; }
.hp-hero img { display: block; max-width: 100%; }
.hp-hero .hp-container { width: 100%; max-width: var(--hp-container, 1430px); margin: 0 auto; padding: 0 16px; }
.hp-hero .hp-ico { width: 1em; height: 1em; flex: none; }
.hp-hero button,
.hp-hero button:hover,
.hp-hero button:focus {
	font: inherit; color: inherit; background: none; border: 0; border-radius: 0;
	padding: 0; margin: 0; cursor: pointer; box-shadow: none; text-transform: none; white-space: normal;
}
.hp-hero :focus-visible { outline: 2px solid var(--hh-primary); outline-offset: 2px; }

.hp-hero__grid {
	display: grid;
	grid-template-columns: var(--hh-cat-w) minmax(0, 1fr) var(--hh-side-w);
	gap: var(--hh-gap);
	align-items: stretch;
}
.hp-hero--no-side .hp-hero__grid { grid-template-columns: var(--hh-cat-w) minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   Cột danh mục
   -------------------------------------------------------------------------- */
.hp-hero__cat {
	position: relative; z-index: 5;
	background: #fff;
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius);
	box-shadow: 0 4px 18px -10px rgba(16, 38, 64, .18);
	padding: 6px 0;
	display: flex; flex-direction: column;
}
.hp-hero__menu { display: flex; flex-direction: column; }
.hp-hero__menu > li { position: relative; }
.hp-hero__menu > li + li { border-top: 1px solid #f0f2f5; }
.hp-hero__menu > li > a {
	display: flex; align-items: center; gap: 12px;
	min-height: 46px; padding: 8px 16px 8px 18px;
	color: var(--hh-ink); font-size: 14px; font-weight: 600;
	transition: color .2s, background-color .2s;
}
.hp-hero__menu > li > a::before {
	content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%;
	background: var(--hh-primary); opacity: .35; transition: opacity .2s, transform .2s;
}
.hp-hero__menu > li.menu-item-has-children > a::after {
	content: ""; margin-left: auto; width: 7px; height: 7px; flex: none;
	border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
	transform: rotate(45deg); opacity: .45;
}
.hp-hero .hp-hero__menu > li:hover > a,
.hp-hero .hp-hero__menu > li:focus-within > a,
.hp-hero .hp-hero__menu > li.current-menu-item > a { color: var(--hh-primary) !important; background: var(--hh-primary-50); }
.hp-hero__menu > li:hover > a::before { opacity: 1; transform: scale(1.3); }

/* Flyout menu con: phủ lên vùng slider */
.hp-hero__menu .sub-menu {
	position: absolute; left: calc(100% + 1px); top: -7px;
	min-width: 290px; padding: 10px 0;
	background: #fff;
	border: 1px solid var(--hh-line); border-radius: var(--hh-radius);
	box-shadow: 0 18px 40px -16px rgba(16, 38, 64, .35);
	opacity: 0; visibility: hidden; transform: translateX(8px);
	transition: opacity .18s, transform .18s, visibility .18s;
}
.hp-hero__menu li:hover > .sub-menu,
.hp-hero__menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.hp-hero__menu .sub-menu li { position: relative; }
.hp-hero__menu .sub-menu a {
	display: block; padding: 9px 20px; color: var(--hh-ink); font-size: 14px;
	transition: color .15s, background-color .15s, padding .15s;
}
.hp-hero .hp-hero__menu .sub-menu a:hover { color: var(--hh-primary) !important; background: #f5f7fa; padding-left: 24px; }

/* Khối hỗ trợ ở đáy cột danh mục */
.hp-hero__help {
	margin: auto 10px 4px; padding: 14px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--hh-primary) 0%, #0a86c9 100%);
	color: #fff;
	display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center;
}
.hp-hero__help-ico {
	grid-row: span 2;
	width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center; font-size: 18px;
	background: rgba(255, 255, 255, .18);
}
.hp-hero__help small { font-size: 12px; opacity: .85; line-height: 1.3; }
.hp-hero .hp-hero__help a { color: #fff !important; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: .3px; }
.hp-hero .hp-hero__help a:hover { color: var(--hh-accent) !important; }

/* --------------------------------------------------------------------------
   Cột giữa: slider + banner dưới
   -------------------------------------------------------------------------- */
.hp-hero__main { display: flex; flex-direction: column; gap: var(--hh-gap); min-width: 0; }

.hp-slider {
	position: relative;
	border-radius: var(--hh-radius);
	overflow: hidden;
	background: #eef2f6;
	box-shadow: 0 6px 22px -14px rgba(16, 38, 64, .35);
}
.hp-slider__viewport { overflow: hidden; aspect-ratio: 1333 / 527; touch-action: pan-y; }
.hp-slider__track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.hp-slider.is-dragging .hp-slider__track { transition: none; }
.hp-slider__slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.hp-slider__link { display: block; width: 100%; height: 100%; position: relative; }
/* Ảnh khác tỉ lệ: nền mờ phía sau, ảnh chính không bị cắt */
.hp-slider__bg {
	position: absolute; inset: -20px; width: calc(100% + 40px) !important; height: calc(100% + 40px) !important; max-width: none !important;
	object-fit: cover; filter: blur(18px) saturate(1.1); opacity: .7;
}
.hp-slider__img {
	position: relative; width: 100%; height: 100% !important;
	object-fit: contain;
	user-select: none; -webkit-user-drag: none;
}

.hp-slider__arrow {
	position: absolute; top: calc(50% - 22px); transform: translateY(-50%);
	width: 40px; height: 40px; border-radius: 50% !important;
	display: grid !important; place-items: center;
	background: rgba(255, 255, 255, .9) !important; color: var(--hh-ink) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .15) !important;
	font-size: 20px; opacity: 0; transition: opacity .25s, transform .25s, background-color .2s;
	z-index: 2;
}
.hp-slider__arrow--prev { left: 14px; }
.hp-slider__arrow--prev .hp-ico { transform: rotate(90deg); }
.hp-slider__arrow--next { right: 14px; }
.hp-slider__arrow--next .hp-ico { transform: rotate(-90deg); }
.hp-slider:hover .hp-slider__arrow { opacity: 1; }
.hp-hero .hp-slider__arrow:hover { background: var(--hh-primary) !important; color: #fff !important; }

.hp-slider__tabs {
	display: grid; grid-template-columns: repeat(var(--hp-tabs, 3), minmax(0, 1fr));
	background: #fff; border-top: 1px solid var(--hh-line);
}
.hp-hero .hp-slider__tab {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	min-height: 46px; padding: 8px 12px;
	font-size: 13.5px; font-weight: 500; color: var(--hh-muted);
	text-align: center; line-height: 1.3;
	transition: color .2s, background-color .2s;
}
.hp-hero .hp-slider__tab + .hp-slider__tab::before {
	content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--hh-line);
}
.hp-hero .hp-slider__tab:hover { color: var(--hh-ink); background: #fafbfc; }
.hp-hero .hp-slider__tab.is-active { color: var(--hh-primary); font-weight: 700; }
.hp-slider__progress {
	position: absolute; left: 0; right: 0; top: -1px; height: 3px;
	background: var(--hh-primary); transform: scaleX(0); transform-origin: left;
}
.hp-slider__tab.is-active .hp-slider__progress { animation: hp-progress var(--hp-dur, 5000ms) linear forwards; }
.hp-slider.is-paused .hp-slider__tab.is-active .hp-slider__progress { animation-play-state: paused; }
.hp-slider.no-autoplay .hp-slider__tab.is-active .hp-slider__progress { animation: none; transform: scaleX(1); }
@keyframes hp-progress { to { transform: scaleX(1); } }

.hp-hero__bottom {
	display: block; border-radius: var(--hh-radius); overflow: hidden;
	box-shadow: 0 6px 22px -14px rgba(16, 38, 64, .35);
}
.hp-hero__bottom img { width: 100%; height: auto; transition: transform .5s; }
a.hp-hero__bottom:hover img { transform: scale(1.02); }

/* --------------------------------------------------------------------------
   Cột phải: 3 banner
   -------------------------------------------------------------------------- */
.hp-hero__side { display: flex; flex-direction: column; gap: var(--hh-gap); min-width: 0; }
.hp-hero__card {
	position: relative; flex: 1; min-height: 120px;
	display: block; border-radius: var(--hh-radius); overflow: hidden;
	background: #eef2f6;
	box-shadow: 0 6px 22px -14px rgba(16, 38, 64, .35);
}
.hp-hero__card img {
	position: absolute; inset: 0; width: 100%; height: 100% !important;
	object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.hp-hero__card::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(8, 24, 42, .55) 100%);
	pointer-events: none;
}
a.hp-hero__card:hover img { transform: scale(1.06); }
.hp-hero__label {
	position: absolute; left: 12px; bottom: 10px; z-index: 1;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 5px 10px 5px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .95); color: var(--hh-ink);
	font-size: 12.5px; font-weight: 700; line-height: 1.2;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
	transition: background-color .2s, color .2s;
}
.hp-hero__label .hp-ico { font-size: 14px; transform: rotate(-90deg); }
a.hp-hero__card:hover .hp-hero__label { background: var(--hh-primary); color: #fff; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
	.hp-hero { --hh-side-w: 300px; }
}
@media (max-width: 1280px) {
	.hp-hero { --hh-cat-w: 240px; --hh-side-w: 270px; }
	.hp-hero__menu > li > a { font-size: 13.5px; }
}

@media (max-width: 1100px) {
	.hp-hero__grid { grid-template-columns: var(--hh-cat-w) minmax(0, 1fr); }
	.hp-hero__side { grid-column: 1 / -1; flex-direction: row; }
	.hp-hero__card { aspect-ratio: 1024 / 500; min-height: 0; }
}

@media (max-width: 1023px) {
	.hp-hero { padding-top: 12px; --hh-gap: 10px; }
	.hp-hero__grid, .hp-hero--no-side .hp-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.hp-hero__cat { display: none; }
	.hp-slider__arrow { display: none !important; }
}

@media (max-width: 640px) {
	.hp-hero { --hh-radius: 10px; }
	.hp-hero .hp-slider__tab { font-size: 12px; min-height: 40px; padding: 6px 8px; }
	.hp-hero__side {
		overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
		margin: 0 -16px; padding: 2px 16px 10px;
	}
	.hp-hero__side::-webkit-scrollbar { display: none; }
	.hp-hero__card { flex: 0 0 72%; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
	.hp-slider__track, .hp-hero__card img, .hp-hero__bottom img { transition: none; }
}