/* ============================================================
   AES Industrial – Thành phần giao diện mở rộng (đa trang)
   Dùng chung biến màu từ style.css (--aes-red / --aes-gold / --aes-maroon)
   ============================================================ */

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Header: dropdown ---------- */
.main-nav { gap: 0.15rem; }
.nav-link { position: relative; }
.nav-link.active { color: var(--aes-red); }
.nav-link.active::after {
    content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 2px; height: 2px;
    background: var(--aes-red); border-radius: 2px;
}
.nav-group { position: relative; }
.nav-group > .nav-link i { font-size: 0.62rem; margin-left: 0.2rem; transition: var(--t); }
.nav-group:hover > .nav-link i { transform: rotate(180deg); }
.dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-lg); padding: 0.5rem; opacity: 0; visibility: hidden;
    transform: translateY(8px); transition: var(--t); z-index: 120;
}
.nav-group:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
    display: flex; align-items: center; gap: 0.4rem; justify-content: space-between;
    padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.9rem; color: var(--ink); transition: var(--t);
}
.dropdown a:hover { background: var(--bg-soft); color: var(--aes-red); }
.badge-soon {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3px;
    background: rgba(245,163,0,0.16); color: var(--aes-gold-dk);
    padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap;
}
.btn-outline { background: transparent; color: var(--aes-red); border-color: var(--aes-red); }
.btn-outline:hover { background: var(--aes-red); color: #fff; }

/* ---------- Page hero (trang con) ---------- */
.page-hero { position: relative; color: #fff; overflow: hidden; padding: 3.2rem 0 3.4rem; }
.page-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(900px 400px at 85% -20%, rgba(245,163,0,0.38), transparent 60%),
        linear-gradient(120deg, var(--aes-maroon-dk), var(--aes-maroon) 60%, var(--aes-red));
}
.page-hero .container { position: relative; }
.page-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -0.5px; }
.page-hero p { color: #f4e0dd; max-width: 680px; margin-top: 0.8rem; font-size: 1.05rem; }
.page-hero .hero-actions { margin-top: 1.6rem; }
.page-hero .badge { margin-bottom: 1rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.85rem; margin-bottom: 1rem; color: #edcfcb; }
.breadcrumb a { color: #fff; opacity: 0.85; }
.breadcrumb a:hover { color: var(--aes-gold); opacity: 1; }
.breadcrumb span.sep { opacity: 0.5; }

/* ---------- Hero slider (trang chủ) ---------- */
.hero--slider { min-height: 560px; display: flex; background: var(--aes-maroon-dk); }
.hero-slides { position: relative; width: 100%; }
.hero-slide {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity .8s ease; display: flex; align-items: center;
}
/* Slide đang hiện lấp đầy trọn chiều cao hero — bỏ dải trắng thừa phía dưới */
.hero-slide.active { opacity: 1; visibility: visible; position: relative; height: 100%; }
.hero-slide .slide-bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide.s-soft .slide-bg {
    background:
        radial-gradient(1000px 500px at 82% -10%, rgba(245,163,0,0.34), transparent 60%),
        linear-gradient(125deg, var(--aes-maroon-dk), var(--aes-maroon) 55%, var(--aes-red));
}
.hero-slide.s-mech .slide-bg {
    background:
        radial-gradient(900px 500px at 15% 110%, rgba(245,163,0,0.30), transparent 55%),
        linear-gradient(125deg, #2a0f0e, var(--aes-maroon-dk) 55%, var(--aes-maroon));
}
.hero-slide .slide-bg::after {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(700px 400px at 72% 22%, #000, transparent 75%);
}
.hero-slide .container { position: relative; z-index: 2; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.hero-slide .kicker {
    display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase; color: var(--aes-gold); margin-bottom: 1rem;
}
.slider-dots { display: none; }   /* Ẩn thanh chấm chỉ báo màu vàng dưới hero (theo yêu cầu) */
.slider-dots--legacy { position: absolute; bottom: 1.4rem; left: 0; right: 0; display: flex; justify-content: center; gap: 0.6rem; z-index: 5; }
.slider-dots button {
    width: 34px; height: 5px; border-radius: 3px; border: none; cursor: pointer;
    background: rgba(255,255,255,0.35); transition: var(--t);
}
.slider-dots button.active { background: var(--aes-gold); width: 48px; }
/* Mũi tên chuyển slide: ẩn hình nút, giữ VÙNG BẤM trong suốt cao hết hero ở 2 mép (bấm vẫn đổi HERO) */
.slider-arrow {
    position: absolute; top: 0; bottom: 0; z-index: 5;
    width: clamp(48px, 6vw, 110px); padding: 0; margin: 0;
    border: 0; border-radius: 0; background: transparent; color: transparent;
    cursor: pointer; display: block; -webkit-tap-highlight-color: transparent;
}
.slider-arrow i { display: none; }
.slider-arrow:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: -4px; }
.slider-arrow.prev { left: 0; }
.slider-arrow.next { right: 0; }
@media (max-width: 991px) { .slider-arrow { width: 28px; } }

/* ---------- Social proof bar ---------- */
.social-proof { background: #fff; border-bottom: 1px solid var(--line); }
.social-proof .container { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; padding: 1.4rem 24px; }
.social-proof .sp-label { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.social-proof .sp-logos { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }
.social-proof .sp-logos span { font-weight: 800; font-size: 1.15rem; color: #b09a97; letter-spacing: 0.5px; }
.social-proof .sp-logos { gap: 2.6rem; }
.social-proof .sp-logo { display: inline-flex; align-items: center; transition: transform var(--t); }
.social-proof .sp-logo:hover { transform: translateY(-2px); }
.social-proof .sp-logo img { height: 44px; width: auto; display: block; }
.social-proof .sp-logo--pl img { height: 58px; }
@media (max-width: 560px) { .social-proof .sp-logo img { height: 36px; } .social-proof .sp-logo--pl img { height: 48px; } }

/* ---------- Generic info cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; }
/* Ép 4 cột/hàng (8 thẻ → 2 hàng 4 thẻ cho cân đối) */
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid--4 { grid-template-columns: 1fr; } }
/* ---------- Vì sao chọn chúng tôi (thẻ ảnh + caption đỏ) — trang chủ ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem 1.6rem; }
.why-card { display: flex; flex-direction: column; }
.why-img { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 11; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20, 26, 34, 0.10); background: #fff; }
.why-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.why-card:hover .why-img img { transform: scale(1.05); }
.why-cap {
    margin-top: 0.9rem; flex: 1; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--line); border-radius: 10px; padding: 0.85rem 1rem;
    text-align: center; color: var(--aes-red); font-weight: 700; font-size: 0.92rem; line-height: 1.4;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.why-card:hover .why-cap { border-color: var(--aes-red); background: rgba(225, 37, 27, 0.04); }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- Dải số liệu khách hàng (trên mục Lợi ích) — kiểu AVEVA ---------- */
.outcome-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 2rem; align-items: start; }
.ob-item strong { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 0.5rem; }
.ob-item p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin: 0; }
.ob-item p b { color: var(--aes-red); font-weight: 700; }
@media (max-width: 820px) { .outcome-band { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } }
@media (max-width: 460px) { .outcome-band { grid-template-columns: 1fr; } }

/* ---------- Lưới Tính năng (media trên + tiêu đề + mô tả) — kiểu AVEVA ---------- */
.avf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 2rem; }
.avf-media {
    aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20, 26, 34, 0.10);
    background: #fff; margin-bottom: 1.1rem;
}
.avf-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avf-media--video { background: #000; }
.avf-media--video iframe { width: 100%; height: 100%; border: 0; display: block; }
.avf-item h3 { color: var(--aes-maroon); font-size: 1.14rem; font-weight: 700; margin-bottom: 0.5rem; }
.avf-item p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 900px) { .avf-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.6rem; } }
@media (max-width: 560px) { .avf-grid { grid-template-columns: 1fr; } }

/* ---------- Video nhúng 16:9 responsive (trong .split-media) ---------- */
.split-media:has(.video-embed) { background: #000; }
.video-embed { position: relative; width: 100%; padding-top: 56.25%; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Thanh mục lục trong trang (sticky, cuộn theo) ---------- */
html { scroll-behavior: smooth; }
.page-subnav {
    position: sticky; top: var(--hdr-h, 112px); z-index: 90;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(20, 26, 34, 0.04);
}
.page-subnav .subnav-inner {
    display: flex; gap: 0.15rem; align-items: stretch;
    overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.page-subnav .subnav-inner::-webkit-scrollbar { display: none; }
.page-subnav a {
    display: inline-flex; align-items: center; padding: 0.85rem 1.05rem;
    font-size: 0.92rem; font-weight: 600; color: var(--muted); white-space: nowrap;
    border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease;
}
.page-subnav a:hover { color: var(--ink); }
.page-subnav a.active { color: var(--aes-red); border-bottom-color: var(--aes-red); }
/* Bù chiều cao header + subnav khi nhảy tới mục */
section[id] { scroll-margin-top: calc(var(--hdr-h, 112px) + 58px); }
@media (max-width: 900px) {
    .page-subnav a { padding: 0.75rem 0.85rem; font-size: 0.86rem; }
}

/* Ghi chú nhà phân phối dưới nút hero */
.dist-note { margin-top: 1rem; font-size: 0.86rem; color: var(--muted); font-style: italic; }
.dist-note::before { content: "\f3ed"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--aes-red); margin-right: .45rem; }
/* Ép 3 cột/hàng (6 thẻ → 2 hàng 3 thẻ) */
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid--3 { grid-template-columns: 1fr; } }
.info-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.8rem 1.6rem; box-shadow: var(--shadow); transition: var(--t);
}
.info-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.info-icon {
    width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(225,37,27,0.1), rgba(245,163,0,0.12));
    color: var(--aes-red); font-size: 1.35rem; margin-bottom: 1rem;
}
/* Ảnh thực tế phía trên card năng lực (tràn viền, bo góc trên) */
.info-card .card-media {
    margin: -1.8rem -1.6rem 1.2rem;
    height: 172px;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    background: #f2f5f8;
    border-bottom: 1px solid var(--line);
}
.info-card .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.info-card .card-media.pos-lo img { object-position: center 68%; }
.info-card .card-media.contain { background: #fff; }
.info-card .card-media.contain img { object-fit: contain; padding: 0.5rem 0.7rem; }
.info-card h3 { color: var(--aes-maroon); font-size: 1.12rem; margin-bottom: 0.4rem; }
.info-card p { color: var(--muted); font-size: 0.92rem; }
.info-card .info-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; color: var(--aes-red); font-weight: 600; font-size: 0.9rem; transition: var(--t); }
.info-card .info-link:hover { gap: 0.75rem; color: var(--aes-gold-dk); }

/* ---------- Module cards (CFturbo) ---------- */
.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.mod-card {
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem;
    transition: var(--t); position: relative; overflow: hidden;
}
.mod-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(var(--aes-red), var(--aes-gold)); transform: scaleY(0); transform-origin: top; transition: var(--t);
}
.mod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.mod-card:hover::before { transform: scaleY(1); }
.mod-card .card-media {
    margin: -1.3rem -1.3rem 1rem; height: 150px; overflow: hidden;
    border-radius: 12px 12px 0 0; background: #eef1f5; border-bottom: 1px solid var(--line);
}
.mod-card .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-card i { color: var(--aes-red); font-size: 1.3rem; margin-bottom: 0.7rem; }
.mod-card h4 { color: var(--aes-maroon); font-size: 1.02rem; margin-bottom: 0.3rem; }
.mod-card p { color: var(--muted); font-size: 0.86rem; }
/* Thẻ ứng dụng bấm được → trang đích */
a.mod-card--link { text-decoration: none; color: inherit; display: block; }
a.mod-card--link:hover { border-color: transparent; }
.mod-card-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; font-size: .82rem; font-weight: 600; color: var(--aes-red); }
.mod-card-more i { color: inherit; font-size: .78rem; margin: 0; transition: transform .2s ease; }
a.mod-card--link:hover .mod-card-more i { transform: translateX(3px); }

