/*
Theme Name: VSS
Description: Design and develop by Jdesign
Author: UX Themes / Jdesign
Template: flatsome
Version: 3.0
*/

/* Font theo design MAAC */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap&subset=vietnamese');

/* ==========================================================================
   MAAC 2026 — Trang chủ (theo Figma "Web Maac", node 6009-27)
   Từ đây trở xuống là CSS của trang chủ mới. Xoá cả block này là gỡ sạch.
   Ảnh nền + icon nằm ở: wp-content/themes/vss/img/maac/
   ========================================================================== */

/* --- Font Roboto cho toàn site (thay UTM Avo của theme cũ) --- */
body,
.nav > li > a,
h1, h2, h3, h4, h5, h6,
.heading-font,
.alt-font,
button, input, select, textarea,
.button {
    font-family: 'Roboto', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
}

/* Header MAAC đã dựng xong, xem khối "MAAC — Header" ở cuối file này. */

/* --- Biến màu theo design token của Figma --- */
.maac {
    --maac-primary: #1c4d7d;
    --maac-secondary: #1f7a7a;
    --maac-tertiary: #c2a262;
    --maac-teal: #006a6a;
    --maac-text: #2f3032;
    --maac-text-2: #5e5e60;
    --maac-line: #e5e5e6;
    --maac-dark: #00152a;
}

/* Container 1680px như design (site đang để 1380px) */
.maac .row:not(.row-collapse) {
    max-width: 1680px;
}

.maac p:last-child {
    margin-bottom: 0;
}

/* --- Chữ dùng chung --- */
.maac-eyebrow {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 1.28px;
    color: var(--maac-secondary);
    text-transform: uppercase;
    margin-bottom: 0;
}

.maac-h2 {
    font-size: 40px;
    line-height: 1.4;
    letter-spacing: -1.12px;
    color: var(--maac-text);
    margin: 0;
}

.maac-head--center {
    text-align: center;
    margin-bottom: 64px;
}

/* --- Icon: file SVG export từ Figma, đường dẫn tương đối so với style.css --- */
.maac-ico {
    display: block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: none;
}

.maac-ico--quy-tac    { background-image: url('img/maac/ico-quy-tac.svg'); }
.maac-ico--dieu-khoan { background-image: url('img/maac/ico-dieu-khoan.svg'); }
.maac-ico--bieu-phi   { background-image: url('img/maac/ico-bieu-phi.svg'); }
.maac-ico--danh-sach  { background-image: url('img/maac/ico-danh-sach.svg'); }
.maac-ico--nhanh-chong{ background-image: url('img/maac/ico-nhanh-chong.svg'); }
.maac-ico--bao-mat    { background-image: url('img/maac/ico-bao-mat.svg'); }
.maac-ico--ma         { background-image: url('img/maac/ico-ma.svg'); }
.maac-ico--quoc-te    { background-image: url('img/maac/ico-quoc-te.svg'); }
.maac-ico--linh-hoat  { background-image: url('img/maac/ico-linh-hoat.svg'); }
.maac-ico--thi-hanh   { background-image: url('img/maac/ico-thi-hanh.svg'); }
.maac-ico--nop-don    { background-image: url('img/maac/ico-nop-don.svg'); }
.maac-ico--hoi-dong   { background-image: url('img/maac/ico-hoi-dong.svg'); }
.maac-ico--phien-hop  { background-image: url('img/maac/ico-phien-hop.svg'); }
.maac-ico--phan-quyet { background-image: url('img/maac/ico-phan-quyet.svg'); }

/* ---------------------------------------------------------------- HERO -- */
.maac-hero .maac-eyebrow {
    margin-bottom: 8px;
}

.maac-hero__title {
    font-size: 56px;
    font-weight: 700 !important;
    line-height: 1.4;
    letter-spacing: -1.12px;
    color: var(--maac-text);
    margin: 0 0 24px;
}

.maac-hero__title span {
    color: var(--maac-secondary);
}

.maac-hero__desc {
    font-size: 18px;
    line-height: 1.6;
    color: var(--maac-text);
    margin: 0 0 32px;
    max-width: 686px;
}

.maac-hero__media .col-inner {
    border-radius: 12px;
    overflow: hidden;
    max-width: 828px;      /* đúng bề ngang ảnh trong design */
    margin-left: auto;
}

.maac-hero__media img {
    width: 100%;
    aspect-ratio: 828 / 433;
    object-fit: cover;
}

/* Nút chính */
.maac .maac-btn.button {
    height: 56px;
    line-height: 56px;
    padding: 0 16px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 4px;
    color: #fff;
    min-width: 184px;
    /* !important vì theme đang set màu nút bằng .button.primary */
    background-color: var(--maac-primary) !important;
    border-color: var(--maac-primary) !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.maac .maac-btn.button span {
    background-image: none !important;
}

.maac .maac-btn.button:hover {
    background-color: #16406a !important;
    border-color: #16406a !important;
}

.maac .maac-btn--teal.button {
    height: 48px;
    line-height: 48px;
    padding: 0 32px;
    border-radius: 8px;
    font-weight: 700;
    min-width: 0;
    background-color: var(--maac-teal) !important;
    border-color: var(--maac-teal) !important;
}

.maac .maac-btn--teal.button:hover {
    background-color: #005757 !important;
    border-color: #005757 !important;
}

/* --------------------------------------------------- THANH 4 SHORTCUT -- */
.maac-quick {
    background-color: var(--maac-primary);
}

.maac-quick .col {
    padding-bottom: 0;
}

.maac-quick__item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.maac-quick__ico {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex: none;
}

.maac-quick__item strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
}

.maac-quick__item em {
    display: block;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.6;
    color: #95adcd;
}

a.maac-quick__item:hover strong {
    text-decoration: underline;
}

/* ------------------------------------------- TẠI SAO CHỌN CHÚNG TÔI ---- */
.maac-bento {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}

.maac-bento__left {
    width: 402px;
    flex: none;
}

.maac-bento__right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.maac-bento__row {
    display: flex;
    gap: 24px;
}

.maac-card {
    background: #fff;
    border: 1px solid var(--maac-line);
    border-radius: 12px;
    padding: 33px;
    flex: 1;
    min-width: 0;
}

.maac-card__ico {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgba(31, 122, 122, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.maac-card h3 {
    font-size: 20px;
    line-height: 1.6;
    color: var(--maac-text);
    margin: 0 0 12px;
}

.maac-card p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--maac-text-2);
    margin: 0;
}

/* Card 1 cao, có ảnh nền phủ gradient trắng */
.maac-card--tall {
    height: 520px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: #d1cfce;
}

.maac-card--tall::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('img/maac/bg-card1.jpg') center 32% / cover no-repeat;
}

.maac-card--tall::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #fff 34%, rgba(255, 255, 255, 0) 46%);
}

.maac-card--tall > * {
    position: relative;
    z-index: 1;
}

.maac-bento__row--3 .maac-card,
.maac-bento__row--2 .maac-card {
    height: 248px;
}

/* --------------------------------------------------------- QUY TRÌNH -- */
.maac-process {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(69deg, #1d467e 0%, #265786 100%);
}

.maac-process::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('img/maac/bg-quy-trinh.jpg') center / cover no-repeat;
    opacity: .18;
}

.maac-process .row {
    position: relative;
    z-index: 1;
}

