/*
Theme Name: TANASU
Theme URI: https://tanasu.vn/
Author: TANASU
Description: Theme gốc viết tay cho TANASU (phong cách công nghiệp Cơ Khí Hồng Ký): dữ liệu gom trong inc/data.php, schema JSON-LD, form liên hệ lưu đơn, nút liên hệ nổi, không page builder, không jQuery.
Version: 2.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: tanasu
*/

/* ==========================================================================
   1. Tokens — Phong cách Công Nghiệp Cơ Khí Hồng Ký (hongky.com)
   ========================================================================== */
:root {
	--c-primary: #004b93;
	--c-primary-dark: #0f172a;
	--c-primary-light: #0252fb;
	--c-primary-glow: rgba(2, 82, 251, 0.08);
	--c-cyan: #0ea5e9;
	--c-cyan-light: #38bdf8;
	--c-red: #0252fb;
	--c-red-dark: #003ecc;
	--c-accent: #0252fb;

	--c-bg: #ffffff;
	--c-bg-alt: #f8fafc;
	--c-bg-dark: #0f172a;
	--c-surface: #f1f5f9;
	--c-card: #ffffff;

	--c-text: #0f172a;
	--c-text-muted: #475569;
	--c-text-invert: #ffffff;
	--c-border: #e2e8f0;

	--f-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-sm: 0.84rem;
	--fs-base: 0.94rem;
	--fs-lg: 1.04rem;
	--fs-h3: clamp(0.98rem, 0.93rem + 0.35vw, 1.12rem);
	--fs-h2: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
	--fs-h1: clamp(1.65rem, 1.3rem + 1.6vw, 2.35rem);

	--radius: 9px;
	--radius-sm: 6px;
	--radius-pill: 999px;
	--shadow: 0 4px 24px rgba(15, 23, 42, 0.07);
	--shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.14);

	--space-section: clamp(3.25rem, 2.5rem + 3vw, 4.75rem);
	--container: 1200px;
	--gutter: 16px;
	--header-h: 108px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6; color: var(--c-text); background: var(--c-bg); overflow-x: hidden; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--c-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--c-red); }