/* ---------- Key advantages: thẻ có ảnh 1 bên (Simerics Marine) ---------- */
.adv-list { display: flex; flex-direction: column; gap: 1.1rem; }
.adv-row {
    display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 1.1rem 1.3rem; box-shadow: var(--shadow); transition: var(--t);
}
.adv-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.adv-media { border-radius: 10px; overflow: hidden; background: #f2f5f8; border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.adv-media img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.adv-text h4 { color: var(--aes-maroon); font-size: 1.15rem; margin-bottom: 0.4rem; }
.adv-text p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 700px) {
    .adv-row { grid-template-columns: 1fr; gap: 0.9rem; }
    .adv-media { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 820px) { .mod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mod-grid { grid-template-columns: 1fr; } }

/* Ghi chú nguồn tham khảo */
.source-note { text-align: center; font-size: 0.82rem; color: var(--muted); margin-top: 1.5rem; }
.source-note a { color: var(--aes-red); font-weight: 600; }

/* ============ MINI CARDS (3 thẻ năng lực nhỏ) ============ */
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.2rem; }
.mini-card {
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--aes-red);
    border-radius: 12px; padding: 1.3rem 1.4rem; box-shadow: var(--shadow); transition: var(--t);
}
.mini-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mini-card i { color: var(--aes-red); font-size: 1.25rem; margin-bottom: 0.6rem; }
.mini-card h4 { color: var(--aes-maroon); font-size: 1rem; font-weight: 700; margin: 0 0 0.35rem; }
.mini-card p { color: var(--muted); font-size: 0.88rem; margin: 0; line-height: 1.55; }

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

/* ---------- Split section ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-text h2 { color: var(--aes-maroon); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; margin: 0.4rem 0 1rem; }
.split-text p { color: var(--muted); margin-bottom: 0.9rem; }
.split-media {
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    background: linear-gradient(135deg, #f3f5f8, #e9edf2); border: 1px solid var(--line); min-height: 300px;
    display: flex; align-items: center; justify-content: center; color: var(--aes-red);
}
.split-media i { font-size: 5rem; opacity: 0.9; }
.split-media img, .split-media video { width: 100%; height: 100%; min-height: inherit; object-fit: cover; display: block; }
/* Sơ đồ/diagram: hiện trọn ảnh, không cắt */
.split-media.media-contain { background: #fff; }
.split-media.media-contain img, .split-media.media-contain video { object-fit: contain; padding: 1.3rem; }

/* ---------- Dịch vụ: ảnh để trống (placeholder) + hàng ảnh/text ---------- */
.svc-row { align-items: center; }
.split-media.media-empty { background: #f6f8fb; border: 2px dashed #c7cfd8; box-shadow: none; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.media-ph { text-align: center; color: #9aa6b2; font-size: .95rem; font-weight: 600; }
.media-ph i { display: block; font-size: 2.6rem; margin-bottom: .55rem; opacity: .65; }
.media-ph span { display: block; }

/* ---------- Bảng chương trình đào tạo ---------- */
.train-th { margin: 2.6rem 0 1rem; color: var(--aes-maroon); font-size: 1.3rem; font-weight: 800; }
.train-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
/* Bố cục: bảng (trái) + CTA đăng ký đào tạo (phải) */
.train-layout { display: grid; grid-template-columns: 2.1fr 1fr; gap: 1.8rem; align-items: start; }
.train-layout .train-wrap { margin: 0; }
.train-cta { background: linear-gradient(135deg, #ffffff, #faf5f5); border: 1px solid var(--line); border-left: 4px solid var(--aes-red); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.6rem 1.8rem; position: sticky; top: 92px; }
.train-cta h3 { color: var(--aes-maroon); font-size: 1.3rem; font-weight: 800; margin: 0 0 .7rem; }
.train-cta p { color: var(--muted); font-size: .94rem; line-height: 1.65; margin: 0 0 .9rem; }
.train-cta-btn { border-radius: 999px; margin-top: .2rem; }
@media (max-width: 960px) { .train-layout { grid-template-columns: 1fr; } .train-cta { position: static; } }

/* Điểm nhấn đào tạo (3 card nhỏ) */
.train-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 2rem 0 1.4rem; }
.th-card { display: flex; align-items: center; gap: .8rem; background: linear-gradient(135deg, #ffffff, #faf5f5); border: 1px solid var(--line); border-left: 4px solid var(--aes-red); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; }
.th-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(225,37,27,.1); color: var(--aes-red); font-size: 1.25rem; }
.th-card p { margin: 0; color: var(--ink); font-weight: 600; font-size: .96rem; line-height: 1.45; }
@media (max-width: 760px) { .train-highlights { grid-template-columns: 1fr; } }

/* Cột ảnh + chú thích dưới ảnh (hàng dịch vụ đào tạo) */
.split-media-col { display: flex; flex-direction: column; }
.split-media-col .media-cap { margin: .7rem 0 0; text-align: center; font-size: .9rem; font-style: italic; color: var(--muted); line-height: 1.5; }
.split-text .train-cta-btn { align-self: flex-start; margin-top: 1.1rem; }
.train-table { width: 100%; border-collapse: collapse; min-width: 540px; background: #fff; }
.train-table thead th { background: linear-gradient(120deg, var(--aes-maroon-dk), var(--aes-red)); color: #fff; font-weight: 700; text-align: left; padding: .62rem .8rem; font-size: .88rem; }
.train-table thead th:first-child { text-align: center; width: 44px; }
.train-table thead th:nth-child(2) { width: 30%; }
.train-table td { padding: .62rem .8rem; border-top: 1px solid var(--line); vertical-align: top; font-size: .86rem; line-height: 1.55; color: var(--ink); }
.train-table td:first-child { text-align: center; font-weight: 800; color: var(--aes-red); }
.train-table td:nth-child(2) { font-weight: 700; color: var(--aes-maroon); }
.train-table tbody tr:nth-child(even) { background: #faf7f7; }
.train-table td p { margin: 0 0 .5rem; }
.train-table td ul { margin: .35rem 0 .5rem; padding-left: 1.15rem; }
.train-table td li { margin: .18rem 0; }
.train-table td .tt-goal b { color: var(--aes-maroon); }
.train-table td .tt-res { margin-bottom: 0; }
.train-table td .tt-res b { color: var(--aes-red); }

/* ---------- Ảnh brochure có thể bấm tải PDF ---------- */
.split-media:has(.broch-link) { background: #fff; padding: 1.4rem; }
.broch-link {
    position: relative; display: block; width: 50%; max-width: 320px; height: auto; margin: 0 auto;
    border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(20,26,34,.16);
    transition: transform .25s ease, box-shadow .25s ease;
}
.broch-link img { width: 100%; height: auto; object-fit: contain; display: block; }
.broch-link:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20,26,34,.24); }
.broch-badge {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
    background: var(--aes-red); color: #fff; font-weight: 600; font-size: .82rem;
    padding: .5rem .9rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(225,37,27,.4);
    opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.broch-link:hover .broch-badge { opacity: 1; transform: translateX(-50%) translateY(-2px); }
@media (max-width: 640px) { .broch-badge { opacity: 1; } }

/* ---------- Tổng quan sản phẩm (trang Cơ khí) ---------- */
#tong-quan .eyebrow { font-size: 2.82rem; letter-spacing: 0.5px; line-height: 1.1; }
#tong-quan .split-text p { color: #111; }
#tong-quan .check-list i {
    color: #fff; background: var(--aes-red);
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72rem; flex-shrink: 0; margin-top: 0.1rem;
}
#tong-quan .split-media { position: relative; }
#tong-quan .media-badges {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
    padding: 1.4rem 1rem 0.9rem;
    background: linear-gradient(to top, rgba(15,18,22,0.94), rgba(15,18,22,0.6) 65%, rgba(15,18,22,0));
}
#tong-quan .media-badge { display: flex; align-items: center; gap: 0.6rem; color: #fff; }
#tong-quan .media-badge i { color: var(--aes-gold); font-size: 1.4rem; flex-shrink: 0; }
#tong-quan .media-badge span { display: flex; flex-direction: column; line-height: 1.25; }
#tong-quan .media-badge strong { font-size: 0.9rem; font-weight: 700; }
#tong-quan .media-badge em { font-style: normal; font-size: 0.78rem; opacity: 0.88; }

@media (max-width: 640px) {
    #tong-quan .eyebrow { font-size: 1.9rem; }
    #tong-quan .media-badges { grid-template-columns: 1fr; gap: 0.55rem; padding: 1rem; }
    #thong-so .eyebrow { font-size: 1.9rem; }
}

/* ---------- Thông số kỹ thuật (trang Cơ khí) ---------- */
#thong-so .eyebrow { font-size: 2.82rem; letter-spacing: 0.5px; line-height: 1.1; }
#thong-so .section-head { max-width: 100%; margin-bottom: 1rem; }
#thong-so .section-head p { white-space: nowrap; }
#thong-so .section-head + .table-title { margin-top: 0.6rem; }
#tong-quan { padding-bottom: 2.5rem; }
#thong-so { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* So sánh giá trị — eyebrow to bằng "Thông số kỹ thuật", kéo gần section trên */
#so-sanh .eyebrow { font-size: 2.82rem; letter-spacing: 0.5px; line-height: 1.1; }
#so-sanh { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* Ứng dụng — tiêu đề in hoa, màu đỏ giống eyebrow "So sánh giá trị" */
#ung-dung { padding-top: 3rem; }
#ung-dung .section-head h2 { color: var(--aes-red); }
#ung-dung .section-head { margin-bottom: 2.2rem; }

/* Bằng chứng chất lượng — tiêu đề in hoa, màu đỏ, căn lại khoảng trống */
#chung-chi-qa { padding-top: 3rem; }
#chung-chi-qa .section-head h2 { color: var(--aes-red); }
#chung-chi-qa .section-head { margin-bottom: 2.2rem; }

/* Tài liệu & Catalogue — tiêu đề in hoa, màu đỏ, kéo gần section trên */
#tai-lieu { padding-top: 3rem; }
#tai-lieu .section-head { margin-bottom: 2.2rem; }
#tai-lieu .section-head h2 { color: var(--aes-red); }

/* FAQ — phóng to eyebrow "Câu hỏi thường gặp" bằng cỡ tiêu đề "Bằng chứng chất lượng" */
#faq .eyebrow { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: 0.5px; line-height: 1.15; }

/* Bảng A · Đặc tính chung — bảng 2/3 + ảnh minh họa bên phải */
.spec-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: stretch; }
.spec-layout .spec-wrap { margin: 0; }
.spec-layout .data-table td { padding: 0.7rem 1rem; }
.spec-aside { display: flex; flex-direction: column; }
.spec-aside img { width: 100%; flex: 1 1 auto; min-height: 220px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.spec-quote { margin: 1.1rem 0 0.6rem; padding: 0; border: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.25; color: var(--aes-maroon); }
.spec-aside-desc { color: var(--muted); font-size: 0.92rem; margin: 0; line-height: 1.55; }

@media (max-width: 860px) {
    .spec-layout { grid-template-columns: 1fr; align-items: start; }
    .spec-aside { max-width: 460px; }
    .spec-aside img { flex: none; height: auto; }
}
@media (max-width: 760px) {
    #thong-so .section-head p { white-space: normal; }
}
.split-media .media-card { text-align: center; padding: 2rem; }
.split-media .media-card h4 { font-size: 1.25rem; margin: 0.8rem 0 0.4rem; color: var(--aes-maroon); }
.split-media .media-card p { font-size: 0.92rem; color: var(--muted); max-width: 320px; margin: 0 auto; }
.check-list { display: grid; gap: 0.6rem; margin: 1rem 0 1.5rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.94rem; }
.check-list i { color: var(--aes-red); margin-top: 0.25rem; }

/* ---------- Vision/Mission/Values ---------- */
.vmv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.vmv-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 2rem 1.7rem; box-shadow: var(--shadow); border-top: 4px solid var(--aes-red); transition: var(--t);
}
.vmv-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.vmv-card:nth-child(2) { border-top-color: var(--aes-gold); }
.vmv-card:nth-child(3) { border-top-color: var(--aes-maroon); }
.vmv-card i { font-size: 1.8rem; color: var(--aes-red); margin-bottom: 0.8rem; }
.vmv-card:nth-child(2) i { color: var(--aes-gold-dk); }
.vmv-card:nth-child(3) i { color: var(--aes-maroon); }
.vmv-card h3 { color: var(--aes-maroon); font-size: 1.2rem; margin-bottom: 0.5rem; }
.vmv-card p { color: var(--muted); font-size: 0.93rem; }

/* ---------- Timeline (cột mốc) ---------- */
.timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 1rem; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 1.8rem 2rem; }
.tl-item::before {
    content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--aes-red); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--aes-red);
}
.tl-year { font-weight: 800; color: var(--aes-red); font-size: 1.05rem; }
.tl-item h4 { color: var(--aes-maroon); margin: 0.15rem 0 0.25rem; }
.tl-item p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Logo grid (đối tác / khách hàng) ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.logo-item {
    background: #fff; border: 1px solid var(--line); border-radius: 12px; min-height: 84px;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    font-weight: 800; font-size: 1.05rem; color: #a08d8a; letter-spacing: 0.5px; transition: var(--t);
}
.logo-item:hover { color: var(--aes-red); border-color: var(--aes-red); transform: translateY(-3px); }

/* ---------- Tabs (Simerics MP / MP+) ---------- */
.tabs { max-width: 100%; }
.tab-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2rem; }
.tab-btn {
    padding: 0.7rem 1.6rem; border-radius: 999px; border: 1px solid var(--line); background: #fff;
    font-family: inherit; font-weight: 600; font-size: 0.95rem; color: var(--muted); cursor: pointer; transition: var(--t);
}
.tab-btn:hover { border-color: var(--aes-red); color: var(--aes-red); }
.tab-btn.active { background: var(--aes-red); border-color: var(--aes-red); color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Spec table (thông số kỹ thuật) ---------- */
.spec-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table caption { text-align: left; font-weight: 700; color: var(--aes-maroon); padding: 1.1rem 1.4rem; font-size: 1.05rem; background: var(--bg-soft); }
.spec-table th, .spec-table td { padding: 0.85rem 1.4rem; text-align: left; font-size: 0.92rem; border-top: 1px solid var(--line); }
.spec-table th { width: 42%; color: var(--aes-maroon); font-weight: 600; background: rgba(163,37,35,0.03); }
.spec-table td { color: var(--ink); }
.spec-table tr:hover td, .spec-table tr:hover th { background: var(--bg-soft); }

/* ---------- ISO / badge callout ---------- */
.iso-band { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--aes-gold); border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: var(--shadow); }
.iso-band .iso-seal { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--aes-gold), var(--aes-gold-dk)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; text-align: center; line-height: 1.1; }
.iso-band .iso-seal small { font-size: 0.55rem; font-weight: 600; }
.iso-band h3 { color: var(--aes-maroon); margin-bottom: 0.2rem; }
.iso-band p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Documents list ---------- */
.doc-list { display: grid; gap: 0.9rem; }
.doc-item {
    display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; padding: 1rem 1.3rem; transition: var(--t);
}
.doc-item:hover { border-color: var(--aes-red); box-shadow: var(--shadow); }
.doc-item .doc-ico { width: 46px; height: 46px; border-radius: 10px; background: rgba(225,37,27,0.09); color: var(--aes-red); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.doc-item .doc-info { flex: 1; }
.doc-item .doc-info strong { display: block; color: var(--aes-maroon); font-size: 0.98rem; }
.doc-item .doc-info span { font-size: 0.8rem; color: var(--muted); }
.doc-item .doc-dl { color: var(--aes-red); font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.doc-item .doc-dl:hover { color: var(--aes-gold-dk); }

/* ---------- Post cards (blog/tin tức) ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: var(--t); display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.post-thumb { height: 168px; background: linear-gradient(135deg, #f3f5f8, #e9edf2); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--aes-red); font-size: 2.4rem; overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.post-card { text-decoration: none; color: inherit; }
.post-body { padding: 1.4rem; flex: 1; display: flex; flex-direction: column; }
.post-tag { align-self: flex-start; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--aes-red); background: rgba(225,37,27,0.08); padding: 0.2rem 0.7rem; border-radius: 999px; margin-bottom: 0.7rem; }
.post-body h3 { color: var(--aes-maroon); font-size: 1.08rem; margin-bottom: 0.5rem; }
.post-body p { color: var(--muted); font-size: 0.9rem; flex: 1; }
.post-meta { margin-top: 1rem; font-size: 0.8rem; color: #9a8885; display: flex; gap: 1rem; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--aes-maroon-dk), var(--aes-maroon) 60%, var(--aes-red)); color: #fff; border-radius: var(--radius); padding: 2.8rem; text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; }
.cta-band p { color: #f4e0dd; margin: 0.7rem auto 1.5rem; max-width: 600px; }
.cta-band .hero-actions { justify-content: center; }
.cta-band .btn-outline { color: #fff; border-color: rgba(255,255,255,.75); }
.cta-band .btn-outline:hover { background: #fff; color: var(--aes-maroon); border-color: #fff; }

/* ---------- Contact: context tabs ---------- */
.ctx-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }
.ctx-tab { padding: 0.55rem 1.1rem; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-family: inherit; font-weight: 600; font-size: 0.88rem; color: var(--muted); cursor: pointer; transition: var(--t); }
.ctx-tab.active { background: var(--aes-red); border-color: var(--aes-red); color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: start; }
.contact-info .ci-item { display: flex; gap: 1rem; margin-bottom: 1.4rem; }
.contact-info .ci-ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(225,37,27,0.09); color: var(--aes-red); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.contact-info .ci-item strong { display: block; color: var(--aes-maroon); }
.contact-info .ci-item span, .contact-info .ci-item a { color: var(--muted); font-size: 0.92rem; }
.contact-info .ci-item a:hover { color: var(--aes-red); }

/* ---------- Placeholder / coming soon ---------- */
.coming-soon { text-align: center; max-width: 620px; margin: 0 auto; padding: 2rem 0; }
.coming-soon .cs-ico { width: 96px; height: 96px; margin: 0 auto 1.5rem; border-radius: 26px; background: linear-gradient(135deg, rgba(225,37,27,0.1), rgba(245,163,0,0.14)); color: var(--aes-red); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.coming-soon h2 { color: var(--aes-maroon); font-size: 1.6rem; margin-bottom: 0.6rem; }
.coming-soon p { color: var(--muted); }

/* ---------- Stat row ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.2rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; text-align: center; box-shadow: var(--shadow); }
.stat strong { display: block; font-size: 2.2rem; font-weight: 800; color: var(--aes-red); line-height: 1; }
.stat span { font-size: 0.88rem; color: var(--muted); margin-top: 0.4rem; display: block; }
/* Bản thu nhỏ: 3 thẻ số liệu gọn trong cột text */
.stat-row--compact { grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1.6rem; }
.stat-row--compact .stat { padding: 0.9rem 0.5rem; border-radius: 12px; }
.stat-row--compact .stat strong { font-size: 1.5rem; }
.stat-row--compact .stat span { font-size: 0.72rem; margin-top: 0.25rem; }
@media (max-width: 520px) { .stat-row--compact { grid-template-columns: 1fr 1fr; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .vmv-grid { grid-template-columns: 1fr; }
    .split, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    .split.reverse .split-media { order: 0; }
    .main-nav {
        position: fixed; top: 112px; right: 0; left: 0; max-height: calc(100vh - 112px); overflow-y: auto;
        background: #fff; flex-direction: column; align-items: stretch;
        padding: 1rem 24px 1.5rem; gap: 0.1rem; border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg); transform: translateY(-140%); transition: transform .3s ease; z-index: 99;
    }
    .main-nav.open { transform: translateY(0); }
    .nav-link { padding: 0.8rem 0.5rem; }
    .nav-link.active::after { display: none; }
    .nav-group { position: static; }
    .nav-group .dropdown {
        position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
        border: none; border-left: 2px solid var(--line); border-radius: 0; margin: 0 0 0.4rem 0.8rem;
        padding: 0 0 0 0.6rem; display: none;
    }
    .nav-group.open .dropdown { display: block; }
    .nav-cta { text-align: center; margin: 0.5rem 0 0; }
    .nav-toggle { display: block; }
}
@media (max-width: 620px) {
    .vmv-grid { grid-template-columns: 1fr; }
    .split-media { min-height: 220px; }
    .cta-band { padding: 2rem 1.4rem; }
    .social-proof .container { gap: 1rem; }
}

/* ============ HERO ECOSYSTEM BANDS (trang chủ) ============ */
.eco-bands { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.eco-band {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.2rem;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-left: 5px solid var(--eco-accent, var(--aes-red));
    border-radius: var(--radius);
    padding: 2rem 2.2rem;
    box-shadow: var(--shadow);
}
.eco-band.reverse .eco-media { order: -1; }
.eco-band--red    { --eco-accent: var(--aes-red); }
.eco-band--gold   { --eco-accent: var(--aes-gold); }
.eco-band--maroon { --eco-accent: var(--aes-maroon); }

.eco-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--eco-accent);
    background: color-mix(in srgb, var(--eco-accent) 12%, #fff);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}
.eco-title { color: var(--aes-maroon); font-size: clamp(1.25rem, 2.3vw, 1.7rem); font-weight: 800; margin: 0 0 0.35rem; line-height: 1.25; }
.eco-title .eco-note { display: block; font-size: 0.82rem; font-weight: 500; color: var(--muted); margin-top: 0.3rem; }
.eco-desc { color: var(--muted); line-height: 1.65; margin: 0.5rem 0 1rem; }
.eco-desc strong { color: var(--ink); font-weight: 700; }

.eco-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.eco-chip {
    font-size: 0.8rem; font-weight: 600; color: var(--aes-maroon);
    background: var(--bg-soft); border: 1px solid var(--line);
    padding: 0.35rem 0.75rem; border-radius: 999px;
}
.eco-chip.soon { color: var(--aes-gold-dk); border-color: color-mix(in srgb, var(--aes-gold) 45%, var(--line)); background: color-mix(in srgb, var(--aes-gold) 8%, #fff); }

.eco-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.eco-media-ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.75rem; text-align: center;
    min-height: 210px; height: 100%;
    padding: 1.5rem;
    border: 2px dashed color-mix(in srgb, var(--eco-accent) 45%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--eco-accent) 5%, #fff);
    color: var(--muted);
}
.eco-media-ph i { font-size: 2.4rem; color: color-mix(in srgb, var(--eco-accent) 60%, var(--muted)); }
.eco-media-ph span { font-size: 0.85rem; max-width: 260px; line-height: 1.45; }

@media (max-width: 900px) {
    .eco-band { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.5rem; }
    .eco-band.reverse .eco-media { order: 0; }
    .eco-media-ph { min-height: 170px; }
}

/* ============ 04 · CHIPS NGÀNH ỨNG DỤNG ============ */
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 2rem; }
.ind-chip {
    font-size: 0.95rem; font-weight: 600; color: var(--aes-maroon);
    background: #fff; border: 1.5px solid var(--line);
    padding: 0.7rem 1.3rem; border-radius: 999px;
    transition: all var(--t);
}
.ind-chip:hover { border-color: var(--aes-red); color: var(--aes-red); box-shadow: var(--shadow); transform: translateY(-2px); }

/* Ứng dụng theo ngành — nội dung tab (3 khối) */
.ind-tabs .tab-nav { margin-bottom: 2.2rem; }
.ind-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.ind-card {
    display: flex; flex-direction: column; gap: 0.65rem;
    background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--aes-red);
    border-radius: var(--radius); padding: 1.5rem 1.4rem; box-shadow: var(--shadow);
}
.ind-card:nth-child(2) { border-top-color: var(--aes-gold); }
.ind-card:nth-child(3) { border-top-color: var(--aes-maroon); }
.ind-card-h { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.02rem; color: var(--aes-maroon); }
.ind-card:nth-child(1) .ind-card-h i { color: var(--aes-red); }
.ind-card:nth-child(2) .ind-card-h i { color: var(--aes-gold-dk); }
.ind-card:nth-child(3) .ind-card-h i { color: var(--aes-maroon); }
.ind-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 0.96rem; }
.ind-card p strong { color: var(--aes-maroon); font-weight: 700; }
@media (max-width: 860px) { .ind-detail { grid-template-columns: 1fr; } }

/* ============ 05 · VALUE CARDS (VÌ SAO CHỌN AES) ============ */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.value-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.8rem 1.6rem; box-shadow: var(--shadow); transition: all var(--t);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.value-icon {
    width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-soft); color: var(--aes-red); font-size: 1.4rem;
    margin-bottom: 1.1rem;
}
.value-card h3 { color: var(--aes-maroon); font-size: 1.08rem; font-weight: 700; margin: 0 0 0.5rem; line-height: 1.35; }
.value-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }

/* ============ 06 · CAPABILITY STATS TEASER ============ */
.cap-stats { margin-top: 2.5rem; }
.cap-stats .stat span { line-height: 1.5; }
.stat.stat-iso strong { font-size: 1.4rem; }
.center-cta { text-align: center; margin-top: 2rem; }

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

/* ============ CASE STUDY ============ */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.5rem; }
.case-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); transition: var(--t);
    display: flex; flex-direction: column;
}
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.case-media {
    height: 150px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f3f5f8, #e9edf2);
    border-bottom: 1px solid var(--line);
    color: var(--aes-red); font-size: 2.6rem;
}
.case-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.case-body h3 { color: var(--aes-maroon); font-size: 1.1rem; margin: 0 0 0.5rem; line-height: 1.35; }
.case-body p { color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; flex: 1; }
.case-result {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
    padding: 0.75rem 0; border-top: 1px solid var(--line);
    margin-bottom: 0.8rem; font-size: 0.85rem; color: var(--muted);
}
.case-result strong { color: var(--aes-red); font-size: 1.05rem; }

/* Link "Đọc tiếp / Xem chi tiết" dùng chung cho case & blog */
.post-more {
    align-self: flex-start; margin-top: auto; padding-top: 0.4rem;
    font-weight: 700; font-size: 0.85rem; color: var(--aes-red);
    display: inline-flex; align-items: center; gap: 0.4rem; transition: gap var(--t);
}
.post-more:hover { gap: 0.7rem; }

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