.maac-process .maac-h2 {
    color: #fff;
}

.maac-process__desc {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    color: #fff;
    margin: 24px 0 0;
    max-width: 683px;
}

.maac-tabs {
    display: flex;
    gap: 19px;
    margin-top: 24px;
    max-width: 686px;
}

.maac-tab {
    flex: 1;
    text-align: center;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: #fff;
}

.maac-tab:hover {
    color: #fff;
    opacity: .9;
}

.maac-tab--s { background: var(--maac-secondary); }
.maac-tab--t { background: var(--maac-tertiary); }

.maac-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.maac-steps .maac-card {
    background: #154d86;
    border-color: rgba(15, 42, 68, .3);
}

.maac-steps .maac-card__ico {
    background: #fff;
}

.maac-steps .maac-card h3,
.maac-steps .maac-card p {
    color: #fff;
}

/* ---------------------------------------------------------- ĐỘI NGŨ -- */
/* Lưới do shortcode [maac_experts] sinh ra, dữ liệu từ post type 'speaker' */
.maac-experts {
    display: grid;
    grid-template-columns: repeat(var(--maac-experts-cols, 4), 1fr);
    gap: 24px;
}

.maac-expert {
    background: #fff;
    border: 1px solid var(--maac-line);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.maac-expert__photo {
    display: block;
}

.maac-expert__photo img {
    width: 100%;
    height: 302px;
    object-fit: cover;
    display: block;
}

.maac-experts__empty {
    text-align: center;
    color: var(--maac-text-2);
    padding: 40px 0;
}

.maac-arb__body {
    padding: 16px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.maac-arb__name a {
    color: inherit;
}

.maac-arb__name a:hover {
    color: var(--maac-secondary);
}

.maac-arb__name {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--maac-dark);
    margin: 0;
}

/* Chức vụ: tối đa 1 dòng, dài hơn thì cắt và thêm … */
.maac-arb__role {
    font-size: 16px;
    line-height: 1.6;
    color: var(--maac-text-2);
    margin: 4px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lĩnh vực: tối đa 2 dòng */
.maac-arb__field {
    font-size: 16px;
    line-height: 1.6;
    color: var(--maac-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.maac-arb__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.maac-arb__tags span {
    background: rgba(31, 122, 122, .1);
    color: var(--maac-secondary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    padding: 4px 8px;
    border-radius: 8px;
}

/* ------------------------------------------------------- TÀI NGUYÊN -- */
.maac-resources {
    background-color: #eceef1;
}

.maac-resources .maac-h2 {
    color: var(--maac-dark);
    line-height: 48px;
}

.maac-resources__desc {
    font-size: 16px;
    line-height: 1.6;
    color: #43474d;
    margin: 16px 0 0;
}

.maac-files {
    margin-top: 33px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* wpautop chèn <br> giữa các thẻ <a> trong nội dung UX Builder. Trong flex
   container mỗi <br> thành một flex item, cộng thêm gap 16px + chiều cao dòng
   -> khoảng cách phồng lên ~60px và item cuối tràn xuống dưới đáy ảnh. */
.maac-files br {
    display: none;
}

.maac-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid #c3c6ce;
    border-radius: 8px;
    padding: 17px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #191c1e;
}

.maac-file:hover {
    color: var(--maac-teal);
    border-color: var(--maac-teal);
}

.maac-file__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.maac-file__ico {
    width: 22px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: none;
}

.maac-file__ico--pdf { background-image: url('img/maac/ico-file-pdf.svg'); }
.maac-file__ico--xls { background-image: url('img/maac/ico-file-xls.svg'); }
.maac-file__ico--doc { background-image: url('img/maac/ico-file-doc.svg'); }

.maac-file__dl {
    width: 16px;
    height: 16px;
    background: url('img/maac/ico-download.svg') center / contain no-repeat;
    flex: none;
}

/* Row của Flatsome có v_align="middle" nên .col bị align-self:center và không
   cao bằng cột trái -> khối ảnh hụt vài chục px, danh sách file nhô xuống dưới.
   Ép stretch để hai cột luôn cao bằng nhau. */
.maac-resources .row.align-middle > .col,
.maac-resources .row > .col {
    align-self: stretch;
}

.maac-resources .col,
.maac-resources .col-inner {
    display: flex;
    flex-direction: column;
}

.maac-promo {
    position: relative;
    overflow: hidden;
    flex: 1;
    min-height: 381px;
    border-radius: 12px;
    background-color: var(--maac-primary);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.maac-promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('img/maac/bg-tai-nguyen.jpg') center / cover no-repeat;
    opacity: .5;
}

.maac-promo > * {
    position: relative;
    z-index: 1;
}

.maac-promo h3 {
    font-size: 16px;
    font-weight: 400 !important;
    line-height: 24px;
    color: #fff;
    margin: 0 0 16px;
}

.maac-promo p {
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    opacity: .8;
    margin: 0 0 32px;
}

.maac-promo .maac-btn--teal {
    align-self: flex-start;
}

/* ----------------------------------------------------------- TIN TỨC -- */
.maac-news .box-text {
    padding: 12px 16px 0;
}

/* Design để ngày nằm TRÊN tiêu đề, Flatsome mặc định đặt dưới -> đảo bằng flex */
.maac-news .blog-post-inner {
    display: flex;
    flex-direction: column;
}

.maac-news .post-item .post-meta {
    order: -1;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: var(--maac-teal);
    opacity: 1 !important;
    margin: 0 0 4px;
}

.maac-news .post-item h5.post-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--maac-text);
    margin: 0;
}

.maac-news .post-item .from_the_blog_excerpt {
    font-size: 16px;
    line-height: 1.6;
    color: var(--maac-text-2);
    margin: 12px 0 0;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.maac-news .post-item .is-divider,
.maac-news .post-item .badge {
    display: none;
}

.maac-news .post-item .box-image img {
    aspect-ratio: 402 / 246;
    object-fit: cover;
}

/* --------------------------------------------------- CTA + FORM CUỐI -- */
.maac-cta {
    position: relative;
    overflow: hidden;
    background-color: var(--maac-dark);
}

.maac-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('img/maac/bg-cta.jpg') left center / auto 100% no-repeat;
    opacity: .2;
}

.maac-cta .row {
    position: relative;
    z-index: 1;
}

.maac-cta__title {
    font-size: 56px;
    font-weight: 700 !important;
    line-height: 1.2;
    letter-spacing: -1.12px;
    color: #fff;
    margin: 0 0 32px;
    max-width: 804px;
}

.maac-contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.maac-contact li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    list-style: none;
    margin: 0;
}

.maac-contact i {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: none;
}

.maac-contact .i-map   { background-image: url('img/maac/ico-map.svg'); }
.maac-contact .i-phone { background-image: url('img/maac/ico-phone.svg'); }
.maac-contact .i-mail  { background-image: url('img/maac/ico-mail.svg'); }

.maac-form {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

.maac-form__row {
    display: flex;
    gap: 16px;
}

.maac-form__field {
    flex: 1;
    min-width: 0;
    margin-bottom: 16px;
}

.maac-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: var(--maac-dark);
    margin-bottom: 5px;
}

.maac-form input[type="text"],
.maac-form input[type="email"],
.maac-form input[type="tel"],
.maac-form textarea {
    width: 100%;
    margin: 0;
    padding: 15px 17px;
    height: auto;
    font-size: 16px;
    color: var(--maac-text);
    background: #fff;
    border: 1px solid var(--maac-line);
    border-radius: 8px;
    box-shadow: none;
}

.maac-form textarea {
    height: 122px;
    resize: vertical;
}

.maac-form input::placeholder,
.maac-form textarea::placeholder {
    color: #ababad;
}

.maac-form button {
    width: 100%;
    margin: 0;
    padding: 16px;
    height: auto;
    line-height: 24px;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 8px;
    background: var(--maac-teal);
    color: #fff;
    border: 0;
}

.maac-form button:hover {
    background: #005757;
}

/* ------------------------------------------------------- RESPONSIVE -- */
/* ------------------------------------- HERO: hai cột cao bằng nhau ---------
   Trước đây ảnh khoá aspect-ratio 828/433 nên chiều cao ảnh và chiều cao khối
   chữ là hai con số độc lập; .row.align-middle chỉ căn giữa nên mép trên/dưới
   hai bên luôn lệch. Giờ để khối chữ quyết định chiều cao hàng, ảnh giãn hết
   chiều cao cột và cắt bằng object-fit -> mép trên và mép dưới trùng khít.
   Chỉ áp khi còn 2 cột; từ 1200px xuống đã xếp 2 hàng nên ảnh về lại tỷ lệ. */
@media (min-width: 1201px) {
    .maac-hero .row {
        align-items: stretch;
    }

    /* Thắng align-self: center mà .row.align-middle của Flatsome đặt lên cột */
    .maac-hero .row > .col {
        align-self: stretch;
        display: flex;
    }

    .maac-hero .row > .col > .col-inner {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Nối chuỗi giãn qua đúng bọc ảnh của Flatsome: .col-inner > .img > .img-inner */
    .maac-hero__media .col-inner,
    .maac-hero__media .img,
    .maac-hero__media .img-inner {
        flex: 1 1 auto;
        min-height: 0;
    }

    .maac-hero__media .col-inner,
    .maac-hero__media .img {
        display: flex;
        flex-direction: column;
    }

    .maac-hero__media .img-inner {
        position: relative;
    }

    /* Ảnh absolute nên không góp chiều cao: chiều cao hàng do khối chữ quyết
       định, ảnh phủ đúng khoảng đó và tự cắt bằng object-fit. */
    .maac-hero__media img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        display: block;
    }

    /* Tài nguyên & Biểu mẫu: thẻ promo giữ đúng 381px của design nên cột trái
       thường hụt ~21px ở đáy. Dồn khoảng trống còn lại vào giữa mô tả và danh
       sách file để mép dưới item cuối trùng mép dưới thẻ promo. margin auto tự
       về 0 khi không còn khoảng trống nên khoảng cách 33px gốc vẫn nguyên. */
    .maac-resources__desc {
        margin-bottom: auto;
    }
}

/* --------------------------------- HERO: dải 1201-1560px (còn 2 cột) -------
   Cột 5/7 làm cột chữ hẹp dần (644px -> 500px) trong khi tiêu đề vẫn 56px,
   nên tiêu đề vỡ 4 dòng và khối chữ cao hơn ảnh tới 139px -> hai bên lệch nhau.
   Hạ cỡ chữ + thu line-height theo từng bậc để tiêu đề giữ 3 dòng và chiều cao
   khối chữ xấp xỉ ảnh. Chỉ áp trong dải này; dưới 1200px đã xuống 2 hàng nên
   tiêu đề lấy lại cỡ lớn. */
@media (min-width: 1201px) and (max-width: 1575px) {
    .maac-hero__title {
        font-size: 46px;
        line-height: 1.32;
        letter-spacing: -0.8px;
        margin-bottom: 24px;
    }

    .maac-hero__desc {
        font-size: 18px;
        margin-bottom: 32px;
    }
}

@media (min-width: 1201px) and (max-width: 1340px) {
    .maac-hero__title {
        font-size: 38px;
        line-height: 1.25;
    }

    .maac-hero__desc {
        font-size: 16px;
        margin-bottom: 24px;
    }
}

/* ------------------------------------------- HERO: xuống 2 hàng sớm --------
   Cột 5/7 của Flatsome giữ nguyên tới 550px, nên ở desktop nhỏ cột chữ bị bóp
   còn ~370px trong khi tiêu đề 44px -> vỡ thành 4 dòng. Cho xuống 2 hàng từ
   1200px, và khi đã 2 hàng thì chữ + nút rộng bằng đúng ảnh bên dưới. */
@media (max-width: 1200px) {
    .maac-hero .row {
        flex-direction: column;
    }

    .maac-hero .maac-hero__text,
    .maac-hero .maac-hero__media {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Bỏ giới hạn 686px để chữ chạy hết bề ngang bằng ảnh */
    .maac-hero__desc {
        max-width: none;
    }

    /* Ảnh thôi không neo mép phải nữa, dùng hết bề ngang cột */
    .maac-hero__media .col-inner {
        max-width: 100%;
        margin-left: 0;
    }

    .maac-hero__text {
        padding-bottom: 32px;
    }

    /* Tài nguyên & Biểu mẫu: xuống 2 hàng cùng mốc, nội dung rộng bằng ảnh */
    .maac-resources .row {
        flex-direction: column;
    }

    .maac-resources .row > .col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .maac-resources .row > .col:first-child {
        padding-bottom: 32px;
    }
}

@media (max-width: 1400px) {
    .maac-cta__title { font-size: 44px; }

    .maac-bento__left { width: 320px; }
}

@media (max-width: 1024px) {
    .maac-bento { flex-direction: column; align-items: stretch; }
    .maac-bento__left { width: 100%; }
    .maac-card--tall { height: 380px; }
    .maac-bento__row { flex-wrap: wrap; }
    .maac-bento__row .maac-card { flex: 1 1 260px; }
    .maac-steps { grid-template-columns: 1fr; }
    .maac-experts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 849px) {
    .maac-hero__title,
    .maac-cta__title { font-size: 32px; }

    .maac-h2 { font-size: 28px; }
    .maac-head--center { margin-bottom: 32px; }
    .maac-quick__item { margin-bottom: 20px; }
    .maac-bento__row { flex-direction: column; }
    .maac-bento__row--3 .maac-card,
    .maac-bento__row--2 .maac-card { height: auto; }
    .maac-tabs { flex-direction: column; }
    .maac-experts { grid-template-columns: 1fr; }
    .maac-form { padding: 20px; }
    .maac-form__row { flex-direction: column; gap: 0; }
    .maac-promo { padding: 24px; }
}


/* ==========================================================================
   MAAC — Footer (Figma node 6119-453), nội dung nằm ở UX Block "Footer việt"
   ========================================================================== */

.maac-footer {
    background-color: var(--maac-primary);
    border-top: 1px solid #0f2a44;
}

.maac-footer .col {
    padding-bottom: 0;
}

.maac-footer h4 {
    font-size: 16px;
    font-weight: 700 !important;
    line-height: 24px;
    color: #fff;
    margin: 0 0 16px;
}

.maac-footer__logo img {
    width: auto;
    max-width: 100px;
    height: 57px;
    object-fit: contain;
    object-position: left bottom;
}

/* Danh sách địa chỉ / điện thoại / email */
.maac-ft-contact {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.maac-ft-contact li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 !important;
    font-size: 16px;
    line-height: 25.6px;
    color: #e5e6e8;
}

.maac-ft-contact i {
    width: 24px;
    height: 24px;
    flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.maac-ft-contact .i-map   { background-image: url('img/maac/ft-map.svg'); }
.maac-ft-contact .i-phone { background-image: url('img/maac/ft-phone.svg'); }
.maac-ft-contact .i-mail  { background-image: url('img/maac/ft-mail.svg'); }

.maac-ft-connect {
    margin-top: 32px;
}

/* Icon mạng xã hội */
.maac-ft-social {
    display: flex;
    gap: 16px;
    margin: 0 0 16px;
}

.maac-ft-social a {
    width: 40px;
    height: 40px;
    border: 1px solid #0f2a44;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maac-ft-social a:hover {
    background: #0f2a44;
}

.maac-ft-social span {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.maac-ft-social .s-fb { background-image: url('img/maac/ft-social1.svg'); }
.maac-ft-social .s-in { background-image: url('img/maac/ft-social2.svg'); }

/* Đăng ký nhận tin */
.maac-ft-newsletter p {
    font-size: 14px;
    line-height: 21px;
    color: #e5e6e8;
    margin: 0 0 8px;
}

.maac-ft-newsletter form {
    display: flex;
    max-width: 333px;
    margin: 0;
}

.maac-ft-newsletter input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 45px;
    margin: 0;
    padding: 13px 16px;
    font-size: 16px;
    color: #fff;
    background: #0f2a44;
    border: 0;
    border-radius: 8px 0 0 8px;
    box-shadow: none;
}

.maac-ft-newsletter input[type="email"]::placeholder {
    color: #6b7280;
}

.maac-ft-newsletter button {
    width: 51px;
    height: 45px;
    margin: 0;
    padding: 0;
    flex: none;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: var(--maac-teal);
    background-image: url('img/maac/ft-send.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 16px;
    box-shadow: none;
    font-size: 0;
}

.maac-ft-newsletter button:hover {
    background-color: #005757;
}

/* Cột link */
.maac-ft-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.maac-ft-links li {
    margin: 0 !important;
}

.maac-ft-links a {
    font-size: 16px;
    line-height: 24px;
    color: #e5e6e8;
}

.maac-ft-links a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Dòng bản quyền */
.maac-footer__bottom {
    margin-top: 80px;
    padding-top: 33px;
    border-top: 1px solid #0f2a44;
}

.maac-ft-copy {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: #7992b1;
    opacity: .6;
    margin: 0;
}

/* Design kết thúc ở dòng bản quyền -> ẩn thanh "absolute footer" của Flatsome
   (trước đây chứa slider VR Tour của IPS, đã gỡ) */
.absolute-footer {
    display: none;
}

@media (max-width: 849px) {
    .maac-footer h4 { margin-top: 24px; }
    .maac-footer__bottom { margin-top: 40px; }
}


/* ==========================================================================
   MAAC — Các trang trong (Figma "Web Maac")
     Tin tức 6072:124 · Chi tiết tin tức 6087:656 · Tài liệu 6087:137
     Danh sách trọng tài 6119:1733 · Liên hệ 6197:1572
   Ảnh + icon nằm ở: wp-content/themes/vss/img/maac/
   ========================================================================== */

.maac {
    --maac-grey-3: #ababad;
    --maac-neutral: #f5f8ff;
    --maac-page-bg: #fafcff;
}

/* ------------------------------------------------ KHUNG CHUNG TRANG TRONG --
   Banner cao 567px, khối trắng đè lên banner 133px (design: banner y=138,
   khối trắng y=572). */
.maac-inner {
    background-color: var(--maac-page-bg);
    background-image: url('img/maac/bg-banner-trong.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1920px 567px;
}

/* Khoảng đệm đặt ở .row chứ không ở <section>: UX Builder sinh CSS padding
   theo #id cho section nên đặt ở section sẽ bị ghi đè. */
.maac-inner .row.maac-inner__row {
    max-width: 1744px;
    padding-top: 434px;
    padding-bottom: 80px;
}

.maac-inner .col {
    padding: 0;
}

.maac-panel {
    background: #fff;
    padding: 48px 32px;
}

.maac-panel__title {
    font-size: 32px;
    font-weight: 600 !important;
    line-height: 1.6;
    color: var(--maac-text);
    margin: 0;
}

.maac-panel__bar {
    display: block;
    width: 53px;
    height: 4px;
    border-radius: 100px;
    background: var(--maac-secondary);
    margin: 32px 0;
}

.maac-empty {
    text-align: center;
    color: var(--maac-text-2);
    padding: 40px 0;
    margin: 0;
}

/* ------------------------------------------------------------ PHÂN TRANG --
   Figma node 6103:268 */
.maac-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 80px;
}

.maac-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--maac-primary);
}

.maac-pagination .page-numbers.current {
    border-radius: 8px;
    background: var(--maac-primary);
    color: #fff;
}

.maac-pagination a.page-numbers:hover {
    background: rgba(28, 77, 125, .1);
}

.maac-pagination .prev,
.maac-pagination .next {
    width: 24px;
    border-radius: 0;
}

.maac-pagination .prev:hover,
.maac-pagination .next:hover {
    background: none;
    opacity: .6;
}

/* Ô icon 24x24, mũi tên bên trong 7.5x15.5 đúng như design */
.maac-page__arrow {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7.5px 15.5px;
}

.maac-page__arrow--prev { background-image: url('img/maac/ico-page-prev.svg'); }
.maac-page__arrow--next { background-image: url('img/maac/ico-page-next.svg'); }

/* ----------------------------------------------------- TIN TỨC — DANH SÁCH --
   Figma node 6082:867 */
.maac-newsgrid {
    display: grid;
    grid-template-columns: repeat(var(--maac-news-cols, 4), 1fr);
    gap: 48px 24px;
}

.maac-newscard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Giữ chỗ đúng tỉ lệ cả khi bài chưa có ảnh đại diện */
.maac-newscard__img {
    display: block;
    aspect-ratio: 402 / 246;
    background: var(--maac-line);
}

.maac-newscard__img img {
    width: 100%;
    aspect-ratio: 402 / 246;
    object-fit: cover;
    display: block;
}

.maac-newscard__body {
    padding: 0 16px;
}

.maac-newscard__date {
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: var(--maac-teal);
    margin: 0 0 4px;
}

.maac-newscard__title {
    font-size: 18px;
    font-weight: 600 !important;
    line-height: 1.4;
    color: var(--maac-text);
    margin: 0;
}

.maac-newscard__title a {
    color: inherit;
}

.maac-newscard__title a:hover {
    color: var(--maac-secondary);
}

.maac-newscard__excerpt {
    font-size: 16px;
    line-height: 1.6;
    color: var(--maac-text-2);
    margin: 12px 0 0;
}

/* ------------------------------------------------------ CHI TIẾT TIN TỨC --
   Figma node 6087:656 */
.maac-single {
    background: var(--maac-page-bg);
    padding-bottom: 80px;
}

.maac-single__banner {
    height: 624px;
    background-color: var(--maac-primary);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.maac-single__article {
    max-width: 1112px;
    margin: 0 auto;
    padding: 94px 0 0;
}

.maac-single__title {
    font-size: 32px;
    font-weight: 600 !important;
    line-height: 1.6;
    color: var(--maac-text);
    margin: 0 0 16px;
}

.maac-single__date {
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: var(--maac-teal);
    margin: 0 0 16px;
}

.maac-single__content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--maac-text);
}

.maac-single__content p,
.maac-single__content ul,
.maac-single__content ol {
    margin: 0 0 24px;
}

.maac-single__content h2 {
    font-size: 20px;
    line-height: 1.8;
    color: var(--maac-text);
    margin: 0 0 24px;
}

.maac-single__content h3,
.maac-single__content h4 {
    font-size: 18px;
    font-weight: 500 !important;
    line-height: 1.8;
    color: var(--maac-text);
    margin: 0 0 24px;
}

.maac-single__content img {
    display: block;
    margin: 0 0 24px;
}

.maac-single__content > *:last-child {
    margin-bottom: 0;
}

.maac-related {
    max-width: 1720px;   /* 1680px nội dung + 2x20px lề khi màn hẹp */
    margin: 64px auto 0;
    padding: 0 20px;
}

.maac-related__title {
    font-size: 32px;
    font-weight: 600 !important;
    line-height: 1.6;
    color: var(--maac-text);
    margin: 0 0 32px;
}

/* ----------------------------------------------------------- TÀI LIỆU -----
   Figma node 6119:1564 — 2 cột, mỗi hàng cách nhau bằng đường kẻ ngang */
.maac-docs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
}

/* Đường kẻ ngang sau mỗi hàng (trừ hàng cuối) */
.maac-doc {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--maac-line);
}

