/* 30/09/2026: khách yêu cầu hạn chế tải ảnh - chặn kéo-thả lưu ảnh (đi kèm chặn
chuột phải bằng JS ở Footer.phtml). Không chặn được screenshot, khách đã biết. */
img {
-webkit-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
}
:root {
--topbar-bg: #0c2340;
--header-bg: #ffffff;
--primary-blue: #0f5298;
--primary-blue-dark: #082d56;
--primary-blue-light: #1976d2;
--primary-blue-soft: #eaf2fb;
--accent-cyan: #00a8cc;
--accent-teal: #028090;
--accent-cyan-light: #38bdf8;
--accent-red: #e63946;
--accent-gold: #f4a261;
--text-main: #1e293b;
--text-muted: #64748b;
--bg-body: #f8fafc;
--bg-white: #ffffff;
--border-color: #e2e8f0;
--shadow-sm: 0 2px 8px rgba(11, 79, 156, 0.06);
--shadow-md: 0 8px 24px rgba(11, 79, 156, 0.1);
--shadow-lg: 0 16px 36px rgba(11, 79, 156, 0.14);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
width: 100%;
max-width: 100vw;
overflow-x: clip;
}
body {
font-family: 'Roboto', sans-serif;
color: var(--text-main);
background-color: var(--bg-body);
line-height: 1.6;
width: 100%;
max-width: 100vw;
overflow-x: clip;
position: relative;
}
header, nav, section, footer, main, .container {
max-width: 100vw;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: var(--primary-blue-dark);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.container {
max-width: 1320px;
margin: 0 auto;
padding: 0 15px;
}
/* ================= 1. TOP BAR ================= */
.thietthach-topbar {
background-color: var(--topbar-bg);
color: #ffffff;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tt-topbar-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.tt-brand-col {
display: flex;
align-items: center;
gap: 12px;
}
.tt-logo-box {
background: #ffffff;
padding: 4px 10px;
border-radius: 4px;
display: inline-flex;
align-items: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.tt-logo-box img {
height: 42px;
width: auto;
object-fit: contain;
}
.tt-brand-text {
display: flex;
flex-direction: column;
}
.tt-brand-title {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 800;
color: #38bdf8;
letter-spacing: 0.8px;
line-height: 1.2;
}
.tt-brand-iso {
font-size: 11px;
line-height: 1;
color: #94a3b8;
letter-spacing: 1.2px;
font-weight: 600;
}
.tt-nav-items {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.tt-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #e2e8f0;
font-size: 12px;
line-height: 1;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.tt-nav-item i {
font-size: 17px;
line-height: 1;
color: #38bdf8;
transition: var(--transition);
}
.tt-nav-item:hover {
color: #38bdf8;
}
.tt-nav-item:hover i {
transform: translateY(-2px);
color: #7dd3fc;
}
.tt-social-col {
display: flex;
align-items: center;
gap: 14px;
}
.tt-social-link {
color: #38bdf8;
font-size: 16px;
transition: var(--transition);
}
.tt-social-link:hover {
color: #ffffff;
transform: scale(1.15);
}
.tt-lang-btn {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
line-height: 1;
font-weight: 700;
color: #e2e8f0;
background: rgba(255, 255, 255, 0.12);
padding: 4px 10px;
border-radius: 4px;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
}
/* ================= 2. MAIN HEADER (FIXED NO-OVERFLOW DESIGN) ================= */
.header-main {
background: var(--bg-white);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
position: sticky;
top: 0;
z-index: 1000;
}
.header-quick-contact {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.quick-contact-btn {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 14px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
transition: var(--transition);
flex-shrink: 0;
}
.quick-contact-btn:hover {
transform: translateY(-2px) scale(1.08);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}
.quick-contact-phone {
background: #25d366;
}
.quick-contact-zalo {
background: #0068ff;
}
.quick-contact-fb {
background: #1877f2;
}
.header-wrapper {
display: flex;
justify-content: flex-end;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
gap: 14px;
position: relative;
}
/* Menu luôn nằm chính giữa thanh nav bất kể cụm bên phải (icon nhanh + nút báo giá)
rộng bao nhiêu — canh giữa tuyệt đối theo cả thanh, không phải giữa các phần tử flex còn lại. */
.header-wrapper > nav {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* Logo trong header-main (sticky) — topbar phía trên chứa logo gốc nhưng không dính khi cuộn,
nên header cố định cần logo riêng để vẫn thấy thương hiệu lúc cuộn trang. */
.header-main-logo {
display: flex;
align-items: center;
margin-right: auto;
flex-shrink: 0;
}
.header-main-logo img {
height: 40px;
width: auto;
object-fit: contain;
}
.logo-box {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.logo-img {
height: 40px;
width: auto;
max-width: 170px;
object-fit: contain;
display: block;
}
.logo-divider {
width: 1.5px;
height: 32px;
background-color: #0f5298;
border-radius: 1px;
}
.logo-text-sub {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.3px;
color: #0f5298;
text-transform: uppercase;
line-height: 1.28;
font-family: 'Montserrat', sans-serif;
white-space: nowrap;
}
.nav-menu {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.nav-item {
position: relative;
}
.nav-link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 10px 16px;
font-family: 'Montserrat', sans-serif;
font-size: 13.5px;
font-weight: 800;
color: #0c2340;
text-transform: uppercase;
border-radius: 5px;
transition: var(--transition);
letter-spacing: 0.3px;
white-space: nowrap;
}
.nav-link i {
font-size: 9px;
color: #64748b;
}
.nav-item.active .nav-link {
color: #0f5298;
background-color: #eaf2fb;
}
.nav-link:hover {
color: #0f5298;
background-color: #f1f5f9;
}
/* Dropdown */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--bg-white);
min-width: 240px;
box-shadow: var(--shadow-lg);
border-radius: 8px;
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
z-index: 999;
border: 1px solid var(--border-color);
border-top: 3px solid var(--primary-blue);
}
.nav-item:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
font-size: 12px;
font-weight: 600;
color: #334155;
white-space: nowrap;
}
.dropdown-item i {
color: var(--primary-blue-light);
font-size: 12px;
width: 16px;
}
.dropdown-item:hover {
background: var(--primary-blue-soft);
color: var(--primary-blue);
padding-left: 20px;
}
.header-cta-btn {
background: linear-gradient(135deg, #0f5298 0%, #1565c0 100%);
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 11.5px;
padding: 7px 13px;
border-radius: 30px;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 12px rgba(15, 82, 152, 0.28);
letter-spacing: 0.2px;
white-space: nowrap;
flex-shrink: 0;
}
.header-cta-btn:hover {
background: linear-gradient(135deg, #07376e 0%, #0f5298 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(15, 82, 152, 0.4);
}
/* ================= 3. PRICING TABS (MODERN) ================= */
.pricing-ribbon-section {
background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
padding: 4px 0 0 0;
}
.pricing-ribbon-header {
text-align: center;
margin-bottom: 16px;
}
.pricing-ribbon-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 2px;
color: var(--primary-blue);
text-transform: uppercase;
background: var(--primary-blue-soft);
border: 1px solid rgba(15, 82, 152, 0.12);
padding: 6px 16px;
border-radius: 999px;
margin-bottom: 16px;
}
.pricing-ribbon-eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-cyan);
box-shadow: 0 0 0 4px rgba(0, 168, 204, 0.15);
flex-shrink: 0;
}
.pricing-ribbon-title {
font-size: 32px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.5px;
color: var(--primary-blue-dark);
margin: 0 auto;
max-width: 760px;
}
.pricing-tabs-skewed {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.skewed-tab {
position: relative;
background: var(--bg-white);
color: var(--primary-blue-dark);
padding: 27px 69px 27px 105px;
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
transform: none;
border: 2px solid var(--primary-blue);
border-radius: 16px;
box-shadow: 0 6px 18px rgba(15, 82, 152, 0.06);
overflow: hidden;
transition: var(--transition);
}
.skewed-tab::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--accent-cyan) 0%, var(--primary-blue) 100%);
opacity: 0;
transition: var(--transition);
}
.skewed-tab:hover {
background: var(--bg-white);
transform: translateY(-4px);
border-color: rgba(0, 168, 204, 0.45);
box-shadow: 0 14px 30px rgba(15, 82, 152, 0.14);
}
.skewed-tab:hover::after {
opacity: 1;
}
.skewed-tab::before {
content: '\2192';
position: absolute;
right: 33px;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
font-weight: 700;
color: var(--accent-cyan);
opacity: 0;
transition: var(--transition);
}
.skewed-tab:hover::before {
opacity: 1;
right: 27px;
}
.skewed-tab.is-active {
border-color: var(--accent-cyan);
box-shadow: 0 12px 26px rgba(0, 168, 204, 0.18);
}
.skewed-tab.is-active::after {
opacity: 1;
}
.skewed-tab.is-active .skewed-tab-icon {
background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--primary-blue) 100%);
color: #ffffff;
}
.skewed-tab-icon {
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
width: 63px;
height: 63px;
border-radius: 19px;
background: linear-gradient(135deg, rgba(0, 168, 204, 0.14) 0%, rgba(15, 82, 152, 0.14) 100%);
color: var(--primary-blue);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
flex-shrink: 0;
}
.skewed-tab:hover .skewed-tab-icon {
background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--primary-blue) 100%);
color: #ffffff;
transform: translateY(-50%) scale(1.05);
}
.skewed-tab-icon i {
font-size: 25px;
color: inherit;
}
.skewed-tab-text {
transform: none;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.2px;
line-height: 1.35;
text-transform: none;
white-space: normal;
}
/* ================= 4. PRICING SHOWCASES ================= */
.pricing-cards-section {
background: linear-gradient(180deg, #f5f9fd 0%, #eef4fb 100%);
padding: 6px 0 10px 0;
border-bottom: none;
}
.pricing-showcase-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
/* ĐÃ LÀM LẠI 04/09/2026 (v3) — khách gửi link thật https://thietthach.vn/ làm chuẩn: card nền xanh
dương đặc (không phải ảnh phủ kín), ảnh đóng khung nhỏ bên trái, giá bên phải. Bỏ hẳn kiểu
"ảnh full-bleed + kính mờ" ở 2 lần sửa trước — ảnh Zalo trông mờ chỉ do nén JPEG, không phải
hiệu ứng thật của site mẫu. */
.pricing-box-dark {
display: flex;
align-items: center;
gap: 18px;
position: relative;
overflow: hidden;
min-height: 220px;
padding: 16px;
border-radius: 14px;
border: 2px solid rgba(45, 212, 191, 0.4);
background: linear-gradient(135deg, #0a3a6b 0%, #0f5298 100%);
box-shadow: 0 18px 40px rgba(10, 39, 68, 0.26);
transition: var(--transition);
}
.pricing-box-dark:hover {
transform: translateY(-6px);
box-shadow: 0 26px 55px rgba(10, 39, 68, 0.36);
}
/* vòng tròn glow kiểu AI-SaaS cũ — bỏ hẳn, giữ lại phần tử trong HTML cho an toàn Ghép mã */
.pricing-box-frame {
display: none;
}
.pricing-img-wrapper {
position: relative;
flex: 0 0 46%;
width: 46%;
height: 100%;
min-height: 188px;
border-radius: 10px;
overflow: hidden;
border: 2px solid rgba(45, 212, 191, 0.55);
box-shadow: none;
}
.pricing-img-wrapper::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(8, 42, 82, 0) 55%, rgba(8, 42, 82, 0.5) 100%);
}
.pricing-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-box-dark:hover .pricing-img-wrapper img {
transform: scale(1.07);
}
.pricing-info-wrapper {
position: relative;
flex: 1 1 auto;
width: auto;
padding: 8px 6px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
z-index: 2;
}
.brush-ribbon-tag {
display: inline-block;
position: static;
align-self: flex-start;
background: var(--primary-blue);
color: #ffffff;
border: none;
font-family: 'Montserrat', sans-serif;
font-size: 10.5px;
font-weight: 800;
padding: 7px 18px 7px 16px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
order: -1;
margin-bottom: 0;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.pricing-unit {
font-size: 11.5px;
color: #bcd2e8;
font-style: normal;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
margin-bottom: 2px;
}
.pricing-value {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 900;
color: #ffffff;
line-height: 1.15;
text-align: left;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
letter-spacing: -0.5px;
margin-bottom: 10px;
}
.pricing-cta-hint {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
margin-top: 14px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.32);
backdrop-filter: blur(6px);
font-family: 'Montserrat', sans-serif;
font-size: 11.5px;
font-weight: 700;
color: #ffffff;
opacity: 1;
transform: none;
transition: var(--transition);
}
.pricing-cta-hint i {
font-size: 10px;
transition: var(--transition);
}
.pricing-box-dark:hover .pricing-cta-hint {
opacity: 1;
transform: none;
background: var(--accent-cyan);
border-color: var(--accent-cyan);
color: #04263f;
}
.pricing-box-dark:hover .pricing-cta-hint i {
transform: translateX(3px);
}
/* 10/09/2026: wrapper bọc workflow+2 khối báo giá+hero+stats (xem trang-chu.phtml) -
display:contents làm wrapper "vô hình" với layout, các khối con render y hệt như
không có wrapper bao ngoài - AN TOÀN 100% cho desktop, không đổi gì cả. Chỉ bật
display:flex thật sự trong @media mobile (xem cuối file) để đổi thứ tự hero lên đầu. */
.hero-reorder-wrap {
display: contents;
}
/* ================= 5. HERO SECTION ================= */
.hero-section {
position: relative;
background-color: #0b4f9c;
padding: 32px 0 36px 0;
color: #ffffff;
overflow: hidden;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
z-index: 0;
}
/* Lớp phủ nhạt hơn nhiều so với trước — chỉ đủ tối để chữ trắng đọc rõ,
không che mất ảnh nền thật phía sau (villa đá thật, không phải render 3D). */
.hero-section::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(7, 40, 82, 0.60) 0%, rgba(11, 60, 120, 0.5) 55%, rgba(11, 79, 156, 0.4) 100%);
z-index: 1;
}
.hero-content {
/* 29/09/2026: khách yêu cầu dàn rộng ra, giữ nguyên độ rộng ảnh nền. */
max-width: 1020px;
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 6px 16px;
border-radius: 30px;
font-size: 12.5px;
font-weight: 700;
margin-bottom: 18px;
color: #ffffff;
}
.hero-title {
font-size: 31px;
font-weight: 900;
line-height: 1.45;
letter-spacing: -0.2px;
color: #ffffff;
margin-bottom: 16px;
text-transform: uppercase;
text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.hero-title-brand {
color: #7fd1ff;
border-bottom: 3px solid var(--accent-red);
}
.hero-desc {
font-size: 16px;
color: #f1f5f9;
margin-bottom: 24px;
max-width: 920px;
line-height: 1.75;
text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.hero-btns {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* 29/09/2026: khách yêu cầu dàn hàng nút (kể cả "Tính Dự Toán Chi Phí") ra
đều nhau thay vì gói gọn bên trái. */
.hero-btns .btn {
padding: 10px 20px;
font-size: 13.5px;
flex: 1 1 0;
justify-content: center;
white-space: nowrap;
}
.btn {
padding: 12px 26px;
border-radius: 6px;
font-family: 'Montserrat', sans-serif;
font-size: 13.5px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 9px;
cursor: pointer;
border: none;
transition: var(--transition);
}
.btn-primary {
background: var(--accent-red);
color: #ffffff;
box-shadow: 0 6px 20px rgba(230, 57, 70, 0.35);
}
.btn-primary:hover {
background: #c92a37;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(230, 57, 70, 0.5);
}
.btn-outline {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
border: 1.5px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(5px);
}
.btn-outline:hover {
background: #ffffff;
color: var(--primary-blue-dark);
border-color: #ffffff;
}
/* ================= 6. FLOATING STATS BAR ================= */
.stats-bar-wrapper {
margin-top: -20px;
position: relative;
z-index: 10;
}
.stats-grid {
background: var(--bg-white);
border-radius: 12px;
padding: 18px 20px;
box-shadow: var(--shadow-lg);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
border: 1px solid var(--border-color);
}
.stat-card {
display: flex;
align-items: center;
gap: 14px;
padding: 0 12px;
border-right: 1px dashed var(--border-color);
}
.stat-card:last-child {
border-right: none;
}
.stat-icon {
width: 44px;
height: 44px;
background: var(--primary-blue-soft);
color: var(--primary-blue);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.stat-num {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 900;
color: var(--primary-blue-dark);
line-height: 1;
margin-bottom: 4px;
}
.stat-text {
font-size: 12.5px;
color: var(--text-muted);
font-weight: 500;
line-height: 1.3;
}
/* ================= 7. SECTION HEADINGS ================= */
.section-header {
text-align: center;
margin-bottom: 16px;
}
.section-subtitle {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 800;
color: var(--primary-blue-light);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 6px;
}
.section-title {
font-size: 27px;
font-weight: 800;
color: var(--primary-blue-dark);
text-transform: uppercase;
position: relative;
padding-bottom: 14px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3.5px;
background: linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-cyan) 100%);
border-radius: 2px;
}
.section-desc {
margin-top: 10px;
color: var(--text-muted);
font-size: 14px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
/* ================= 8. CORE COMMITMENTS WITH ILLUSTRATIVE THUMBNAILS ================= */
.commitments-section {
padding: 80px 0 50px 0;
background: #ffffff;
}
.commitments-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.commit-card {
background: var(--bg-body);
border: 1px solid var(--border-color);
border-radius: 10px;
overflow: hidden;
transition: var(--transition);
display: flex;
flex-direction: column;
position: relative;
}
.commit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--primary-blue);
transition: var(--transition);
z-index: 2;
}
.commit-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
background: #ffffff;
border-color: var(--primary-blue-light);
}
.commit-card:hover::before {
width: 6px;
background: var(--accent-cyan);
}
.commit-img-box {
position: relative;
height: 210px;
overflow: hidden;
background: #082d56;
}
.commit-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.commit-card:hover .commit-img-box img {
transform: scale(1.08);
}
.commit-tag {
position: absolute;
top: 10px;
left: 14px;
background: rgba(15, 82, 152, 0.9);
color: #ffffff;
font-size: 10px;
font-weight: 800;
padding: 3px 10px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.commit-body {
padding: 20px 18px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.commit-icon {
width: 42px;
height: 42px;
background: var(--primary-blue-soft);
color: var(--primary-blue);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 12px;
}
.commit-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
color: var(--primary-blue-dark);
}
.commit-desc {
font-size: 13px;
color: #475569;
line-height: 1.6;
flex-grow: 1;
}
/* ================= 9. FEATURED PROJECTS ================= */
.projects-section {
padding: 16px 0 12px 0;
background: var(--bg-body);
}
/* ================= 9b. ẢNH CÔNG TRÌNH ================= */
.construction-gallery-section {
padding: 16px 0 12px 0;
background: var(--bg-body);
}
/* 11/09/2026: khách yêu cầu dàn 1 hàng ngang cuộn được, giống .insights-grid/
.press-grid đã sửa cùng buổi — đây là section RIÊNG trên trang chủ
(.construction-gallery-section, không phải .project-gallery-grid ở trang
chi tiết đã sửa trước đó, dù cùng tên hiển thị "Ảnh Công Trình" nên lúc đầu
nhận nhầm là cùng 1 chỗ). Item vốn đã cố định 220x220 (flex:0 0 auto) nên
chỉ cần bỏ flex-wrap + thêm overflow-x, không cần kỹ thuật grid-auto-columns
như 2 khối kia (không có nhu cầu "giãn full khi ít ảnh" vì luôn cố định 8 ảnh). */
.construction-gallery-row {
display: flex;
flex-wrap: nowrap;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 10px;
}
.construction-gallery-item {
width: 220px;
height: 220px;
object-fit: cover;
border-radius: 10px;
flex: 0 0 auto;
scroll-snap-align: start;
cursor: pointer;
transition: transform 0.25s ease;
}
.construction-gallery-item:hover {
transform: scale(1.03);
}
/* 29/09/2026: khách báo bấm vào ảnh không xem được - trước giờ chỉ là ![]()
trơn, không có lightbox. Thêm khung xem ảnh lớn khi bấm vào. */
.cg-lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(5, 15, 30, 0.92);
z-index: 9999;
align-items: center;
justify-content: center;
}
.cg-lightbox.is-open {
display: flex;
}
.cg-lightbox img {
max-width: 90vw;
max-height: 85vh;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.cg-lightbox-close,
.cg-lightbox-prev,
.cg-lightbox-next {
position: absolute;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
border: none;
border-radius: 50%;
width: 44px;
height: 44px;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.cg-lightbox-close:hover,
.cg-lightbox-prev:hover,
.cg-lightbox-next:hover {
background: rgba(255, 255, 255, 0.28);
}
.cg-lightbox-close {
top: 20px;
right: 20px;
}
.cg-lightbox-prev {
left: 20px;
top: 50%;
transform: translateY(-50%);
}
.cg-lightbox-next {
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.project-showcase-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.project-card-large {
background: #ffffff;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
transition: var(--transition);
display: flex;
flex-direction: column;
}
.project-card-large:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.project-thumb {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #e2e8f0;
}
.project-thumb img {
width: 100%;
height: 100%;
/* 01/10/2026: Bảo yêu cầu ảnh không bị cắt - đổi cover sang contain, hiện trọn
ảnh gốc, nền xám nhạt #e2e8f0 lấp khoảng trống 2 bên nếu ảnh không vuông,
khung ô vẫn đều 1:1 nên lưới vẫn thẳng hàng đẹp. */
object-fit: contain;
transition: transform 0.6s ease;
}
.project-card-large:hover .project-thumb img {
transform: scale(1.06);
}
.project-category {
position: absolute;
top: 12px;
right: 12px;
background: var(--primary-blue);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
text-transform: uppercase;
z-index: 2;
}
.project-details {
padding: 20px;
}
.project-name {
font-size: 18px;
font-weight: 700;
color: var(--primary-blue-dark);
margin-bottom: 10px;
}
.project-specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
background: var(--bg-body);
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 14px;
font-size: 12.5px;
}
.spec-item {
display: flex;
align-items: center;
gap: 8px;
color: #334155;
}
.spec-item i {
color: var(--primary-blue);
width: 14px;
}
.project-desc {
font-size: 13px;
color: #475569;
line-height: 1.55;
}
/* ================= 8b. FEATURED PROJECTS — SLIDER CUỘN NGANG (kiểu Decox) ================= */
.project-slider-row {
display: flex;
align-items: flex-start;
gap: 36px;
}
.project-slider-label {
flex: 0 0 250px;
max-width: 250px;
padding-top: 6px;
}
.project-slider-label .section-title {
font-size: 21px;
line-height: 1.32;
padding-bottom: 12px;
}
.project-slider-label .section-title::after {
left: 0;
transform: none;
}
.project-slider-label .section-desc {
font-size: 12.5px;
line-height: 1.6;
max-width: none;
margin-left: 0;
margin-right: 0;
}
.project-slider-viewport {
position: relative;
flex: 1;
min-width: 0;
}
.project-slider-track {
display: flex;
gap: 22px;
overflow-x: auto;
/* Không dùng scroll-snap / scroll-behor:smooth ở đây — khối này giờ tự chạy ngang liên tục
(yêu cầu khách 04/09/2026), snap sẽ giật lại giữa chừng animation. Nút mũi tên tự set
behavior:'smooth' riêng khi gọi scrollBy() nên không cần khai báo ở CSS. */
padding: 4px 4px 10px 4px;
scrollbar-width: none;
-ms-overflow-style: none;
/* 09/09/2026: khách báo vuốt LÊN (để cuộn trang xuống) ngay trên tấm hình slider
không ăn — nguyên nhân là touch-action:pan-x (bản trước) CHỈ cho phép cử chỉ
ngang, chặn luôn cử chỉ dọc bắt đầu trên phần tử này, nên khách không cuộn trang
được nếu ngón tay đặt đúng lên ảnh. Đổi thành "pan-x pan-y" để cho phép CẢ 2
hướng — trình duyệt tự phân biệt: vuốt ngang thì cuộn slider, vuốt dọc thì cuộn
trang, đúng hành vi mặc định mong muốn. -webkit-overflow-scrolling:touch bật
cuộn quán tính mượt trên Safari/webview cũ. */
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
}
.project-slider-track::-webkit-scrollbar {
display: none;
}
.project-slide-card {
flex: 0 0 440px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
}
.project-slide-thumb {
position: relative;
display: block;
height: 330px;
border-radius: 10px;
overflow: hidden;
background: #e2e8f0;
}
.project-slide-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.6s ease;
}
.project-slide-card:hover .project-slide-thumb img {
transform: scale(1.06);
}
/* 09/09/2026: khách yêu cầu thêm hiệu ứng rê chuột phủ màu xanh nhạt lên ảnh
(tham khảo 1 site portfolio khác) - dùng ::after thay vì thêm div mới để
không đụng markup/binding Ghép mã. Cập nhật 17:01: khách yêu cầu chỉ phủ
1/2 phần DƯỚI tấm hình thay vì phủ kín cả tấm - đổi inset:0 thành chỉ
chiếm nửa dưới (top:50%). */
.project-slide-thumb::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 50%;
background: var(--primary-blue);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.project-slide-card:hover .project-slide-thumb::after {
opacity: 0.22;
}
.project-slide-info {
padding-top: 14px;
}
.project-slide-name {
font-size: 16px;
font-weight: 700;
color: var(--primary-blue-dark);
margin-bottom: 4px;
}
.project-slide-name a {
color: inherit;
text-decoration: none;
}
.project-slide-sub {
font-size: 13px;
color: var(--text-muted);
}
.pslider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: #ffffff;
color: var(--primary-blue-dark);
box-shadow: 0 4px 14px rgba(15, 82, 152, 0.25);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
transition: var(--transition);
}
.pslider-nav:hover {
background: var(--primary-blue);
color: #ffffff;
}
.pslider-prev {
left: 6px;
}
.pslider-next {
right: 6px;
}
/* ================= 8b. DANH MỤC CÔNG TRÌNH (ACCORDION) =================
29/09/2026: khách gửi web tham khảo (accordion "Dịch vụ" của một site khác),
yêu cầu copy kiểu UI hover-mở-rộng này để chia công trình theo 4 nhóm. Giữ
nguyên cơ chế (flex-grow item đang active, ảnh nền qua biến --cat-image, chữ
dọc "rail" cho các item đóng), đổi màu theo theme xanh dương sẵn có của site. */
.category-accordion {
gap: 0.7rem;
min-height: 460px;
margin-top: 1.75rem;
display: flex;
}
.category-accordion__item {
color: #ffffff;
isolation: isolate;
background: var(--primary-blue-dark);
border-radius: 1.1rem;
flex: 1 1 0;
min-width: 0;
text-decoration: none;
transition: flex-grow 0.55s cubic-bezier(.2,.7,.2,1), box-shadow 0.25s;
display: block;
position: relative;
overflow: hidden;
}
/* 29/09/2026: đổi ảnh nền từ CSS var (--cat-image trên ::before, không sửa
được qua Ghép mã) sang ![]()
thật để khách tự đổi ảnh qua Ghép mã như mọi
ảnh khác trên site. */
.category-accordion__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
transition: transform 0.6s;
}
.category-accordion__item::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(#07182f3d 10%, #05172ef2 96%);
transition: background 0.35s;
}
.category-accordion__item.is-active {
flex-grow: 4;
box-shadow: 0 1.1rem 2.3rem rgba(7, 24, 47, 0.2);
}
.category-accordion__item.is-active .category-accordion__bg {
transform: scale(1.045);
filter: brightness(1.08);
}
/* 29/09/2026: khách yêu cầu khi rê chuột/mở ra thì ảnh phải SÁNG lên, không
phải tối/phủ mờ thêm - giảm hẳn độ đậm lớp phủ so với lúc thu gọn. */
/* 30/09/2026: khách dùng PC báo lớp phủ (đặc biệt đoạn tối phía đáy, ngay sau lưng
chữ) vẫn hơi đậm/ngả xanh - nhạt thêm 1 nấc nữa so với 29/09. */
.category-accordion__item.is-active::after {
background: linear-gradient(rgba(7, 24, 47, 0.03) 0%, rgba(5, 23, 46, 0.1) 55%, rgba(5, 23, 46, 0.4) 100%);
}
.category-accordion__content {
opacity: 0;
pointer-events: none;
max-width: 460px;
transition: opacity 0.28s 0.12s, transform 0.4s 0.12s;
position: absolute;
bottom: clamp(1.1rem, 3vw, 2rem);
left: clamp(1.1rem, 3vw, 2.25rem);
right: clamp(1.1rem, 3vw, 2.25rem);
transform: translateY(1rem);
}
.category-accordion__item.is-active .category-accordion__content {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.category-accordion__content small {
color: var(--accent-cyan-light);
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.72rem;
font-weight: 800;
display: block;
}
.category-accordion__content h3 {
color: #ffffff;
margin: 0.5rem 0 0.7rem;
font-size: clamp(1.25rem, 2.2vw, 1.9rem);
font-weight: 800;
line-height: 1.2;
}
.category-accordion__content p {
color: rgba(255, 255, 255, 0.82);
max-width: 420px;
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
}
.category-accordion__action {
color: #ffffff;
border-bottom: 1px solid var(--accent-cyan-light);
align-items: center;
gap: 0.5rem;
margin-top: 1.1rem;
font-size: 0.76rem;
font-weight: 800;
line-height: 1.8;
display: inline-flex;
}
.category-accordion__action i {
color: var(--accent-cyan-light);
}
.category-accordion__rail {
color: #ffffff;
justify-content: flex-end;
align-items: center;
gap: 0.7rem;
transition: opacity 0.18s;
display: flex;
position: absolute;
inset: 1.1rem;
}
.category-accordion__item.is-active .category-accordion__rail {
opacity: 0;
}
.category-accordion__rail span {
letter-spacing: 0.03em;
text-align: left;
writing-mode: vertical-rl;
font-size: clamp(0.8rem, 1.1vw, 0.95rem);
font-weight: 800;
line-height: 1.2;
transform: rotate(180deg);
}
.category-accordion__item:focus-visible {
outline: 3px solid var(--accent-cyan-light);
outline-offset: 3px;
}
/* Trang /du-an: nút lọc theo nhóm công trình. */
.project-filter-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 28px;
}
.project-filter-tab {
background: #ffffff;
color: var(--primary-blue-dark);
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 9px 18px;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
display: inline-block;
}
.project-filter-tab:hover {
border-color: var(--primary-blue-light);
}
.project-filter-tab.is-active {
background: var(--primary-blue-dark);
border-color: var(--primary-blue-dark);
color: #ffffff;
}
/* ================= 10. NHẬT KÝ THI CÔNG ================= */
.log-section {
padding: 12px 0 16px 0;
background: #f8fafc;
border-bottom: 1px solid var(--border-color);
}
/* Khách yêu cầu 29/09/2026: chữ mô tả dưới tiêu đề "Dự Án Hoàn Thiện" to hơn 1 tí. */
.log-section .section-desc {
font-size: 16px;
}
/* 29/09/2026: khách yêu cầu chạy slide ngang trên cả Desktop (trước đây chỉ
Mobile mới cuộn ngang - xem @media max-width:767px), giữ nguyên bố cục 3 hàng.
Dùng lại đúng cơ chế grid-auto-flow:column của bản Mobile, chỉ đổi độ rộng cột
cho phù hợp màn hình lớn. JS auto-scroll dùng chung logic với slider Công Trình
Tiêu Biểu đã bỏ điều kiện chỉ chạy trên Mobile trong trang-chu.phtml. */
.log-grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(3, auto);
grid-template-columns: none;
/* 29/09/2026 (tiếp): khách báo khoảng trống giữa các cột không đều - do
"1fr" cho phép cột cuối cùng nhìn thấy giãn ra lấp đầy khung nhìn, tạo
khoảng trống lệch hẳn so với các cột khác. Đổi thành độ rộng CỐ ĐỊNH để
mọi cột đều bằng nhau bất kể cuộn tới đâu. */
grid-auto-columns: 340px;
/* 29/09/2026: khách yêu cầu khít hơn nữa, chỉ chừa 1 đường trắng mỏng phân biệt. */
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
align-items: start;
}
.log-grid::-webkit-scrollbar {
display: none;
}
/* Bản sao để cuộn ngang liên tục (nhân đôi danh sách, xem trang-chu.phtml) —
giờ hiện trên MỌI kích thước màn hình vì khối này luôn tự chạy ngang. */
.log-card.log-card-clone {
display: flex;
}
.log-card {
background: #ffffff;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
transition: var(--transition);
display: flex;
flex-direction: column;
}
.log-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.log-img-wrapper {
position: relative;
aspect-ratio: 8 / 5;
height: auto;
overflow: hidden;
background: #e2e8f0;
}
.log-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.log-card:hover .log-img-wrapper img {
transform: scale(1.06);
}
/* 09/09/2026: đồng bộ hiệu ứng hover phủ màu xanh nhạt với khối Công Trình
Tiêu Biểu ở trên (khách yêu cầu áp dụng cho cả 2 khối). Cập nhật 17:01:
chỉ phủ 1/2 phần dưới, không phủ kín cả tấm. */
.log-img-wrapper::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 50%;
background: var(--primary-blue);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.log-card:hover .log-img-wrapper::after {
opacity: 0.22;
}
.log-tag {
position: absolute;
top: 10px;
left: 10px;
background: rgba(11, 79, 156, 0.9);
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
z-index: 2;
}
/* 29/09/2026: khách yêu cầu đưa chữ (tên công trình + ngày/địa điểm) vào
ĐÈ LÊN ảnh bìa trong khối "Dự án hoàn thiện" ở TRANG CHỦ, thay vì để
trong khối trắng bên dưới như trước — tên công trình thế chỗ nhãn
"Hoàn thiện" ở góc trên trái, ngày/địa điểm đè ở đáy ảnh. Dùng riêng
class log-overlay-* (không đụng .log-tag/.log-body gốc) vì trang
/nhat-ky-thi-cong vẫn dùng đúng cấu trúc cũ (có thêm mô tả + chỉ huy
trưởng, không hợp để đè lên ảnh). */
.log-overlay-title {
position: absolute;
top: 0;
left: 0;
right: 0;
/* 29/09/2026: khách yêu cầu chữ sát lên trên hơn, vùng phủ mờ thu nhỏ lại. */
padding: 8px 14px 12px 14px;
background: linear-gradient(180deg, rgba(11, 79, 156, 0.75) 0%, rgba(11, 79, 156, 0.35) 55%, transparent 100%);
z-index: 2;
}
.log-overlay-title .log-title {
color: #ffffff;
margin-bottom: 0;
}
.log-overlay-meta {
position: absolute;
left: 0;
right: 0;
bottom: 0;
/* 29/09/2026: khách yêu cầu chữ sát xuống dưới hơn, vùng phủ mờ thu nhỏ lại. */
padding: 12px 14px 6px 14px;
background: linear-gradient(0deg, rgba(11, 79, 156, 0.75) 0%, rgba(11, 79, 156, 0.35) 55%, transparent 100%);
z-index: 2;
}
.log-overlay-meta .log-meta {
color: #ffffff;
}
.log-body {
/* 29/09/2026: khách yêu cầu gọn khoảng trắng lại để ảnh nhìn to hơn. */
padding: 12px 16px 14px 16px;
display: flex;
flex-direction: column;
}
.log-title {
font-size: 16px;
font-weight: 700;
color: var(--primary-blue-dark);
margin-bottom: 5px;
line-height: 1.3;
/* 29/09/2026: khách báo các ô cao thấp không đều - tên công trình dài ngắn
khác nhau khiến tiêu đề 1 dòng hay 2 dòng, làm cả thẻ cao thấp lệch nhau.
Ép luôn 2 dòng cố định (cắt "..." nếu dài hơn) để mọi thẻ cùng chiều cao. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 41.6px;
}
.log-meta {
font-size: 12.5px;
color: var(--text-muted);
display: flex;
gap: 14px;
}
/* 29/09/2026: khách báo icon lịch/vị trí sát chữ quá - .log-meta chỉ có gap
GIỮA 2 cụm (ngày / địa điểm), còn icon với chữ TRONG CÙNG 1 cụm không có
khoảng cách nào cả (icon và span text nằm sát nhau ngay trong markup). */
.log-meta > span {
display: inline-flex;
align-items: center;
gap: 5px;
}
/* ================= 11. KHỐI NƠI TÔI CHỌN ĐẶT Ở GIỮA TRANG CHỦ ================= */
.noi-toi-chon-section {
padding: 14px 0 16px 0;
background: #ffffff;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.section-title-teal {
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-weight: 900;
color: #028090;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 12px;
}
.section-title-teal::after {
content: '';
flex-grow: 1;
height: 2px;
background: linear-gradient(90deg, rgba(2, 128, 144, 0.4) 0%, rgba(2, 128, 144, 0.05) 100%);
}
/* 11/09/2026: cùng yêu cầu dàn 1 hàng cuộn ngang như .insights-grid/.press-grid
cùng buổi — dùng lại đúng pattern grid-auto-flow:column + minmax. */
.ntc-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(220px, 1fr);
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 10px;
}
.ntc-card {
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 16px 14px 12px 14px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: var(--transition);
background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
background-size: 16px 16px;
scroll-snap-align: start;
}
.ntc-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(2, 128, 144, 0.15);
border-color: #028090;
}
.ntc-badge-box {
background: linear-gradient(135deg, #071e33 0%, #0c2e4e 100%);
border: 1.5px solid #00a8cc;
border-radius: 6px;
padding: 10px 8px;
text-align: center;
margin-bottom: 14px;
box-shadow: 0 4px 10px rgba(7, 30, 51, 0.3);
position: relative;
}
.ntc-badge-tag {
/* 29/09/2026: khách yêu cầu bỏ chữ "NƠI TÔI CHỌN" lặp lại trong từng thẻ
(đã có tiêu đề section phía trên rồi) - ẩn bằng CSS thay vì sửa tay 8
khối HTML lưu sẵn trong data (mỗi thẻ là 1 chuỗi HTML riêng biệt). */
display: none;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 800;
color: #38bdf8;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.ntc-avatar-frame {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #38bdf8;
margin: 0 auto 8px auto;
overflow: hidden;
background: #1e293b;
box-shadow: 0 2px 8px rgba(0, 168, 204, 0.4);
display: flex;
align-items: center;
justify-content: center;
}
.ntc-avatar-frame img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ntc-role-title {
font-size: 10px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1.2;
margin-bottom: 2px;
}
.ntc-person-name {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 900;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ntc-quote-body {
position: relative;
flex-grow: 1;
padding: 4px 2px 10px 2px;
z-index: 2;
}
.ntc-quote-text {
font-size: 12px;
color: #334155;
line-height: 1.6;
text-align: justify;
position: relative;
z-index: 2;
}
.ntc-watermark-quote {
position: absolute;
right: 4px;
bottom: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 70px;
font-weight: 900;
color: rgba(2, 128, 144, 0.12);
line-height: 0.8;
pointer-events: none;
user-select: none;
z-index: 1;
}
.ntc-footer-reactions {
display: flex;
align-items: center;
gap: 6px;
border-top: 1px solid #e2e8f0;
padding-top: 10px;
margin-top: 6px;
}
.ntc-reaction-icons {
display: inline-flex;
align-items: center;
gap: 2px;
}
.react-badge {
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #ffffff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.react-like {
background: #1877f2;
}
.react-heart {
background: #f02849;
}
.react-care {
background: #f7b125;
}
.ntc-like-count {
font-size: 11.5px;
font-weight: 700;
color: #64748b;
margin-left: 4px;
}
/* ================= 12. PHẦN THÔNG TIN & CẨM NANG ================= */
.insights-section {
padding: 16px 0;
background: #f8fafc;
border-bottom: 1px solid var(--border-color);
}
/* 11/09/2026: khách yêu cầu dàn 1 hàng ngang, cuộn được (không xuống dòng) vì
"có thể sẽ thêm thông tin nữa" — đổi từ grid (tự xuống dòng khi đủ 4 thẻ)
sang grid-auto-flow:column + minmax: khi ít thẻ (chưa đủ lấp hàng) mỗi cột
tự giãn co (1fr) khít chiều rộng container, giống hệt các grid khác cùng
trang (vd .ntc-grid) — tránh lỗi "lệch, thừa khoảng trắng bên phải" khách
báo 11/09/2026 khi dùng flex cố định chiều rộng. Khi đủ nhiều thẻ vượt quá
chiều rộng, mỗi cột co về đúng 260px tối thiểu rồi tự trào ra ngoài, sinh
thanh cuộn ngang (overflow-x:auto) — không bao giờ xuống dòng vì tất cả nằm
trên 1 hàng grid duy nhất (grid-auto-flow:column không tự xuống dòng).
Cùng đổi với .press-grid bên dưới cho đồng bộ (khách chỉ 2 khối này). */
.insights-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 1fr);
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 10px;
}
.insight-card {
background: #ffffff;
border-radius: 8px;
border: 1px solid #e2e8f0;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
display: flex;
flex-direction: column;
scroll-snap-align: start;
}
.insight-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--accent-cyan);
}
.insight-img-wrapper {
position: relative;
height: 165px;
overflow: hidden;
background: #082d56;
}
.insight-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.insight-card:hover .insight-img-wrapper img {
transform: scale(1.08);
}
.insight-cat-tag {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(15, 82, 152, 0.9);
color: #ffffff;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.insight-body {
padding: 15px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.insight-title {
font-size: 14px;
font-weight: 700;
line-height: 1.45;
color: var(--primary-blue-dark);
margin-bottom: 8px;
}
.insight-title a:hover {
color: var(--primary-blue-light);
}
.insight-snippet {
font-size: 12.5px;
color: #64748b;
line-height: 1.55;
margin-bottom: 12px;
flex-grow: 1;
}
.insight-footer {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11.5px;
color: #94a3b8;
border-top: 1px solid #f1f5f9;
padding-top: 10px;
font-weight: 600;
}
/* ================= 13. BÁO CHÍ & TRUYỀN THÔNG ================= */
.press-section {
padding: 16px 0;
background: #ffffff;
border-bottom: 1px solid var(--border-color);
}
.press-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 1fr);
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 10px;
}
.press-card {
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
display: flex;
flex-direction: column;
scroll-snap-align: start;
}
.press-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-blue-light);
}
.press-thumb-box {
position: relative;
height: 200px;
overflow: hidden;
background: #0c2340;
}
.press-thumb-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.press-card:hover .press-thumb-box img {
transform: scale(1.08);
}
.press-source-badge {
position: absolute;
top: 12px;
left: 12px;
background: linear-gradient(135deg, #0c2340 0%, #0f5298 100%);
color: #38bdf8;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 800;
padding: 5px 12px;
border-radius: 4px;
letter-spacing: 0.5px;
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
display: flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(56, 189, 248, 0.3);
}
.press-body {
padding: 20px 18px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.press-meta {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 12px;
}
.press-meta i {
color: var(--primary-blue-light);
}
.press-title {
font-size: 15px;
font-weight: 700;
line-height: 1.45;
color: var(--primary-blue-dark);
margin-bottom: 10px;
}
.press-title a:hover {
color: var(--primary-blue-light);
}
.press-excerpt {
font-size: 13px;
color: #475569;
line-height: 1.6;
margin-bottom: 16px;
flex-grow: 1;
}
.press-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Montserrat', sans-serif;
font-size: 12.5px;
font-weight: 700;
color: var(--primary-blue);
border-top: 1px solid #f1f5f9;
padding-top: 12px;
}
.press-link:hover {
color: var(--accent-red);
gap: 10px;
}
/* Press Logo Strip */
.press-logos-strip {
margin-top: 35px;
padding: 18px 24px;
background: #f8fafc;
border-radius: 8px;
border: 1px dashed #cbd5e1;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px;
}
.press-strip-label {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 800;
color: var(--primary-blue-dark);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
}
.press-brand-logos {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.press-logo-item {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 900;
color: #334155;
letter-spacing: 0.8px;
padding: 5px 12px;
background: #ffffff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
border: 1px solid #e2e8f0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.press-logo-item i {
color: var(--primary-blue);
}
/* ================= 14. INTERACTIVE CALCULATOR ================= */
.calculator-section {
padding: 18px 0;
background: linear-gradient(135deg, #082d56 0%, #0f5298 100%);
color: #ffffff;
}
.calc-box {
background: #ffffff;
border-radius: 12px;
padding: 35px;
color: var(--text-main);
box-shadow: var(--shadow-lg);
}
.calc-header {
text-align: center;
margin-bottom: 25px;
}
.calc-header h3 {
font-size: 22px;
color: var(--primary-blue-dark);
margin-bottom: 6px;
}
.calc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label {
font-size: 13px;
font-weight: 700;
color: #1e293b;
}
.form-control {
width: 100%;
min-width: 0;
padding: 10px 14px;
border: 1.5px solid var(--border-color);
border-radius: 6px;
font-size: 13.5px;
outline: none;
background: #f8fafc;
transition: var(--transition);
}
.form-control:focus {
border-color: var(--primary-blue);
background: #ffffff;
}
.calc-result-box {
background: var(--primary-blue-soft);
border: 1.5px dashed var(--accent-cyan);
border-radius: 8px;
padding: 20px;
text-align: center;
margin-top: 22px;
}
.calc-result-price {
font-family: 'Montserrat', sans-serif;
font-size: 32px;
font-weight: 900;
color: var(--accent-red);
line-height: 1.2;
}
/* ================= 15. WORKFLOW 6 STEPS ================= */
.workflow-section {
padding: 6px 0;
background: #ffffff;
}
.workflow-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 15px;
}
.workflow-item {
text-align: center;
}
.workflow-num {
width: 44px;
height: 44px;
background: var(--primary-blue);
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px auto;
box-shadow: 0 4px 10px rgba(11, 79, 156, 0.3);
}
.workflow-title {
font-size: 13.5px;
font-weight: 700;
color: var(--primary-blue-dark);
margin-bottom: 5px;
}
.workflow-desc {
font-size: 12px;
color: #64748b;
line-height: 1.4;
}
/* ================= 16. CONTACT CTA SECTION ================= */
.contact-cta-section {
padding: 18px 0;
background: var(--bg-body);
}
.contact-box {
background: linear-gradient(135deg, #07376e 0%, #0b4f9c 100%);
border-radius: 14px;
padding: 40px;
color: #ffffff;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 35px;
align-items: center;
box-shadow: var(--shadow-lg);
}
.contact-left h3 {
font-size: 26px;
color: #ffffff;
margin-bottom: 10px;
}
.contact-left p {
color: #cbd5e1;
font-size: 14px;
line-height: 1.6;
margin-bottom: 22px;
}
.contact-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 13.5px;
}
.contact-item i {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #90caf9;
}
.contact-form {
background: #ffffff;
border-radius: 10px;
padding: 26px;
color: var(--text-main);
display: flex;
flex-direction: column;
gap: 14px;
}
.contact-form h4 {
font-size: 17px;
color: var(--primary-blue-dark);
margin-bottom: 2px;
text-align: center;
}
/* ================= 17. FOOTER ================= */
.footer-main {
background: #071e33;
color: #cbd5e1;
padding: 50px 0 20px 0;
border-top: 3px solid var(--accent-cyan);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 30px;
padding-bottom: 35px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-title {
color: #ffffff;
font-size: 16px;
font-weight: 800;
margin-bottom: 16px;
position: relative;
padding-bottom: 6px;
text-transform: uppercase;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: #38bdf8;
}
.footer-links a {
display: block;
margin-bottom: 8px;
font-size: 13px;
}
.footer-links a:hover {
color: #38bdf8;
padding-left: 4px;
}
/* Floating Action Buttons */
.floating-contact {
position: fixed;
bottom: 25px;
right: 25px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 9999;
transition: opacity 0.2s ease;
}
/* 09/09/2026: ẩn tạm khi khối slider "Công Trình Tiêu Biểu" đang trong màn hình mobile
(xem script cạnh .floating-contact trong trang-chu.phtml) - né đè lên nút mũi tên. */
.floating-contact.psp-float-hide {
opacity: 0;
pointer-events: none;
}
.float-btn {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 18px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: var(--transition);
border: none;
font-family: inherit;
padding: 0;
}
.float-btn:hover {
transform: scale(1.12);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.float-phone {
background: #25d366;
animation: float-btn-pulse 1.8s ease-in-out infinite;
}
.float-zalo {
animation: float-btn-pulse 1.8s ease-in-out infinite;
animation-delay: 0.4s;
}
/* 29/09/2026: khách yêu cầu icon phone/Zalo rung nhẹ để thu hút chú ý. */
@keyframes float-btn-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
.float-menu {
background: #1e293b;
}
.float-calc {
background: var(--primary-blue);
}
.float-zalo {
background: #ffffff;
padding: 4px;
}
.float-zalo img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* ================= MOBILE DRAWER & RESPONSIVE NAVIGATION ================= */
.mobile-toggle-btn {
display: none;
background: #f1f5f9;
border: 1px solid #cbd5e1;
color: var(--primary-blue-dark);
font-size: 18px;
width: 40px;
height: 40px;
border-radius: 8px;
cursor: pointer;
align-items: center;
justify-content: center;
transition: var(--transition);
flex-shrink: 0;
}
.mobile-toggle-btn:hover {
background: var(--primary-blue-soft);
color: var(--primary-blue);
}
.mobile-nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(12, 35, 64, 0.65);
backdrop-filter: blur(4px);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.mobile-nav-overlay.active {
opacity: 1;
visibility: visible;
}
.mobile-nav-drawer {
position: fixed;
top: 0;
left: -320px;
width: 300px;
max-width: 85vw;
height: 100%;
background: #ffffff;
z-index: 9999;
box-shadow: 4px 0 24px rgba(0,0,0,0.25);
transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.mobile-nav-drawer.active {
left: 0;
}
.mobile-drawer-header {
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border-color);
background: #f8fafc;
}
.mobile-drawer-close {
background: #e2e8f0;
border: none;
width: 34px;
height: 34px;
border-radius: 50%;
color: #334155;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.mobile-drawer-close:hover {
background: var(--accent-red);
color: #ffffff;
}
.mobile-nav-list {
padding: 12px 0;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.mobile-nav-item {
border-bottom: 1px solid #f1f5f9;
}
.mobile-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--primary-blue-dark);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.mobile-nav-link:hover, .mobile-nav-link.active {
color: var(--primary-blue);
background: var(--primary-blue-soft);
}
.mobile-submenu {
display: none;
background: #f8fafc;
padding: 6px 0;
}
.mobile-submenu.open {
display: block;
}
.mobile-sub-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px 10px 30px;
font-size: 12.5px;
font-weight: 600;
color: #475569;
}
.mobile-sub-link:hover {
color: var(--primary-blue);
background: #eaf2fb;
}
.mobile-drawer-footer {
padding: 16px;
border-top: 1px solid var(--border-color);
background: #f8fafc;
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-action-btn {
width: 100%;
padding: 10px;
border-radius: 8px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 12.5px;
font-weight: 800;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* ================= ENHANCED MEDIA QUERIES (FULL RESPONSIVE) ================= */
@media (max-width: 1199px) {
.container {
max-width: 100%;
padding: 0 16px;
}
/* Chỉ còn 5 mục menu (đã bỏ Kiến Trúc/Xây Dựng/Nhật Ký/Nơi Tôi Chọn/Báo Chí)
nên không cần bóp nhỏ chữ để nhét vừa nữa — giữ nguyên cỡ chữ base kể cả ở tablet. */
.logo-text-sub {
display: none;
}
.logo-divider {
display: none;
}
.header-quick-contact {
display: none;
}
}
@media (max-width: 991px) {
.nav-menu {
display: none !important;
}
.header-wrapper > nav {
display: none !important;
}
.mobile-toggle-btn {
display: flex;
}
/* 10/09/2026: khách báo mobile mất logo trên header cố định (topbar phía trên không dính
khi cuộn) — bật lại logo trên mobile, đặt giữa hamburger và cụm icon bên phải bằng
lưới 3 cột thay vì 2 cột cũ (trước đây ẩn hẳn để tránh phá lưới 2 cột). */
.header-main-logo {
display: flex;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.header-main-logo img {
height: 32px;
}
.header-wrapper {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto;
align-items: center;
}
.mobile-toggle-btn {
grid-column: 1;
grid-row: 1;
justify-self: start;
}
.header-wrapper > .hd-webs-vn-119 {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.tt-topbar-wrapper {
justify-content: center;
}
.tt-brand-col {
margin-bottom: 5px;
}
.tt-nav-items {
display: none;
}
.pricing-tabs-skewed {
grid-template-columns: 1fr;
gap: 14px;
}
.skewed-tab {
transform: none;
padding: 18px 20px 18px 74px;
}
.skewed-tab-icon {
left: 14px;
width: 46px;
height: 46px;
transform: translateY(-50%);
}
.skewed-tab-icon i {
font-size: 19px;
}
.skewed-tab:hover .skewed-tab-icon {
transform: translateY(-50%);
}
.skewed-tab-text {
transform: none;
font-size: 15px;
}
.pricing-showcase-grid {
grid-template-columns: 1fr;
}
.hero-title {
font-size: 22px;
line-height: 1.4;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.stat-card {
border-right: none;
border-bottom: 1px dashed var(--border-color);
padding-bottom: 12px;
}
.commitments-grid {
grid-template-columns: repeat(2, 1fr);
}
.workflow-grid {
grid-template-columns: repeat(3, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.project-slider-row {
gap: 20px;
}
.project-slider-label {
flex: 0 0 190px;
max-width: 190px;
}
.project-slide-card {
flex: 0 0 250px;
}
}
@media (max-width: 767px) {
/* 30/09/2026: khách yêu cầu ẩn hẳn section "Quy trình thiết kế & thi công chuẩn 6
bước" trên mobile (giữ nguyên trên Desktop). */
.workflow-section {
display: none;
}
/* Accordion "Danh mục công trình" — hover không có ý nghĩa trên cảm ứng, chuyển
thành danh sách xếp dọc, mở sẵn nội dung của mọi thẻ luôn (giống cách site tham
khảo tự chuyển 1 cột trên mobile). */
.category-accordion {
flex-direction: column;
min-height: 0;
}
.category-accordion__item,
.category-accordion__item.is-active {
flex: none;
min-height: 220px;
}
.category-accordion__rail {
display: none;
}
.category-accordion__content {
opacity: 1;
pointer-events: auto;
transform: none;
max-width: none;
top: 1rem;
bottom: 1rem;
display: flex;
flex-direction: column;
}
/* 30/09/2026: khách yêu cầu "Xem công trình" tách khỏi cụm chữ trên đỉnh, đẩy
sát xuống đáy thẻ - content giờ kéo dài hết chiều cao (top 1rem -> bottom 1rem),
margin-top:auto đẩy đúng mỗi nút này xuống cuối, small/h3 vẫn tự nhiên ở đỉnh. */
.category-accordion__action {
margin-top: auto;
}
/* 30/09/2026: khách yêu cầu cụm nhãn/tiêu đề sát lên trên thẻ trên mobile (thay vì
neo đáy như desktop), và bỏ hẳn đoạn mô tả để thẻ gọn hơn khi xếp dọc. */
.category-accordion__content p {
display: none;
}
/* 30/09/2026 (tiếp): sau khi đưa chữ lên trên, lớp phủ cũ (tối dần ở ĐÁY, gần như
trong suốt ở ĐỈNH) lại làm ngược - chữ mất tương phản, còn phần thân ảnh phía dưới
bị che tối không cần thiết. Khách phản hồi "tối che ảnh" + "chữ nổi hơn" - đổi
hẳn hướng lớp phủ: đậm ngay sau lưng cụm chữ ở ĐỈNH, nhạt dần rất nhanh để lộ ảnh
thật ở phần còn lại. Áp cho cả 2 trạng thái active/không active vì trên mobile
thẻ nào cũng hiện chữ như nhau (không phân biệt active như Desktop). */
.category-accordion__item::after,
.category-accordion__item.is-active::after {
background: linear-gradient(180deg, rgba(5, 17, 34, 0.6) 0%, rgba(5, 17, 34, 0.28) 28%, rgba(5, 17, 34, 0.05) 52%, rgba(5, 17, 34, 0) 72%);
}
.category-accordion__content small,
.category-accordion__content h3 {
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
/* Ô thông số (Quy mô/Diện tích/Hạng mục/Địa điểm...) — 2 cột quá hẹp trên mobile,
chữ dài bị bóp xuống nhiều dòng. Chuyển thành 1 cột, mỗi thông số 1 hàng riêng. */
.project-specs {
grid-template-columns: 1fr;
gap: 10px;
}
/* Slider "Công Trình Tiêu Biểu": nhãn xuống trên cùng full-width, viewport cuộn ngang bên dưới.
09/09/2026: nguyên nhân THẬT của bug "vuốt/bấm nút không cuộn" - .project-slider-row có
align-items:flex-start (kế thừa từ rule desktop dòng ~1229, không bị override ở đây) khiến
.project-slider-viewport (flex item) tự co theo ĐỘ RỘNG NỘI DUNG của .project-slider-track
bên trong (~3200px, chứa hết toàn bộ thẻ chưa cuộn) thay vì bị ép theo chiều rộng của row.
Kết quả: viewport + track + nút "next" đều tràn ra ngoài màn hình thật xa, html/body
overflow-x:hidden của theme cắt mất phần tràn - nút mũi tên phải và phần lớn track nằm
ngoài vùng nhìn thấy, không tài nào bấm/vuốt tới được dù CSS overflow-x:auto trên track
không hề sai. align-items:stretch ép viewport bằng đúng chiều rộng row (100% màn hình). */
.project-slider-row {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.project-slider-label {
flex: 0 0 auto;
max-width: none;
}
.project-slide-card {
flex: 0 0 78vw;
}
.project-slide-thumb {
height: 190px;
}
.pslider-nav {
width: 34px;
height: 34px;
font-size: 13px;
}
.header-wrapper {
padding-top: 8px;
padding-bottom: 8px;
}
.logo-img {
height: 36px;
max-width: 140px;
}
.header-cta-btn {
font-size: 11px;
padding: 6px 10px;
}
.header-cta-btn span {
display: none;
}
/* 10/09/2026: khách yêu cầu rút gọn chiều cao 3 khối đầu trang (hero, floating
stats, báo giá) trên mobile để cuộn nhanh hơn tới phần hình ảnh công trình
bên dưới - giảm padding/margin/kích thước, KHÔNG đổi bố cục/nội dung. */
/* 10/09/2026: khách yêu cầu đưa banner tên công ty (hero-section) lên ĐẦU trang
trên điện thoại, trước cả khối quy trình/báo giá - CHỈ trên điện thoại, máy tính
giữ nguyên thứ tự cũ. .hero-reorder-wrap chỉ thật sự "flex" ở đây (mobile), nên
không ảnh hưởng gì tới desktop (nơi nó vẫn display:contents, vô hình với layout). */
.hero-reorder-wrap {
display: flex;
flex-direction: column;
}
.hero-section {
order: -1;
}
/* Khách yêu cầu ẨN 2 khối này TRÊN ĐIỆN THOẠI (khoanh đỏ trong ảnh gửi qua Zalo
10/09/2026): mô tả + 3 nút CTA của hero, và khối 4 số liệu (20+ Năm/850+/100%/
10 Năm) - giữ lại tiêu đề/badge của hero, chỉ ẩn phần dưới. Máy tính không đổi. */
.hero-desc,
.hero-btns,
.stats-bar-wrapper {
display: none;
}
.hero-section {
padding: 20px 0 20px 0;
text-align: center;
}
.hero-badge {
margin: 0 auto 8px auto;
}
.hero-title {
font-size: 19px;
line-height: 1.35;
margin-bottom: 8px;
}
.hero-desc {
font-size: 12.5px;
line-height: 1.55;
margin-bottom: 12px;
margin-left: auto;
margin-right: auto;
}
.hero-btns {
flex-direction: column;
gap: 8px;
}
.hero-btns .btn {
padding: 9px 20px;
font-size: 12.5px;
}
.btn-primary, .btn-outline {
width: 100%;
justify-content: center;
}
.stats-bar-wrapper {
margin-top: -10px;
padding: 10px 12px;
}
.stats-grid {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.stat-card {
flex-direction: column;
text-align: center;
gap: 5px;
border-bottom: none;
}
.stat-icon {
margin: 0 auto;
width: 34px;
height: 34px;
font-size: 14px;
}
.stat-num {
font-size: 18px;
}
.stat-text {
font-size: 10px;
line-height: 1.3;
}
.pricing-ribbon-section {
padding-top: 22px;
}
.pricing-ribbon-header {
margin-bottom: 12px;
}
.pricing-ribbon-title {
font-size: 19px;
}
.pricing-cards-section {
padding: 10px 0 16px 0;
}
.pricing-showcase-grid {
gap: 12px;
}
/* Pricing Card Mobile — vẫn giữ kiểu ảnh full-bleed + overlay như desktop (làm lại 04/09/2026),
chỉ thu nhỏ chiều cao/khoảng cách cho vừa màn hình, không đổi bố cục */
.pricing-box-dark {
min-height: 160px;
border-radius: 16px;
}
.pricing-info-wrapper {
padding: 10px 14px 12px 14px;
}
.brush-ribbon-tag {
top: 10px;
font-size: 9.5px;
padding: 6px 14px 6px 12px;
}
.skewed-tab {
/* padding-left phải đủ chỗ cho .skewed-tab-icon (46px + left:14px, xem rule
ở @media max-width:991px) - chỉ giảm padding TRÊN/DƯỚI để rút gọn chiều cao,
không giảm padding-left kẻo đè icon. */
padding: 11px 14px 11px 70px;
}
.pricing-value {
font-size: 22px;
}
.pricing-cta-hint {
margin-top: 6px;
padding: 5px 13px;
font-size: 10.5px;
}
/* Grids to 1 Column on Mobile */
.commitments-grid,
.project-showcase-grid,
.calc-grid,
.contact-box,
.workflow-grid,
.footer-grid {
grid-template-columns: 1fr;
gap: 20px;
}
/* Dự Án Hoàn Thiện (log-grid) — lịch sử đổi layout Mobile:
09/09: 1→2 cột. 11/09: thử cuộn ngang 1 hàng, rồi đổi lại 1 cột ảnh to,
bỏ ngày/địa điểm, chỉ giữ tên công trình.
12/09/2026: khách yêu cầu lại "2 cột 3 dòng, tự động cuộn ngang" — dùng
grid-auto-flow:column để mỗi "cột ảo" xếp đúng 3 thẻ theo chiều dọc, rồi
cuộn ngang qua các cột đó; JS auto-scroll (chung logic với slider Công
Trình Tiêu Biểu) đã thêm trong trang-chu.phtml, tự dừng khi chạm/vuốt tay. */
.log-grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(3, auto);
grid-template-columns: none;
grid-auto-columns: minmax(48%, 1fr);
gap: 3px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* 12/09/2026 (tiếp): khách yêu cầu bỏ hẳn lề trắng 2 bên vì khối này chủ
yếu show ảnh - kéo tràn ra hết viewport bằng cách bù trừ đúng padding
15px của .container (section-header/tiêu đề phía trên KHÔNG đụng, vẫn
giữ lề bình thường vì nó là chữ, chỉ phần lưới ảnh tràn full-width). */
margin-left: -15px;
margin-right: -15px;
/* align-items mặc định "stretch" khiến MỌI thẻ cùng hàng (trong toàn bộ
lưới ẩn, không chỉ 2 thẻ đang hiện) bị kéo cao bằng thẻ có tên dài nhất
hàng đó => tạo khoảng trống thừa dưới ảnh ở các thẻ tên ngắn. Đổi sang
"start" để mỗi thẻ cao đúng theo nội dung của chính nó. */
align-items: start;
}
.log-card {
scroll-snap-align: start;
}
.log-card.log-card-clone {
display: flex;
}
.log-img-wrapper {
aspect-ratio: 4 / 3;
}
.log-title {
font-size: 13px;
}
.log-meta {
display: none;
}
.log-body {
padding: 6px 8px 8px 8px;
}
.log-body {
padding: 8px 10px 10px 10px;
}
/* 29/09/2026: khách báo mobile bị mất/vỡ chữ tên công trình đè trên ảnh
(khối overlay trang chủ) - do .log-title đổi font-size nhỏ hơn ở đây
nhưng .log-overlay-title vẫn giữ nguyên padding/kích thước desktop,
chữ tràn xuống dòng 3 rồi bị cắt ngang giữa dòng thay vì gọn 2 dòng.
Ép rõ overflow:hidden + max-height đúng 2 dòng theo font-size mobile. */
.log-overlay-title {
padding: 6px 10px 8px 10px;
}
.log-overlay-title .log-title {
font-size: 12.5px;
line-height: 1.3;
min-height: 0;
max-height: 32.5px;
overflow: hidden;
}
.log-overlay-meta {
padding: 8px 10px 5px 10px;
}
/* Grid item mặc định có min-width:auto (không phải 0) — nếu nội dung con (form,
input, chữ dài không ngắt dòng...) rộng hơn màn hình, cột 1fr KHÔNG co lại được,
kéo tràn ngang cả trang. Ép min-width:0 cho mọi item để chúng co đúng theo khung. */
.commitments-grid > *,
.project-showcase-grid > *,
.log-grid > *,
.ntc-grid > *,
.insights-grid > *,
.press-grid > *,
.calc-grid > *,
.contact-box > *,
.workflow-grid > *,
.footer-grid > * {
min-width: 0;
}
/* Một vài trang (vd Liên Hệ) gắn sẵn style="grid-template-columns:..." ngay trong HTML —
inline style luôn thắng CSS thường nên rule 1 cột phía trên bị vô hiệu ở đúng những
trang đó. Phải thêm !important mới đè được inline style. */
.contact-box {
grid-template-columns: 1fr !important;
padding: 18px 14px;
}
.contact-form {
padding: 18px 14px;
}
.section-header {
margin-bottom: 24px;
}
.section-title {
font-size: 20px;
}
.section-subtitle {
font-size: 11px;
}
/* Image containers fixed aspect ratios */
.commit-img-box, .insight-img-wrapper, .press-thumb-box {
height: 180px;
width: 100%;
}
.commit-img-box img, .log-img-wrapper img, .insight-img-wrapper img, .press-thumb-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.log-img-wrapper {
width: 100%;
background: #e2e8f0;
}
.project-img-box {
height: 200px;
width: 100%;
}
.project-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* NƠI TÔI CHỌN Card on mobile */
.ntc-card {
padding: 14px;
}
/* Calculator on mobile */
.calc-box {
padding: 18px 14px;
}
.calc-result-box {
padding: 20px 14px;
}
.calc-total-amount {
font-size: 26px;
}
/* Floating contact buttons */
.floating-contact {
bottom: 15px;
right: 15px;
gap: 8px;
}
.float-btn {
width: 42px;
height: 42px;
font-size: 16px;
}
}
/* ================= INNER PAGE: BANNER & BREADCRUMB ================= */
.page-banner {
position: relative;
background-color: #0b4f9c;
padding: 55px 0 42px 0;
color: #ffffff;
overflow: hidden;
}
.page-banner-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.page-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(7, 55, 110, 0.94) 0%, rgba(11, 79, 156, 0.88) 100%);
z-index: 1;
}
.page-banner .container {
position: relative;
z-index: 2;
}
.page-banner-title {
font-family: 'Montserrat', sans-serif;
font-size: 32px;
font-weight: 900;
color: #ffffff;
text-transform: uppercase;
margin-bottom: 12px;
letter-spacing: 0.3px;
}
.breadcrumb ol {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
flex-wrap: wrap;
}
.breadcrumb li {
font-family: 'Montserrat', sans-serif;
font-size: 12.5px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
gap: 8px;
}
.breadcrumb li:not(:last-child)::after {
content: '/';
color: rgba(255, 255, 255, 0.45);
}
.breadcrumb a {
color: rgba(255, 255, 255, 0.85);
}
.breadcrumb a:hover {
color: #38bdf8;
}
.breadcrumb li[aria-current="page"] {
color: #38bdf8;
}
/* ================= INNER PAGE: CONTENT SECTION ================= */
.page-content-section {
padding: 70px 0;
background: #ffffff;
}
.page-content-section.alt-bg {
background: var(--bg-body);
}
.page-content-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 45px;
align-items: flex-start;
}
/* 11/09/2026: grid item mặc định min-width:auto (không phải 0) — khi bên trong
.page-prose có 1 khối cuộn ngang với chiều rộng nội dung lớn hơn cột (vd
.project-gallery-grid vừa đổi sang cuộn ngang), .page-prose bị ép rộng theo
nội dung, phá vỡ layout 2 cột, tràn ngang cả trang trên mobile. Ép min-width:0
để .page-prose co đúng theo khung, phần cuộn ngang tự lo việc cuộn bên trong nó. */
.page-content-grid > * {
min-width: 0;
}
.page-prose h2 {
font-size: 22px;
color: var(--primary-blue-dark);
margin-bottom: 14px;
margin-top: 30px;
}
.page-prose h2:first-child {
margin-top: 0;
}
.page-prose p {
font-size: 14.5px;
color: #475569;
line-height: 1.75;
margin-bottom: 14px;
}
.page-prose ul {
margin-bottom: 18px;
}
.page-prose ul li {
font-size: 14.5px;
color: #475569;
line-height: 1.7;
padding-left: 28px;
position: relative;
margin-bottom: 11px;
}
.page-prose ul li::before {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: var(--primary-blue);
position: absolute;
left: 0;
top: 2px;
font-size: 12px;
}
.page-side-img {
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
/* Các trang chi tiết (Báo Chí, Dự Án...): ảnh + aside vẫn 2 cột, riêng nội dung bài viết bên dưới kéo full-width */
.hd-webs-vn-2135,
.hd-webs-vn-1659,
.hd-webs-vn-1344,
.hd-webs-vn-1517,
.hd-webs-vn-1834,
.hd-webs-vn-2011 {
grid-template-columns: 1fr;
}
.hd-webs-vn-2135 .page-media-aside-row,
.hd-webs-vn-1659 .page-media-aside-row,
.hd-webs-vn-1344 .page-media-aside-row,
.hd-webs-vn-1517 .page-media-aside-row,
.hd-webs-vn-1834 .page-media-aside-row,
.hd-webs-vn-2011 .page-media-aside-row {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 45px;
align-items: stretch;
margin-bottom: 28px;
}
.hd-webs-vn-2144,
.hd-webs-vn-1661,
.hd-webs-vn-1346,
.hd-webs-vn-1519,
.hd-webs-vn-1841,
.hd-webs-vn-2018 {
max-height: 460px;
}
.page-side-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ================= INNER PAGE: VALUES / POLICY GRID ================= */
.policy-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.policy-card {
background: var(--bg-body);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 28px 22px;
text-align: center;
transition: var(--transition);
}
.policy-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
background: #ffffff;
border-color: var(--primary-blue-light);
}
.policy-icon {
width: 60px;
height: 60px;
background: var(--primary-blue-soft);
color: var(--primary-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 auto 16px auto;
}
.policy-title {
font-size: 16px;
font-weight: 700;
color: var(--primary-blue-dark);
margin-bottom: 10px;
}
.policy-desc {
font-size: 13.5px;
color: #64748b;
line-height: 1.6;
}
/* ================= INNER PAGE: ORG CHART ================= */
.orgchart {
display: flex;
flex-direction: column;
align-items: center;
}
.org-level {
display: flex;
justify-content: center;
}
.org-row {
display: inline-flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
position: relative;
}
/* vertical stem connecting this row up to the level above */
.org-level:not(:first-child) .org-row {
border-top: 2px solid var(--border-color);
padding-top: 26px;
margin-top: 26px;
}
.org-level:not(:first-child) .org-row::before {
content: '';
position: absolute;
top: -28px;
left: 50%;
width: 2px;
height: 26px;
background: var(--border-color);
transform: translateX(-50%);
}
.org-box {
position: relative;
background: #ffffff;
border: 2px solid var(--primary-blue);
border-radius: 8px;
padding: 14px 22px;
text-align: center;
min-width: 190px;
box-shadow: var(--shadow-sm);
}
/* drop line from the horizontal bar down into each box on this row */
.org-level:not(:first-child) .org-box::before {
content: '';
position: absolute;
top: -28px;
left: 50%;
width: 2px;
height: 26px;
background: var(--border-color);
transform: translateX(-50%);
}
.org-box.org-box--main {
background: var(--primary-blue);
border-color: var(--primary-blue-dark);
}
.org-box.org-box--main .org-box-title {
color: #ffffff;
}
.org-box.org-box--main .org-box-sub {
color: #cbd5e1;
}
.org-box-title {
font-family: 'Montserrat', sans-serif;
font-size: 13.5px;
font-weight: 800;
color: var(--primary-blue-dark);
text-transform: uppercase;
}
.org-box-sub {
font-size: 12px;
color: #64748b;
margin-top: 3px;
}
/* ================= INNER PAGE: TEAM GRID ================= */
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.team-card {
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: 10px;
overflow: hidden;
text-align: center;
transition: var(--transition);
}
.team-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--primary-blue-light);
}
.team-photo {
height: 220px;
overflow: hidden;
background: var(--primary-blue-soft);
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-body {
padding: 18px 14px;
}
.team-name {
font-family: 'Montserrat', sans-serif;
font-size: 14.5px;
font-weight: 800;
color: var(--primary-blue-dark);
text-transform: uppercase;
margin-bottom: 4px;
}
.team-role {
font-size: 12.5px;
color: var(--primary-blue-light);
font-weight: 600;
}
/* ================= INNER PAGE: TIMELINE ================= */
.timeline {
position: relative;
max-width: 820px;
margin: 0 auto;
padding-left: 34px;
}
.timeline::before {
content: '';
position: absolute;
left: 8px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--border-color);
}
.timeline-item {
position: relative;
padding-bottom: 34px;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-dot {
position: absolute;
left: -34px;
top: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--primary-blue);
border: 3px solid var(--primary-blue-soft);
}
.timeline-year {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 900;
color: var(--primary-blue);
margin-bottom: 6px;
}
.timeline-title {
font-size: 15px;
font-weight: 700;
color: var(--primary-blue-dark);
margin-bottom: 6px;
}
.timeline-desc {
font-size: 13.5px;
color: #64748b;
line-height: 1.65;
}
.log-detail-reorder-wrap {
display: flex;
flex-direction: column;
}
.log-detail-reorder-wrap .project-gallery {
order: -1;
}
/* 30/09/2026: khách yêu cầu đưa "Thư viện hình ảnh" lên nằm CẠNH ảnh đại diện
(trong aside, dưới nút CTA) thay vì 1 hàng ngang riêng bên dưới toàn bộ nội
dung như trước - áp dụng cho trang chi tiết Dự Án và Nhật Ký Thi Công. */
.page-side-aside {
display: flex;
flex-direction: column;
gap: 16px;
}
.project-gallery-side {
margin-top: 0;
}
/* 30/09/2026 (tiếp): công trình nhiều ảnh (>9) làm lưới 2 cột tràn dài hết trang,
khách yêu cầu gom 3x3 rồi cuộn dọc nếu nhiều hơn thay vì kéo dài vô hạn. */
.project-gallery-side .project-gallery-grid {
grid-auto-flow: row;
grid-template-columns: repeat(3, 1fr);
overflow-x: visible;
max-height: 320px;
overflow-y: auto;
padding-right: 4px;
}
/* ================= INNER PAGE: THƯ VIỆN HÌNH ẢNH (gallery tối đa 4 ảnh/công trình) ================= */
.project-gallery {
margin-top: 32px;
}
.project-gallery-title {
font-size: 18px;
font-weight: 700;
color: var(--primary-blue-dark);
margin-bottom: 14px;
}
/* 11/09/2026: khách yêu cầu gom ảnh công trình thành 1 hàng cuộn ngang — cùng
pattern đã dùng cho .insights-grid/.press-grid trang chủ cùng buổi: grid-auto-flow
column + minmax để ít ảnh thì giãn khít, nhiều ảnh thì co lại và cuộn ngang,
không bao giờ xuống dòng. Bỏ luôn override 2 cột mobile bên dưới (không cần
nữa vì giờ cùng 1 rule cuộn ngang áp dụng mọi breakpoint). */
.project-gallery-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(140px, 1fr);
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 10px;
}
.project-gallery-item {
display: block;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 1 / 1;
box-shadow: var(--shadow-sm);
scroll-snap-align: start;
}
.project-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.project-gallery-item:hover img {
transform: scale(1.08);
}
/* ================= INNER PAGE: SIMPLE PAGE CTA ================= */
.page-cta-strip {
background: linear-gradient(135deg, #07376e 0%, #0b4f9c 100%);
border-radius: 14px;
padding: 34px 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
color: #ffffff;
}
.page-cta-strip h3 {
color: #ffffff;
font-size: 19px;
margin-bottom: 4px;
}
.page-cta-strip p {
color: #cbd5e1;
font-size: 13.5px;
}
/* ================= INNER PAGE: RESPONSIVE ================= */
@media (max-width: 991px) {
.page-content-grid {
grid-template-columns: 1fr;
}
.policy-grid {
grid-template-columns: repeat(2, 1fr);
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
.org-row {
gap: 14px;
}
.org-box {
min-width: 150px;
padding: 12px 14px;
}
}
@media (max-width: 767px) {
.page-banner {
padding: 40px 0 30px 0;
}
.page-banner-title {
font-size: 24px;
}
.policy-grid {
grid-template-columns: 1fr;
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.team-photo {
height: 160px;
}
.org-row {
flex-direction: column;
align-items: center;
}
.org-level:not(:first-child) .org-row {
border-top: none;
padding-top: 0;
}
.org-level:not(:first-child) .org-row::before,
.org-level:not(:first-child) .org-box::before {
display: none;
}
.org-level:not(:first-child) {
margin-top: 18px;
}
.org-row {
gap: 10px;
}
.page-cta-strip {
flex-direction: column;
text-align: center;
padding: 26px 20px;
}
.hd-webs-vn-2135 .page-media-aside-row,
.hd-webs-vn-1659 .page-media-aside-row,
.hd-webs-vn-1344 .page-media-aside-row,
.hd-webs-vn-1517 .page-media-aside-row,
.hd-webs-vn-1834 .page-media-aside-row,
.hd-webs-vn-2011 .page-media-aside-row {
grid-template-columns: 1fr;
gap: 20px;
}
.hd-webs-vn-2144,
.hd-webs-vn-1661,
.hd-webs-vn-1346,
.hd-webs-vn-1519,
.hd-webs-vn-1841,
.hd-webs-vn-2018 {
max-height: 320px;
}
}
/* Ẩn dòng credit "Thiết kế bởi HDWEBS" ở chân trang (chỉ ẩn hiển thị, không xoá
khỏi HTML — vẫn giữ nguyên link cho SEO, xem Core/Helper/SiteCredit.php) */
.hdwebs-credit {
display: none;
}