/* ============ PRODUCT HERO (nền đỏ, chữ trắng, 2 cột) ============ */
.product-hero { position: relative; color: #fff; overflow: hidden; padding: 3.6rem 0 4rem; }
.product-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(900px 400px at 85% -20%, rgba(245,163,0,0.38), transparent 60%),
        linear-gradient(120deg, var(--aes-maroon-dk), var(--aes-maroon) 60%, var(--aes-red));
}
.product-hero .container { position: relative; z-index: 1; }
.phero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: center; }
.phero-text h1 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.35rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.5px; margin: 0; }
.phero-text > p { color: #f4e0dd; margin: 1.1rem 0 0; font-size: 1.02rem; line-height: 1.7; }
.phero-text > p strong { color: #fff; font-weight: 700; }
.phero-text .hero-actions { margin-top: 1.5rem; }
.phero-text .phero-actions-2 { margin-top: 0.7rem; }
.phero-media-ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.8rem; text-align: center; min-height: 300px; height: 100%;
    padding: 1.5rem; border: 2px dashed rgba(255,255,255,0.35); border-radius: var(--radius);
    background: rgba(255,255,255,0.08); color: #f4e0dd;
}
.phero-media-ph i { font-size: 2.6rem; color: var(--aes-gold); }
.phero-media-ph span { font-size: 0.88rem; max-width: 260px; line-height: 1.5; }
/* Ảnh minh hoạ hero — không khung, hiển thị liền mạch, nằm trong khung nội dung */
.phero-img {
    display: block; width: 100%; height: auto;
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
}

/* ===================== SOFTWARE HERO — redesign premium industrial ===================== */
.product-hero.sw-hero {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    padding: 3rem 0;
    overflow: hidden;
}
/* Nền: gradient đỏ AES (trái đậm → phải tối) + lớp ảnh kỹ thuật mờ phía sau */
.product-hero.sw-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(100deg, rgba(120,20,16,0.97) 0%, rgba(171,27,19,0.92) 40%, rgba(150,24,17,0.86) 54%, rgba(70,14,12,0.96) 100%),
        url('../images/cfturbo-intro.jpg');
    background-size: cover, cover;
    background-position: center, center;
}
/* Bố cục 2 cột nằm TRONG container (căn giữa trang) -> khi zoom-out ảnh dồn vào giữa
   cùng khối nội dung thay vì dính mép phải viewport */
.sw-hero-inner {
    position: relative; z-index: 3;
    display: flex; align-items: center; gap: 2.5rem;
}
.sw-hero-text { flex: 1 1 46%; max-width: 560px; }
/* Ảnh hero: giữ TRỌN tỉ lệ gốc (không cắt), hòa vào nền đỏ bằng gradient mask bên trái */
.sw-hero-media {
    flex: 1 1 54%; min-width: 0; align-self: stretch;
    display: flex; align-items: center; justify-content: flex-end;
}
.sw-hero-media img {
    display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; object-position: right center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 10%, #000 34%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 10%, #000 34%);
}
.sw-hero-text h1 {
    color: #fff; font-weight: 800;
    font-size: clamp(2.1rem, 3.7vw, 3.4rem); line-height: 1.12; letter-spacing: -0.5px;
    margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,0.30);
}
.sw-hero-text p {
    color: rgba(255,255,255,0.9); max-width: 550px;
    line-height: 1.6; font-size: 1.06rem; margin: 1.2rem 0 0;
    text-shadow: 0 1px 10px rgba(0,0,0,0.28);
}
.sw-hero-text .hero-actions { margin-top: 1.9rem; gap: 16px; }
.sw-hero .btn-primary:hover { box-shadow: 0 10px 26px rgba(245,163,0,0.5); }

/* Tablet: cân lại tỉ lệ 2 cột */
@media (max-width: 1100px) and (min-width: 901px) {
    .sw-hero-inner { gap: 1.6rem; }
    .sw-hero-text { flex-basis: 44%; max-width: 440px; }
    .sw-hero-media { flex-basis: 56%; }
    .sw-hero-media img { max-height: 380px; }
}
/* Mobile: text trên – ảnh dưới – nút full-width */
@media (max-width: 900px) {
    .product-hero.sw-hero { min-height: 0; padding: 2.4rem 0 0; }
    .sw-hero-inner { flex-direction: column; align-items: stretch; gap: 0; }
    .sw-hero-media {
        justify-content: center; width: 100%; max-width: 100%; margin-top: 1.6rem;
    }
    .sw-hero-media img { max-height: none; object-position: center; -webkit-mask-image: none; mask-image: none; }
    .sw-hero-text { flex-basis: auto; max-width: 100%; }
    .sw-hero-text .hero-actions { flex-direction: column; }
    .sw-hero-text .hero-actions .btn { width: 100%; justify-content: center; }
}

/* HERO video nhúng (YouTube nền — mô phỏng 3D sản phẩm) */
.phero-video {
    position: relative; width: 100%; aspect-ratio: 16 / 9; height: auto;
    border-radius: var(--radius); overflow: hidden;
    background: #1a0908; box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,0.16);
}
.phero-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
    .phero-grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .phero-media-ph { min-height: 200px; }
}

/* ===== HERO có VIDEO NỀN phủ kín (full-bleed, ẩn nguồn YouTube) ===== */
.product-hero.hero-video {
    padding: 6rem 0 6.4rem;
    min-height: 560px;
    display: flex; align-items: center;
}
.product-hero.hero-video::before { display: none; }        /* bỏ gradient tĩnh, dùng video làm nền */
.phero-video-bg {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; background: #1a0908; pointer-events: none;
}
/* Kỹ thuật "cover": iframe luôn ≥ khung theo cả 2 chiều + phóng to để cắt tiêu đề/logo YouTube */
.phero-video-bg iframe {
    position: absolute; top: 50%; left: 50%;
    width: max(100%, 177.78vh);
    height: max(100%, 56.25vw);
    transform: translate(-50%, -50%) scale(1.28);
    border: 0; pointer-events: none;
}
.hero-video-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(245,163,0,0.30), transparent 60%),
        linear-gradient(120deg, rgba(70,15,14,0.92), rgba(140,25,20,0.66) 52%, rgba(225,37,27,0.40));
}
.product-hero.hero-video .container { position: relative; z-index: 2; }
.phero-lead { max-width: 720px; }
.phero-lead .phero-text h1 { text-shadow: 0 2px 14px rgba(0,0,0,0.35); }
.phero-lead .phero-text > p { color: #fbe7e4; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }

@media (max-width: 900px) {
    .product-hero.hero-video { min-height: 460px; padding: 4rem 0 4.4rem; }
    .phero-video-bg iframe { transform: translate(-50%, -50%) scale(1.7); }
    .phero-lead { max-width: 100%; }
}

/* HERO phần mềm — bản phóng lớn */
.product-hero--lg { padding: 5rem 0 5.4rem; }
.product-hero--lg .phero-text h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.product-hero--lg .phero-text > p { font-size: 1.08rem; }
.product-hero--lg .phero-media-ph { min-height: 360px; }
@media (max-width: 900px) {
    .product-hero--lg { padding: 3rem 0 3.4rem; }
    .product-hero--lg .phero-media-ph { min-height: 220px; }
}

/* ============ DATA TABLE (bảng thông số nhiều cột) ============ */
.table-title { color: var(--aes-maroon); font-size: 1.15rem; font-weight: 800; margin: 2.5rem 0 0.3rem; }
.table-note { color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
    background: rgba(245,163,0,0.14); color: var(--aes-maroon);
    font-weight: 700; font-size: 0.9rem; text-align: left;
    padding: 0.9rem 1.4rem; border-bottom: 2px solid rgba(245,163,0,0.35);
}
.data-table td {
    padding: 0.8rem 1.4rem; font-size: 0.92rem; color: var(--ink);
    border-top: 1px solid var(--line); vertical-align: top;
}
.data-table td:first-child { font-weight: 600; color: var(--aes-maroon); }
.data-table tbody tr:nth-child(even) td { background: var(--bg-soft); }
.data-table tbody tr:hover td { background: rgba(163,37,35,0.05); }

@media (max-width: 720px) {
    .data-table { font-size: 0.85rem; }
    .data-table thead th, .data-table td { padding: 0.65rem 0.85rem; }
}

/* ============ STAT STRIP (3 điểm kỹ thuật dưới HERO) ============ */
.stat-strip-section { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.ss-item { text-align: center; padding: 2.2rem 1.4rem; }
.ss-item + .ss-item { border-left: 1px solid var(--line); }
.ss-item strong { display: block; color: var(--aes-maroon); font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 800; line-height: 1.3; }
.ss-item span { display: block; margin: 0.55rem auto 0; max-width: 320px; font-size: 0.9rem; color: var(--muted); line-height: 1.55; }

@media (max-width: 760px) {
    .stat-strip { grid-template-columns: 1fr; }
    .ss-item + .ss-item { border-left: none; border-top: 1px solid var(--line); }
}

/* ============ 06 · CHỨNG CHỈ & QA ============ */
.qa-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.5rem; align-items: start; }
.qa-title { color: var(--aes-maroon); font-size: 1.15rem; font-weight: 800; margin: 0 0 1.2rem; }
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cert-item { text-align: center; }
.cert-ph {
    height: 92px; border: 1px dashed color-mix(in srgb, var(--aes-gold) 40%, var(--line));
    border-radius: 12px; background: var(--bg-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--aes-gold-dk); font-size: 1.8rem; margin-bottom: 0.6rem;
}
.cert-item span { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.qa-steps { display: grid; gap: 0.9rem; }
.qa-steps li { display: flex; gap: 0.9rem; align-items: flex-start; }
.qa-no {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--aes-red); color: #fff; font-weight: 700; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center;
}
.qa-steps p { color: var(--ink); font-size: 0.92rem; margin: 0; padding-top: 0.3rem; line-height: 1.5; }

@media (max-width: 820px) { .qa-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 480px) { .cert-grid { grid-template-columns: 1fr; } }

/* ============ 04 · BẢNG SO SÁNH GIÁ TRỊ ============ */
.spec-wrap.compare-wrap { overflow-x: auto; }
.compare-table { min-width: 720px; }
.compare-table thead th.col-aes { background: var(--aes-gold-dk); color: #fff; }
.compare-table tbody tr td.col-aes { background: rgba(245,163,0,0.12); color: var(--aes-gold-dk); font-weight: 600; }
/* Table head căn giữa */
.compare-table thead th { text-align: center; }
/* Ô có icon: dùng padding-left + icon absolute để thẳng hàng dòng đầu, giữ nguyên layout bảng */
.compare-table tbody td.col-aes,
.compare-table tbody td:nth-child(3),
.compare-table tbody td:nth-child(4) { position: relative; padding-left: 2.6rem; }
.compare-table .cmp-yes {
    position: absolute; left: 1rem; top: 0.78rem;
    color: #fff; background: #1faa4b;
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem;
}
.compare-table .cmp-no {
    position: absolute; left: 1rem; top: 0.78rem;
    color: #fff; background: var(--aes-red);
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem;
}

/* ---------- FAQ (accordion, trang Cơ khí) ---------- */
.faq-list { display: grid; gap: 0.9rem; max-width: 900px; margin: 0 auto; }
.faq-item {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.faq-item[open] { border-color: color-mix(in srgb, var(--aes-red) 35%, var(--line)); box-shadow: var(--shadow-lg); }
.faq-item summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 0.85rem;
    padding: 1.1rem 1.3rem; font-weight: 700; color: var(--aes-maroon); font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .fa-circle-question { color: var(--aes-red); font-size: 1.15rem; flex-shrink: 0; }
.faq-item summary span { flex: 1; }
.faq-chev { margin-left: auto; color: var(--muted); transition: transform .25s ease; flex-shrink: 0; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-item[open] summary { color: var(--aes-red); }
.faq-item summary:hover { color: var(--aes-red); }
.faq-answer { padding: 0 1.3rem 1.2rem 3.15rem; }
.faq-answer p { color: var(--ink); margin: 0; line-height: 1.65; }
@media (max-width: 560px) { .faq-answer { padding-left: 1.3rem; } }

/* ---------- Language switch VI | EN ---------- */
.lang-switch { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.9rem; }
.lang-switch button {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-weight: 700; font-size: 0.85rem; color: var(--muted);
    padding: 0.2rem 0.4rem; border-radius: 6px; transition: var(--t); line-height: 1;
}
.lang-switch button:hover { color: var(--aes-red); }
.lang-switch button.active { color: var(--aes-red); background: rgba(225,37,27,0.08); }
.lang-switch .lang-sep { color: var(--line); font-size: 0.8rem; }
@media (max-width: 900px) { .lang-switch { margin-left: auto; margin-right: 0.4rem; } }

/* ---------- VI|EN trong topbar (nền tối) ---------- */
.topbar-right { display: inline-flex; align-items: center; gap: 1rem; }
.topbar .lang-switch { margin-left: 0; }
.topbar .lang-switch button { color: #f0d9d6; }
.topbar .lang-switch button:hover { color: var(--aes-gold); background: transparent; }
.topbar .lang-switch button.active { color: #fff; background: rgba(255,255,255,0.16); }
.topbar .lang-switch .lang-sep { color: rgba(240,217,214,0.45); }

/* ---------- Cấu tạo sản phẩm: 3D viewer + sơ đồ tách chi tiết ---------- */
.ct-viewer { max-width: 1000px; margin: 0 auto 2.6rem; }
.ct-3d {
    position: relative; width: 100%; height: clamp(360px, 52vh, 560px);
    border-radius: var(--radius); border: 1px solid var(--line);
    background: radial-gradient(120% 120% at 50% 15%, #ffffff, #eef2f6 68%, #e3e9ef);
    box-shadow: var(--shadow); overflow: hidden; cursor: grab; touch-action: none;
}
.ct-3d:active { cursor: grabbing; }
.ct-3d canvas { display: block; width: 100%; height: 100%; }
.ct-hint {
    position: absolute; left: 14px; bottom: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--muted);
    background: rgba(255,255,255,0.82); border: 1px solid var(--line);
    padding: 0.34rem 0.7rem; border-radius: 999px; backdrop-filter: blur(4px);
}
.ct-hint i { color: var(--aes-red); }
.ct-toolbar { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 0.4rem; }
.ct-toolbar button {
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--line); background: rgba(255,255,255,0.9); color: var(--aes-maroon);
    display: inline-flex; align-items: center; justify-content: center; transition: var(--t);
}
.ct-toolbar button:hover { background: var(--aes-red); color: #fff; border-color: var(--aes-red); }
.ct-code {
    position: absolute; top: 12px; left: 14px; z-index: 3;
    font-weight: 800; font-size: 0.9rem; letter-spacing: 0.3px; color: var(--aes-maroon);
    background: rgba(255,255,255,0.85); border: 1px solid var(--line);
    padding: 0.32rem 0.7rem; border-radius: 8px;
}
.ct-loading {
    position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 0.95rem;
}
.ct-explode { max-width: 1120px; margin: 0 auto; }
.ct-sub { text-align: center; color: var(--aes-maroon); font-size: 1.2rem; font-weight: 800; margin: 0 0 1.5rem; }
.ct-explode-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center; }
.ct-figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.ct-figure img { width: 100%; display: block; }
.ct-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.4rem; }
.ct-parts li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; color: var(--ink); line-height: 1.35; }
.ct-no {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--aes-red); color: #fff; font-size: 0.72rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
@media (max-width: 820px) { .ct-explode-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ct-parts { grid-template-columns: 1fr; } }

/* ---------- Ứng dụng đa dạng: thẻ có ảnh minh họa ---------- */
.app-card { padding: 0; overflow: hidden; }
.app-media { position: relative; width: 100%; aspect-ratio: 400 / 205; background: #eef3f7; border-bottom: 1px solid var(--line); }
.app-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-ic {
    position: absolute; left: 16px; bottom: -20px; width: 44px; height: 44px; border-radius: 12px;
    background: var(--aes-red); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; box-shadow: var(--shadow); border: 2px solid #fff;
}
.app-card h3 { margin: 2rem 1.5rem 0.45rem; }
.app-card p { margin: 0 1.5rem 1.7rem; }

/* ---------- CFturbo: ảnh hero + eyebrow lớn + khoảng cách section ---------- */
.phero-media img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.38)); }

/* ---------- ABB hero: ảnh tách nền thả trực tiếp trên nền đỏ + căn chỉnh chữ ---------- */
body[data-page="cokhiabb"] .phero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; }
body[data-page="cokhiabb"] .phero-text { max-width: 660px; }
body[data-page="cokhiabb"] .phero-text h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.22; }
/* Dòng phụ trong headline: mô tả năng lực, cỡ nhỏ hơn cho hài hòa */
body[data-page="cokhiabb"] .phero-text h1 .h1-sub {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.62em;
    font-weight: 600;
    line-height: 1.4;
    color: #f6e2df;
    letter-spacing: 0;
}
body[data-page="cokhiabb"] .phero-text > p { max-width: 560px; margin-top: 1.1rem; }
/* Tiêu đề eyebrow các mục cỡ lớn 2.82rem, luôn nằm 1 hàng (đồng bộ style CFturbo) */
body[data-page="cokhiabb"] .section-head { max-width: 960px; }
body[data-page="cokhiabb"] .section-head .eyebrow {
    font-size: clamp(1.15rem, 4vw, 2.82rem);
    white-space: nowrap;
    letter-spacing: 0.5px;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}