.maac-doc:last-child,
.maac-doc:nth-last-child(2):nth-child(odd) {
    padding-bottom: 0;
    border-bottom: 0;
}

.maac-doc__img {
    display: block;
    width: 220px;
    height: 298px;
    flex: none;
    background: var(--maac-line);
}

.maac-doc__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.maac-doc__body {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    align-self: stretch;
}

.maac-doc__date {
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: var(--maac-teal);
    margin: 0 0 4px;
}

.maac-doc__title {
    font-size: 18px;
    font-weight: 600 !important;
    line-height: 1.4;
    color: var(--maac-text);
    margin: 0;
}

.maac-doc__title a {
    color: inherit;
}

.maac-doc__title a:hover {
    color: var(--maac-secondary);
}

.maac-doc__excerpt {
    font-size: 16px;
    line-height: 1.6;
    color: var(--maac-text-2);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.maac-doc__dl {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
    border-radius: 4px;
    background: var(--maac-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--maac-neutral);
}

.maac-doc__dl:hover {
    background: #16406a;
    color: #fff;
}

.maac-doc__dl-ico {
    width: 28px;
    height: 28px;
    flex: none;
    background: url('img/maac/ico-tai-ve.svg') center / contain no-repeat;
}

/* -------------------------------------------------- DANH SÁCH TRỌNG TÀI --
   Thanh lọc: Figma node 6119:2381. Thẻ trọng tài viên dùng lại .maac-expert. */
.maac-filter {
    display: flex;
    gap: 32px;
    align-items: center;
    padding: 32px;
    border-radius: 12px;
    background: var(--maac-primary);
    margin-bottom: 32px;
}

.maac-filter__fields {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 24px;
    align-items: center;
}

.maac-filter__field {
    flex: 1;
    min-width: 0;
    position: relative;
}

.maac-filter__field input[type="text"],
.maac-filter__field select {
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 16px;
    font-size: 16px;
    color: var(--maac-text);
    background: #fff;
    border: 1px solid var(--maac-grey-3);
    border-radius: 8px;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.maac-filter__field input::placeholder {
    color: var(--maac-text-2);
}

/* Icon kính lúp bên trái ô "Họ và tên" — ô 24px, hình 22x22 căn giữa ô */
.maac-filter__field--search input[type="text"] {
    padding-left: 57px;
    background-image: url('img/maac/ico-search.svg');
    background-repeat: no-repeat;
    background-position: 18px center;
    background-size: 22px 22px;
}

/* Mũi tên xuống của các ô select — ô 24px cách mép phải 12px, hình 14x8 */
.maac-filter__field--select select {
    padding-right: 48px;
    background-image: url('img/maac/ico-chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 17px center;
    background-size: 14px 8px;
    color: var(--maac-text-2);
    font-weight: 500;
}

/* !important vì Flatsome tô nút bằng selector `button:not([disabled])` */
.maac .maac-filter__submit {
    flex: none;
    width: 151px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: var(--maac-secondary) !important;
    background-image: none !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    color: #fff;
    box-shadow: none !important;
    text-shadow: none !important;
}

.maac .maac-filter__submit:hover {
    background-color: #196666 !important;
}

/* ------------------------------------------------------------- LIÊN HỆ --
   Figma node 6197:1572 */
.maac-lienhe {
    position: relative;
    overflow: hidden;
    background-color: var(--maac-primary);
}

.maac-lienhe::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('img/maac/bg-banner-lien-he.jpg') center / cover no-repeat;
}

.maac-lienhe .row {
    position: relative;
    z-index: 1;
}

.maac-lienhe .col,
.maac-ctsec .col,
.maac-mapsec .col {
    padding-bottom: 0;
}

/* Hai dải trắng dưới banner: thẻ thông tin rồi tới bản đồ */
.maac-ctsec,
.maac-mapsec {
    background-color: #fff;
}

.maac-mapsec {
    padding-bottom: 94px;
}

/* Form rộng 898px như design, căn giữa trong cột */
.maac-ctform {
    max-width: 898px;
    margin: 0 auto;
}

.maac-ctform__title {
    font-size: 32px;
    font-weight: 600 !important;
    line-height: 1.6;
    color: var(--maac-neutral);
    text-align: center;
    margin: 0 0 21px;
}

.maac-ctform__row {
    display: flex;
    gap: 21px;
}

.maac-ctform input[type="text"],
.maac-ctform input[type="tel"],
.maac-ctform input[type="email"],
.maac-ctform textarea {
    width: 100%;
    margin: 0 0 21px;
    padding: 12px;
    height: auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--maac-text);
    background: var(--maac-neutral);
    border: 1px solid var(--maac-line);
    border-radius: 4px;
    box-shadow: none;
}

.maac-ctform input::placeholder,
.maac-ctform textarea::placeholder {
    color: var(--maac-grey-3);
}

.maac-ctform textarea {
    height: 160px;
    resize: vertical;
}

.maac-ctform button[type="submit"] {
    display: block;
    width: 246px;
    margin: 0 auto;
    padding: 12px 24px;
    height: auto;
    line-height: 1.6;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border: 0;
    border-radius: 4px;
    background: var(--maac-secondary);
    color: #fff;
    box-shadow: none;
}

.maac-ctform button[type="submit"]:hover {
    background: #196666;
}

.maac-ctform__notice {
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 16px;
    margin: 0 0 21px;
}

.maac-ctform__notice--ok  { background: rgba(31, 122, 122, .15); color: #fff; }
.maac-ctform__notice--err { background: rgba(221, 51, 51, .2);   color: #fff; }

/* Hai ảnh lệch tầng bên phải form.
   Ảnh co lại theo bề ngang cột, tối đa 338px như design. */
.maac-lienhe__media {
    display: flex;
    gap: 48px;
    justify-content: flex-end;
    max-width: 100%;
}

.maac-lienhe__media img {
    flex: 1 1 0;
    min-width: 0;
    max-width: 338px;
    height: 520px;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}

.maac-lienhe__media img:last-child {
    margin-top: 44px;
    height: 508px;
}

/* 3 thẻ Email / Hotline / Địa chỉ */
.maac-ctinfo {
    display: flex;
    gap: 24px;
    align-items: stretch;
    justify-content: center;
}

.maac-ctinfo__item {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 24px;
    border: 1px solid rgba(35, 60, 128, .2);
    border-radius: 4px;
    background: #fff;
}

.maac-ctinfo__ico {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 200px;
    background-color: rgba(31, 122, 122, .1);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

.maac-ctinfo__ico--mail  { background-image: url('img/maac/ct-mail.svg'); }
.maac-ctinfo__ico--phone { background-image: url('img/maac/ct-phone.svg'); }
.maac-ctinfo__ico--map   { background-image: url('img/maac/ct-map.svg'); }

.maac-ctinfo__text {
    flex: 1;
    min-width: 0;
}

.maac-ctinfo__label {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    color: var(--maac-text);
}

.maac-ctinfo__value {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--maac-secondary);
}

a.maac-ctinfo__value:hover {
    text-decoration: underline;
}

/* Bản đồ */
.maac-map {
    display: block;
    max-width: 1680px;
    margin: 0 auto;
}

.maac-map img,
.maac-map iframe {
    width: 100%;
    height: 605px;
    object-fit: cover;
    border: 0;
    display: block;
}

/* ------------------------------------------------------------ RESPONSIVE --*/
@media (max-width: 1400px) {
    .maac-inner { background-size: cover; }
    .maac-inner .row.maac-inner__row { padding-top: 320px; }

    .maac-newsgrid { grid-template-columns: repeat(3, 1fr); }
    .maac-lienhe__media { gap: 24px; }
    .maac-lienhe__media img { max-width: 280px; height: 430px; }
    .maac-lienhe__media img:last-child { height: 420px; }
}

@media (max-width: 1024px) {
    .maac-inner .row.maac-inner__row { padding-top: 240px; }
    .maac-newsgrid { grid-template-columns: repeat(2, 1fr); }
    .maac-docs { grid-template-columns: 1fr; }
    .maac-doc:nth-last-child(2):nth-child(odd) { padding-bottom: 48px; border-bottom: 1px solid var(--maac-line); }
    .maac-doc:last-child { padding-bottom: 0; border-bottom: 0; }
    .maac-filter { flex-direction: column; align-items: stretch; gap: 16px; }
    .maac-filter__fields { flex-wrap: wrap; }
    .maac-filter__field { flex: 1 1 240px; }
    .maac .maac-filter__submit { width: 100%; }
    .maac-single__banner { height: 380px; }
    .maac-single__article { padding: 48px 20px 0; }
    .maac-related { padding: 0 20px; }
    .maac-ctinfo { flex-wrap: wrap; }
    .maac-ctinfo__item { flex: 1 1 300px; }
    .maac-lienhe__media { justify-content: center; }
}

@media (max-width: 849px) {
    .maac-inner .row.maac-inner__row { padding-top: 160px; padding-bottom: 40px; }
    .maac-panel { padding: 24px 16px; }
    .maac-panel__title,
    .maac-single__title,
    .maac-related__title,
    .maac-ctform__title { font-size: 24px; }
    .maac-panel__bar { margin: 16px 0 24px; }
    .maac-newsgrid { grid-template-columns: 1fr; gap: 32px; }
    .maac-doc { flex-direction: column; gap: 16px; }
    .maac-doc__img { width: 100%; height: 240px; }
    .maac-doc__body { padding: 0; }
    .maac-pagination { margin-top: 40px; }
    .maac-single__banner { height: 220px; }
    .maac-ctform__row { flex-direction: column; gap: 0; }
    .maac-ctform button[type="submit"] { width: 100%; }
    .maac-lienhe__media { display: none; }
    .maac-map img, .maac-map iframe { height: 320px; }
}

/* ==========================================================================
   MAAC — Header (Figma node 6011:39)
   Markup: template-parts/header/header-wrapper.php
   Hàng trên 74px (ngày giờ / tìm kiếm / ngôn ngữ) + hàng dưới 64px
   (logo / menu / nút CTA), lề hai bên 120px, viền đáy #ababad.
   ========================================================================== */

/* Gỡ nền + chiều cao header cũ do Flatsome sinh ra theo #id */
#header.header,
#header .header-wrapper {
    background-color: #fff !important;
    background-image: none !important;
}

#header {
    border-bottom: 1px solid var(--maac-grey-3, #ababad);
}

.maac-header {
    background: #fff;
}

.maac-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 120px;
}

/* ------------------------------------------------------- HÀNG TRÊN 74px -- */
.maac-header__top {
    border-bottom: 1px solid var(--maac-neutral, #f5f8ff);
}

.maac-header__top .maac-header__inner {
    height: 74px;
}

.maac-hdinfo {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 50px;
    padding: 0 16px;
    border-radius: 8px;
    background: #f2f2f2;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--maac-text);
    white-space: nowrap;
    overflow: hidden;
}

.maac-hdinfo__date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.maac-hdinfo__ico {
    width: 20px;
    height: 20px;
    flex: none;
    background: url('img/maac/hd-calendar.svg') center / 15.4px 16px no-repeat;
}

.maac-hdinfo__sep {
    width: 1px;
    height: 14px;
    flex: none;
    background: var(--maac-grey-3, #ababad);
}

/* Ba icon mạng xã hội, dồn về mép phải thanh ngày giờ (Figma 6242:2120):
   icon 24x24, cách nhau 24px, cách mép phải đúng 16px padding của thanh. */
.maac-hdsocial {
    flex: none;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
    padding-left: 24px;
}

.maac-header .maac-hdsocial__link {
    display: block;
    line-height: 0;
    transition: opacity .2s;
}

.maac-header .maac-hdsocial__link:hover {
    opacity: .75;
}

.maac-hdsocial__ico {
    display: block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.maac-hdsocial__ico--li { background-image: url('img/maac/hd-linkedin.svg'); }
.maac-hdsocial__ico--fb { background-image: url('img/maac/hd-facebook.svg'); }
.maac-hdsocial__ico--yt { background-image: url('img/maac/hd-youtube.svg'); }

.maac-header__tools {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

/* Ô tìm kiếm 282x50 */
.maac-hdsearch {
    position: relative;
    width: 282px;
    margin: 0;
}

.maac-header .maac-hdsearch input[type="search"] {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 13px 48px 13px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--maac-text);
    background: #f2f2f2;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
}

.maac-hdsearch input::placeholder {
    color: #6b7280;
}

/* Nút submit chính là icon kính lúp: ô 24px, hình 22x22 */
.maac-header .maac-hdsearch button {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: url('img/maac/hd-search.svg') center / 22px 22px no-repeat !important;
    font-size: 0;
}

.maac-header .maac-hdsearch button:hover {
    opacity: .7;
}

/* Chọn ngôn ngữ */
.maac-hdlang {
    position: relative;
    flex: none;
}

.maac-header .maac-hdlang__btn {
    display: flex;
    align-items: center;
    gap: 4px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none !important;
    box-shadow: none !important;
    line-height: 1;
}

.maac-hdlang__flag {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    object-fit: cover;
    display: block;
}

.maac-hdlang__caret {
    width: 24px;
    height: 24px;
    flex: none;
    background: url('img/maac/hd-arrow-down.svg') center / 24px 24px no-repeat;
}

.maac-hdlang__list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 168px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--maac-line);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0, 21, 42, .12);
    display: none;
}

.maac-hdlang__btn[aria-expanded="true"] + .maac-hdlang__list {
    display: block;
}

.maac-hdlang__list li {
    margin: 0;
}

.maac-hdlang__list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--maac-text);
}