h1, h2, h3, h4 { font-family: var(--f-heading); line-height: 1.25; margin: 0 0 0.6em; color: var(--c-text); font-weight: 700; }
h1 { font-size: var(--fs-h1); color: #ffffff; text-transform: uppercase; }
h2 { font-size: var(--fs-h2); color: var(--c-text); font-weight: 800; }
h3 { font-size: var(--fs-h3); color: var(--c-text); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
input, select, textarea, button { font: inherit; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 8px 16px; background: #fff; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); background: var(--c-bg); }
.section--alt { background: var(--c-bg-alt); }
.section--surface { background: var(--c-surface); }
.section--dark { background: var(--c-bg-dark); color: #ffffff; }
.section--dark h2, .section--dark h3 { color: #ffffff; }
.section--dark .section__eyebrow { color: #38bdf8; }
.section--dark .section__lead { color: rgba(255, 255, 255, 0.88); }

.section__head { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }
.section__eyebrow { display: inline-block; margin-bottom: 0.35rem; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-red); }
.section__lead { color: var(--c-text-muted); font-size: var(--fs-lg); }

/* Thanh tiêu đề khối kiểu Hồng Ký */
.section-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 2rem; }
.section-bar--sub { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--c-border); }
.section-bar__title { margin: 0; font-size: var(--fs-h2); color: var(--c-text); font-weight: 800; position: relative; padding-bottom: 8px; }
.section-bar__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 3px; background: linear-gradient(90deg, #0252fb 0%, #0ea5e9 100%); border-radius: 2px; }
.section-bar__sub { margin: 0.5rem 0 0; max-width: 680px; color: var(--c-text-muted); font-size: var(--fs-base); }

.grid { display: grid; gap: 20px; grid-template-columns: 1fr; }

/* ==========================================================================
   3. Nút bấm (Phối màu Trắng - Xám Đen Titan #0f172a - Điểm nhấn Xanh TANASU #0252fb/#0ea5e9)
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border: 2px solid transparent; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.88rem; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn--sm { min-height: 36px; padding: 7px 15px; font-size: 0.82rem; }
.btn--red { background: linear-gradient(135deg, #0252fb 0%, #0ea5e9 100%); color: #ffffff; box-shadow: 0 4px 14px rgba(2, 82, 251, 0.26); }
.btn--red:hover { background: linear-gradient(135deg, #003ecc 0%, #0284c7 100%); color: #ffffff; box-shadow: 0 8px 20px rgba(2, 82, 251, 0.36); }
.btn--primary { background: var(--c-primary); color: #ffffff; }
.btn--primary:hover { background: #003870; color: #ffffff; box-shadow: 0 6px 16px rgba(0, 75, 147, 0.25); }
.btn--accent { background: linear-gradient(135deg, #0252fb 0%, #0ea5e9 100%); color: #ffffff; }
.btn--accent:hover { background: linear-gradient(135deg, #003ecc 0%, #0284c7 100%); color: #ffffff; }
.btn--white-outline { border-color: rgba(255, 255, 255, 0.85); color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.btn--white-outline:hover { background: #ffffff; color: var(--c-primary); }
.btn--ghost { border-color: var(--c-primary); color: var(--c-primary); background: transparent; }
.btn--ghost:hover { background: var(--c-primary); color: #ffffff; }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   4. Header 2 Tầng Chuẩn Hồng Ký (Logo + Thanh tìm kiếm đỏ + Mega Dropdown)
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; background: #ffffff; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }

.header-top { padding-block: 10px; border-bottom: 1px solid #f0f0f0; }
.header-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-logo, .custom-logo-link { display: flex; align-items: center; font-family: var(--f-heading); font-size: 1.4rem; font-weight: 800; color: var(--c-primary); text-decoration: none; }
.site-logo img, .custom-logo-link img { max-height: 36px; width: auto; }
.site-logo--ghsg { display: inline-flex; align-items: center; text-decoration: none !important; transition: transform 0.2s ease, opacity 0.2s ease; }
.site-logo--ghsg:hover { transform: translateY(-1px); opacity: 0.92; }
.site-logo__img { display: block; height: 32px; width: auto; max-width: 246px; object-fit: contain; }
@media (max-width: 639px) {
	.site-logo__img { height: 26px; max-width: 195px; }
}
.footer-brand-logo { display: inline-block; margin-bottom: 12px; }
.footer-brand-logo img { display: block; height: 28px; width: auto; object-fit: contain; }

/* Ô tìm kiếm sản phẩm giống Hồng Ký */
.header-search { display: none; flex: 1; max-width: 440px; align-items: center; background: #f6f6f6; border: 1px solid #e5e7eb; border-radius: var(--radius-sm); padding: 3px; }
.header-search__input { flex: 1; border: 0; background: transparent; padding: 7px 12px; font-size: 0.84rem; color: var(--c-text); outline: none; }
.header-search__btn { border: 0; border-radius: 4px; background: var(--c-red); color: #ffffff; font-weight: 600; font-size: 0.82rem; padding: 8px 16px; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.header-search__btn:hover { background: var(--c-red-dark); }

.header-contact { display: none; align-items: center; gap: 18px; font-size: 0.84rem; }
.header-contact__item { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text); font-weight: 500; }
.header-contact__item svg { color: var(--c-primary); }
.header-contact__item strong { color: var(--c-text); font-weight: 700; }
.header-flag { display: inline-flex; align-items: center; gap: 6px; padding-left: 14px; border-left: 1px solid #e2e8f0; font-size: 0.78rem; font-weight: 700; color: var(--c-text-muted); }

/* Tầng 2 Header */
.header-nav-bar { background: #ffffff; border-bottom: 1px solid #eaeaea; }
.header-nav-bar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.header-nav-bar__right { display: none; align-items: center; gap: 18px; }
.header-quick-link { font-size: 0.86rem; font-weight: 600; color: var(--c-text); }
.header-quick-link:hover { color: var(--c-primary); }

/* Nút xanh "Sản phẩm v" + Mega Dropdown */
.cat-dropdown { position: relative; }
.nav-cat-pill, .primary-nav a.nav-cat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: var(--radius-sm); background: var(--c-primary); color: #ffffff !important; font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.nav-cat-pill:hover, .primary-nav a.nav-cat-pill:hover { background: var(--c-primary-dark); color: #ffffff !important; }
.cat-dropdown__menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; width: 340px; background: #ffffff; border-radius: var(--radius); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16); border: 1px solid #eaeaea; padding: 10px; z-index: 120; }
.cat-dropdown:hover .cat-dropdown__menu, .cat-dropdown:focus-within .cat-dropdown__menu { display: grid; gap: 6px; }
.cat-dropdown__item, .primary-nav a.cat-dropdown__item { display: grid !important; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 8px 10px !important; border-radius: var(--radius-sm); border: 1px solid transparent !important; transition: background 0.2s, border-color 0.2s; white-space: normal !important; }
.cat-dropdown__item:hover { background: #f6f9ff; border-color: #dbeafe !important; }
.cat-dropdown__thumb { width: 52px; height: 52px; border-radius: 6px; background: #ffffff; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 4px; }
.cat-dropdown__thumb img { max-height: 100%; width: auto; object-fit: contain; }
.cat-dropdown__info strong { display: block; font-size: 0.86rem; color: var(--c-primary); margin-bottom: 2px; }
.cat-dropdown__info span { display: block; font-size: 0.74rem; color: var(--c-text-muted); line-height: 1.35; }

.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { display: block; width: 22px; height: 2px; background: var(--c-primary); position: relative; transition: transform 0.2s; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after { top: 7px; }
.nav-open .nav-toggle__bar { background: transparent; }
.nav-open .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

.primary-nav { position: fixed; inset: 64px 0 0 0; background: #ffffff; padding: 20px var(--gutter) 32px; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s; box-shadow: var(--shadow); }
.nav-open .primary-nav { transform: none; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav a { display: block; padding: 11px 0; color: var(--c-text); font-weight: 600; font-size: 0.88rem; text-decoration: none; border-bottom: 1px solid var(--c-border); }
.primary-nav .current-menu-item > a, .primary-nav a:hover { color: var(--c-primary); }

/* ==========================================================================
   5. Hero Slider Đa Cảnh (Ảnh nền cố định phía sau, cuộn nội dung phía trước)
   ========================================================================== */
.hero-slider { position: relative; background: #003366; color: #ffffff; overflow: hidden; }
.hero-slider__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.88) contrast(1.04); z-index: 0; }
.hero-slider::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 38, 82, 0.44) 0%, rgba(0, 56, 114, 0.62) 50%, rgba(0, 44, 92, 0.78) 100%); z-index: 1; pointer-events: none; }
.hero-slider__track { position: relative; z-index: 2; min-height: 540px; }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s ease; display: flex; align-items: center; padding-block: 48px 68px; }
.hero-slide.is-active { position: relative; opacity: 1; visibility: visible; transform: translateX(0); z-index: 2; }

.hero-slide__inner { position: relative; z-index: 2; display: grid; gap: 32px; align-items: center; }

/* Cột trái: Máy gá hàn nổi bật trong khung công nghiệp */
.hero-slide__visual { display: flex; justify-content: center; }
.hero-machine { position: relative; background: #ffffff; border-radius: 12px; padding: 22px 24px 18px; width: 100%; max-width: 440px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); border-top: 4px solid var(--c-primary); border-bottom: 4px solid #0ea5e9; text-align: center; }
.hero-machine__badge { position: absolute; top: -13px; left: 20px; background: var(--c-primary); color: #ffffff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 12px; border-radius: 4px; }
.hero-machine__img-wrap { height: 260px; display: flex; align-items: center; justify-content: center; padding: 8px; }
.hero-machine__img { max-height: 100%; width: auto; object-fit: contain; }
.hero-machine__caption { margin-top: 10px; padding-top: 12px; border-top: 1px solid #e5e7eb; color: var(--c-text); }
.hero-machine__caption strong { display: block; font-size: 0.94rem; font-weight: 800; color: #0f172a; margin-bottom: 2px; }
.hero-machine__caption span { font-size: 0.8rem; color: var(--c-text-muted); }

/* Cột phải: Hộp nội dung kiểu Hồng Ký ("MÁY GIA CÔNG HỒNG KÝ - CHÌA KHÓA TRAO TAY") */
.hero-slide__box { background: rgba(0, 40, 85, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.22); border-left: 4px solid #38bdf8; border-radius: var(--radius); padding: 32px 30px; max-width: 620px; }
.hero-slide__title { font-size: var(--fs-h1); font-weight: 800; color: #ffffff; text-transform: uppercase; line-height: 1.2; margin: 0 0 0.35rem; letter-spacing: 0.01em; }
.hero-slide__subtitle { font-size: 1.02rem; font-weight: 700; color: #38bdf8; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 1.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.hero-slide__desc { font-size: 0.93rem; line-height: 1.7; color: rgba(255, 255, 255, 0.9); margin: 0 0 1.5rem; text-align: justify; text-align-last: left; }

/* Nút mũi tên vuông < > hai bên giống Hồng Ký */
.hero-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.65); background: rgba(0, 0, 0, 0.25); color: #ffffff; display: none; place-items: center; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.hero-slider__arrow:hover { background: var(--c-red); border-color: var(--c-red); }
.hero-slider__arrow--prev { left: 24px; }
.hero-slider__arrow--next { right: 64px; }

/* Thanh vạch chỉ báo slide dưới đáy giống Hồng Ký */
.hero-slider__dots-wrap { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 5; pointer-events: none; }
.hero-slider__dots { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.hero-slider__dot { width: 26px; height: 5px; border: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.45); padding: 0; cursor: pointer; transition: width 0.25s, background 0.25s; }
.hero-slider__dot.is-active { width: 44px; background: #ffffff; }

/* ==========================================================================
   6. Danh mục sản phẩm & 4 Kệ sản phẩm Bento (.shop-box / .shop-layout)
   ========================================================================== */
.shop-hub-section { background: #f8fafc; }
.shop-quick-cats { margin-bottom: 32px; }
.cat-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; text-align: center; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: #0252fb; }
.cat-card__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 20px; background: #ffffff; border-bottom: 1px solid #f1f5f9; }
.cat-card__media img { max-height: 100%; width: auto; object-fit: contain; transition: transform 0.3s; }
.cat-card:hover .cat-card__media img { transform: scale(1.05); }
.cat-card__body { padding: 18px 16px 22px; flex: 1; display: flex; flex-direction: column; }
.cat-card__title { font-size: 0.98rem; font-weight: 800; text-transform: uppercase; margin-bottom: 0.5rem; }
.cat-card__title a { color: var(--c-text); text-decoration: none; }
.cat-card:hover .cat-card__title a { color: var(--c-red); }
.cat-card__desc { font-size: 0.84rem; color: var(--c-text-muted); margin: 0; line-height: 1.5; }

/* 4 Kệ sản phẩm Bento lấy cảm hứng từ quatangquangtri.com với tông màu cơ khí TANASU */
.shop-shelves { display: flex; flex-direction: column; gap: 28px; }
.shop-section { scroll-margin-top: 92px; }
.shop-box {
	padding: 22px 18px;
	border-radius: 22px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}
.shop-section__head {
	display: grid;
	gap: 14px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #edf2f7;
}
.shop-section__eyebrow {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	background: #eef5ff;
	border: 1px solid #cfe0f5;
	color: #0252fb;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
}
.shop-section__head h2 {
	margin: 0 0 4px;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
	color: #0f172a;
	text-transform: uppercase;
}
.shop-section__head p {
	margin: 0;
	color: var(--c-text-muted);
	font-size: 0.9rem;
}
.shop-section__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}
.shop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}
.shop-chips .chip {
	padding: 7px 14px;
	border: 1px solid #d5e2f2;
	border-radius: 999px;
	background: #f4f8fd;
	color: var(--c-text);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.18s ease;
}
.shop-chips .chip:hover,
.shop-chips .chip.is-active {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 75, 147, 0.22);
}
.shop-more {
	flex: none;
	padding: 7px 14px;
	border-radius: 999px;
	background: #eef5ff;
	border: 1px solid #cfe0f5;
	color: var(--c-primary-light);
	font-size: 0.84rem;
	font-weight: 800;
	text-decoration: none;
	transition: all 0.18s ease;
}
.shop-more:hover {
	background: var(--c-primary-light);
	border-color: var(--c-primary-light);
	color: #ffffff;
}

.shop-layout {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
	align-items: stretch;
}
.shop-layout__left {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #cfe0f5;
	background: linear-gradient(180deg, #eef5ff 0%, #e0edff 100%);
}
.shop-layout__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.shop-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	background: #ffffff;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.shop-card:hover {
	border-color: var(--c-primary);
	box-shadow: 0 12px 28px rgba(0, 55, 115, 0.12);
}
.shop-card[hidden] { display: none !important; }
.shop-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 0;
	background: #ffffff;
	border-bottom: 1px solid #f1f5f9;
	overflow: hidden;
}
.shop-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.shop-card:hover .shop-card__media img {
	transform: scale(1.05);
}
.shop-card__sku {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 3px 9px;
	border-radius: 6px;
	background: rgba(15, 23, 42, 0.82);
	color: #ffffff;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.05em;
}
.shop-card__cat-pill {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	padding: 3px 9px;
	border-radius: 6px;
	background: #eef5ff;
	border: 1px solid #cfe0f5;
	color: var(--c-primary);
	font-size: 0.66rem;
	font-weight: 800;
	text-transform: uppercase;
}
.shop-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px;
}
.shop-card__title {
	margin: 0 0 6px;
	font-size: 0.96rem;
	font-weight: 800;
	line-height: 1.35;
}
.shop-card__title a {
	color: var(--c-primary);
	text-decoration: none;
}
.shop-card:hover .shop-card__title a {
	color: var(--c-red);
}
.shop-card__spec {
	margin: 0 0 12px;
	color: var(--c-text-muted);
	font-size: 0.8rem;
	line-height: 1.45;
}
.shop-card__actions {
	margin-top: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.shop-btn {
	display: grid;
	place-items: center;
	min-height: 38px;
	padding: 0 8px;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.shop-btn--soft {
	background: #f1f6fc;
	border: 1px solid #d5e3f4;
	color: var(--c-primary);
}
.shop-btn--soft:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #ffffff;
}
.shop-btn--buy {
	background: var(--c-red);
	color: #ffffff;
}
.shop-btn--buy:hover {
	background: var(--c-red-dark);
	color: #ffffff;
}

.shop-card--big {
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid #cfe0f5;
}
.shop-card--big .shop-card__media {
	aspect-ratio: 1 / 1;
	padding: 0;
}
.shop-card--big .shop-card__title {
	font-size: 1.12rem;
}

.shop-info {
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
}
.shop-info__badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 4px;
	background: var(--c-primary);
	color: #ffffff;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	margin-bottom: 6px;
}
.shop-info h3 {
	margin: 0 0 6px;
	font-size: 1.04rem;
	color: var(--c-primary);
}
.shop-info p {
	margin: 0 0 12px;
	color: var(--c-text-muted);
	font-size: 0.85rem;
	line-height: 1.55;
}
.shop-info ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.shop-info li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(0, 75, 147, 0.1);
	font-size: 0.83rem;
	font-weight: 700;
	color: var(--c-text);
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.shop-info li span {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #dbeafe;
	color: var(--c-primary);
	transition: background 0.18s ease, color 0.18s ease;
}
.shop-info li:hover {
	background: var(--c-primary);
	color: #ffffff;
	transform: translateX(4px);
}
.shop-info li:hover span {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

/* ==========================================================================
   7. Khối "Tại sao chọn TANASU" (Nền xanh + Lưới kỹ thuật chìm + Overlap)
   ========================================================================== */
.why-section { background: #ffffff; padding-bottom: 24px; }
.why-section__blue {
	position: relative;
	background-color: #eef6ff;
	background-image:
		radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.14) 0%, transparent 45%),
		linear-gradient(rgba(2, 82, 251, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(2, 82, 251, 0.045) 1px, transparent 1px),
		linear-gradient(180deg, #f0f7ff 0%, #e0effe 100%);
	background-size: 100% 100%, 36px 36px, 36px 36px, 100% 100%;
	color: #0f172a;
	padding: 64px 0 120px;
	border-top: 4px solid #0252fb;
	border-bottom: 1px solid #cfe2ff;
}
.why-section__heading { text-align: center; color: #003870; font-size: var(--fs-h2); font-weight: 800; margin-bottom: 2.25rem; }
.why-header { text-align: center; max-width: 800px; margin: 0 auto 36px; }
.why-header__eyebrow {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	background: #dbeafe;
	border: 1px solid #93c5fd;
	color: #0252fb;
	font-size: 0.74rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 10px;
}
.why-header__title { color: #003870; font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
.why-header__lead { color: #334155; font-size: 0.94rem; line-height: 1.65; margin: 0; }
.about-pipeline-section { padding-bottom: 0; }
.about-pipeline-section .why-section__blue { padding: 64px 0; }

.why-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 960px; margin: 0 auto 2.75rem; text-align: center; }
.why-stats__num { display: block; font-size: clamp(2.1rem, 1.6rem + 2vw, 3.1rem); font-weight: 800; color: #0252fb; line-height: 1.1; }
.why-stats__label { display: block; margin-top: 6px; font-size: 0.86rem; font-weight: 600; color: #334155; }

/* 4 thẻ trắng tràn nhẹ xuống dưới nền xanh băng sáng (overlap) */
.why-cards { max-width: 1080px; margin-inline: auto; margin-bottom: -80px; position: relative; z-index: 3; }
.why-card { background: #ffffff; color: var(--c-text); border-radius: var(--radius); padding: 26px 22px; box-shadow: 0 12px 34px rgba(0, 56, 112, 0.1); border: 1px solid #dbeafe; display: flex; flex-direction: column; transition: transform 0.25s; }
.why-card:hover { transform: translateY(-5px); }
.why-card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 10px; background: #eef5ff; border: 2px solid #0252fb; color: #0252fb; box-shadow: inset 0 0 0 3px #ffffff; }
.why-card__title { font-size: 0.94rem; font-weight: 800; color: #0f172a; text-transform: uppercase; margin-bottom: 0.65rem; line-height: 1.35; }
.why-card__text { font-size: 0.84rem; color: var(--c-text-muted); margin: 0; line-height: 1.6; }

.why-badges-wrap { background: #ffffff; padding: 72px 0 16px; }
.why-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 1000px; margin-inline: auto; text-align: center; }
.why-badge__box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 18px 12px; box-shadow: var(--shadow); margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 88px; position: relative; overflow: hidden; }
.why-badge__box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #0252fb 0%, #0ea5e9 100%); }
.why-badge__code { font-size: 1.35rem; font-weight: 800; color: #0f172a; line-height: 1.15; }
.why-badge__sub { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; color: var(--c-red); margin-top: 4px; }
.why-badge__label { font-size: 0.8rem; font-weight: 600; color: var(--c-text-muted); }

/* ==========================================================================
   8. Khối Videos 2 cột & Khối Sự kiện / Tin tức & Cảm nhận Khách hàng
   ========================================================================== */
.video-split { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: stretch; }
.video-embed { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: var(--shadow); }
.video-embed__play { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: none; }
.video-embed__play img { width: 100%; height: 100%; object-fit: cover; }
.video-embed__icon { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45)); transition: transform 0.2s; }
.video-embed__play:hover .video-embed__icon { transform: translate(-50%, -50%) scale(1.1); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-list { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.video-list__item { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: center; padding: 8px 10px; flex: 1; background: #ffffff; border: 2px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
.video-list__item:hover, .video-list__item.is-active { border-color: var(--c-red); transform: translateX(3px); }
.video-list__thumb { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.video-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-list__play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: rgba(2, 82, 251, 0.92); color: #fff; display: grid; place-items: center; font-size: 0.68rem; }
.video-list__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.84rem; font-weight: 700; color: var(--c-text); line-height: 1.35; margin-bottom: 3px; }
.video-list__meta { font-size: 0.73rem; color: var(--c-primary); font-weight: 600; }

/* Thẻ Tin tức / Sự kiện nổi bật kiểu Hồng Ký */
.hk-news-card { display: flex; flex-direction: column; background: #ffffff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid #eeeeee; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
.hk-news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.hk-news-card__media { position: relative; aspect-ratio: 800 / 600; overflow: hidden; background: #003870; display: block; }
.hk-news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.hk-news-card:hover .hk-news-card__media img { transform: scale(1.05); }
.hk-news-card__tag { position: absolute; bottom: 10px; left: 10px; padding: 4px 10px; border-radius: 4px; background: rgba(0, 75, 147, 0.92); color: #ffffff; font-size: 0.72rem; font-weight: 700; }
.hk-news-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.hk-news-card__title { font-size: 0.98rem; font-weight: 700; line-height: 1.45; margin-bottom: 0.5rem; }
.hk-news-card__title a { color: var(--c-text); }
.hk-news-card:hover .hk-news-card__title a { color: var(--c-primary); }
.hk-news-card__excerpt { font-size: 0.85rem; color: var(--c-text-muted); line-height: 1.55; margin-bottom: 1.1rem; }
.hk-news-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 700; color: var(--c-red); }
.hk-news-card__more:hover { color: var(--c-primary); }

/* Thẻ Cảm nhận Khách hàng kiểu Hồng Ký */
.hk-testi-card { display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: start; background: #ffffff; border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); border: 1px solid #eeeeee; position: relative; }
.hk-testi-card__seal { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #004b93, #0252fb); color: #ffffff; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; box-shadow: 0 6px 18px rgba(0, 75, 147, 0.25); border: 3px solid #e0edff; }
.hk-testi-card__quote { font-size: 0.88rem; color: var(--c-text-muted); line-height: 1.65; margin: 0 0 1rem; text-align: justify; text-align-last: left; }
.hk-testi-card__author { display: block; font-size: 0.94rem; font-weight: 800; color: var(--c-primary); }
.hk-testi-card__role { display: block; font-size: 0.78rem; color: var(--c-text-muted); margin-top: 2px; }

/* ==========================================================================
   9. Khối Dự án của chúng tôi (1 hàng cuộn ngang + nút < > chuẩn Hồng Ký)
   ========================================================================== */
.project-carousel { position: relative; }
.project-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(100% - 16px);
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 6px 4px 18px;
	margin-inline: -4px;
	scrollbar-width: none;
}
.project-carousel__track::-webkit-scrollbar { display: none; }
.project-carousel__slide { scroll-snap-align: start; height: 100%; }

.project-carousel__nav { display: flex; justify-content: flex-end; margin-top: 10px; }
.project-carousel__pill { display: inline-flex; align-items: center; background: #8c8c8c; border-radius: var(--radius-pill); padding: 4px 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.project-carousel__btn { width: 38px; height: 34px; border: 0; background: transparent; color: #ffffff; display: grid; place-items: center; cursor: pointer; border-radius: var(--radius-pill); transition: background 0.2s, transform 0.2s; }
.project-carousel__btn:hover { background: var(--c-primary); transform: scale(1.06); }
.project-carousel__sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.35); margin-inline: 2px; }

.hk-project-card { display: flex; flex-direction: column; background: #ffffff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid #eaeaea; transition: transform 0.25s, box-shadow 0.25s; }
.hk-project-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.hk-project-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: #f0f0f0; }
.hk-project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.hk-project-card:hover .hk-project-card__media img { transform: scale(1.04); }
.hk-project-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.hk-project-card__title { font-size: 0.98rem; font-weight: 700; color: var(--c-text); margin-bottom: 0.5rem; line-height: 1.4; }
.hk-project-card__code { color: var(--c-primary); font-weight: 800; }
.hk-project-card__desc { font-size: 0.85rem; color: var(--c-text-muted); line-height: 1.55; margin-bottom: 0.75rem; }
.project-card__stats { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 6px; }
.project-card__stats li { padding: 4px 10px; border-radius: 4px; background: #eef5ff; color: var(--c-primary); font-size: 0.74rem; font-weight: 600; }
.hk-project-card__loc { margin-top: auto; padding-top: 12px; border-top: 1px solid #f0f0f0; display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--c-text-muted); }
.hk-project-card__loc svg { color: var(--c-red); }

.industry-section { background: #f8fafd; border-top: 1px solid #e6edf5; }
.industry-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e8f0; border-bottom: 3px solid var(--c-primary); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 45, 95, 0.06); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.industry-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0, 75, 147, 0.14); border-color: var(--c-primary); border-bottom-color: var(--c-red); }
.industry-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	padding: 38px 18px 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 50% 55%, #ffffff 0%, #edf3fa 100%);
	border-bottom: 1px solid #eaeff5;
	overflow: hidden;
}
.industry-card__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 40, 85, 0.12)); transition: transform 0.35s ease; }
.industry-card:hover .industry-card__media img { transform: scale(1.06); }
.industry-card__num { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 6px; background: var(--c-primary); color: #ffffff; font-size: 0.78rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0, 75, 147, 0.22); transition: background 0.25s; }
.industry-card:hover .industry-card__num { background: var(--c-red); }
.industry-card__badge { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.92); border: 1px solid #dbe4f0; color: var(--c-primary); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.industry-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.industry-card__title { font-size: 1.04rem; font-weight: 800; color: var(--c-primary); text-transform: uppercase; margin-bottom: 6px; line-height: 1.35; }
.industry-card__desc { color: var(--c-text-muted); margin: 0 0 14px; font-size: 0.85rem; line-height: 1.55; }
.industry-card__solutions { margin-top: auto; padding-top: 12px; border-top: 1px dashed #e2e8f0; margin-bottom: 14px; }
.industry-card__sol-label { display: block; font-size: 0.73rem; font-weight: 700; text-transform: uppercase; color: var(--c-text-muted); letter-spacing: 0.04em; margin-bottom: 6px; }
.industry-card__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.industry-card__tags li { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--c-text); }
.industry-card__tags svg { color: var(--c-primary); flex-shrink: 0; }
.industry-card__cta { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 12px; border-radius: 6px; background: #f1f6fc; color: var(--c-primary); font-size: 0.8rem; font-weight: 700; transition: background 0.2s, color 0.2s; }
.industry-card:hover .industry-card__cta { background: var(--c-primary); color: #ffffff; }

.partner-card { padding: 20px; background: #ffffff; border: 1px solid #eeeeee; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.2s, border-color 0.2s; }
.partner-card:hover { transform: translateY(-4px); border-color: var(--c-primary); }
.partner-card__logo { height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.partner-card__logo img { max-height: 56px; width: auto; object-fit: contain; }
.partner-card__name { font-size: 0.92rem; font-weight: 700; color: var(--c-primary); margin-bottom: 0.2rem; }
.partner-card__product { color: var(--c-text-muted); margin: 0; font-size: 0.8rem; }

/* ==========================================================================
   10. Giới thiệu, Quy trình 4 bước Công nghiệp, FAQ, Form
   ========================================================================== */
.pricing__price { font-family: var(--f-heading); font-size: 2rem; font-weight: 800; color: var(--c-primary); }

.process-section { background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%); border-top: 1px solid #eaeaea; }
.process-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: 1fr; position: relative; }
.process-card { position: relative; background: #ffffff; border: 1px solid #e2e8f0; border-top: 4px solid var(--c-primary); border-radius: var(--radius); padding: 26px 22px 22px; box-shadow: 0 8px 24px rgba(0, 45, 95, 0.06); display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.process-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0, 75, 147, 0.14); border-top-color: var(--c-red); }
.process-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.process-card__badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 4px; background: var(--c-primary); color: #ffffff; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.25s; }
.process-card:hover .process-card__badge { background: var(--c-red); }
.process-card__watermark { font-family: var(--f-heading); font-size: 2.6rem; font-weight: 900; line-height: 1; color: rgba(0, 75, 147, 0.08); user-select: none; }
.process-card__icon { width: 56px; height: 56px; border-radius: 12px; background: #eef5ff; color: var(--c-primary); display: grid; place-items: center; margin-bottom: 16px; border: 1px solid rgba(0, 75, 147, 0.12); transition: background 0.25s, color 0.25s; }
.process-card:hover .process-card__icon { background: var(--c-primary); color: #ffffff; }
.process-card__title { font-size: 1.05rem; font-weight: 800; color: var(--c-primary); text-transform: uppercase; margin-bottom: 8px; line-height: 1.35; }
.process-card__text { font-size: 0.88rem; color: var(--c-text-muted); line-height: 1.6; margin-bottom: 18px; }
.process-card__footer { margin-top: auto; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
.process-card__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: #0b6e3f; background: #eafaf1; padding: 5px 10px; border-radius: 4px; }

.process-callout { margin-top: 28px; padding: 22px 28px; border-radius: var(--radius); background: linear-gradient(135deg, #003870 0%, #004b93 100%); color: #ffffff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 10px 28px rgba(0, 56, 112, 0.16); border-left: 5px solid var(--c-red); }
.process-callout__text { display: flex; flex-direction: column; gap: 4px; }
.process-callout__text strong { font-size: 1.05rem; font-weight: 800; color: #ffffff; }
.process-callout__text span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.86); }
.process-callout__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.process-callout__actions .btn--ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
.process-callout__actions .btn--ghost:hover { background: #ffffff; color: var(--c-primary); border-color: #ffffff; }

.faq { max-width: 860px; margin-inline: auto; background: #ffffff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 24px; border: 1px solid #eeeeee; }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__item:last-child { border-bottom: 0; }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 18px 0; border: 0; background: none; text-align: left; font-weight: 700; font-size: 0.98rem; color: var(--c-primary); cursor: pointer; }
.faq__q::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--c-red); transition: transform 0.2s; }
.faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__a { padding-bottom: 18px; color: var(--c-text-muted); font-size: 0.9rem; }
.faq__a[hidden] { display: none; }

.form { display: grid; gap: 16px; padding: 28px; background: #ffffff; color: var(--c-text); border-radius: var(--radius); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18); }
.form__row { display: grid; gap: 16px; }
.form label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.84rem; color: var(--c-text); }
.form input, .form select, .form textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: var(--radius-sm); background: #f8fafc; color: var(--c-text); }
.form textarea { min-height: 100px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--c-primary); background: #ffffff; outline: none; box-shadow: 0 0 0 3px rgba(0, 75, 147, 0.12); }
.form .btn--primary { background: var(--c-red); width: 100%; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; }
.form .btn--primary:hover { background: var(--c-red-dark); }
.form__hp { position: absolute; left: -9999px; }
.form__note { font-size: 0.8rem; color: var(--c-text-muted); text-align: center; margin: 0; }
.notice { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.notice--ok { background: #e8f6ec; color: #1d6b35; }
.notice--err { background: #fdecec; color: #9b1c1c; }

/* Khối Đăng ký Tư vấn & Báo giá (.consult) 2 cột chuẩn B2B — Nền Xanh Băng Sáng (#F0F7FF) */
.consult {
	position: relative;
	background:
		radial-gradient(circle at 15% 20%, rgba(14, 165, 233, 0.14) 0%, transparent 45%),
		linear-gradient(rgba(2, 82, 251, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(2, 82, 251, 0.045) 1px, transparent 1px),
		linear-gradient(180deg, #f0f7ff 0%, #e0effe 100%);
	background-size: 100% 100%, 36px 36px, 36px 36px, 100% 100%;
	border-top: 4px solid #0252fb;
	border-bottom: 1px solid #cfe2ff;
}
.consult__grid {
	display: grid;
	gap: 36px;
	grid-template-columns: 1fr;
	align-items: center;
}
.consult__eyebrow {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	background: #dbeafe;
	border: 1px solid #93c5fd;
	color: #0252fb;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	margin-bottom: 10px;
}
.consult__intro h2 {
	color: #003870;
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
	margin-bottom: 10px;
	line-height: 1.25;
}
.consult__lead {
	color: #334155;
	font-size: 0.94rem;
	line-height: 1.65;
	margin-bottom: 20px;
}
.consult__steps {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	display: grid;
	gap: 10px;
}
.consult__steps li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #ffffff;
	border: 1px solid #cfe0f5;
	box-shadow: 0 4px 14px rgba(0, 56, 112, 0.05);
	transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.consult__steps li:hover {
	background: #ffffff;
	border-color: #0252fb;
	transform: translateX(4px);
}
.consult__steps .consult__step-num {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: linear-gradient(135deg, #0252fb 0%, #0ea5e9 100%);
	color: #ffffff;
	font-size: 0.84rem;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 4px 10px rgba(2, 82, 251, 0.25);
}
.consult__steps strong {
	display: block;
	color: #0f172a;
	font-size: 0.92rem;
	margin-bottom: 2px;
}
.consult__steps li > div span {
	display: block;
	color: #475569;
	font-size: 0.82rem;
	line-height: 1.45;
}
.consult__direct {
	padding: 16px 18px;
	border-radius: 12px;
	background: #ffffff;
	border: 1px solid #cfe0f5;
	border-left: 4px solid #0252fb;
	box-shadow: 0 6px 18px rgba(0, 56, 112, 0.06);
	margin-bottom: 20px;
}
.consult__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 800;
	color: #0252fb;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}
.consult__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.9rem);
	font-weight: 800;
	color: #003870;
	text-decoration: none;
	line-height: 1.2;
	margin-bottom: 8px;
}
.consult__phone svg { color: #0252fb; }
.consult__phone:hover { color: #0252fb; }
.consult__meta {
	margin: 0;
	font-size: 0.82rem;
	color: #475569;
	line-height: 1.55;
}
.consult__meta strong { color: #0f172a; }
.consult__actions .btn--red {
	background: linear-gradient(135deg, #0252fb 0%, #0ea5e9 100%);
	box-shadow: 0 4px 14px rgba(2, 82, 251, 0.28);
}
.consult__actions .btn--red:hover {
	background: linear-gradient(135deg, #003ecc 0%, #0284c7 100%);
}
.btn--outline-light {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #ffffff;
}
.btn--outline-light:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #0f172a;
}
.consult__actions .btn--outline-light {
	background: #ffffff;
	border: 1.5px solid #004b93;
	color: #004b93;
}
.consult__actions .btn--outline-light:hover {
	background: #004b93;
	border-color: #004b93;
	color: #ffffff;
}
.consult__card {
	background: #ffffff;
	color: var(--c-text);
	border-radius: 16px;
	padding: 30px 28px;
	border: 1px solid #cfe0f5;
	border-top: 5px solid #0252fb;
	box-shadow: 0 18px 42px rgba(0, 56, 112, 0.12);
}
.consult__card-head {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #edf2f7;
}
.consult__card-head h3 {
	font-size: 1.28rem;
	color: #0f172a;
	margin: 0 0 6px;
}
.consult__card-head p {
	font-size: 0.86rem;
	color: var(--c-text-muted);
	margin: 0 0 12px;
	line-height: 1.55;
}
.consult__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.consult__pills span {
	padding: 4px 11px;
	border-radius: 999px;
	background: #eef5ff;
	border: 1px solid #cfe0f5;
	color: #0252fb;
	font-size: 0.75rem;
	font-weight: 700;
}
.consult__card .form {
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
.consult__card .form .btn--primary {
	background: linear-gradient(135deg, #0252fb 0%, #0ea5e9 100%);
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(2, 82, 251, 0.26);
}
.consult__card .form .btn--primary:hover {
	background: linear-gradient(135deg, #003ecc 0%, #0284c7 100%);
	box-shadow: 0 10px 24px rgba(2, 82, 251, 0.36);
}

/* ==========================================================================
   11. Nội dung trang con, Trang Danh Mục Sản Phẩm & Chi Tiết Sản Phẩm
   ========================================================================== */
.page-hero { padding-block: 44px; background: linear-gradient(135deg, #004b93, #003366); color: #ffffff; }
.page-hero h1 { color: #ffffff; margin-bottom: 0.25rem; }
.breadcrumb { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.88); margin-bottom: 8px; }
.breadcrumb a { color: #ffffff; }
.entry { max-width: 820px; margin-inline: auto; background: #ffffff; padding: 32px; border-radius: var(--radius); box-shadow: var(--shadow); }
.entry p, .entry li { text-align: justify; text-align-last: left; }
.entry td p, .entry th p, .entry figcaption { text-align: left; }
.entry img { border-radius: var(--radius-sm); }
.entry h2 { margin-top: 1.5em; color: var(--c-primary); border-left: 4px solid var(--c-red); padding-left: 12px; }

/* Hero Trang Sản phẩm, Tin tức & Liên hệ — Nền Kho Xưởng Thực Tế phủ lớp Xanh trong suốt */
.catalog-hero {
	position: relative;
	padding-block: 48px 40px;
	background-color: #003870;
	background-image:
		linear-gradient(100deg, rgba(0, 38, 82, 0.82) 0%, rgba(0, 62, 128, 0.68) 55%, rgba(0, 48, 102, 0.52) 100%),
		url('assets/images/kho-xuong-tanasu-hero.webp');
	background-size: cover;
	background-position: center 42%;
	background-repeat: no-repeat;
	color: #ffffff;
	border-bottom: 4px solid #0ea5e9;
}
.catalog-hero__content { max-width: 820px; margin-bottom: 28px; }
.catalog-hero__eyebrow { display: inline-block; padding: 4px 12px; border-radius: 4px; background: linear-gradient(135deg, #0252fb 0%, #0ea5e9 100%); color: #ffffff; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(2, 82, 251, 0.3); }
.catalog-hero__title { color: #ffffff; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); margin-bottom: 10px; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 18, 42, 0.35); }
.catalog-hero__lead { color: rgba(255, 255, 255, 0.94); font-size: 0.96rem; line-height: 1.65; margin: 0; }
.catalog-hero__lead strong { color: #7cc4ff; }

.catalog-hero__cats { display: grid; gap: 14px; grid-template-columns: 1fr; }
.catalog-hero-cat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: rgba(0, 38, 82, 0.56); border: 1px solid rgba(255, 255, 255, 0.26); color: #ffffff; text-align: left; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.catalog-hero-cat:hover, .catalog-hero-cat.is-active { background: #ffffff; color: #0f172a; border-color: #0252fb; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }
.catalog-hero-cat__thumb { width: 48px; height: 48px; border-radius: 8px; background: #ffffff; padding: 4px; display: grid; place-items: center; flex-shrink: 0; }
.catalog-hero-cat__thumb img { width: 100%; height: 100%; object-fit: contain; }
.catalog-hero-cat__info { display: flex; flex-direction: column; gap: 2px; }
.catalog-hero-cat__info strong { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; }
.catalog-hero-cat__info span { font-size: 0.76rem; opacity: 0.82; }

/* Thanh công cụ lọc Sản phẩm */
.catalog-section { background: #f8fafc; }
.catalog-toolbar { background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 18px 20px; margin-bottom: 28px; box-shadow: 0 6px 20px rgba(0, 45, 95, 0.05); }
.catalog-toolbar__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #edf2f7; }
.catalog-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 6px; border: 1px solid #dbe4f0; background: #f8fafd; color: var(--c-text); font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.catalog-tab:hover { border-color: var(--c-primary); color: var(--c-primary); }
.catalog-tab.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #ffffff; box-shadow: 0 4px 12px rgba(0, 75, 147, 0.22); }
.catalog-tab__count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding-inline: 5px; border-radius: 99px; background: rgba(0, 75, 147, 0.1); color: var(--c-primary); font-size: 0.72rem; font-weight: 800; }
.catalog-tab.is-active .catalog-tab__count { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

.catalog-search { flex: 1; min-width: 240px; max-width: 340px; }
.catalog-search__input { width: 100%; height: 40px; padding: 0 14px; border-radius: 6px; border: 1px solid #cbd5e1; background: #f8fafc; font-size: 0.84rem; color: var(--c-text); }
.catalog-search__input:focus { border-color: var(--c-primary); background: #ffffff; outline: none; box-shadow: 0 0 0 3px rgba(0, 75, 147, 0.12); }

.catalog-toolbar__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.catalog-needs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.catalog-needs__label { font-size: 0.8rem; font-weight: 700; color: var(--c-text-muted); margin-right: 4px; }
.catalog-need { padding: 5px 12px; border-radius: 99px; border: 1px solid #dbe4f0; background: #ffffff; color: var(--c-text-muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.catalog-need:hover { border-color: var(--c-primary); color: var(--c-primary); }
.catalog-need.is-active { background: #eef5ff; border-color: var(--c-primary); color: var(--c-primary); font-weight: 700; }
.catalog-result-count { font-size: 0.82rem; color: var(--c-text-muted); }
.catalog-result-count strong { color: var(--c-primary); }

/* Thẻ Sản phẩm trong Danh mục 16 máy */
.catalog-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 40, 85, 0.05); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.catalog-card[hidden] { display: none !important; }
.catalog-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0, 75, 147, 0.14); border-color: var(--c-primary); }
.catalog-card__media { position: relative; aspect-ratio: 1 / 1; padding: 0; background: #ffffff; border-bottom: 1px solid #f0f4f8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.catalog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.catalog-card:hover .catalog-card__media img { transform: scale(1.05); }
.catalog-card__cat { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 4px; background: var(--c-primary); color: #ffffff; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.catalog-card__video-badge { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 4px 9px; border-radius: 4px; background: var(--c-red); color: #ffffff; font-size: 0.68rem; font-weight: 700; }
.catalog-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.catalog-card__title { font-size: 1rem; font-weight: 800; line-height: 1.35; margin-bottom: 10px; }
.catalog-card__title a { color: #0f172a; }
.catalog-card:hover .catalog-card__title a { color: var(--c-red); }
.catalog-card__specs { list-style: none; padding: 10px 12px; margin: 0 0 14px; background: #f8fafc; border-radius: 6px; border: 1px solid #edf2f7; display: flex; flex-direction: column; gap: 6px; }
.catalog-card__specs li { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--c-text); }
.catalog-card__specs svg { color: #0252fb; flex-shrink: 0; }
.catalog-card__actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.catalog-card__btn, .catalog-card__quote { width: 100%; justify-content: center; white-space: nowrap; padding-inline: 10px; }

/* Banner Thiết kế Đồ gá theo yêu cầu — Nền Xanh Băng Sáng */
.custom-jig-banner { margin-top: 36px; padding: 28px 32px; border-radius: var(--radius); background: linear-gradient(135deg, #f0f7ff 0%, #dbeafe 100%); color: #0f172a; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #bfdbfe; border-left: 6px solid #0252fb; box-shadow: 0 10px 26px rgba(0, 56, 112, 0.08); }
.custom-jig-banner__content { max-width: 720px; }
.custom-jig-banner__tag { display: inline-block; padding: 3px 10px; border-radius: 4px; background: #dbeafe; border: 1px solid #93c5fd; color: #0252fb; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; margin-bottom: 8px; }
.custom-jig-banner__content h3 { color: #003870; font-size: 1.25rem; margin-bottom: 6px; }
.custom-jig-banner__content p { color: #334155; margin: 0; font-size: 0.9rem; line-height: 1.6; }
.custom-jig-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.custom-jig-banner__actions .btn--ghost { background: #ffffff; color: #004b93; border-color: #004b93; }
.custom-jig-banner__actions .btn--ghost:hover { background: #004b93; color: #ffffff; border-color: #004b93; }

/* Trang Chi Tiết Sản Phẩm (.sp-detail) — Tích hợp Video làm Slide 1 chuẩn Hồng Ký */
.sp-detail { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
.sp-detail__main-card { position: relative; background: #ffffff; border: 1px solid #dbe4f0; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 35, 75, 0.08); }
.sp-detail__img-wrap { aspect-ratio: 1 / 1; overflow: hidden; position: relative; background: #ffffff; }
.sp-detail__main-track { display: flex; width: 100%; height: 100%; transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.sp-detail__main-slide { flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; position: relative; }
.sp-detail__main-slide--video { background: linear-gradient(180deg, #f0f7ff 0%, #e0effe 100%); }
.sp-video-studio { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.sp-video-studio__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: linear-gradient(90deg, #003870 0%, #004b93 100%); color: #ffffff; border-bottom: 2px solid #0ea5e9; }
.sp-video-studio__badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; color: #ffffff; }
.sp-video-studio__live-dot { width: 7px; height: 7px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3); }
.sp-video-studio__model { font-size: 0.8rem; font-weight: 800; color: #e0f2fe; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-video-studio__player { flex: 1; width: 100%; background: #000000; position: relative; overflow: hidden; }
.sp-detail__yt-iframe { width: 100%; height: 100%; border: 0; display: block; }
.sp-video-studio__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: #f0f7ff; border-top: 1px solid #bfdbfe; }
.sp-video-studio__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sp-video-studio__tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; background: #ffffff; border: 1px solid #cfe0f5; color: #003870; font-size: 0.75rem; font-weight: 700; }
.sp-video-studio__next-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 6px; border: 1px solid #0252fb; background: #0252fb; color: #ffffff; font-family: inherit; font-size: 0.76rem; font-weight: 800; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease; }
.sp-video-studio__next-btn:hover { background: #003ecc; transform: translateX(2px); }
.sp-detail__main-slide img { width: 100%; height: 100%; object-fit: cover; padding: 0; display: block; transform: scale(0.98); opacity: 0.9; transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; cursor: zoom-in; }
.sp-detail__main-slide.is-active img { transform: scale(1); opacity: 1; }
.sp-detail__counter { position: absolute; bottom: 14px; right: 14px; padding: 4px 11px; border-radius: 99px; background: rgba(15, 23, 42, 0.68); color: #ffffff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; backdrop-filter: blur(4px); z-index: 2; pointer-events: none; }

/* Dải 4 ảnh thu nhỏ kèm 2 nút cuộn ngang ở 2 bên */
.sp-detail__thumbs-wrap { position: relative; margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.sp-detail__thumbs-viewport { flex: 1; min-width: 0; overflow: hidden; padding-block: 4px; }
.sp-detail__thumbs { position: relative; width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.sp-detail__thumb-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #cbd5e1; background: #ffffff; color: #004b93; display: grid; place-items: center; flex-shrink: 0; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 38, 82, 0.1); transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.sp-detail__thumb-nav:hover { background: #0252fb; border-color: #0252fb; color: #ffffff; transform: scale(1.06); }
.sp-detail__thumb { position: relative; aspect-ratio: 1 / 1; padding: 0; border-radius: 10px; border: 2px solid #e2e8f0; background: #ffffff; overflow: hidden; cursor: pointer; opacity: 0.88; box-shadow: 0 2px 8px rgba(0, 35, 75, 0.05); transition: transform 0.25s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; }
.sp-detail__thumb img { width: 100%; height: 100%; object-fit: cover; padding: 0; display: block; transition: transform 0.3s ease; }
.sp-detail__thumb--video { background: #0f172a; }
.sp-detail__thumb--video img { object-fit: cover; padding: 0; opacity: 0.88; }
.sp-detail__thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; background: #0252fb; color: #ffffff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); pointer-events: none; transition: transform 0.2s ease, background 0.2s ease; }
.sp-detail__thumb--video:hover .sp-detail__thumb-play { transform: translate(-50%, -50%) scale(1.12); background: #0ea5e9; }
.sp-detail__thumb:hover { transform: translateY(-2px); border-color: #60a5fa; opacity: 1; }
.sp-detail__thumb.is-active { border-color: #0252fb; opacity: 1; box-shadow: 0 4px 14px rgba(2, 82, 251, 0.24); }

.sp-detail__video-perk {
	margin-top: 14px;
	padding: 14px 16px;
	border-radius: 10px;
	background: #f8fbff;
	border: 1px solid #dbeafe;
	box-shadow: 0 4px 14px rgba(0, 56, 112, 0.04);
	animation: spPerkFadeIn 0.28s ease-out;
}
.sp-detail__video-perk[hidden] {
	display: none !important;
}
@keyframes spPerkFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
.sp-detail__video-perk-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px dashed #cfe0f5;
}
.sp-detail__video-perk-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #004b93;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}
.sp-detail__video-perk-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0252fb;
	box-shadow: 0 0 0 3px rgba(2, 82, 251, 0.18);
}
.sp-detail__video-perk-note {
	font-size: 0.74rem;
	font-weight: 600;
	color: #64748b;
}
.sp-detail__video-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.sp-detail__video-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #ffffff;
	border: 1px solid #e2eefc;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.sp-detail__video-item:hover {
	border-color: #93c5fd;
	transform: translateY(-1px);
}
.sp-detail__video-item-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #eef5ff;
	border: 1px solid #cfe0f5;
	color: #0252fb;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.sp-detail__video-item-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.sp-detail__video-item-body strong {
	font-size: 0.82rem;
	font-weight: 800;
	color: #003870;
	line-height: 1.3;
	margin-bottom: 2px;
}
.sp-detail__video-item-body span {
	font-size: 0.74rem;
	color: #475569;
	line-height: 1.35;
}

.sp-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.sp-detail__cat-link { padding: 4px 12px; border-radius: 4px; background: #eef5ff; color: var(--c-primary); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; }
.sp-detail__status { font-size: 0.8rem; font-weight: 700; color: #0b6e3f; }
.sp-detail__title { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); color: var(--c-primary); text-transform: uppercase; margin-bottom: 14px; }
.sp-detail__highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.sp-detail__pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; background: #f1f6fc; border: 1px solid #d5e3f4; color: var(--c-primary); font-size: 0.85rem; font-weight: 700; }
.sp-detail__summary { font-size: 0.94rem; color: var(--c-text-muted); line-height: 1.7; margin-bottom: 22px; }

.sp-spec-box { background: #ffffff; border: 1px solid #dbe4f0; border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; box-shadow: 0 4px 14px rgba(0, 35, 75, 0.04); }
.sp-spec-box__title { margin: 0; padding: 12px 18px; background: var(--c-primary); color: #ffffff; font-size: 0.88rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.sp-spec-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.sp-spec-table tr:nth-child(odd) { background: #f8fafd; }
.sp-spec-table tr:nth-child(even) { background: #ffffff; }
.sp-spec-table th, .sp-spec-table td { padding: 12px 16px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: middle; line-height: 1.45; }
.sp-spec-table tr:last-child th, .sp-spec-table tr:last-child td { border-bottom: 0; }
.sp-spec-table th { width: 40%; font-weight: 700; color: #1e293b; border-right: 1px solid #e2e8f0; }
.sp-spec-table__th-inner { display: flex; align-items: center; gap: 10px; }
.sp-spec-table__icon { width: 32px; height: 32px; border-radius: 6px; background: #eef5ff; border: 1px solid #cfe0f5; color: var(--c-primary); display: grid; place-items: center; flex-shrink: 0; }
.sp-spec-table td { color: #0f172a; font-weight: 500; }

.sp-cta-box__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-cta-box__buttons .btn { min-height: 52px; font-size: 0.98rem; font-weight: 800; width: 100%; justify-content: center; border-radius: 10px; }
.sp-cta-btn--call { background: linear-gradient(135deg, #1d9bf0 0%, #0252fb 100%); border-color: #0252fb; color: #ffffff; box-shadow: 0 8px 20px rgba(2, 82, 251, 0.24); }
.sp-cta-btn--call:hover { background: linear-gradient(135deg, #0252fb 0%, #003ecc 100%); color: #ffffff; }
.sp-cta-btn--consult { background: #ffffff; border: 1.5px solid #0284c7; color: #0284c7; }
.sp-cta-btn--consult:hover { background: #f0f9ff; border-color: #0252fb; color: #0252fb; }

/* 3 Huy hiệu cam kết chuẩn TANASU dưới nút CTA */
.sp-trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed #dbe4f0; }
.sp-trust-strip__item { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 6px; border-radius: 8px; background: #f8fbff; border: 1px solid #e2eefc; }
.sp-trust-strip__icon { color: #1d9bf0; display: grid; place-items: center; flex-shrink: 0; }
.sp-trust-strip__text { display: flex; flex-direction: column; line-height: 1.25; }
.sp-trust-strip__text strong { font-size: 0.85rem; font-weight: 800; color: #0284c7; }
.sp-trust-strip__text span { font-size: 0.85rem; font-weight: 800; color: #0284c7; }

/* 3 Tab Con Chi Tiết Sản Phẩm (TỔNG QUAN | THÔNG SỐ KỸ THUẬT | PHỤ KIỆN) */
.sp-subtabs { margin-top: 44px; }
.sp-subtabs__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.sp-subtab-btn { padding: 10px 22px; border-radius: 999px; border: 0; background: transparent; color: #64748b; font: inherit; font-size: 0.88rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; }
.sp-subtab-btn:hover { color: #0252fb; background: #eef4ff; }
.sp-subtab-btn.is-active { background: #0252fb; color: #ffffff; box-shadow: 0 4px 14px rgba(2, 82, 251, 0.26); }

.sp-subtabs__box { background: #f6f8fc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 28px 32px; }
.sp-subtab-panel[hidden] { display: none !important; }

/* Hộp Mục lục đóng/mở trong Tab Tổng Quan */
.sp-toc { display: inline-block; min-width: 210px; max-width: 100%; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; margin-bottom: 24px; }
.sp-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 22px; cursor: pointer; user-select: none; }
.sp-toc__label { font-size: 1.05rem; font-weight: 600; color: #0f172a; }
.sp-toc__toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 30px; border: 1px solid #cbd5e1; border-radius: 6px; background: #ffffff; color: #64748b; transition: border-color 0.2s, color 0.2s; }
.sp-toc__head:hover .sp-toc__toggle { border-color: #0252fb; color: #0252fb; }
.sp-toc__list { margin: 12px 0 2px; padding-left: 20px; border-top: 1px dashed #cbd5e1; padding-top: 10px; display: flex; flex-direction: column; gap: 7px; font-size: 0.9rem; }
.sp-toc__list[hidden] { display: none !important; }
.sp-toc__list a { color: #1e293b; font-weight: 600; text-decoration: none; }
.sp-toc__list a:hover { color: #0252fb; text-decoration: underline; }

/* Nội dung bài viết trong Tab Tổng Quan */
.sp-overview-body { color: #1e293b; font-size: 0.98rem; line-height: 1.75; }
.sp-overview-h2 { color: #0252fb; font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); font-weight: 800; margin-top: 26px; margin-bottom: 12px; scroll-margin-top: 100px; }
.sp-overview-body > .sp-overview-h2:first-child { margin-top: 0; }
.sp-overview-body p { margin-bottom: 14px; color: #1e293b; }
.sp-overview-body strong { color: #0f172a; font-weight: 700; }
.sp-overview-list { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.sp-overview-list li { line-height: 1.65; }

/* Nội dung Tab Thông Số Kỹ Thuật & Phụ Kiện */
.sp-subtab-specs__head { margin-bottom: 20px; }
.sp-subtab-specs__head h3 { font-size: 1.25rem; color: #0252fb; margin-bottom: 6px; }
.sp-subtab-specs__head p { font-size: 0.9rem; color: var(--c-text-muted); margin: 0; }
.sp-spec-table--full { background: #ffffff; border: 1px solid #dbe4f0; border-radius: 10px; overflow: hidden; }

.sp-std-acc-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 28px; }
.sp-std-acc-item { background: #ffffff; border: 1px solid #dbe4f0; border-left: 4px solid #0252fb; border-radius: 10px; padding: 18px 20px; }
.sp-std-acc-item__badge { display: inline-block; font-size: 0.68rem; font-weight: 800; color: #0252fb; background: #eef4ff; padding: 3px 9px; border-radius: 4px; margin-bottom: 8px; }
.sp-std-acc-item strong { display: block; font-size: 0.96rem; color: #0f172a; margin-bottom: 6px; }
.sp-std-acc-item p { font-size: 0.85rem; color: var(--c-text-muted); margin: 0; line-height: 1.55; }

.sp-subtab-acc__subhead { font-size: 1.08rem; color: var(--c-primary); margin-bottom: 14px; }
.sp-acc-card { background: #ffffff; border: 1px solid #dbe4f0; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s; }
.sp-acc-card:hover { transform: translateY(-3px); border-color: #0252fb; }
.sp-acc-card__thumb { aspect-ratio: 1 / 1; padding: 0; background: #ffffff; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sp-acc-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-acc-card__body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; }
.sp-acc-card__body h5 { font-size: 0.92rem; margin-bottom: 6px; line-height: 1.35; }
.sp-acc-card__body h5 a { color: var(--c-primary); }
.sp-acc-card__body p { font-size: 0.8rem; color: var(--c-text-muted); line-height: 1.5; margin-bottom: 10px; flex: 1; }
.sp-acc-card__link { font-size: 0.8rem; font-weight: 700; color: var(--c-red); }

/* Trang Giới Thiệu (/gioi-thieu/) */
.about-hero { position: relative; padding-block: 56px 44px; background-color: #003870; background-size: cover; background-position: center; color: #ffffff; border-bottom: 4px solid #0ea5e9; overflow: hidden; }
.about-hero__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 38, 82, 0.82) 0%, rgba(0, 62, 128, 0.66) 55%, rgba(0, 48, 102, 0.44) 100%); }
.about-hero__inner { position: relative; z-index: 1; }
.about-hero__content { max-width: 780px; margin-bottom: 36px; }
.about-hero__eyebrow { display: inline-block; padding: 4px 12px; border-radius: 4px; background: linear-gradient(135deg, #0252fb 0%, #0ea5e9 100%); color: #ffffff; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.about-hero__title { color: #ffffff; font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.35rem); line-height: 1.25; margin-bottom: 12px; text-transform: uppercase; }
.about-hero__lead { color: rgba(255, 255, 255, 0.92); font-size: 0.98rem; line-height: 1.65; margin-bottom: 22px; }
.about-hero__ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.55); }
.about-hero__ghost:hover { background: #ffffff; color: #003870; border-color: #ffffff; }
.about-hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.about-hero__stat { background: rgba(0, 38, 82, 0.54); border: 1px solid rgba(255, 255, 255, 0.26); border-radius: var(--radius); padding: 14px 18px; backdrop-filter: blur(8px); }
.about-hero__stat strong { display: block; font-size: 1.55rem; font-weight: 800; color: #38bdf8; line-height: 1.15; }
.about-hero__stat span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.92); font-weight: 600; }

.about-who__grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
.about-who__media { position: relative; }
.about-who__img-frame { border-radius: var(--radius); overflow: hidden; box-shadow: 0 14px 36px rgba(0, 45, 95, 0.14); border: 3px solid #ffffff; }
.about-who__img-frame img { width: 100%; height: auto; display: block; object-fit: cover; }
.about-who__company-card { margin-top: 16px; background: linear-gradient(135deg, #003870, #004b93); color: #ffffff; padding: 20px 22px; border-radius: var(--radius); border-left: 5px solid var(--c-red); box-shadow: 0 10px 26px rgba(0, 45, 95, 0.16); }
.about-who__company-tag { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: #7cc4ff; margin-bottom: 4px; }
.about-who__company-card > strong { display: block; font-size: 1rem; font-weight: 800; color: #ffffff; margin-bottom: 8px; }
.about-who__company-card ul { list-style: none; padding: 0; margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.88); display: flex; flex-direction: column; gap: 4px; }
.about-who__heading { font-size: clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem); color: var(--c-primary); text-transform: uppercase; margin-bottom: 12px; }
.about-who__desc { font-size: 0.94rem; color: var(--c-text-muted); line-height: 1.7; margin-bottom: 22px; }
.about-orient-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.about-orient-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: var(--radius); background: #f8fafd; border: 1px solid #e2e8f0; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.about-orient-card:hover { transform: translateY(-3px); border-color: var(--c-primary); background: #ffffff; box-shadow: var(--shadow); }
.about-orient-card__icon { width: 42px; height: 42px; border-radius: 8px; background: var(--c-primary); color: #ffffff; display: grid; place-items: center; flex-shrink: 0; }
.about-orient-card__body h3 { font-size: 0.94rem; font-weight: 800; color: var(--c-primary); margin-bottom: 4px; }
.about-orient-card__body p { font-size: 0.82rem; color: var(--c-text-muted); margin: 0; line-height: 1.5; }

.about-cap-section { margin-bottom: 0; padding-bottom: 64px; }
.about-cap-section .why-cards { transform: none; margin-top: 12px; }
.about-cap__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.about-cap__num { width: 42px; height: 42px; border-radius: 8px; background: var(--c-primary); color: #ffffff; font-size: 1rem; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.why-card:hover .about-cap__num { background: var(--c-red); }
.about-cap__line { flex: 1; height: 2px; background: #e2e8f0; }

.about-values-split { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: stretch; }
.about-values__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 32px rgba(0, 45, 95, 0.14); border: 1px solid #e2e8f0; min-height: 360px; display: flex; flex-direction: column; }
.about-values__media img { width: 100%; height: 100%; object-fit: cover; flex: 1; display: block; }
.about-values__media-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 18px; border-radius: 8px; background: rgba(0, 43, 86, 0.92); backdrop-filter: blur(6px); color: #ffffff; border-left: 4px solid var(--c-red); }
.about-values__media-caption strong { display: block; font-size: 0.86rem; font-weight: 800; color: #ffffff; margin-bottom: 2px; }
.about-values__media-caption span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.85); }

.about-values__content { display: flex; flex-direction: column; justify-content: center; }
.about-values__lead { font-size: 0.94rem; color: var(--c-text-muted); margin-bottom: 22px; line-height: 1.65; }
.about-values__cards { display: grid; gap: 16px; grid-template-columns: 1fr; flex: 1; }
.about-value-item { display: flex; flex-direction: column; justify-content: center; padding: 22px 20px; border-radius: var(--radius); background: #ffffff; border: 1px solid #e2e8f0; border-top: 4px solid var(--c-primary); box-shadow: 0 6px 20px rgba(0, 45, 95, 0.06); transition: transform 0.2s, border-top-color 0.2s, box-shadow 0.2s; }
.about-value-item:hover { transform: translateY(-4px); border-top-color: var(--c-red); box-shadow: 0 12px 28px rgba(0, 75, 147, 0.12); }
.about-value-item__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.about-value-item__num { width: 34px; height: 34px; border-radius: 6px; background: #eef5ff; color: var(--c-primary); font-family: var(--f-heading); font-size: 0.9rem; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.about-value-item:hover .about-value-item__num { background: var(--c-red); color: #ffffff; }
.about-value-item h3 { font-size: 0.96rem; font-weight: 800; color: var(--c-primary); text-transform: uppercase; margin: 0; line-height: 1.35; }
.about-value-item p { font-size: 0.85rem; color: var(--c-text-muted); margin: 0; line-height: 1.55; }

.portfolio-banner { margin-top: 36px; display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; padding: 32px 36px; border-radius: var(--radius); background: linear-gradient(135deg, #002b56 0%, #004b93 65%, #005bb5 100%); color: #ffffff; border-left: 6px solid var(--c-red); box-shadow: 0 14px 34px rgba(0, 45, 95, 0.18); }
.portfolio-banner__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.portfolio-banner__tags span { padding: 4px 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); color: #ffffff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.portfolio-banner__tags .portfolio-banner__tag-red { background: var(--c-red); }
.portfolio-banner__info h3 { color: #ffffff; font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem); text-transform: uppercase; margin-bottom: 8px; }
.portfolio-banner__info p { color: rgba(255, 255, 255, 0.9); font-size: 0.92rem; line-height: 1.65; margin-bottom: 20px; max-width: 680px; }
.portfolio-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.portfolio-banner__ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
.portfolio-banner__ghost:hover { background: #ffffff; color: var(--c-primary); border-color: #ffffff; }
.portfolio-banner__book { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius); padding: 20px; }
.portfolio-banner__book img { max-height: 210px; width: auto; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35)); transition: transform 0.3s ease; }
.portfolio-banner:hover .portfolio-banner__book img { transform: scale(1.05) rotate(-1deg); }

/* Trang Tin Tức (/tin-tuc/) & Chi Tiết Bài Viết */
.hk-news-card[hidden] { display: none !important; }
.news-card-date { display: block; font-size: 0.76rem; font-weight: 600; color: var(--c-text-muted); margin-bottom: 6px; }
.news-spotlight { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: stretch; }
.news-spotlight__main { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.25s, box-shadow 0.25s; }
.news-spotlight__main:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.news-spotlight__main-media { position: relative; aspect-ratio: 800 / 600; overflow: hidden; background: #003870; display: block; }
.news-spotlight__main-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.news-spotlight__main:hover .news-spotlight__main-media img { transform: scale(1.04); }
.news-spotlight__main-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.news-spotlight__date { display: block; font-size: 0.78rem; font-weight: 700; color: var(--c-primary); margin-bottom: 8px; }
.news-spotlight__main-body h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.4; margin-bottom: 10px; }
.news-spotlight__main-body h3 a { color: var(--c-text); }
.news-spotlight__main:hover .news-spotlight__main-body h3 a { color: var(--c-primary); }
.news-spotlight__main-body p { font-size: 0.9rem; color: var(--c-text-muted); line-height: 1.65; margin-bottom: 16px; }

.news-spotlight__side { display: flex; flex-direction: column; gap: 24px; justify-content: space-between; }
.news-spotlight__sub { display: grid; grid-template-columns: 1fr; background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); flex: 1; transition: transform 0.25s, box-shadow 0.25s; }
.news-spotlight__sub:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.news-spotlight__sub-media { position: relative; aspect-ratio: 800 / 600; overflow: hidden; background: #003870; display: block; }
.news-spotlight__sub-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.news-spotlight__sub:hover .news-spotlight__sub-media img { transform: scale(1.04); }
.news-spotlight__sub-body { padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.news-spotlight__sub-body h3 { font-size: 1.02rem; font-weight: 800; line-height: 1.4; margin-bottom: 8px; }
.news-spotlight__sub-body h3 a { color: var(--c-text); }
.news-spotlight__sub:hover .news-spotlight__sub-body h3 a { color: var(--c-primary); }
.news-spotlight__sub-body p { font-size: 0.84rem; color: var(--c-text-muted); line-height: 1.55; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.single-hero-meta { display: flex; flex-wrap: wrap; gap: 12px; color: rgba(255, 255, 255, 0.85); font-size: 0.86rem; margin: 10px 0 0; }
.single-layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.single-entry { max-width: 100%; min-width: 0; margin: 0; overflow: hidden; }
.single-entry__content { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.single-entry__content figure,
.single-entry__content .wp-block-image,
.single-entry__content .wp-caption { max-width: 100% !important; width: 100% !important; margin-inline: 0 0 20px; }
.single-entry__content img,
.single-entry__content iframe,
.single-entry__content video { max-width: 100% !important; height: auto !important; display: block; }
.single-entry__content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 20px; }
.single-entry__thumb { margin: 0 0 24px; border-radius: var(--radius); overflow: hidden; border: 1px solid #e2e8f0; }
.single-entry__thumb img { width: 100%; height: auto; display: block; }
.single-entry__cta { margin-top: 32px; padding: 20px 24px; border-radius: var(--radius); background: #f8fafd; border: 1px solid #d5e3f4; border-left: 4px solid var(--c-red); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.single-entry__cta strong { display: block; font-size: 0.98rem; color: var(--c-primary); margin-bottom: 4px; }
.single-entry__cta span { font-size: 0.84rem; color: var(--c-text-muted); }
.single-entry__cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }

.single-sidebar { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 96px; min-width: 0; max-width: 100%; }
.sidebar-widget { background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.sidebar-widget--cta { background: linear-gradient(135deg, #002b56 0%, #004b93 100%); color: #ffffff; border-color: #003870; }
.sidebar-widget__badge { display: inline-block; padding: 3px 10px; border-radius: 4px; background: var(--c-red); color: #ffffff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; margin-bottom: 8px; }
.sidebar-widget--cta h3 { color: #ffffff; font-size: 1.08rem; margin-bottom: 8px; }
.sidebar-widget--cta p { color: rgba(255, 255, 255, 0.88); font-size: 0.84rem; line-height: 1.55; margin-bottom: 16px; }
.sidebar-widget__ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
.sidebar-widget__ghost:hover { background: #ffffff; color: var(--c-primary); border-color: #ffffff; }
.sidebar-widget__title { font-size: 0.96rem; font-weight: 800; color: var(--c-primary); text-transform: uppercase; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--c-red); }
.sidebar-cats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sidebar-cats a { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 6px; background: #f8fafd; color: var(--c-text); font-size: 0.86rem; font-weight: 700; transition: background 0.2s, color 0.2s; }
.sidebar-cats a:hover { background: var(--c-primary); color: #ffffff; }
.sidebar-posts { display: flex; flex-direction: column; gap: 12px; }
.sidebar-post { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; text-decoration: none; }
.sidebar-post__thumb { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #eef5ff; display: block; }
.sidebar-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-post__info strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.83rem; font-weight: 700; color: var(--c-text); line-height: 1.35; margin-bottom: 3px; }
.sidebar-post:hover .sidebar-post__info strong { color: var(--c-primary); }
.sidebar-post__info small { font-size: 0.72rem; color: var(--c-text-muted); }

/* Trang Dịch Vụ Thiết Kế Đồ Gá Theo Yêu Cầu (/dich-vu/) */
.svc-hero {
	position: relative;
	padding-block: 52px;
	background-image:
		linear-gradient(95deg, rgba(0, 22, 48, 0.78) 0%, rgba(0, 38, 80, 0.64) 55%, rgba(0, 30, 66, 0.54) 100%),
		url('assets/images/bg-ban-ve-cad-tanasu.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
	border-bottom: 4px solid var(--c-red);
}
.svc-hero__grid { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
.svc-hero__badge { display: inline-block; padding: 4px 12px; border-radius: 4px; background: var(--c-red); color: #ffffff; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; margin-bottom: 12px; }
.svc-hero__title { color: #ffffff; font-size: clamp(1.55rem, 1.3rem + 1.1vw, 2.2rem); line-height: 1.28; margin-bottom: 14px; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 12, 28, 0.45); }
.svc-hero__lead { color: rgba(255, 255, 255, 0.94); font-size: 0.95rem; line-height: 1.65; margin-bottom: 22px; }
.svc-hero__lead strong { color: #7cc4ff; }
.svc-hero__commits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.svc-hero__commits li { padding: 12px 16px; border-radius: 8px; background: rgba(0, 26, 56, 0.68); backdrop-filter: blur(4px); border: 1px solid rgba(124, 196, 255, 0.24); border-left: 4px solid #7cc4ff; }
.svc-hero__commits strong { display: block; font-size: 0.92rem; color: #ffffff; margin-bottom: 2px; }
.svc-hero__commits span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.84); }

.svc-intake-card { background: #ffffff; color: var(--c-text); border-radius: var(--radius); padding: 26px 24px; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25); border-top: 5px solid var(--c-red); }
.svc-intake-card__tag { display: inline-block; padding: 3px 10px; border-radius: 4px; background: #eef5ff; color: var(--c-primary); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; margin-bottom: 6px; }
.svc-intake-card__head h2 { font-size: 1.18rem; color: var(--c-primary); text-transform: uppercase; margin-bottom: 6px; }
.svc-intake-card__head p { font-size: 0.84rem; color: var(--c-text-muted); margin-bottom: 16px; }
.svc-intake-card__steps { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 12px; }
.svc-intake-card__steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 8px; background: #f8fafd; border: 1px solid #e2e8f0; }
.svc-intake-card__num { width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: #ffffff; font-size: 0.82rem; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.svc-intake-card__steps strong { display: block; font-size: 0.88rem; color: var(--c-primary); margin-bottom: 2px; }
.svc-intake-card__steps span { font-size: 0.8rem; color: var(--c-text-muted); line-height: 1.45; }
.svc-intake-card__actions { display: grid; gap: 10px; }
.svc-intake-card__actions .btn { width: 100%; }

.svc-compare-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid #dbe4f0; background: #ffffff; }
.svc-compare-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.svc-compare-table thead th { padding: 16px 20px; text-align: left; font-size: 0.9rem; font-weight: 800; text-transform: uppercase; border-bottom: 2px solid #dbe4f0; }
.svc-compare-table__col-crit { width: 26%; background: #f1f5f9; color: var(--c-text); }
.svc-compare-table__col-old { width: 37%; background: #fff5f5; color: #9b1c1c; }
.svc-compare-table__col-new { width: 37%; background: var(--c-primary); color: #ffffff; }
.svc-compare-table tbody th, .svc-compare-table tbody td { padding: 16px 20px; border-bottom: 1px solid #edf2f7; font-size: 0.88rem; line-height: 1.55; vertical-align: top; }
.svc-compare-table tbody th { text-align: left; font-weight: 700; color: var(--c-primary); background: #f8fafd; }
.svc-compare-table__old { color: var(--c-text-muted); background: #fffcfc; }
.svc-compare-table__new { color: var(--c-text); font-weight: 600; background: #f4f9ff; }

.svc-pkg-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.svc-pkg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--c-primary); }
.svc-pkg-card__media { position: relative; aspect-ratio: 16 / 10; background: #f8fafd; overflow: hidden; border-bottom: 1px solid #edf2f7; }
.svc-pkg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.svc-pkg-card:hover .svc-pkg-card__media img { transform: scale(1.05); }
.svc-pkg-card__code { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; border-radius: 4px; background: var(--c-primary); color: #ffffff; font-size: 0.74rem; font-weight: 800; }
.svc-pkg-card:hover .svc-pkg-card__code { background: var(--c-red); }
.svc-pkg-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.svc-pkg-card__target { display: block; font-size: 0.75rem; font-weight: 700; color: var(--c-red); margin-bottom: 6px; }
.svc-pkg-card__title { font-size: 1.04rem; font-weight: 800; color: var(--c-primary); text-transform: uppercase; line-height: 1.35; margin-bottom: 8px; }
.svc-pkg-card__desc { font-size: 0.85rem; color: var(--c-text-muted); line-height: 1.6; margin-bottom: 16px; }
.svc-pkg-card__footer { margin-top: auto; padding-top: 14px; border-top: 1px dashed #dbe4f0; display: flex; flex-direction: column; gap: 10px; }
.svc-pkg-card__deliv { font-size: 0.8rem; color: var(--c-text); background: #f1f6fc; padding: 8px 10px; border-radius: 6px; }
.svc-pkg-card__link { font-size: 0.84rem; font-weight: 800; color: var(--c-primary); }
.svc-pkg-card:hover .svc-pkg-card__link { color: var(--c-red); }

.svc-wp-card { background: #ffffff; border: 1px solid #e2e8f0; border-top: 4px solid var(--c-primary); border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.svc-wp-card__num { display: inline-block; padding: 3px 9px; border-radius: 4px; background: #eef5ff; color: var(--c-primary); font-size: 0.72rem; font-weight: 800; margin-bottom: 6px; }
.svc-wp-card__top h3 { font-size: 1rem; font-weight: 800; color: var(--c-primary); text-transform: uppercase; margin: 0; }
.svc-wp-card__box { padding: 12px; border-radius: 6px; background: #f8fafd; border: 1px solid #edf2f7; }
.svc-wp-card__box--blue { background: #eef5ff; border-color: #cfe2ff; flex: 1; }
.svc-wp-card__box strong { display: block; font-size: 0.78rem; color: var(--c-primary); text-transform: uppercase; margin-bottom: 4px; }
.svc-wp-card__box p { font-size: 0.83rem; color: var(--c-text); margin: 0; line-height: 1.5; }

.svc-roadmap-section {
	position: relative;
	margin-bottom: 0;
	padding: 64px 0;
	background-color: #eef6ff;
	background-image:
		radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.14) 0%, transparent 45%),
		linear-gradient(rgba(2, 82, 251, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(2, 82, 251, 0.045) 1px, transparent 1px),
		linear-gradient(180deg, #f0f7ff 0%, #e0effe 100%);
	background-size: 100% 100%, 36px 36px, 36px 36px, 100% 100%;
	border-top: 4px solid #0252fb;
	border-bottom: 1px solid #cfe2ff;
}
.svc-step-card { background: #ffffff; color: var(--c-text); border-radius: var(--radius); padding: 24px 22px; box-shadow: 0 10px 26px rgba(0, 56, 112, 0.08); border: 1px solid #dbeafe; border-bottom: 4px solid var(--c-red); }
.svc-step-card__badge { display: inline-block; padding: 4px 10px; border-radius: 4px; background: var(--c-primary); color: #ffffff; font-size: 0.72rem; font-weight: 800; margin-bottom: 10px; }
.svc-step-card h3 { font-size: 1.02rem; font-weight: 800; color: var(--c-primary); text-transform: uppercase; margin-bottom: 8px; }
.svc-step-card p { font-size: 0.85rem; color: var(--c-text-muted); margin: 0; line-height: 1.6; }

.svc-cases { display: flex; flex-direction: column; gap: 24px; }
.svc-case-row { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.svc-case-row__media { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #f1f5f9; }
.svc-case-row__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-case-row__num { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 4px; background: var(--c-red); color: #ffffff; font-size: 0.72rem; font-weight: 800; }
.svc-case-row__client { font-size: 1.15rem; font-weight: 800; color: var(--c-primary); text-transform: uppercase; margin-bottom: 14px; }
.svc-case-row__items { display: grid; gap: 12px; }
.svc-case-item { padding: 12px 16px; border-radius: 8px; border-left: 4px solid var(--c-primary); background: #f8fafd; }
.svc-case-item--prob { border-left-color: #d97706; background: #fffbeb; }
.svc-case-item--sol { border-left-color: var(--c-primary); background: #f0f7ff; }
.svc-case-item--res { border-left-color: #0b6e3f; background: #eafaf1; }
.svc-case-item strong { display: block; font-size: 0.84rem; color: var(--c-text); margin-bottom: 3px; }
.svc-case-item p { font-size: 0.85rem; color: var(--c-text-muted); margin: 0; line-height: 1.55; }

/* ==========================================================================
   11C. Bố Cục Mới Toàn Diện (Catalog 2 Cột, Hồ Sơ Năng Lực, Tạp Chí Kỹ Thuật, Đối Tác B2B, Liên Hệ)
   ========================================================================== */

/* --- A. Trang Sản phẩm: Hero Split + Catalog 2 cột + Chế độ xem Lưới / Bảng --- */
.catalog-hero__split-grid { position: relative; z-index: 2; display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
.catalog-hero--split .catalog-hero__content { margin-bottom: 0; max-width: none; }
.catalog-hero__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
.catalog-hero__metric { padding: 12px 14px; background: rgba(0, 38, 82, 0.56); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.24); border-left: 3px solid #38bdf8; border-radius: var(--radius-sm); }
.catalog-hero__metric strong { display: block; font-size: 1.25rem; font-weight: 800; color: #ffffff; line-height: 1.15; }
.catalog-hero__metric span { font-size: 0.75rem; color: rgba(255, 255, 255, 0.82); }
.catalog-hero__cats--matrix { display: grid; grid-template-columns: 1fr; gap: 12px; }

.catalog-workspace { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
.catalog-sidebar { display: flex; flex-direction: column; gap: 20px; }
.catalog-sidebar__card { background: #ffffff; border: 1px solid var(--c-border); border-top: 4px solid var(--c-primary); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.catalog-sidebar__head { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid #e8eef6; color: var(--c-primary); font-size: 0.88rem; letter-spacing: 0.04em; }
.catalog-sidebar__group { margin-bottom: 18px; }
.catalog-sidebar__label { display: block; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-muted); margin-bottom: 8px; }
.catalog-sidebar__list { display: flex; flex-direction: column; gap: 6px; }
.catalog-sidebar__btn { width: 100%; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius-sm); text-align: left; }
.catalog-sidebar__needs { display: flex; flex-direction: column; gap: 6px; }
.catalog-sidebar__need { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); text-align: left; font-size: 0.82rem; }
.catalog-sidebar__dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; transition: background 0.15s; }
.catalog-sidebar__need.is-active .catalog-sidebar__dot { background: var(--c-red); box-shadow: 0 0 0 3px rgba(2, 82, 251, 0.2); }
.catalog-sidebar__reset { width: 100%; padding: 9px 12px; background: #f8fafd; border: 1px dashed #cbd5e1; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.8rem; font-weight: 700; color: var(--c-text-muted); cursor: pointer; transition: all 0.15s; }
.catalog-sidebar__reset:hover { border-color: var(--c-red); color: var(--c-red); background: #eef5ff; }

.catalog-sidebar__advisor { background: linear-gradient(145deg, #eef6ff 0%, #dbeafe 100%); color: #0f172a; border-radius: var(--radius); padding: 22px 20px; box-shadow: 0 8px 22px rgba(0, 56, 112, 0.08); border: 1px solid #bfdbfe; border-top: 4px solid #0252fb; }
.catalog-sidebar__advisor-tag { display: inline-block; padding: 3px 9px; background: #dbeafe; border: 1px solid #93c5fd; color: #0252fb; font-size: 0.68rem; font-weight: 800; border-radius: 3px; letter-spacing: 0.06em; margin-bottom: 10px; }
.catalog-sidebar__advisor h3 { color: #003870; font-size: 1.02rem; margin-bottom: 8px; line-height: 1.35; }
.catalog-sidebar__advisor p { font-size: 0.82rem; color: #334155; line-height: 1.55; margin-bottom: 14px; }
.catalog-sidebar__advisor-actions { display: flex; flex-direction: column; gap: 8px; }
.catalog-sidebar__advisor-actions .btn { width: 100%; justify-content: center; }
.catalog-sidebar__zalo { background: #ffffff; border-color: #004b93; color: #004b93; }
.catalog-sidebar__zalo:hover { background: #004b93; color: #ffffff; }

.catalog-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; background: #ffffff; border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0, 45, 95, 0.04); }
.catalog-view-switch { display: flex; align-items: center; gap: 8px; }
.catalog-view-switch__label { font-size: 0.8rem; font-weight: 700; color: var(--c-text-muted); }
.catalog-view-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #f8fafd; color: var(--c-text); font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.catalog-view-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.catalog-view-btn.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #ffffff; }

.catalog-grid--workspace { display: grid; gap: 20px; grid-template-columns: 1fr; }
.catalog-card__sku { position: absolute; bottom: 10px; right: 10px; z-index: 2; padding: 3px 8px; background: rgba(15, 23, 42, 0.78); color: #ffffff; font-size: 0.68rem; font-weight: 800; border-radius: 3px; letter-spacing: 0.06em; }
.catalog-card__summary { display: none; font-size: 0.84rem; color: var(--c-text-muted); line-height: 1.55; margin-bottom: 10px; }
.catalog-card__tech-strip { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: #f4f8fd; border-left: 3px solid var(--c-primary); border-radius: 4px; margin-bottom: 10px; }
.catalog-card__tech-item { font-size: 0.76rem; color: var(--c-text); display: flex; justify-content: space-between; gap: 8px; }
.catalog-card__tech-item span { color: var(--c-text-muted); }
.catalog-card__tech-item strong { color: var(--c-primary); text-align: right; }

/* Chế độ xem Bảng Thông Số Kỹ Thuật (List View) */
.catalog-grid--workspace.is-list-view { grid-template-columns: 1fr !important; gap: 14px; }
.catalog-grid--workspace.is-list-view .catalog-card { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.catalog-grid--workspace.is-list-view .catalog-card__summary { display: block; }
.catalog-grid--workspace.is-list-view .catalog-card__tech-strip { flex-direction: row; flex-wrap: wrap; gap: 14px; }
.catalog-grid--workspace.is-list-view .catalog-card__tech-item { gap: 6px; }
.catalog-grid--workspace.is-list-view .catalog-card__specs { display: flex; flex-wrap: wrap; gap: 8px 16px; border-top: 0; padding-top: 4px; }

/* --- B. Trang Giới thiệu: Industrial Dossier Hero + Bento + Pipeline + QA/QC --- */
.about-hero--dossier { background-position: center 42%; background-size: cover; }
.about-hero--dossier .about-hero__overlay { background: linear-gradient(92deg, rgba(0, 38, 82, 0.84) 0%, rgba(0, 62, 128, 0.66) 52%, rgba(0, 48, 102, 0.34) 100%); }
.about-dossier-hero { position: relative; z-index: 2; display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
.about-dossier-hero .about-hero__content { max-width: 840px; margin-bottom: 0; }
.about-hero__stats--inline { margin-top: 22px; margin-bottom: 24px; padding-top: 0; border-top: 0; grid-template-columns: repeat(2, 1fr); }

.about-bento { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: stretch; }
.about-bento__showcase { display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.about-bento__img-wrap { position: relative; flex: 1; min-height: 320px; background: #00264d; overflow: hidden; }
.about-bento__img-wrap img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.about-bento__overlay-info { position: absolute; inset: auto 0 0 0; padding: 24px; background: linear-gradient(0deg, rgba(0, 24, 53, 0.96) 0%, rgba(0, 24, 53, 0.78) 65%, transparent 100%); color: #ffffff; }
.about-bento__pill { display: inline-block; padding: 3px 10px; background: var(--c-red); color: #ffffff; font-size: 0.7rem; font-weight: 800; border-radius: 3px; margin-bottom: 8px; }
.about-bento__overlay-info h3 { color: #ffffff; font-size: 1.15rem; margin-bottom: 6px; }
.about-bento__overlay-info p { font-size: 0.84rem; color: rgba(255, 255, 255, 0.88); margin: 0; line-height: 1.55; }
.about-bento__highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-border); border-top: 1px solid var(--c-border); }
.about-bento__hl-item { background: #ffffff; padding: 14px 12px; text-align: center; }
.about-bento__hl-item strong { display: block; font-size: 0.98rem; font-weight: 800; color: var(--c-primary); }
.about-bento__hl-item span { font-size: 0.74rem; color: var(--c-text-muted); line-height: 1.35; display: block; margin-top: 2px; }

.about-bento__pillars { display: flex; flex-direction: column; gap: 14px; justify-content: space-between; }
.about-pillar-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px; background: #ffffff; border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0, 45, 95, 0.04); transition: transform 0.2s, border-color 0.2s; }
.about-pillar-card:hover { transform: translateX(4px); border-left-color: var(--c-red); }
.about-pillar-card__num { width: 42px; height: 42px; border-radius: 8px; background: #eef4fc; color: var(--c-primary); font-size: 1rem; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.about-pillar-card__body { flex: 1; }
.about-pillar-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.about-pillar-card__head h3 { font-size: 0.98rem; color: var(--c-primary); margin: 0; }
.about-pillar-card__tag { font-size: 0.68rem; font-weight: 800; padding: 2px 8px; background: #f1f5f9; color: var(--c-text-muted); border-radius: 3px; }
.about-pillar-card__body p { font-size: 0.85rem; color: var(--c-text-muted); margin: 0; line-height: 1.55; }

.about-pipeline { display: grid; gap: 20px; grid-template-columns: 1fr; }
.about-pipeline__card { background: #ffffff; color: var(--c-text); border-radius: var(--radius); padding: 24px 20px; border-top: 4px solid var(--c-red); display: flex; flex-direction: column; box-shadow: 0 12px 28px rgba(0, 20, 50, 0.22); }
.about-pipeline__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.about-pipeline__stage { padding: 4px 10px; background: var(--c-primary); color: #ffffff; font-size: 0.72rem; font-weight: 800; border-radius: 4px; letter-spacing: 0.05em; }
.about-pipeline__tag { font-size: 0.7rem; font-weight: 800; color: var(--c-red); letter-spacing: 0.04em; }
.about-pipeline__title { font-size: 1.02rem; color: var(--c-primary); margin-bottom: 8px; }
.about-pipeline__desc { font-size: 0.85rem; color: var(--c-text-muted); line-height: 1.6; margin-bottom: 14px; flex: 1; }
.about-pipeline__spec { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed #cbd5e1; font-size: 0.78rem; font-weight: 700; color: var(--c-text); }
.about-pipeline__spec svg { color: var(--c-red); flex-shrink: 0; }

.about-qa-grid { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
.about-qa__values { display: flex; flex-direction: column; }
.about-qa__lead { font-size: 0.92rem; color: var(--c-text-muted); margin-bottom: 20px; line-height: 1.6; }
.about-value-bars { display: flex; flex-direction: column; gap: 14px; flex: 1; justify-content: space-between; }
.about-value-bar { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: #ffffff; border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0, 45, 95, 0.04); transition: transform 0.25s ease, box-shadow 0.25s ease, border-left-color 0.25s ease; }
.about-value-bar:hover { transform: translateX(5px); border-left-color: var(--c-red); box-shadow: 0 8px 20px rgba(0, 45, 95, 0.09); }
.about-value-bar__num { padding: 5px 10px; background: var(--c-primary); color: #ffffff; font-size: 0.82rem; font-weight: 800; border-radius: 4px; flex-shrink: 0; }
.about-value-bar__content h3 { font-size: 0.96rem; color: var(--c-primary); margin-bottom: 4px; }
.about-value-bar__content p { font-size: 0.84rem; color: var(--c-text-muted); margin: 0; line-height: 1.55; }

.about-qa__commit { margin-top: 16px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius); background: linear-gradient(135deg, #002b56 0%, #004b93 100%); color: #ffffff; border-left: 4px solid var(--c-red); box-shadow: 0 10px 24px rgba(0, 45, 95, 0.14); }
.about-qa__commit-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(255, 255, 255, 0.14); color: #7cc4ff; display: grid; place-items: center; flex-shrink: 0; }
.about-qa__commit-text strong { display: block; font-size: 0.88rem; color: #ffffff; margin-bottom: 2px; }
.about-qa__commit-text span { display: block; font-size: 0.78rem; color: rgba(255, 255, 255, 0.86); line-height: 1.45; }

.about-qa__panel { display: flex; justify-content: center; }
.about-qa__media-top {
	position: relative;
	width: 100%;
	max-width: 470px;
	aspect-ratio: 709 / 945;
	border-radius: 16px;
	overflow: hidden;
	background: #00264d;
	border: 3px solid #ffffff;
	box-shadow: 14px 14px 0 rgba(0, 75, 147, 0.12), 0 22px 48px rgba(0, 28, 60, 0.2);
}
.about-qa__media-top::after {
	content: "";
	position: absolute;
	inset: 58% 0 0 0;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 20, 45, 0.72) 100%);
	pointer-events: none;
}
.about-qa__media-top img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-qa__media-top:hover img { transform: scale(1.03); }
.about-qa__top-tag {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 99px;
	background: rgba(15, 23, 42, 0.82);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.05em;
}
.about-qa__top-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.28); }
.about-qa__media-badge {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	padding: 12px 16px;
	background: rgba(0, 34, 70, 0.9);
	backdrop-filter: blur(8px);
	color: #ffffff;
	border-left: 4px solid var(--c-red);
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.about-qa__media-badge strong { display: block; font-size: 0.82rem; letter-spacing: 0.04em; margin-bottom: 2px; }
.about-qa__media-badge span { font-size: 0.76rem; color: rgba(255, 255, 255, 0.88); line-height: 1.4; display: block; }

/* Hiệu ứng xuất hiện mượt khi cuộn tới khối Giá trị TANASU (.about-qa-section) */
.about-qa-section[data-reveal-section] .about-qa__media-top {
	opacity: 0;
	transform: translateY(38px) scale(0.96);
	clip-path: inset(12% 4% 12% 4% round 16px);
	transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-qa-section[data-reveal-section] .about-qa__media-top img {
	transform: scale(1.1);
}
.about-qa-section[data-reveal-section] .about-qa__media-badge,
.about-qa-section[data-reveal-section] .about-qa__top-tag {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.65s ease 0.32s, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.32s;
}
.about-qa-section[data-reveal-section] .about-value-bar,
.about-qa-section[data-reveal-section] .about-qa__commit {
	opacity: 0;
	transform: translateX(-24px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-left-color 0.25s ease;
	transition-delay: calc(var(--reveal-idx, 4) * 0.1s);
}
.about-qa-section[data-reveal-section].is-inview .about-qa__media-top {
	opacity: 1;
	transform: translateY(0) scale(1);
	clip-path: inset(0% 0% 0% 0% round 16px);
}
.about-qa-section[data-reveal-section].is-inview .about-qa__media-top img {
	transform: scale(1);
}
.about-qa-section[data-reveal-section].is-inview .about-qa__media-badge,
.about-qa-section[data-reveal-section].is-inview .about-qa__top-tag {
	opacity: 1;
	transform: translateY(0);
}
.about-qa-section[data-reveal-section].is-inview .about-value-bar,
.about-qa-section[data-reveal-section].is-inview .about-qa__commit {
	opacity: 1;
	transform: translateX(0);
}

/* --- C. Trang Tin tức: Tạp chí Kỹ thuật 2 Cột (Main Feed + Sidebar) --- */
.news-magazine-layout { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
.news-magazine__topbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 2px solid #e2e8f0; }
.news-magazine__search { flex: 1; min-width: 260px; max-width: 380px; }
.news-magazine__sidebar { display: flex; flex-direction: column; gap: 22px; }
.news-sidebar-products { display: flex; flex-direction: column; gap: 10px; }
.news-sidebar-prod { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid #eef2f7; border-radius: var(--radius-sm); text-decoration: none; transition: all 0.15s; }
.news-sidebar-prod:hover { border-color: var(--c-primary); background: #f8fbff; transform: translateX(3px); }
.news-sidebar-prod__thumb { width: 54px; height: 54px; border-radius: 6px; overflow: hidden; border: 1px solid #e2e8f0; flex-shrink: 0; background: #fff; }
.news-sidebar-prod__thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-sidebar-prod__info strong { display: block; font-size: 0.82rem; color: var(--c-text); line-height: 1.35; margin-bottom: 2px; }
.news-sidebar-prod__info span { font-size: 0.73rem; font-weight: 700; color: var(--c-primary); }

/* Phân trang Trang Tin tức (6 bài/trang) */
.news-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 16px 22px; background: #ffffff; border: 1px solid #dbe4f0; border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 45, 95, 0.05); }
.news-pagination__info { font-size: 0.86rem; color: var(--c-text-muted); }
.news-pagination__info strong { color: var(--c-primary); font-weight: 800; }
.news-pagination__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.news-page-btn { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 6px; border: 1px solid #d0dceb; background: #f8fafd; color: var(--c-text); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.18s; }
.news-page-btn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); background: #eef5ff; }
.news-page-btn.is-active { background: var(--c-red); border-color: var(--c-red); color: #ffffff; box-shadow: 0 4px 12px rgba(2, 82, 251, 0.26); }
.news-page-btn.is-active:hover { background: var(--c-red); color: #ffffff; }
.news-page-btn--nav { padding: 0 16px; background: #ffffff; color: var(--c-primary); }
.news-page-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- D. Trang chủ: Khối Giới thiệu Nhà máy & Khối Đối tác B2B --- */
.home-about-grid { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
.home-about__visual { display: flex; flex-direction: column; gap: 16px; }
.home-about__main-img { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 10; }
.home-about__main-img img { width: 100%; height: 100%; object-fit: cover; }
.home-about__badge-float { position: absolute; top: 16px; left: 16px; padding: 10px 14px; background: rgba(0, 38, 77, 0.92); color: #ffffff; border-left: 4px solid var(--c-red); border-radius: var(--radius-sm); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); }
.home-about__badge-float strong { display: block; font-size: 0.78rem; letter-spacing: 0.04em; }
.home-about__badge-float span { font-size: 0.72rem; color: rgba(255, 255, 255, 0.82); }
.home-about__profile-bar { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #f4f8fd; border: 1px solid #d5e3f4; border-radius: var(--radius); }
.home-about__profile-thumb { width: 52px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.home-about__profile-thumb img { max-height: 64px; width: auto; object-fit: contain; }
.home-about__profile-info { flex: 1; }
.home-about__profile-tag { display: inline-block; font-size: 0.68rem; font-weight: 800; color: var(--c-red); letter-spacing: 0.04em; }
.home-about__profile-info strong { display: block; font-size: 0.88rem; color: var(--c-primary); margin-block: 2px; }
.home-about__profile-info p { font-size: 0.76rem; color: var(--c-text-muted); margin: 0; }
.home-about__profile-bar .btn { white-space: nowrap; flex-shrink: 0; }
.home-about__usps { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; margin-bottom: 24px; }
.home-about__usp-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #f8fafd; border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.home-about__usp-num { padding: 3px 8px; background: var(--c-primary); color: #ffffff; font-size: 0.74rem; font-weight: 800; border-radius: 4px; flex-shrink: 0; }
.home-about__usp-body strong { display: block; font-size: 0.88rem; color: var(--c-primary); margin-bottom: 3px; }
.home-about__usp-body span { font-size: 0.8rem; color: var(--c-text-muted); line-height: 1.45; display: block; }
.home-about__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.home-about__actions .btn { width: 100%; justify-content: center; white-space: nowrap; }

.partner-b2b-layout { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: stretch; }
.partner-b2b__intro { background: linear-gradient(145deg, #eef6ff 0%, #dbeafe 100%); color: #0f172a; border-radius: var(--radius); padding: 32px 26px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #bfdbfe; border-top: 4px solid #0252fb; box-shadow: 0 8px 24px rgba(0, 56, 112, 0.08); }
.partner-b2b__eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 800; color: #0252fb; letter-spacing: 0.08em; margin-bottom: 8px; }
.partner-b2b__title { color: #003870; font-size: 1.35rem; line-height: 1.3; margin-bottom: 12px; }
.partner-b2b__desc { font-size: 0.86rem; color: #334155; line-height: 1.6; margin-bottom: 20px; }
.partner-b2b__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 16px; margin-bottom: 20px; border-block: 1px solid #bfdbfe; }
.partner-b2b__metrics strong { display: block; font-size: 1.45rem; font-weight: 800; color: #0252fb; line-height: 1.1; }
.partner-b2b__metrics span { font-size: 0.76rem; color: #475569; font-weight: 600; }
.partner-b2b__matrix { display: grid; gap: 18px; grid-template-columns: 1fr; }
.partner-b2b-card { display: flex; align-items: center; gap: 18px; padding: 20px; background: #ffffff; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05); transition: transform 0.2s, border-color 0.2s; }
.partner-b2b-card:hover { transform: translateY(-3px); border-color: #0252fb; }
.partner-b2b-card__logo { width: 92px; height: 92px; border-radius: 10px; border: 1px solid #e2e8f0; background: #ffffff; padding: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.partner-b2b-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-b2b-card__body { flex: 1; }
.partner-b2b-card__status { display: inline-block; font-size: 0.68rem; font-weight: 800; color: #0b6e3f; background: #eafaf1; padding: 2px 8px; border-radius: 3px; margin-bottom: 6px; }
.partner-b2b-card__name { font-size: 1rem; color: #0f172a; margin-bottom: 8px; }
.partner-b2b-card__equip { padding-top: 8px; border-top: 1px dashed #e2e8f0; font-size: 0.8rem; }
.partner-b2b-card__equip span { color: var(--c-text-muted); display: block; font-size: 0.72rem; }
.partner-b2b-card__equip strong { color: var(--c-text); }

/* --- E. Trang Liên hệ Kỹ thuật Mới (/lien-he/) --- */
.contact-dept-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}
.contact-dept-card {
	background: #ffffff;
	color: var(--c-text);
	border-radius: 14px;
	padding: 22px 24px;
	border-top: 4px solid #0252fb;
	box-shadow: 0 14px 34px rgba(0, 12, 28, 0.28);
	display: flex;
	flex-direction: column;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.contact-dept-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 42px rgba(0, 12, 28, 0.38);
}
.contact-dept-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.contact-dept-card__badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	background: #eef5ff;
	border: 1px solid #cfe0f5;
	color: #0252fb;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.05em;
}
.contact-dept-card__head svg {
	width: 38px;
	height: 38px;
	padding: 8px;
	border-radius: 10px;
	background: linear-gradient(135deg, #0252fb 0%, #0ea5e9 100%);
	color: #ffffff;
	flex-shrink: 0;
}
.contact-dept-card h2 {
	font-size: 1.08rem;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
}
.contact-dept-card p {
	font-size: 0.85rem;
	color: var(--c-text-muted);
	line-height: 1.55;
	margin: 0 0 16px;
	flex: 1;
}
.contact-dept-card__action {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-radius: 8px;
	background: #f0f7ff;
	border: 1px solid #cfe0f5;
	color: #0252fb;
	font-size: 0.86rem;
	font-weight: 800;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.contact-dept-card:hover .contact-dept-card__action,
.contact-dept-card__action:hover {
	background: #0252fb;
	border-color: #0252fb;
	color: #ffffff;
}

.contact-hub-section {
	background: #f8fafc;
}
.contact-hub-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
	align-items: stretch;
}
.contact-hub__info,
.contact-hub__form-col {
	display: flex;
	flex-direction: column;
}
.contact-office-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-top: 5px solid #0252fb;
	border-radius: 16px;
	padding: 30px 28px;
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.contact-office-card__tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	background: #eef5ff;
	border: 1px solid #cfe0f5;
	color: #0252fb;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	margin-bottom: 10px;
}
.contact-office-card h2 {
	font-size: 1.28rem;
	color: #0f172a;
	margin: 0 0 6px;
}
.contact-office-card__sub {
	font-size: 0.86rem;
	color: var(--c-text-muted);
	padding-bottom: 18px;
	margin: 0 0 20px;
	border-bottom: 1px solid #e2e8f0;
}
.contact-office-card__sub strong {
	color: #0252fb;
}
.contact-office-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.contact-office-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.contact-office-item__icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: #eef5ff;
	border: 1px solid #cfe0f5;
	color: #0252fb;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.contact-office-item strong {
	display: block;
	font-size: 0.94rem;
	color: #0f172a;
	margin-bottom: 3px;
}
.contact-office-item p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--c-text-muted);
	line-height: 1.55;
}
.contact-office-item__note {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 9px;
	border-radius: 4px;
	background: #eafaf1;
	color: #0b6e3f;
	font-size: 0.75rem;
	font-weight: 700;
}
.contact-social-strip {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px dashed #cbd5e1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--c-text-muted);
}
.contact-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.contact-social-links a {
	padding: 6px 14px;
	border-radius: 6px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	color: #0f172a;
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.18s ease;
}
.contact-social-links a:hover {
	background: #0252fb;
	border-color: #0252fb;
	color: #ffffff;
}
.contact-map-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-top: 4px solid #004b93;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
}
.contact-map-card--full {
	margin-top: 28px;
}
.contact-map-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 24px;
	background: #ffffff;
	border-bottom: 1px solid #e2e8f0;
}
.contact-map-card__head-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.contact-map-card__head-info strong {
	font-size: 1rem;
	color: #0f172a;
}
.contact-map-card__head-info span {
	font-size: 0.83rem;
	color: var(--c-text-muted);
}
.contact-map-card__head .btn {
	color: #ffffff;
	text-decoration: none;
}
.contact-form-panel {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-top: 5px solid #0252fb;
	border-radius: 16px;
	padding: 30px 28px;
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.contact-form-panel h2 {
	font-size: 1.28rem;
	color: #0f172a;
	margin: 4px 0 8px;
}
.contact-form-panel > p {
	font-size: 0.86rem;
	color: var(--c-text-muted);
	margin: 0 0 20px;
	line-height: 1.6;
}
.contact-form-panel .form {
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
@media (min-width: 768px) {
	.contact-dept-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 992px) {
	.contact-hub-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-hero-v2__head { max-width: 820px; margin-bottom: 28px; }
.contact-channel-strip { display: grid; gap: 18px; grid-template-columns: 1fr; }
.contact-channel-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: rgba(255, 255, 255, 0.96); color: var(--c-text); border-radius: var(--radius); border-bottom: 4px solid var(--c-red); box-shadow: 0 12px 30px rgba(0, 15, 36, 0.25); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.contact-channel-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0, 15, 36, 0.35); color: var(--c-text); }
.contact-channel-card__icon { width: 52px; height: 52px; border-radius: 12px; background: var(--c-red); color: #ffffff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 6px 16px rgba(2, 82, 251, 0.28); }
.contact-channel-card__icon--blue { background: var(--c-primary); box-shadow: 0 6px 16px rgba(0, 75, 147, 0.28); }
.contact-channel-card__icon--dark { background: #0f294a; box-shadow: 0 6px 16px rgba(15, 41, 74, 0.28); }
.contact-channel-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-channel-card__body small { font-size: 0.68rem; font-weight: 800; color: var(--c-text-muted); letter-spacing: 0.05em; }
.contact-channel-card__body strong { font-size: 1.04rem; font-weight: 800; color: var(--c-primary); line-height: 1.25; }
.contact-channel-card__body span { font-size: 0.78rem; font-weight: 700; color: var(--c-red); margin-top: 2px; }

.contact-master-box { display: grid; grid-template-columns: 1fr; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 32, 72, 0.12); border: 1px solid #dbe4f0; background: #ffffff; align-items: stretch; }
.contact-master__info {
	background-image:
		linear-gradient(155deg, rgba(0, 26, 56, 0.94) 0%, rgba(0, 56, 112, 0.9) 100%),
		url('assets/images/bg-ban-ve-cad-tanasu.webp');
	background-size: cover;
	background-position: center;
	color: #ffffff;
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
}
.contact-master__badge { display: inline-block; padding: 4px 12px; background: var(--c-red); color: #ffffff; font-size: 0.7rem; font-weight: 800; border-radius: 4px; letter-spacing: 0.06em; margin-bottom: 12px; }
.contact-master__info h2 { color: #ffffff; font-size: 1.32rem; line-height: 1.3; margin-bottom: 8px; }
.contact-master__mst { font-size: 0.85rem; color: rgba(255, 255, 255, 0.86); padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.contact-master__mst strong { color: #7cc4ff; }
.contact-master__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-master__list li { display: flex; align-items: flex-start; gap: 14px; }
.contact-master__list-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(124, 196, 255, 0.28); color: #7cc4ff; display: grid; place-items: center; flex-shrink: 0; }
.contact-master__list strong { display: block; font-size: 0.95rem; color: #ffffff; margin-bottom: 4px; }
.contact-master__list p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.88); margin: 0; line-height: 1.55; }
.contact-master__list small { display: block; margin-top: 5px; font-size: 0.76rem; font-weight: 700; color: #7cc4ff; }

.contact-master__info-bottom { padding-top: 20px; border-top: 1px dashed rgba(255, 255, 255, 0.22); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.contact-master__info-bottom > span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.contact-master__socials { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-master__socials a { padding: 6px 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: #ffffff; font-size: 0.78rem; font-weight: 700; text-decoration: none; transition: all 0.2s; }
.contact-master__socials a:hover { background: var(--c-red); border-color: var(--c-red); color: #ffffff; }

.contact-master__form { padding: 36px 34px; background: #ffffff; display: flex; flex-direction: column; justify-content: space-between; border-top: 5px solid var(--c-red); }
.contact-master__form-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #edf2f7; }
.contact-master__form-head h2 { font-size: 1.35rem; color: var(--c-primary); margin-bottom: 8px; }
.contact-master__form-head p { font-size: 0.88rem; color: var(--c-text-muted); margin-bottom: 14px; line-height: 1.6; }
.contact-master__trust-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-master__trust-pills span { padding: 4px 11px; border-radius: 99px; background: #eef5ff; color: var(--c-primary); font-size: 0.75rem; font-weight: 700; }
.contact-master__form .form { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }

.contact-map-showcase { background: #ffffff; border: 1px solid #dbe4f0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.contact-map-showcase__bar { display: grid; gap: 16px; grid-template-columns: 1fr; padding: 18px 24px; background: #f8fafd; border-bottom: 1px solid #dbe4f0; }
.contact-map-showcase__item { font-size: 0.85rem; line-height: 1.5; }
.contact-map-showcase__item strong { display: block; color: var(--c-primary); font-size: 0.86rem; margin-bottom: 2px; }
.contact-map-showcase__item span { color: var(--c-text-muted); }
.contact-map-showcase__item a { font-weight: 800; color: var(--c-red); }

/* ==========================================================================
   12. CTA Band & Footer Xanh Đậm #004b93 (chuẩn Hồng Ký)
   ========================================================================== */
.cta-band { position: relative; padding-block: 56px; background: linear-gradient(135deg, #003870 0%, #005bb5 100%); color: #ffffff; text-align: center; border-bottom: 4px solid var(--c-red); }
.cta-band__inner { max-width: 820px; margin-inline: auto; }
.cta-band h2 { color: #ffffff; font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); margin-bottom: 0.6rem; line-height: 1.4; }
.cta-band p { color: rgba(255, 255, 255, 0.9); margin-bottom: 1.5rem; }
.cta-band .btn-group { justify-content: center; }

.site-footer { padding-top: 48px; background: linear-gradient(180deg, #003870 0%, #00264d 100%); border-top: 4px solid #0ea5e9; color: rgba(255, 255, 255, 0.88); font-size: 0.86rem; }
.site-footer a { color: rgba(255, 255, 255, 0.92); }
.site-footer a:hover { color: #38bdf8; text-decoration: none; }
.footer-branches { display: grid; gap: 20px; grid-template-columns: 1fr; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.footer-branch h4 { color: #7cc4ff; font-size: 0.92rem; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.footer-branch h4::before { content: "📍"; font-size: 0.9rem; }
.footer-branch p { margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); line-height: 1.5; }
.site-footer h3 { color: #ffffff; font-size: 1rem; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer__bottom { margin-top: 36px; padding-block: 18px; padding-bottom: 84px; background: #001d3d; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; font-size: 0.8rem; }

/* ==========================================================================
   13. Nút liên hệ nổi bên phải
   ========================================================================== */
.float-contact { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #ffffff; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); }
.float-contact__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; font-size: 0.75rem; font-weight: 700; color: #fff; text-decoration: none; }
.float-contact__btn:hover { color: #fff; filter: brightness(1.08); }
.float-contact__btn svg { width: 20px; height: 20px; fill: currentColor; }
.float-contact__phone { background: linear-gradient(135deg, #0252fb, #003ecc); }
.float-contact__zalo { background: var(--c-primary); }
.float-contact__mess { background: #0ea5e9; }

/* ==========================================================================
   14. Responsive
   ========================================================================== */
@media (min-width: 600px) {
	.form__row { grid-template-columns: 1fr 1fr; }
	.shop-section__head { grid-template-columns: 1fr auto; align-items: end; }
	.grid--2, .grid--4, .process-grid, .catalog-hero__cats, .about-orient-grid, .about-values__cards, .catalog-grid--workspace, .about-pipeline, .partner-b2b__matrix, .home-about__usps { grid-template-columns: repeat(2, 1fr); }
	.catalog-hero__metrics { grid-template-columns: repeat(4, 1fr); }
	.about-dossier-card__top { grid-template-columns: 145px 1fr; }
	.news-spotlight__sub { grid-template-columns: 0.44fr 0.56fr; }
	.why-badges { grid-template-columns: repeat(3, 1fr); }
	.footer-branches { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	:root { --gutter: 24px; }
	.header-search { display: flex; }
	.shop-box { padding: 28px; }
	.shop-layout { grid-template-columns: 0.96fr 1.04fr; gap: 18px; }
	.grid--3, .contact-channel-strip, .contact-map-showcase__bar, .sp-std-acc-grid { grid-template-columns: repeat(3, 1fr); }
	.project-carousel__track { grid-auto-columns: calc((100% - 20px) / 2); }
	.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
	.consult__grid { grid-template-columns: 1.05fr 0.95fr; gap: 42px; }
	.sp-detail, .about-who__grid { grid-template-columns: 0.95fr 1.15fr; }
	.svc-hero__grid { grid-template-columns: 1.12fr 0.88fr; }
	.svc-case-row { grid-template-columns: 0.42fr 0.58fr; }
	.about-values-split { grid-template-columns: 0.92fr 1.08fr; }
	.portfolio-banner { grid-template-columns: 1.45fr 0.55fr; }
	.why-stats, .about-hero__stats { grid-template-columns: repeat(4, 1fr); }
	.why-badges { grid-template-columns: repeat(5, 1fr); }
	.footer-main { grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
	.catalog-grid--workspace.is-list-view .catalog-card { grid-template-columns: 220px 1fr; }
	.catalog-grid--workspace.is-list-view .catalog-card__body { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
	.catalog-grid--workspace.is-list-view .catalog-card__main-info { flex: 1; }
	.catalog-grid--workspace.is-list-view .catalog-card__actions { flex-direction: column; width: 170px; flex-shrink: 0; border-top: 0; padding-top: 0; }
	.catalog-grid--workspace.is-list-view .catalog-card__btn, .catalog-grid--workspace.is-list-view .catalog-card__quote { width: 100%; justify-content: center; }
}
@media (min-width: 1024px) {
	.header-contact { display: flex; }
	.header-nav-bar__right { display: flex; }
	.hero-slide__inner { grid-template-columns: 0.95fr 1.15fr; }
	.hero-slider__arrow { display: grid; }
	.grid--3, .catalog-grid--workspace { grid-template-columns: repeat(3, 1fr); }
	.grid--4, .process-grid, .catalog-hero__cats, .about-pipeline { grid-template-columns: repeat(4, 1fr); }
	.catalog-hero__split-grid { grid-template-columns: 1.15fr 0.85fr; }
	.catalog-hero__cats--matrix { grid-template-columns: repeat(2, 1fr); }
	.catalog-workspace { grid-template-columns: 280px minmax(0, 1fr); }
	.catalog-sidebar { position: sticky; top: 96px; min-width: 0; }
	.catalog-main { min-width: 0; }
	.about-dossier-hero { grid-template-columns: 1fr; }
	.about-bento { grid-template-columns: 0.96fr 1.04fr; }
	.about-qa-grid { grid-template-columns: 1.05fr 0.95fr; }
	.news-magazine-layout { grid-template-columns: minmax(0, 1fr) 320px; }
	.news-magazine__main { min-width: 0; }
	.news-magazine__sidebar { position: sticky; top: 96px; min-width: 0; }
	.home-about-grid { grid-template-columns: 0.96fr 1.04fr; }
	.partner-b2b-layout { grid-template-columns: 360px minmax(0, 1fr); }
	.contact-master-box { grid-template-columns: 0.92fr 1.08fr; }
	.process-card:not(:last-child)::after { content: "›"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: #ffffff; border: 1px solid #cbd5e1; color: var(--c-primary); font-weight: 800; font-size: 1.15rem; display: grid; place-items: center; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
	.project-carousel__track { grid-auto-columns: calc((100% - 40px) / 3); }
	.video-split { grid-template-columns: 1.55fr 1fr; }
	.news-spotlight { grid-template-columns: 1.05fr 1.15fr; }
	.single-layout { grid-template-columns: minmax(0, 1fr) 320px; }
	.footer-branches { grid-template-columns: repeat(4, 1fr); }

	.nav-toggle { display: none; }
	.primary-nav { position: static; transform: none; padding: 0; overflow: visible; background: none; box-shadow: none; display: flex; align-items: center; gap: 18px; }
	.primary-nav > div > ul, .primary-nav > ul { display: flex; align-items: center; gap: 6px; }
	.primary-nav a { padding: 10px 14px; border: 0; white-space: nowrap; }

	/* Khối nút nổi dọc sát mép phải kiểu Hồng Ký */
	.float-contact { left: auto; right: 0; bottom: auto; top: 55%; transform: translateY(-50%); grid-auto-flow: row; gap: 3px; background: none; box-shadow: none; }
	.float-contact__btn { width: 46px; height: 46px; min-height: 0; border-radius: 6px 0 0 6px; box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.18); }
	.float-contact__btn span { display: none; }
	.site-footer__bottom { padding-bottom: 18px; }
}

/* ==========================================================================
   15. Hiệu ứng 3D Tilt + Ánh kim loại (Specular Glare) & Scroll-Reveal Toàn Trang
   ========================================================================== */
[data-tilt-card] {
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
}
[data-tilt-card].is-tilting {
	transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px) scale3d(1.012, 1.012, 1.012) !important;
	transition: transform 0.08s ease-out, box-shadow 0.25s ease, border-color 0.25s ease !important;
	z-index: 3;
}
.hero-machine[data-tilt-card].is-tilting {
	box-shadow: 0 30px 68px rgba(0, 0, 0, 0.55), 0 0 28px rgba(2, 82, 251, 0.28) !important;
}
.tilt-glare {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 4;
	opacity: 0;
	background: radial-gradient(
		360px circle at var(--gx, 50%) var(--gy, 50%),
		rgba(255, 255, 255, 0.32) 0%,
		rgba(124, 196, 255, 0.1) 38%,
		transparent 75%
	);
	transition: opacity 0.3s ease;
}
[data-tilt-card].is-tilting > .tilt-glare {
	opacity: 1;
}

/* Hiệu ứng Scroll-Reveal toàn trang (chỉ kích hoạt khi JS đã sẵn sàng) */
html.js-ready [data-scroll-item] {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.68s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.25s ease,
		border-color 0.25s ease;
	transition-delay: var(--sr-delay, 0ms);
}
html.js-ready [data-scroll-item].is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   5 NÂNG CẤP TRẢI NGHIỆM: LIVE SEARCH, LIGHTBOX, AUTO-FILL FORM, FOOTER 4 CỘT & BACK-TO-TOP
   ========================================================================== */

/* 1. Live Autocomplete Search Dropdown trên Header */
.header-search {
	position: relative;
}
.header-search__dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #cfe0f5;
	border-radius: 14px;
	box-shadow: 0 22px 48px rgba(0, 42, 92, 0.18), 0 4px 12px rgba(2, 82, 251, 0.08);
	z-index: 1200;
	overflow: hidden;
}
.header-search__dropdown[hidden] {
	display: none !important;
}
.header-search__drop-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: #f4f8fd;
	border-bottom: 1px solid #e2ecf8;
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #4b6484;
}
.header-search__drop-head strong {
	color: var(--c-red);
	font-weight: 800;
}
.header-search__drop-list {
	max-height: 340px;
	overflow-y: auto;
	divide-y: 1px solid #eef4fb;
}
.header-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	text-decoration: none;
	border-bottom: 1px solid #f0f5fc;
	transition: background 0.16s ease;
}
.header-search__item[hidden] {
	display: none !important;
}
.header-search__item:hover {
	background: #f0f7ff;
}
.header-search__thumb {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #dce8f5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
}
.header-search__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.header-search__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.header-search__info strong {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--c-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.header-search__item:hover .header-search__info strong {
	color: var(--c-red);
}
.header-search__info small {
	font-size: 0.78rem;
	color: var(--c-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.header-search__sku {
	display: inline-block;
	background: #eaf2ff;
	color: var(--c-primary);
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 0.72rem;
}
.header-search__arrow {
	color: #94a3b8;
	font-size: 1.2rem;
	font-weight: 700;
	transition: transform 0.18s ease, color 0.18s ease;
}
.header-search__item:hover .header-search__arrow {
	color: var(--c-red);
	transform: translateX(3px);
}
.header-search__empty {
	padding: 18px 16px;
	text-align: center;
	font-size: 0.88rem;
	color: var(--c-muted);
}
.header-search__empty p {
	margin: 0 0 6px;
}
.header-search__empty a {
	color: var(--c-red);
	font-weight: 700;
	text-decoration: none;
}
.header-search__all {
	width: 100%;
	border: 0;
	border-top: 1px solid #dce8f5;
	background: #f4f8fd;
	color: var(--c-primary);
	padding: 10px 14px;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
	transition: background 0.18s ease, color 0.18s ease;
}
.header-search__all:hover {
	background: var(--c-red);
	color: #fff;
}

/* 2. Hiệu ứng viền sáng khi tự động điền model máy vào Form (#lien-he-form.is-autofilled) */
@keyframes tnsFormPulse {
	0% { box-shadow: 0 0 0 0 rgba(2, 82, 251, 0.45); }
	50% { box-shadow: 0 0 0 10px rgba(2, 82, 251, 0); }
	100% { box-shadow: 0 0 0 0 rgba(2, 82, 251, 0); }
}
#lien-he-form.is-autofilled textarea,
#lien-he-form.is-autofilled select {
	border-color: var(--c-red);
	background-color: #f0f7ff;
	animation: tnsFormPulse 1.1s ease-out;
}

/* 3. Nút Phóng to & Lightbox Toàn màn hình ở trang Chi tiết sản phẩm */
.sp-detail__img-wrap[data-sp-zoom-trigger] {
	cursor: zoom-in;
}
.sp-detail__zoom-btn[hidden],
.sp-detail__counter[hidden] {
	display: none !important;
}
.sp-detail__zoom-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 99px;
	border: 1px solid #cfe0f5;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	color: var(--c-primary);
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 42, 92, 0.1);
	transition: all 0.2s ease;
}
.sp-detail__zoom-btn:hover {
	background: var(--c-red);
	border-color: var(--c-red);
	color: #fff;
	transform: translateY(-1px);
}
.sp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.sp-lightbox[hidden] {
	display: none !important;
}
.sp-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 15, 34, 0.9);
	backdrop-filter: blur(8px);
}
.sp-lightbox__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 980px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sp-lightbox__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	padding: 0 6px;
}
.sp-lightbox__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.05rem;
}
.sp-lightbox__title span {
	background: rgba(2, 82, 251, 0.35);
	border: 1px solid rgba(56, 189, 248, 0.45);
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 0.8rem;
	font-weight: 700;
}
.sp-lightbox__close {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
}
.sp-lightbox__close:hover {
	background: var(--c-red);
	border-color: var(--c-red);
	transform: scale(1.06);
}
.sp-lightbox__stage {
	position: relative;
	background: #fff;
	border-radius: 18px;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
	max-height: 80vh;
	box-shadow: 0 28px 72px rgba(0, 0, 0, 0.45);
}
.sp-lightbox__img {
	max-width: 100%;
	max-height: calc(80vh - 48px);
	width: auto;
	height: auto;
	object-fit: contain;
}
.sp-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid #cfe0f5;
	background: rgba(255, 255, 255, 0.95);
	color: var(--c-primary);
	font-size: 1.7rem;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px rgba(0, 42, 92, 0.16);
	transition: all 0.2s ease;
}
.sp-lightbox__nav--prev { left: 16px; }
.sp-lightbox__nav--next { right: 16px; }
.sp-lightbox__nav:hover {
	background: var(--c-red);
	border-color: var(--c-red);
	color: #fff;
}

/* 4. Footer 4 cột & Huy hiệu cam kết kỹ thuật */
.footer-main--4col {
	grid-template-columns: 1.35fr 1.05fr 1fr 0.8fr;
	gap: 28px;
}
.footer-trust-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}
.footer-trust-pills span {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 99px;
	background: rgba(14, 165, 233, 0.14);
	border: 1px solid rgba(56, 189, 248, 0.35);
	color: #e0f2fe;
	font-size: 0.75rem;
	font-weight: 600;
}
@media (max-width: 960px) {
	.footer-main--4col {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.footer-main--4col {
		grid-template-columns: 1fr;
	}
}

/* 5. Nút Cuộn lên đầu trang (Back-to-Top) */
.float-contact__top {
	background: var(--c-primary-dark);
	border: 1px solid rgba(56, 189, 248, 0.4);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.2s ease;
}
.float-contact__top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.float-contact__top:hover {
	background: var(--c-red);
	border-color: var(--c-red);
}
@media (max-width: 767px) {
	.float-contact__top {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}