/* Thu gọn khoảng cách giữa hero và mục "Được tin dùng…" */
body[data-page="cokhiabb"] #tin-dung { padding-top: 1.5rem; }
/* Đồng bộ màu tiêu đề: "Được tin dùng…" đỏ như eyebrow; "Tải catalogue…" đỏ đô như "Gửi yêu cầu…" */
body[data-page="cokhiabb"] #tin-dung .section-head h2 { color: var(--aes-red); }
body[data-page="cokhiabb"] #tai-lieu .section-head h2 { color: var(--aes-maroon); }
/* Mở rộng ảnh & thông điệp trong section "Được tin dùng…" */
body[data-page="cokhiabb"] .eu-case { grid-template-columns: minmax(380px, 470px) 1fr; gap: 2.2rem; padding: 2rem; }
body[data-page="cokhiabb"] .eu-case h3 { font-size: 1.5rem; }
body[data-page="cokhiabb"] .eu-case p { font-size: 1.06rem; line-height: 1.7; }
/* Đoạn văn mục R&D (bên trái) to hơn cho cân với ảnh render bên cạnh */
body[data-page="cokhiabb"] #rnd .split-text p { font-size: 1.2rem; line-height: 1.85; }
/* Ảnh render bên phải mục R&D: to & nổi bật */
body[data-page="cokhiabb"] #rnd .split { grid-template-columns: 1fr 1.62fr; gap: 2.6rem; }
body[data-page="cokhiabb"] #rnd .abb-fig--hero {
    background: #1e2228;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px -18px rgba(15,23,42,.55), 0 8px 22px -12px rgba(15,23,42,.4);
    transition: var(--t);
}
body[data-page="cokhiabb"] #rnd .abb-fig--hero:hover { transform: translateY(-4px) scale(1.01); }
@media (max-width: 760px) { body[data-page="cokhiabb"] #rnd .split { grid-template-columns: 1fr; gap: 1.6rem; } }
/* Thu ngắn khoảng trống phía trên trong mỗi section (chữ đầu sát mép nền hơn) */
body[data-page="cokhiabb"] .section { padding-top: 2.5rem; }
@media (max-width: 760px) { body[data-page="cokhiabb"] .eu-case { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.3rem; } }

/* ===== Dải "zig-zag" ảnh lớn xen kẽ 1 bên ảnh / 1 bên thông tin (thí điểm mục Sản xuất) ===== */
.feat-rows { display: flex; flex-direction: column; gap: 3.4rem; margin-top: 2rem; }
.feat-row { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: center; }
.feat-row.reverse { grid-template-columns: 1fr 2fr; }
.feat-row.reverse .feat-media { order: 2; }
.feat-media {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    background: #eef3f7;
}
.feat-media img, .feat-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--t); background: #0b0f14; }
.feat-media.contain { background: #fff; }
.feat-media.contain img { object-fit: contain; padding: 1.1rem; background: #fff; }
/* Khung dọc ôm sát tỉ lệ ảnh chân dung (không cắt, không viền thừa) */
.feat-media.portrait { aspect-ratio: 440 / 782; max-width: 420px; margin: 0 auto; }
.feat-media.portrait img { object-fit: cover; padding: 0; }
.feat-row:hover .feat-media img { transform: scale(1.03); }
.feat-ico {
    width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px; background: rgba(225,37,27,.08); color: var(--aes-red);
    font-size: 1.5rem; margin-bottom: 1rem;
}
.feat-text h3 { color: var(--aes-maroon); font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 800; margin: 0 0 .8rem; }
.feat-text p { color: var(--muted); font-size: 1.1rem; line-height: 1.8; margin: 0; }
@media (max-width: 820px) {
    .feat-rows { gap: 2.4rem; }
    .feat-row { grid-template-columns: 1fr; gap: 1.4rem; }
    .feat-row.reverse .feat-media { order: 0; }
}

/* ============================================================
   FULL-BLEED ZIG-ZAG — chỉ trang Gối đỡ trục AES (data-page="cokhiabb")
   Ảnh tràn sát mép màn hình 1 bên, chữ nằm cột có lề bên kia (giống ảnh mẫu).
   Kéo mỗi .feat-row ra sát viewport bằng âm margin = ĐÚNG padding của .container
   (khớp từng breakpoint) → không dùng 100vw nên không sinh thanh cuộn ngang.
   ============================================================ */
body[data-page="cokhiabb"] .feat-row {
    margin-left: -1rem;
    margin-right: -1rem;
    grid-template-columns: 1.06fr 1fr;   /* ảnh nhỉnh hơn chữ */
    gap: 0;
    align-items: center;                 /* KHÔNG stretch → ảnh giữ đúng tỉ lệ, không bị kéo méo */
    overflow: hidden;
}
body[data-page="cokhiabb"] .feat-row.reverse { grid-template-columns: 1fr 1.06fr; }
/* Ảnh: khung TỈ LỆ CỐ ĐỊNH (co giãn cân đối như trang Simerics), KHÔNG dùng vw để tránh phình khi zoom */
body[data-page="cokhiabb"] .feat-media {
    aspect-ratio: 16 / 10;
    min-height: 0;
    max-height: 520px;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
/* Bản vẽ kỹ thuật (contain): giữ nền trắng, tỉ lệ cố định */
body[data-page="cokhiabb"] .feat-media.contain { aspect-ratio: 16 / 10; max-height: 460px; min-height: 0; }
/* Khung ảnh TRỐNG (chưa có ảnh) — placeholder chờ bổ sung */
body[data-page="cokhiabb"] .feat-media--empty {
    display: flex; align-items: center; justify-content: center;
    background: #eef3f7;
}
body[data-page="cokhiabb"] .feat-ph { text-align: center; color: #94a3b8; padding: 1.4rem; }
body[data-page="cokhiabb"] .feat-ph i { font-size: 2.6rem; opacity: .55; display: block; margin-bottom: .6rem; }
body[data-page="cokhiabb"] .feat-ph span { font-size: .92rem; font-weight: 600; }
/* Ẩn icon vuông trước tiêu đề các khối feat (theo yêu cầu) */
body[data-page="cokhiabb"] .feat-ico { display: none; }
/* Ô ảnh chứng chỉ ISO (khối đầu mục QLCL): khớp tỉ lệ ảnh đã cắt viền, phóng to sát khung, bỏ padding */
body[data-page="cokhiabb"] #chat-luong .feat-row:first-child .feat-media.contain {
    aspect-ratio: 1208 / 830;
    max-height: 640px;
    background: #fff;
}
body[data-page="cokhiabb"] #chat-luong .feat-row:first-child .feat-media.contain img { padding: 0; }
/* Ảnh chứng chỉ: KHÔNG phóng to khi rê chuột */
body[data-page="cokhiabb"] #chat-luong .feat-row:first-child:hover .feat-media img { transform: none; }
/* Cột chữ: lề trong 2 bên để không dính mép + canh giữa theo chiều dọc */
body[data-page="cokhiabb"] .feat-text {
    align-self: center;
    padding: clamp(1.4rem, 2.4vw, 2.4rem) clamp(1.5rem, 4vw, 4.5rem);
}
/* Âm margin khớp padding .container ở từng breakpoint */
@media (min-width: 640px)  { body[data-page="cokhiabb"] .feat-row { margin-left: -2rem; margin-right: -2rem; } }
@media (min-width: 1024px) { body[data-page="cokhiabb"] .feat-row { margin-left: -4rem; margin-right: -4rem; } }
@media (min-width: 1600px) { body[data-page="cokhiabb"] .feat-row { margin-left: -6rem; margin-right: -6rem; } }
@media (min-width: 2200px) { body[data-page="cokhiabb"] .feat-row { margin-left: -9vw;  margin-right: -9vw;  } }
/* Mobile: về 1 cột, ảnh trên – chữ dưới, thu bleed lại cho gọn */
@media (max-width: 820px) {
    body[data-page="cokhiabb"] .feat-row { grid-template-columns: 1fr; gap: 0; }
    body[data-page="cokhiabb"] .feat-media,
    body[data-page="cokhiabb"] .feat-media.contain { aspect-ratio: 16 / 10; max-height: 320px; min-height: 0; }
    body[data-page="cokhiabb"] .feat-text { padding: 1.2rem 1.2rem .3rem; }
}
/* Ảnh thực tế phía trên card Hệ thống QLCL (khớp padding 1.5rem của .qms-card) */
.qms-card .card-media {
    margin: -1.5rem -1.5rem 1.1rem;
    height: 172px;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    background: #f2f5f8;
    border-bottom: 1px solid var(--line);
}
.qms-card .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ảnh render đã tách nền trong suốt — nổi trên nền hero với bóng đổ mềm, có quầng sáng nhẹ tôn sản phẩm */
body[data-page="cokhiabb"] .phero-media { position: relative; }
body[data-page="cokhiabb"] .phero-media::before {
    content: "";
    position: absolute;
    inset: 6% 4%;
    background: radial-gradient(60% 55% at 55% 45%, rgba(255,255,255,0.16), rgba(255,255,255,0) 72%);
    pointer-events: none;
}
body[data-page="cokhiabb"] .phero-media img {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 100%;
    max-height: 420px;          /* giữ hero gọn dù ảnh sản phẩm dạng đứng */
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 22px 34px rgba(0,0,0,0.45));
}
@media (max-width: 900px) {
    body[data-page="cokhiabb"] .phero-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    body[data-page="cokhiabb"] .phero-text { max-width: none; }
    body[data-page="cokhiabb"] .phero-media img { max-height: 340px; }
}

.eyebrow-lg { font-size: 2.82rem; letter-spacing: 0.5px; line-height: 1.1; margin-bottom: 0.5rem; }
/* Ẩn nhãn đỏ chữ hoa lớn (TỔNG QUAN, NĂNG LỰC...) trên các trang CFturbo */
.pg-cfturbo .eyebrow-lg { display: none; }
.pg-cfturbo .section { padding-top: 3rem; padding-bottom: 3rem; }
.pg-cfturbo .section-head { margin-bottom: 2rem; }
@media (max-width: 640px) { .eyebrow-lg { font-size: 1.9rem; } }

/* ---------- Trang Gối đỡ trục ABB ---------- */
.abb-decode { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; margin-top: 1.5rem; }
.abb-code { text-align: center; }
.abb-code-title { font-weight: 800; color: var(--aes-maroon); font-size: 1.15rem; margin-bottom: 1rem; }
.abb-chips { display: inline-flex; gap: 0.45rem; }
.abb-chip { min-width: 46px; padding: 0.5rem 0.7rem; border: 2px solid var(--aes-red); border-radius: 9px; font-weight: 800; color: var(--aes-red); font-size: 1.25rem; background: #fff; }
.abb-chip.sep { border: 0; color: var(--muted); align-self: center; padding: 0 0.1rem; }
.abb-leg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-top: 0.8rem; max-width: 560px; }
.abb-leg span { font-size: 0.72rem; color: var(--muted); text-align: center; line-height: 1.35; }
.abb-leg b { color: var(--aes-red); display: block; margin-top: 2px; }
/* ---------- Dải ảnh quá trình R&D (6 ô) ---------- */
.rnd-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
.rnd-shot {
    position: relative; margin: 0; aspect-ratio: 4 / 3;   /* tỉ lệ cố định — không phình khi zoom */
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow); background: #eef3f7;
    transition: var(--t);
}
.rnd-shot img, .rnd-shot video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0b0f14; }
.rnd-shot:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.rnd-shot--empty { border-style: dashed; box-shadow: none; }
.rnd-shot--empty:hover { transform: none; }
.rnd-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: #94a3b8; text-align: center; padding: 1rem; }
.rnd-ph i { font-size: 2.2rem; opacity: .55; }
.rnd-ph span { font-size: .85rem; font-weight: 600; line-height: 1.35; }
@media (max-width: 860px) { .rnd-gallery { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 520px) { .rnd-gallery { grid-template-columns: 1fr; } }

.abb-fig { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.abb-fig img, .abb-fig video { width: 100%; display: block; }
.var-media { aspect-ratio: 16 / 10; background: #f2f6f9; }
.var-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.var-spec { display: flex; gap: 0.5rem 1.2rem; flex-wrap: wrap; margin-top: 0.7rem; font-size: 0.84rem; color: var(--aes-maroon); font-weight: 600; }
.var-spec span { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.7rem; }

/* ---------- Menu: mỗi item 1 dòng, không xuống hàng ---------- */
.main-nav a { white-space: nowrap; }
@media (min-width: 901px) {
    .main-nav { gap: 0.05rem; }
    .main-nav a { padding: 0.5rem 0.58rem; font-size: 0.9rem; }
    .main-nav .nav-cta { margin-left: 0.3rem; }
    .lang-switch { margin-left: 0.5rem; }
}

/* ---------- Trang Gối đỡ trục ABB — Landing V2.0 ---------- */
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }
.hero-badges span { font-size: 0.8rem; color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 0.4rem 0.85rem; }
/* Social proof (EU) */
/* ---------- Dải ô ảnh lắp đặt (tĩnh) + bấm mở to (lightbox) ---------- */
.install-hint { color: var(--muted); font-size: .95rem; margin: .2rem 0 1rem; }
.install-hint i { color: var(--aes-red); margin-right: .35rem; }
.install-strip { display: flex; flex-wrap: wrap; gap: 1rem; }
.ins-cell {
    flex: 1 1 150px; max-width: 220px; aspect-ratio: 4 / 3; margin: 0; padding: 0;
    border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
    box-shadow: var(--shadow); background: #eef3f7; cursor: pointer; transition: var(--t);
}
.ins-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ins-cell--empty { display: flex; align-items: center; justify-content: center; color: #94a3b8; border-style: dashed; box-shadow: none; cursor: default; }
.ins-cell--empty i { font-size: 1.8rem; opacity: .5; }
.ins-cell--empty:hover { transform: none; box-shadow: none; }
@media (max-width: 560px) { .ins-cell { flex-basis: 44%; max-width: none; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,12,18,.9); display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .2s; }
.lightbox.open { display: flex; opacity: 1; }
.lightbox-img { max-width: 94vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox-close { position: absolute; top: 16px; right: 22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .15s; }
.lightbox-close:hover { background: rgba(255,255,255,.3); }

/* CFturbo: badge đối tác phân phối + quy trình thiết kế 4 bước */
.cf-partner { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.2rem; padding: 0.55rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.cf-partner img { height: 26px; width: auto; display: block; }
.cf-partner span { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.cf-partner b { color: var(--aes-red); }
/* CFturbo: khung video + dải số liệu (users worldwide, partner universities) */
.cf-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0b0f14; border: 1px solid var(--line); box-shadow: var(--shadow-lg); margin: 2.4rem 0 1.4rem; }
.cf-video iframe, .cf-video video, .cf-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.cf-video-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; color: #cbd5e1; text-align: center; padding: 1rem; }
.cf-video-ph i { font-size: 2.8rem; color: #fff; opacity: .9; }
.cf-video-ph span { font-size: 0.95rem; font-weight: 600; }
/* CFturbo: bảng module dạng tab (ảnh + mô tả + nút) */
.tab-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1.6rem 0; }
.mod-tab { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; }
.mod-tab-media { position: relative; border-radius: 12px; overflow: hidden; background: #f2f5f8; border: 1px solid var(--line); aspect-ratio: 16 / 10; }
.mod-tab-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Carousel 5 ảnh trong mỗi tab */
.mod-track { position: absolute; inset: 0; }
.mod-track img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.mod-track img.active { opacity: 1; }
/* Biến thể hiển thị trọn ảnh (nền trắng) — dùng cho ảnh kỹ thuật vuông */
.mod-tab-media--contain { background: #fff; }
.mod-tab-media--contain .mod-track img { object-fit: contain; padding: 1rem; }
.mod-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: var(--aes-maroon); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); z-index: 2; transition: var(--t); }
.mod-nav.prev { left: 10px; } .mod-nav.next { right: 10px; }
.mod-nav:hover { background: var(--aes-red); color: #fff; }
.mod-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; gap: 7px; justify-content: center; z-index: 2; }
.mod-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(15,23,42,.3); cursor: pointer; transition: var(--t); }
.mod-dots button.active { background: var(--aes-red); transform: scale(1.15); }
/* Carousel đứng riêng (trang đích module) */
.cf-solo-carousel { max-width: 960px; margin: 1.6rem auto 0; }
.cf-solo-carousel .mod-tab-media { box-shadow: var(--shadow-lg); }
/* Dải 3 thành phần (Roto · Vỏ xoắn · Stato) — nền đỏ AES */
.comp-band { background: linear-gradient(120deg, var(--aes-maroon-dk), var(--aes-red)); color: #fff; }
.comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.comp-item h3 { color: #fff; font-size: 1.5rem; margin: 0 0 0.7rem; }
.comp-item p { color: rgba(255,255,255,0.92); line-height: 1.75; margin: 0 0 1.2rem; }
.btn-light { border: 2px solid rgba(255,255,255,0.85); color: #fff; background: transparent; }
.btn-light:hover { background: #fff; color: var(--aes-red); border-color: #fff; }
@media (max-width: 820px) { .comp-grid { grid-template-columns: 1fr; gap: 1.8rem; } }
.mod-tab-text h3 { color: var(--aes-maroon); font-size: 1.3rem; margin: 0 0 0.8rem; }
.mod-tab-text p { color: var(--muted); line-height: 1.75; margin: 0 0 1.1rem; }
@media (max-width: 820px) { .mod-tab { grid-template-columns: 1fr; } }

.wf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
.wf-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.2rem 1.3rem; box-shadow: var(--shadow); transition: var(--t); }
.wf-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wf-num { width: 38px; height: 38px; border-radius: 50%; background: var(--aes-red); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 0.85rem; }
.wf-step h4 { color: var(--aes-maroon); margin: 0 0 0.4rem; font-size: 1.02rem; }
.wf-step p { color: var(--muted); font-size: 0.9rem; margin: 0; line-height: 1.6; }
@media (max-width: 900px) { .wf-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .wf-steps { grid-template-columns: 1fr; } }

.eu-logos { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.3rem; }
/* Thẻ logo khách hàng (Perfettibile…) — bấm mở website */
.eu-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem; text-decoration: none; padding: 1.1rem 1.7rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); transition: var(--t); }
.eu-logo:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.eu-logo img { height: 46px; width: auto; display: block; }
.eu-logo-cap { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.eu-logo-web { color: var(--aes-red); }
.eu-chip { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 1.3rem; font-weight: 700; color: var(--aes-maroon); background: #fff; box-shadow: var(--shadow); }
.eu-case { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow); }
.eu-case img { width: 100%; border-radius: 10px; display: block; }
.ph-note { font-size: 0.8rem; color: var(--muted); background: var(--bg-soft); border: 1px dashed color-mix(in srgb, var(--aes-gold) 45%, var(--line)); border-radius: 8px; padding: 0.55rem 0.85rem; margin-top: 1rem; }
.ph-note b { color: var(--aes-gold-dk); }
@media (max-width: 700px) { .eu-case { grid-template-columns: 1fr; } }
/* Quy trình 6 bước */
.proc-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8rem; margin-top: 1.3rem; }
.proc-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0 1rem; text-align: center; box-shadow: var(--shadow); overflow: hidden; }
/* Vùng ảnh minh họa đầu thẻ (4/3), có badge số bước ở góc */
.proc-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; margin: 0 0 0.8rem; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #eef3f7; overflow: hidden; cursor: pointer; }
.proc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--t); }
.proc-media:hover img { transform: scale(1.04); }
.proc-media--empty { display: flex; align-items: center; justify-content: center; color: #94a3b8; cursor: default; }
.proc-media--empty > i { font-size: 1.6rem; opacity: .5; }
.proc-num { position: absolute; top: 8px; left: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--aes-red); border: 1.5px solid var(--aes-red); font-weight: 800; font-size: 0.76rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.22); }
.proc-step h4 { font-size: 0.9rem; color: var(--aes-maroon); margin: 0 0 0.25rem; padding: 0 0.6rem; }
.proc-step span { display: block; font-size: 0.76rem; color: var(--muted); padding: 0 0.6rem; }
@media (max-width: 1100px) { .proc-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .proc-steps { grid-template-columns: repeat(2, 1fr); } }
/* QMS */
.qms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.qms-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; text-align: center; box-shadow: var(--shadow); }
.qms-card .ic { font-size: 2rem; color: var(--aes-red); margin-bottom: 0.6rem; }
.qms-card h4 { color: var(--aes-maroon); margin: 0 0 0.35rem; font-size: 1rem; }
.qms-card p { color: var(--muted); font-size: 0.85rem; margin: 0; line-height: 1.5; }
.qms-card.pending { border-style: dashed; }
.test-result { margin-top: 1.5rem; background: linear-gradient(120deg, rgba(225,37,27,0.06), rgba(245,163,0,0.06)); border: 1px solid var(--line); border-left: 4px solid var(--aes-red); border-radius: var(--radius); padding: 1.2rem 1.4rem; color: var(--ink); line-height: 1.6; }
@media (max-width: 820px) { .qms-grid { grid-template-columns: 1fr; } }
/* Form */
.abb-form { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.6rem; align-items: start; }
.abb-form .fcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.form-grid2 .full { grid-column: 1 / -1; }
.form-grid2 label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--aes-maroon); margin-bottom: 0.3rem; }
.form-grid2 input, .form-grid2 textarea, .form-grid2 select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.7rem; font-family: inherit; font-size: 0.9rem; background: #fff; color: var(--ink); }
.form-grid2 textarea { min-height: 92px; resize: vertical; }
.contact-lines { line-height: 2; color: var(--ink); }
.contact-lines a { color: var(--aes-red); font-weight: 600; }
@media (max-width: 820px) { .abb-form { grid-template-columns: 1fr; } }