.maac-hdlang__list a:hover,
.maac-hdlang__list .is-active a {
    background: #f2f2f2;
    color: var(--maac-primary);
}

/* ------------------------------------------------------- HÀNG DƯỚI 64px -- */
.maac-header__main .maac-header__inner {
    height: 64px;
    justify-content: space-between;
}

.maac-header__logo {
    flex: none;
    width: 149px;
    display: flex;
    align-items: center;
}

.maac-header__logo img {
    width: 95px;
    height: 54px;
    object-fit: contain;
    object-position: left center;
    display: block;
}

/* Menu chính */
.maac-header__nav {
    flex: 0 1 auto;
    min-width: 0;
    /* Cao hết hàng header để vùng hover của mục menu chạm sát mép dưới,
       nếu không sẽ có khoảng chết giữa chữ và submenu -> rê chuột xuống là menu tắt */
    align-self: stretch;
    display: flex;
}

.maac-header .maac-nav {
    display: flex;
    align-items: stretch;
    gap: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.maac-header .maac-nav > li {
    position: relative;
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.maac-header .maac-nav > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--maac-text);
    white-space: nowrap;
}

.maac-header .maac-nav > li > a:hover,
.maac-header .maac-nav > .current-menu-item > a,
.maac-header .maac-nav > .current_page_item > a {
    color: var(--maac-primary);
}