/* ---------- Simerics: ẩn nhãn đỏ chữ hoa lớn ở section-head (trùng với h2 bên dưới) ---------- */
/* Chỉ giữ kicker nhỏ ở hero (.phero-text .eyebrow); bỏ nhãn to trùng tiêu đề trong các mục */
body[data-page="simerics"] .section-head .eyebrow { display: none; }
body[data-page="simerics"] .section { padding-top: 2.5rem; }
/* Section "Lợi ích" đã bỏ eyebrow -> thu gọn thêm khoảng trống với section trên */
body[data-page="simerics"] #loi-ich { padding-top: 1rem; }

/* ---------- About: eyebrow lớn 2.82rem + thu gọn khoảng trống + marquee logo ---------- */
body[data-page="about"] .split-text .eyebrow {
    font-size: clamp(1.5rem, 4.2vw, 2.82rem);
    letter-spacing: 0.3px;
    line-height: 1.12;
    margin-bottom: 0.7rem;
}
/* Thu gọn khoảng trắng giữa các section */
body[data-page="about"] .section { padding: 3rem 0; }
/* Hero trang "Về chúng tôi": ảnh nền full-bleed + overlay tối + blur cho chữ rõ */
body[data-page="about"] .page-hero {
    background: url("../images/about-hero.jpg") center 42% / cover no-repeat;
    padding: 8rem 0 7.5rem;
    min-height: 560px;
    display: flex;
    align-items: center;
}
body[data-page="about"] .page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
body[data-page="about"] .page-hero p { font-size: 1.12rem; max-width: 720px; }
body[data-page="about"] .page-hero::before {
    z-index: 0;
    background: linear-gradient(115deg, rgba(18,7,7,0.80) 0%, rgba(30,10,9,0.58) 52%, rgba(30,10,9,0.42) 100%);
}
body[data-page="about"] .page-hero .container { z-index: 1; }
body[data-page="about"] .page-hero p { color: #f6e7e5; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
body[data-page="about"] .page-hero h1 { text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
@media (max-width: 700px) { body[data-page="about"] .page-hero { padding: 5rem 0 4.5rem; min-height: 420px; } }
body[data-page="about"] .section-head { margin-bottom: 1.9rem; }

/* Băng chuyền logo (marquee) */
.logo-marquee {
    position: relative;
    overflow: hidden;
    padding: 0.5rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.logo-track {
    display: flex;
    align-items: center;
    gap: 3.4rem;
    width: max-content;
    will-change: transform;
}
.logo-track--rtl { animation: mq-rtl 34s linear infinite; }
.logo-track--ltr { animation: mq-ltr 34s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.mq-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: 0 0.3rem;
}
/* height cố định (KHÔNG dùng max-height) để SVG chỉ có viewBox vẫn hiển thị đúng */
.mq-logo img {
    height: 44px;
    width: auto;
    object-fit: contain;
    filter: saturate(1.05);
    opacity: 1;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.mq-logo img.mq-emblem { height: 56px; }      /* logo trường dạng huy hiệu vuông/tròn */
.mq-logo img:hover { transform: scale(1.08); filter: saturate(1.15) drop-shadow(0 3px 8px rgba(0,0,0,0.14)); }
@keyframes mq-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes mq-ltr {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .logo-track { animation: none !important; transform: none !important; flex-wrap: wrap; justify-content: center; gap: 2rem 3rem; }
}
@media (max-width: 640px) {
    .logo-track { gap: 2.4rem; }
    .mq-logo { height: 50px; }
    .mq-logo img { height: 34px; }
    .mq-logo img.mq-emblem { height: 44px; }
}

/* ---------- Software (Tổng quan phần mềm): tiêu đề intro 1 hàng, thu gọn khoảng cách giữa các section ---------- */
body[data-page="software"] .section { padding-top: 3rem; padding-bottom: 3rem; }
body[data-page="software"] .section-head { margin-bottom: 1.9rem; }
/* Tiêu đề "Bộ công cụ trọn vòng đời phát triển sản phẩm" trên 1 hàng */
#sw-intro .section-head { max-width: 880px; }
#sw-intro .section-head h2 { white-space: nowrap; }
@media (max-width: 900px) {
    #sw-intro .section-head h2 { white-space: normal; }
}

/* ---------- Trang chủ: tiêu đề section 1 dòng trên desktop ---------- */
@media (min-width: 900px) {
    body[data-page="home"] .section-head { max-width: 1100px; }
    body[data-page="home"] .section-head h2,
    body[data-page="home"] .cta-band h2 { white-space: nowrap; }
    body[data-page="home"] .section-head p { max-width: 720px; margin-left: auto; margin-right: auto; }
}

/* ---------- Trang chủ: ẩn các nhãn nhỏ (eyebrow) phía trên tiêu đề ---------- */
body[data-page="home"] .eyebrow { display: none; }

/* ---------- Ảnh minh họa cho eco-band (trang chủ) ---------- */
.eco-img {
    width: 100%; aspect-ratio: 4 / 3; max-height: 320px;
    object-fit: cover; display: block;
    border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow);
    background: #f2f6f9;
}

/* ---------- Tin tức (danh sách + bài viết) ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; }
/* Phân trang Tin tức */
.news-pager { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2.4rem; flex-wrap: wrap; }
.news-pager button { min-width: 40px; height: 40px; padding: 0 0.5rem; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: var(--t); display: inline-flex; align-items: center; justify-content: center; }
.news-pager button:hover:not(:disabled):not(.active) { border-color: var(--aes-red); color: var(--aes-red); }
.news-pager button.active { background: var(--aes-red); border-color: var(--aes-red); color: #fff; cursor: default; }
.news-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.news-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); transition: var(--t); display:flex; flex-direction:column; }
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.news-thumb { aspect-ratio:16/9; width:100%; object-fit:cover; background:#eef2f6; display:block; }
.news-body { padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.news-cat { align-self:flex-start; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--aes-red); background:rgba(225,37,27,.08); padding:.2rem .6rem; border-radius:999px; margin-bottom:.6rem; }
.news-card h3 { color:var(--aes-maroon); font-size:1.08rem; line-height:1.35; margin:0 0 .5rem; }
.news-card p { color:var(--muted); font-size:.92rem; margin:0 0 1rem; flex:1; }
.news-meta { display:flex; align-items:center; gap:.8rem; font-size:.8rem; color:var(--muted); }
.news-meta .rm { margin-left:auto; color:var(--aes-red); font-weight:600; }
.news-empty { text-align:center; color:var(--muted); padding:3rem 1rem; }
.article { max-width:800px; margin:0 auto; }
.article-back { display:inline-flex; align-items:center; gap:.4rem; color:var(--aes-red); font-weight:600; font-size:.9rem; margin-bottom:1.2rem; }
.article-hero { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:1.6rem; }
.article h1 { color:var(--aes-maroon); font-size:clamp(1.6rem,3.2vw,2.2rem); margin:0 0 .6rem; line-height:1.25; }
.article-meta { color:var(--muted); font-size:.9rem; margin-bottom:1.6rem; display:flex; gap:1rem; flex-wrap:wrap; }
.article-content { color:var(--ink); line-height:1.8; font-size:1.02rem; }
.article-content h2 { color:var(--aes-maroon); font-size:1.4rem; margin:1.6rem 0 .6rem; }
.article-content h3 { color:var(--aes-maroon); font-size:1.15rem; margin:1.2rem 0 .5rem; }
.article-content p { margin:.9rem 0; }
.article-content ul { padding-left:1.4rem; list-style:disc; margin:.9rem 0; }
.article-content img { max-width:100%; border-radius:8px; margin:1rem 0; }

/* ===== HERO slide 1 (trang chủ): chữ dàn rộng bên trái + video mô phỏng bên phải ===== */
.hero-slide.s-video .container.hero-split,
.hero-slide.s-bgvideo .container.hero-split {
    /* giữ khung full-width như toàn site → chữ dàn rộng theo màn hình */
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center;
}
.hero-slide.s-video .hero-content, .hero-slide.s-bgvideo .hero-content { max-width: none; }
.hero-slide.s-video .hero-content p, .hero-slide.s-bgvideo .hero-content p { max-width: none; }
.hero-video-frame {
    position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
    background: #fff; border: 4px solid rgba(255,255,255,0.9);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(245,163,0,0.35);
}
.hero-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 960px) {
    .hero-slide.s-video .container.hero-split,
    .hero-slide.s-bgvideo .container.hero-split { grid-template-columns: 1fr; gap: 2rem; }
    .hero-split-spacer { display: none; }
    .hero-video-frame { max-width: 640px; }
}

/* ===== HERO slide 2 (trang chủ): video gối đỡ trục quạt phủ kín hero ===== */
.hero-slide.s-bgvideo .slide-video {
    position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 60% 50%; pointer-events: none;
}
.hero-slide.s-bgvideo .slide-video-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(900px 500px at 15% 110%, rgba(245,163,0,0.22), transparent 55%),
        linear-gradient(90deg, rgba(42,15,14,0.94) 0%, rgba(110,22,20,0.80) 38%, rgba(140,25,20,0.35) 68%, rgba(140,25,20,0.10) 100%);
}
.hero-slide.s-bgvideo h1 { text-shadow: 0 2px 14px rgba(0,0,0,0.4); }
.hero-slide.s-bgvideo p { text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
@media (max-width: 900px) {
    .hero-slide.s-bgvideo .slide-video-overlay {
        background: linear-gradient(180deg, rgba(42,15,14,0.85), rgba(110,22,20,0.72));
    }
}

/* HERO slide 3 (AVEVA): ảnh hội thảo làm nền — lấy phần màn chiếu + diễn giả bên phải */
.hero-slide.s-aveva .slide-video { object-position: 70% 35%; }

/* HERO slide 1 (Simerics): video CFD nền trắng đã lật ngang → cánh quạt bên phải; overlay đậm hơn ở giữa để chữ nổi */
.hero-slide.s-simerics .slide-video { object-position: 100% 50%; }
.hero-slide.s-simerics .slide-video-overlay {
    background:
        radial-gradient(1000px 500px at 82% -10%, rgba(245,163,0,0.22), transparent 60%),
        linear-gradient(90deg, rgba(42,15,14,0.95) 0%, rgba(110,22,20,0.86) 40%, rgba(140,25,20,0.30) 66%, rgba(140,25,20,0.05) 100%);
}

/* CFturbo → Simerics: khối điều hướng sang mô phỏng */
.cf-sim-flow { align-items: center; }
.cf-sim-flow .split-media.media-contain img { padding: 0.6rem; }
.cf-sim-logo { display: block; height: 44px; width: auto; margin: 1.6rem 0 0.4rem; }
.cf-sim-actions { margin-top: 1.6rem; }

/* CFturbo — Quy trình 4 bước: list dọc bên trái + sơ đồ tích hợp bên phải */
.wf-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.4rem; align-items: center; margin-top: 1.6rem; }
.wf-steps.wf-steps--list { grid-template-columns: 1fr; gap: 0.9rem; margin-top: 0; }
.wf-steps--list .wf-step { display: grid; grid-template-columns: 38px 1fr; column-gap: 1rem; padding: 1.1rem 1.3rem; }
.wf-steps--list .wf-step:hover { transform: translateX(4px); }
.wf-steps--list .wf-num { grid-row: 1 / span 2; margin-bottom: 0; }
.wf-figure { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem; }
.wf-figure img { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
@media (max-width: 900px) {
    .wf-split { grid-template-columns: 1fr; }
    .wf-steps.wf-steps--list { grid-template-columns: 1fr; }
}

/* Simerics — PumpLinx (slide 6–8): 2 hàng video + list, lưới ứng dụng */
.pl-row + .pl-row { margin-top: 3.2rem; }
.pl-row .split-text h3 { color: var(--aes-maroon); font-size: 1.35rem; margin-bottom: 0.4rem; }
.pl-row .check-list { margin-bottom: 0; }
.pl-apps-title { color: var(--aes-maroon); font-size: 1.35rem; text-align: center; margin: 3.4rem 0 1.4rem; }
.pl-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pl-app {
    display: flex; align-items: center; gap: 0.8rem; background: #fff; border: 1px solid var(--line);
    border-left: 4px solid var(--aes-red); border-radius: 10px; padding: 1rem 1.1rem;
    font-weight: 600; font-size: 0.92rem; color: var(--ink); box-shadow: var(--shadow); transition: var(--t);
}
.pl-app:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pl-app-num { font-weight: 800; color: var(--aes-gold); font-size: 1.05rem; flex-shrink: 0; }
@media (max-width: 1000px) { .pl-apps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pl-apps { grid-template-columns: 1fr; } }

/* Simerics — Kết nối CFturbo (slide 29): 4 bước + ảnh slide toàn chiều rộng */
.link-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.8rem; }
.link-step { display: flex; gap: 0.8rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.link-step-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--aes-red); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.link-step h4 { color: var(--aes-maroon); font-size: 0.98rem; margin: 0 0 0.2rem; }
.link-step p { color: var(--muted); font-size: 0.86rem; margin: 0; line-height: 1.5; }
.slide-figure { display: block; max-width: 1000px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); cursor: zoom-in; }
.slide-figure img { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) { .link-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .link-steps { grid-template-columns: 1fr; } }