/* Mũi tên của mục có menu con: ô 18px, hình 11x6.5 */
.maac-header .maac-nav > .menu-item-has-children > a::after {
    content: '';
    width: 18px;
    height: 18px;
    flex: none;
    background: url('img/maac/hd-chevron.svg') center / 11px 6.5px no-repeat;
}

/* ---------------------------------------------------------- MENU CON -----
   Ba dạng, phân biệt bằng class do maac-build-menu.php gắn:
     .maac-popup  -> hộp 400px một cột   (MAAC, THƯ VIỆN)      Figma 6042:52
     .maac-mega   -> bảng 1680px 4 cột   (TRỌNG TÀI)           Figma 6197:1446
     .maac-toggle -> mục xổ cấp 4 ngay trong cột               Figma 6197:1539
   -------------------------------------------------------------------------- */

/* Mega menu lấy .maac-header__main làm mốc để căn giữa hết bề ngang trang,
   nên mục gốc của nó phải là position: static. */
.maac-header__main {
    position: relative;
}

.maac-header .maac-nav > li.maac-mega {
    position: static;
}

.maac-header .maac-nav .sub-menu {
    position: absolute;
    z-index: 30;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 16px 32px rgba(0, 21, 42, .12);
}

/* Chỉ hộp cấp 1 mới ẩn/hiện. Không đặt ở .sub-menu chung, vì khi đó các
   submenu lồng bên trong mega menu phải ghi đè lại visibility: visible —
   mà con có visibility: visible thì VẪN nhận chuột dù cha đang hidden,
   tạo ra vùng vô hình rộng 1680px hover vào là menu tự bật. */
.maac-header .maac-nav > li > .sub-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

.maac-header .maac-nav li {
    position: relative;
    margin: 0;
    list-style: none;
}

/* Mở khi hover hoặc khi focus vào bên trong (bàn phím) */
.maac-header .maac-nav > li:hover > .sub-menu,
.maac-header .maac-nav > li:focus-within > .sub-menu,
.maac-header .maac-nav > li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
}

/* Dòng menu con dùng chung */
.maac-header .maac-nav .sub-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--maac-text-2);
    text-transform: none;
}

.maac-header .maac-nav .sub-menu a:hover {
    background: var(--maac-neutral);
    color: var(--maac-primary);
}

/* ------------------------------------------------ hộp 400px một cột ------ */
.maac-header .maac-nav > li.maac-popup > .sub-menu {
    top: 100%;
    left: 0;
    width: 400px;
    padding: 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Hộp của mục cuối cùng bị tràn mép phải thì neo theo mép phải */
.maac-header .maac-nav > li.maac-popup:nth-last-child(-n+2) > .sub-menu {
    left: auto;
    right: 0;
}

/* ------------------------------------------------- mega menu 4 cột ------- */
.maac-header .maac-nav > li.maac-mega > .sub-menu {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(1680px, calc(100vw - 40px));
    padding: 32px;
    display: flex;
    align-items: flex-start;
}

/* Mỗi con trực tiếp là một cột, ngăn nhau bằng kẻ dọc 1px */
.maac-header .maac-nav > li.maac-mega > .sub-menu > li {
    flex: 1;
    min-width: 0;
    padding: 0 32px;
    border-left: 1px solid var(--maac-neutral);
}

.maac-header .maac-nav > li.maac-mega > .sub-menu > li:first-child {
    border-left: 0;
    padding-left: 0;
}

.maac-header .maac-nav > li.maac-mega > .sub-menu > li:last-child {
    padding-right: 0;
}

/* Tiêu đề cột: chữ 18px, đậm hơn, không phải link */
.maac-header .maac-nav .maac-col-title > a {
    padding: 8px 16px;
    font-size: 18px;
    color: var(--maac-text);
    cursor: default;
}

.maac-header .maac-nav .maac-col-title > a:hover {
    background: none;
    color: var(--maac-text);
}

/* Danh sách mục trong cột: nằm luôn trong luồng, không phải hộp nổi */
.maac-header .maac-nav > li.maac-mega > .sub-menu .sub-menu {
    position: static;
    width: auto;
    padding: 0;
    box-shadow: none;
    transform: none;
}

/* ------------------------------------------------ mục xổ cấp 4 ---------- */
/* Mặc định đóng, bấm vào mới mở — JS gắn class .is-open */
.maac-header .maac-nav .maac-toggle > .sub-menu {
    display: none;
}

.maac-header .maac-nav .maac-toggle.is-open > .sub-menu {
    display: block;
}

.maac-header .maac-nav .maac-toggle > a::after {
    content: '';
    width: 20px;
    height: 20px;
    flex: none;
    background: url('img/maac/hd-chevron.svg') center / 11px 6.5px no-repeat;
    transition: transform .15s ease;
}

.maac-header .maac-nav .maac-toggle.is-open > a::after {
    transform: rotate(180deg);
}

/* Mục cấp 4 thụt vào 32px */
.maac-header .maac-nav .maac-toggle > .sub-menu a {
    padding-left: 32px;
    padding-right: 32px;
}

/* Nút "Nộp đơn trọng tài" */
.maac-header__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 4px;
    background: var(--maac-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: #fff;
    white-space: nowrap;
}

.maac-header__cta:hover {
    background: #16406a;
    color: #fff;
}

/* Nút hamburger — chỉ dùng ở mobile */
.maac-header__burger {
    display: none;
    width: 40px;
    height: 40px;
    flex: none;
    position: relative;
    color: var(--maac-text);
}

.maac-header__burger span,
.maac-header__burger::before,
.maac-header__burger::after {
    content: '';
    position: absolute;
    left: 8px;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.maac-header__burger::before { top: 13px; }
.maac-header__burger span    { top: 19px; }
.maac-header__burger::after  { top: 25px; }

/* ------------------------------------------------------------ RESPONSIVE --*/
@media (max-width: 1500px) {
    .maac-header__inner { padding: 0 40px; }
    .maac-header .maac-nav { gap: 24px; }
}

/* Mega menu 4 cột chỉ vừa ở màn rộng; hẹp hơn thì thu padding rồi xuống 2 cột */
@media (max-width: 1400px) {
    .maac-header .maac-nav > li.maac-mega > .sub-menu { padding: 24px; }
    .maac-header .maac-nav > li.maac-mega > .sub-menu > li { padding: 0 16px; }
}

@media (max-width: 1200px) {
    .maac-header .maac-nav > li.maac-mega > .sub-menu {
        flex-wrap: wrap;
        row-gap: 24px;
    }
    .maac-header .maac-nav > li.maac-mega > .sub-menu > li {
        flex: 0 0 50%;
    }
    /* Kẻ dọc chỉ còn giữa 2 cột cùng hàng */
    .maac-header .maac-nav > li.maac-mega > .sub-menu > li:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 1100px) {
    .maac-header__inner { padding: 0 20px; }
    .maac-hdsearch { width: 220px; }
    .maac-hdsocial { gap: 16px; padding-left: 16px; }
    .maac-header .maac-nav { gap: 16px; }
    .maac-header .maac-nav > li > a { font-size: 13px; }
}

@media (max-width: 849px) {
    .maac-header__inner { gap: 12px; }
    .maac-header__top .maac-header__inner { height: 60px; }
    .maac-hdinfo { height: 40px; font-size: 12px; gap: 6px; }
    .maac-hdsocial { gap: 12px; padding-left: 12px; }
    .maac-hdsocial__ico { width: 20px; height: 20px; }
    .maac-hdsearch { width: 44px; }
    /* Chỉ còn icon kính lúp, bấm vào mới bung ô nhập */
    .maac-header .maac-hdsearch input[type="search"] { padding-right: 40px; padding-left: 12px; }
    .maac-header .maac-hdsearch button { right: 10px; }

    .maac-header__main .maac-header__inner { height: 60px; }
    /* order: -1 để nút hamburger đứng trước logo, dù trong HTML nó đứng sau */
    .maac-header__burger { display: block; order: -1; margin-left: -8px; }
    .maac-header__logo { width: auto; flex: 1; justify-content: center; }
    .maac-header__logo img { width: 78px; height: 44px; object-position: center; }
    /* Menu chính chuyển vào ngăn kéo off-canvas của Flatsome */
    .maac-header__nav { display: none; }
    .maac-header__cta { padding: 8px 12px; font-size: 12px; }
}

@media (max-width: 549px) {
    .maac-hdinfo__time { display: none; }
    .maac-hdinfo__sep { display: none; }
    .maac-hdsocial { gap: 10px; padding-left: 10px; }
    .maac-hdsocial__ico { width: 18px; height: 18px; }
}

/* Dưới 480px thanh ngày giờ không đủ chỗ cho cả ngày lẫn 3 icon: đo được ở
   375px thì cụm icon lòi ra 36px và bị overflow:hidden của thanh cắt mất, cách
   chữ ngày đúng 6px. Thu icon nhỏ hơn 18px thì không còn nhận ra logo, nên ẩn
   hẳn — icon mạng xã hội vẫn còn ở footer. */
@media (max-width: 479px) {
    .maac-hdsocial { display: none; }
}

/* ==========================================================================
   MAAC — Ghép Contact Form 7 vào giao diện có sẵn
   Form Liên hệ  (Figma 6199:1967) -> .maac-ctform
   Form Tư vấn   (trang chủ)       -> .maac-form
   CF7 bọc mỗi ô trong <span class="wpcf7-form-control-wrap">, cần cho span đó
   thành khối/flex item thì layout mới giữ nguyên như bản tĩnh.
   ========================================================================== */

.maac-ctform .wpcf7,
.maac .maac-form .wpcf7-form-control-wrap {
    display: block;
}

.maac-ctform .wpcf7-form-control-wrap {
    display: block;
}

/* Hàng 2 ô ngang nhau */
.maac-ctform .maac-ctform__row > .wpcf7-form-control-wrap {
    flex: 1;
    min-width: 0;
}

/* Nút gửi: CF7 dùng <input type="submit"> chứ không phải <button> */
.maac .maac-ctform input[type="submit"] {
    display: block;
    width: 246px;
    margin: 0 auto;
    padding: 12px 24px;
    height: auto;
    line-height: 1.6;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border: 0;
    border-radius: 4px;
    background-color: var(--maac-secondary) !important;
    background-image: none !important;
    color: #fff;
    box-shadow: none !important;
    text-shadow: none !important;
}

.maac .maac-ctform input[type="submit"]:hover {
    background-color: #196666 !important;
}

.maac .maac-form input[type="submit"] {
    width: 100%;
    margin: 0;
    padding: 16px;
    height: auto;
    line-height: 24px;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border: 0;
    border-radius: 8px;
    background-color: var(--maac-teal) !important;
    background-image: none !important;
    color: #fff;
    box-shadow: none !important;
    text-shadow: none !important;
}

.maac .maac-form input[type="submit"]:hover {
    background-color: #005757 !important;
}

/* Vòng quay lúc gửi: đặt tuyệt đối để không đẩy nút lệch khỏi tâm */
.maac .wpcf7-spinner {
    position: absolute;
    margin: 0 0 0 12px;
}

.maac-ctform form,
.maac .maac-form {
    position: relative;
}

/* Thông báo kết quả + lỗi từng ô */
.maac .wpcf7-response-output {
    margin: 21px 0 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.6;
    background: rgba(31, 122, 122, .15);
    color: #fff;
}

.maac .wpcf7-form.invalid .wpcf7-response-output,
.maac .wpcf7-form.failed .wpcf7-response-output,
.maac .wpcf7-form.aborted .wpcf7-response-output {
    background: rgba(221, 51, 51, .22);
}

/* Form trang chủ nằm trên nền trắng nên chữ thông báo phải là màu tối */
.maac .maac-form .wpcf7-response-output {
    background: rgba(31, 122, 122, .12);
    color: var(--maac-text);
}

.maac .maac-form.invalid .wpcf7-response-output,
.maac .maac-form.failed .wpcf7-response-output {
    background: rgba(221, 51, 51, .12);
    color: #a12525;
}

.maac .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: #ffb4b4;
}

.maac .maac-form .wpcf7-not-valid-tip {
    color: #c62828;
}

.maac .wpcf7-form-control.wpcf7-not-valid {
    border-color: #dd3333;
}

/* CF7 chèn thẻ ẩn trong <fieldset>, không được chiếm chỗ trong layout */
.maac .wpcf7 .hidden-fields-container,
.maac .wpcf7 .screen-reader-response {
    margin: 0;
    padding: 0;
    border: 0;
}