/* ---------- Simerics: chia sẻ khách hàng (HMS Russia) ---------- */
.tm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1000px; margin: 0 auto 1.6rem; }
.tm-stat { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--aes-red); border-radius: var(--radius); padding: 1.1rem 1rem; text-align: center; box-shadow: var(--shadow); }
.tm-stat strong { display: block; font-size: 1.9rem; font-weight: 800; color: var(--aes-red); line-height: 1.1; margin-bottom: 0.35rem; }
.tm-stat span { display: block; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
.tm-card { position: relative; max-width: 1000px; margin: 0 auto; background: var(--bg-soft); border: 1px solid var(--line); border-left: 5px solid var(--aes-red); border-radius: var(--radius); padding: 2.2rem 2.4rem 1.8rem; box-shadow: var(--shadow); }
.tm-mark { position: absolute; top: 1.2rem; right: 1.6rem; font-size: 2.6rem; color: var(--aes-gold); opacity: 0.35; }
.tm-card blockquote { margin: 0; padding: 0; border: 0; font-style: normal; text-wrap: pretty; }
.tm-card blockquote p { color: var(--muted); font-size: 1.02rem; line-height: 1.7; margin: 0 0 0.8rem; }
.tm-card blockquote .tm-lead { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.tm-card strong { color: var(--aes-maroon); }
.tm-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.tm-list li { position: relative; padding-left: 1.6rem; color: var(--muted); line-height: 1.6; }
.tm-list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--aes-gold); }
.tm-card figcaption { display: flex; align-items: center; gap: 0.8rem; justify-content: flex-end; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed #e3cfcb; }
.tm-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--aes-maroon); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.tm-card figcaption strong { display: block; color: var(--ink); font-size: 0.98rem; }
.tm-card figcaption em { display: block; font-style: normal; color: var(--aes-red); font-weight: 700; font-size: 0.9rem; }
@media (max-width: 900px) { .tm-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tm-stats { grid-template-columns: 1fr 1fr; } .tm-stat strong { font-size: 1.5rem; } .tm-card { padding: 1.6rem 1.2rem 1.3rem; } .tm-card figcaption { justify-content: flex-start; } }

/* ---------- CFturbo: khách hàng chia sẻ (video) ---------- */
.cust-video { align-items: center; }
.cust-video .split-media { min-height: 0; background: #000; }
.cust-video .split-media video { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; object-fit: contain; padding: 0; background: #000; }
.cust-video .split-text h3 { color: var(--aes-maroon); font-size: 1.35rem; margin-bottom: 0.6rem; }
.cust-video .check-list li { line-height: 1.6; }
.cust-video .check-list strong { color: var(--aes-maroon); }
.cust-by { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed #e3cfcb; }
.cust-by strong { display: block; color: var(--ink); font-size: 0.98rem; }
.cust-by em { display: block; font-style: normal; color: var(--aes-red); font-weight: 700; font-size: 0.9rem; }
.cust-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1rem 0 0.4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-size: 0.95rem; }
.cust-table thead th { background: var(--aes-maroon); color: #fff; text-align: left; font-weight: 700; padding: 0.7rem 1rem; font-size: 0.9rem; }
.cust-table tbody th, .cust-table tbody td { padding: 0.85rem 1rem; vertical-align: top; border-top: 1px solid var(--line); line-height: 1.55; text-align: left; }
.cust-table tbody tr:first-child th, .cust-table tbody tr:first-child td { border-top: 0; }
.cust-table tbody tr:nth-child(even) { background: var(--bg-soft); }
.cust-table tbody th { width: 34%; color: var(--aes-maroon); font-weight: 700; }
.cust-table tbody th i { color: var(--aes-red); width: 1.2em; margin-right: 0.3rem; }
.cust-table tbody td { color: var(--muted); }
@media (max-width: 560px) { .cust-table, .cust-table tbody, .cust-table tr, .cust-table th, .cust-table td { display: block; width: 100%; } .cust-table thead { display: none; } .cust-table tbody td { border-top: 0; padding-top: 0; } }

/* ---------- Lĩnh vực ứng dụng: danh sách xen kẽ ảnh – mô tả + trang con ---------- */
.lv-row { align-items: center; }
.lv-row + .lv-row { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.lv-row .split-media { display: block; transition: transform var(--t), box-shadow var(--t); }
.lv-row .split-media:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lv-row h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 800; margin-bottom: 0.6rem; }
.lv-row h3 a { color: var(--aes-maroon); }
.lv-row h3 a:hover { color: var(--aes-red); }
.lv-row .split-text p { margin-bottom: 1.2rem; }
.lv-hero p { max-width: 820px; }
.lv-step .split { align-items: center; }
.lv-step-tag { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 0.92rem; color: var(--aes-red); margin-bottom: 0.3rem; }
.lv-num { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; background: var(--aes-red); color: #fff; font-weight: 800; font-size: 0.85rem; }
.lv-related { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px dashed #e3cfcb; }
.lv-related-title { display: block; font-weight: 700; color: var(--ink); font-size: 0.92rem; margin-bottom: 0.6rem; }
.lv-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lv-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--aes-maroon); font-size: 0.86rem; font-weight: 600; transition: all var(--t); }
.lv-chip i { color: var(--aes-red); font-size: 0.8rem; }
.lv-chip:hover { border-color: var(--aes-red); background: var(--aes-red); color: #fff; }
.lv-chip:hover i { color: #fff; }
@media (max-width: 900px) { .lv-row + .lv-row { margin-top: 2.2rem; padding-top: 2.2rem; } }

/* ---------- Trang chủ: case study nổi bật (Phương Linh) + bài viết mới đồng bộ Tin tức ---------- */
.case-feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; margin-top: 2.2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.case-feature-media { display: block; min-height: 340px; background: #f3f5f8; }
.case-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.case-feature:hover .case-feature-media img { transform: scale(1.03); }
.case-feature-body { padding: 2rem 2.2rem; display: flex; flex-direction: column; }
.case-feature-body h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.3; margin: 0.6rem 0 0.7rem; }
.case-feature-body h3 a { color: var(--aes-maroon); }
.case-feature-body h3 a:hover { color: var(--aes-red); }
.case-feature-body > p { color: var(--muted); margin-bottom: 0.9rem; }
.case-feature-body .check-list { margin-bottom: 1rem; }
.case-feature-actions { margin-top: 0.4rem; }
.post-card h3 a { color: inherit; }
.post-card h3 a:hover { color: var(--aes-red); }
.post-card .post-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
a.post-thumb { text-decoration: none; }
@media (max-width: 900px) { .case-feature { grid-template-columns: 1fr; } .case-feature-media { min-height: 220px; } .case-feature-body { padding: 1.5rem 1.3rem; } }
.cust-video[id] { scroll-margin-top: calc(var(--hdr-h, 112px) + 70px); }

/* ---------- AVEVA: Ứng dụng chính (2 thẻ) + trang đích Hàng hải / Dầu khí ---------- */
.mod-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.mod-grid--2 .mod-card .card-media { height: 240px; }
@media (max-width: 680px) { .mod-grid--2 { grid-template-columns: 1fr; } .mod-grid--2 .mod-card .card-media { height: 190px; } }
/* Thách thức → Hệ quả */
.av-chal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.6rem; align-items: center; }
.av-chal-col h3 { color: var(--aes-maroon); font-size: 1.15rem; margin-bottom: .9rem; }
.av-chal-col ul { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.av-chal-col li { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--aes-red); border-radius: 10px; padding: .85rem 1rem; font-size: .93rem; line-height: 1.5; box-shadow: var(--shadow); }
.av-chal-col--out li { border-left-color: var(--aes-gold); }
.av-chal-arrow { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--aes-red), var(--aes-gold)); color: #fff; font-size: 1.4rem; box-shadow: var(--shadow); }
@media (max-width: 820px) { .av-chal { grid-template-columns: 1fr; } .av-chal-arrow { margin: 0 auto; transform: rotate(90deg); } }
/* Số thứ tự nguyên tắc */
.av-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--aes-maroon); color: #fff; font-weight: 800; margin-bottom: .9rem; }
/* Chip đặc điểm / logo chữ khách hàng */
.av-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.8rem; }
.av-chips span { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--ink); box-shadow: 0 4px 14px rgba(24,27,34,.06); }
.av-chips span i { color: var(--aes-red); }
/* Trích dẫn khách hàng trong case */
.av-quote { margin: .2rem 0 1rem; padding: .9rem 1.1rem; border-left: 4px solid var(--aes-gold); background: var(--bg-soft); border-radius: 0 10px 10px 0; font-style: italic; font-size: .93rem; line-height: 1.6; color: var(--ink); }
.av-quote cite { display: block; margin-top: .45rem; font-style: normal; font-weight: 600; font-size: .84rem; color: var(--aes-maroon); }
.case-feature + .case-feature { margin-top: 1.6rem; }
.case-feature.reverse .case-feature-media { order: 2; }
@media (max-width: 900px) { .case-feature.reverse .case-feature-media { order: 0; } }
.av-src { margin-top: 1rem; font-size: .8rem; color: #6b7280; text-align: center; }
.case-feature-media.pos-right img { object-position: 78% center; }
.lv-row-actions { margin-top: 1.1rem; }

/* ============ 04 · LĨNH VỰC ỨNG DỤNG — thẻ dẫn sang trang đích (trang chủ) ============ */
.sector-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.sector-card {
    flex: 0 1 calc((100% - 3 * 1.4rem) / 4);
    display: flex; flex-direction: column; color: inherit; text-decoration: none;
    background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--aes-red);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.sector-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-top-color: var(--aes-gold); }
.sector-img { display: block; aspect-ratio: 16 / 10; background: #fff; overflow: hidden; border-bottom: 1px solid var(--line); }
.sector-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.4s ease; }
.sector-card:hover .sector-img img { transform: scale(1.04); }
.sector-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.2rem 1.25rem; flex: 1; }
.sector-title { font-size: 1.08rem; font-weight: 700; color: var(--aes-maroon); }
.sector-desc { font-size: 0.92rem; line-height: 1.6; color: var(--muted); flex: 1; }
.sector-more { font-size: 0.9rem; font-weight: 700; color: var(--aes-red); display: inline-flex; align-items: center; gap: 0.4rem; }
.sector-card:hover .sector-more { color: var(--aes-maroon); }
@media (max-width: 1000px) { .sector-card { flex-basis: calc((100% - 1.4rem) / 2); } }
@media (max-width: 560px) { .sector-card { flex-basis: 100%; } }