/* ============================================================
   iig-brand.css — lớp phủ thương hiệu cam/đỏ/vàng cho giao diện IIG.
   Nạp SAU style.css để chốt tông màu & xử lý phần asset trang trí bị thiếu
   trong mirror (một số ảnh decor/icon HTTrack không tải về).
   ============================================================ */

:root {
  --brand-red:    #e4002b;
  --brand-orange: #ff6a00;
  --brand-yellow: #facb0e;
  --brand-dark:   #b00020;
  --grad-warm: linear-gradient(120deg, #e4002b 0%, #ff6a00 60%, #facb0e 100%);
}

/* Nút chính & điểm nhấn dùng gradient ấm */
.btn_site { background: var(--grad-warm) !important; border: none !important; }
.btn_site span { color: #fff !important; }

/* Tiêu đề khối: phụ đề đỏ, tiêu đề chính đậm */
._sub_title_def._blue, ._sub_title_def { color: var(--brand-red) !important; letter-spacing: .04em; }
._title_def._gray { color: #241a12 !important; }
._title_def._white { color: #fff !important; }

/* Section 3 & 6 dùng ảnh nền thật (đã recolor sang ấm) — chỉ chỉnh màu chữ. */
.h_section3 .excerpt, .h_section3 ._title_def._white, .h_section3 .list_test ._item { color: #fff !important; }
.h_section3 .list_test ._item img { filter: brightness(0) invert(1); }   /* icon → trắng */
.h_section6 ._title_def, .h_section6 ._sub_title_def, .h_section6 .name, .h_section6 .position, .h_section6 .content_scroll { color: #fff !important; }
.h_section6 .quote img { filter: brightness(0) invert(1); opacity: .55; }   /* dấu ngoặc → trắng */
.h_section6 ._list_tab a { color: #fff; }
.h_section6 ._list_tab a.is-active { background: var(--grad-warm); color: #fff; }
/* Avatar khách hàng: ép vuông tuyệt đối cho cả khung lẫn ảnh — CSS gốc IIG có luật
   ._avar (200x200) với độ đặc hiệu cao hơn có thể ghi đè và làm méo vòng tròn khi
   nằm trong swiper-slide (slide co giãn theo layout), nên ép !important + aspect-ratio
   để không phụ thuộc slide cha co giãn thế nào. */
.h_section6 ._avar,
.h_section6 .wrap ._left .swiper-container .swiper-slide ._avar {
  width: 150px !important;
  height: 150px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex: none !important;
}
.h_section6 ._avar img,
.h_section6 .wrap ._left .swiper-container .swiper-slide ._avar img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 4px solid rgba(255,255,255,.35);
}
.h_section6 ._right img { width: 100%; border-radius: 16px; }

/* Ảnh trang trí thiếu file → ẩn khung vỡ, không hiện icon lỗi */
img[src=""], img:not([src]) { visibility: hidden; }

/* “Hot” badge & sticker theo tông đỏ/vàng */
.gird_news .hot { background: var(--brand-red) !important; }
.gird_news .sticker .cat { color: var(--brand-red) !important; }

/* Nút điều hướng swiper hình tròn ấm (thay btn-next/prev.png thiếu) */
.swiper-button.swiper-button-next, .swiper-button.swiper-button-prev {
  width: 44px; height: 44px; border-radius: 50%; background: var(--grad-warm);
  display: grid; place-items: center; box-shadow: 0 6px 16px rgba(228,0,43,.3);
}
.swiper-button.swiper-button-next img, .swiper-button.swiper-button-prev img { display: none; }
.swiper-button.swiper-button-next::after { content: "›"; color: #fff; font-size: 24px; font-weight: 700; }
.swiper-button.swiper-button-prev::after { content: "‹"; color: #fff; font-size: 24px; font-weight: 700; }

/* Chấm phân trang swiper */
.swiper-pagination-bullet-active { background: var(--brand-red) !important; }

/* Section 4: đảm bảo mô tả (._content) hiển thị — style.css gốc có thể ẩn/đổi màu */
.h_section4 ._item ._content { color: #5a4d43 !important; opacity: 1 !important; display: block !important; font-size: .96rem; line-height: 1.55; }
.h_section4 ._item ._title { color: var(--brand-red) !important; }
.h_section4 .swiper-slide { height: auto; }
.h_section4 .swiper-wrapper { align-items: stretch; }

/* Section 5 — logo bài thi thật trong carousel */
.h_section5 .test-logo { display: grid; place-items: center; height: 120px; padding: 14px; background: #fff; border: 1px solid #f1e2d6; border-radius: 14px; box-shadow: 0 12px 30px rgba(228,0,43,.16); transition: transform .15s, box-shadow .15s; }
.h_section5 .test-logo:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(228,0,43,.22); }
.h_section5 .test-logo img { max-height: 82px; max-width: 100%; object-fit: contain; }

/* Lưới bài thi dạng huy hiệu (section 5 – dự phòng khi thiếu logo) */
.test-badges { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.test-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-width: 130px; padding: 18px 16px; border-radius: 14px; background: #fff;
  border: 1px solid #f1e2d6; box-shadow: 0 12px 30px rgba(228,0,43,.16); text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.test-badge:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(228,0,43,.24); }
.test-badge .b-name { font-weight: 800; color: var(--brand-red); font-size: 1.05rem; }
.test-badge .b-group { font-size: .78rem; color: #8a7a6d; }

/* ============================================================
   Footer mới — 4 cột (Giới thiệu+MXH / Liên kết nhanh / Chuyên mục / Liên hệ),
   tự viết CSS riêng thay vì dùng lưới ._left/_center/_right gốc IIG (khó mở
   rộng, dễ vỡ khi thêm nội dung).
   ============================================================ */
.ftr { background: linear-gradient(135deg, #7a0016 0%, #b00020 45%, #e4002b 100%); }
.ftr-top { padding: 3rem 0 2rem; }
.ftr-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 2.4rem; }

.ftr-logo { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; text-decoration: none; }
.ftr-logo img { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; }
.ftr-logo span { color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
.ftr-desc { color: rgba(255,255,255,.82); font-size: .88rem; line-height: 1.65; margin: 0 0 1.2rem; max-width: 34ch; }
.ftr-social { display: flex; gap: .55rem; }
.ftr-social a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.14);
  display: grid; place-items: center; color: #fff; text-decoration: none; transition: background .15s, color .15s;
}
.ftr-social a:hover { background: var(--brand-yellow); color: #7a0016; }

.ftr-col h4 {
  color: #fff; font-size: .88rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  margin: 0 0 1.1rem; padding-bottom: .6rem; border-bottom: 2px solid rgba(255,255,255,.2);
}
.ftr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ftr-col ul a { color: rgba(255,255,255,.85); text-decoration: none; font-size: .89rem; }
.ftr-col ul a:hover { color: var(--brand-yellow); text-decoration: underline; }

.ftr-contact li { display: flex; gap: .55rem; align-items: flex-start; color: rgba(255,255,255,.85); font-size: .89rem; line-height: 1.5; }
.ftr-contact a { color: rgba(255,255,255,.9); text-decoration: none; }
.ftr-contact a:hover { color: var(--brand-yellow); }

.ftr-bottom { border-top: 1px solid rgba(255,255,255,.15); padding: 1rem 0; }
.ftr-bottom .ipage-wrap { text-align: center; font-size: .84rem; color: rgba(255,255,255,.75); }

@media (max-width: 900px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr-grid { grid-template-columns: 1fr; } .ftr-desc { max-width: none; } }

/* Thanh mạng xã hội nổi (trượt vào khi hover) — cố định mép phải, giữa màn hình */
.social-float {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
  z-index: 900; display: flex; flex-direction: column; gap: 2px;
  background: #fff; border-radius: 10px 0 0 10px; overflow: hidden;
  box-shadow: -6px 8px 28px rgba(0,0,0,.20);
}
.social-float__item {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--sc, #e4002b); position: relative;
  transition: transform .18s ease, filter .18s ease; text-decoration: none;
}
/* Hover: "trượt" lồi ra trái + sáng nhẹ */
.social-float__item:hover { transform: translateX(-6px); filter: brightness(1.1); }
.social-float__item + .social-float__item { border-top: 1px solid rgba(255,255,255,.25); }
@media (max-width: 640px) {
  .social-float__item { width: 40px; height: 40px; }
}

/* Header: đảm bảo thanh menu nền trắng, gạch chân gradient */
#header-main { border-bottom: 3px solid transparent; border-image: var(--grad-warm) 1; }

/* Badge logo: thẻ nổi bo tròn đều 4 góc, tách khỏi mép trái, thu nhỏ, màu ngà,
   đổ bóng đậm hơn — chỉ chứa logo (tên trung tâm đặt riêng ngoài badge). */
#header-main .header-main .logo-main {
  width: 132px;
  height: 84px;
  margin: 0 0 0 18px;
  border-radius: 0 0 20px 20px;
  background: #fdf6e8;
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
}
#header-main .header-main .logo-main img { max-width: 60px; filter: drop-shadow(0 6px 10px rgba(228,0,43,.35)); }

/* Mục "Đăng ký" nổi bật như nút CTA trong menu chính */
.menu-main .menu-item-cta > a {
  background: #fff; color: var(--brand-red) !important; font-weight: 800;
  padding: 8px 18px !important; border-radius: 999px; margin-inline: 4px;
}
.menu-main .menu-item-cta > a:hover { background: var(--brand-yellow); color: #7a0016 !important; }
@media (max-width: 1024px) {
  .menu-main .menu-item-cta > a { display: inline-block; }
}

/* Tên trung tâm lấp khoảng trống giữa logo và menu trên thanh header (desktop).
   CSS gốc IIG chia cứng logo(180px) + menu(phần còn lại, đẩy sát phải) → để trống
   khoảng giữa. Ở đây nới menu-main co giãn (flex) để chừa chỗ cho tên hiển thị. */
.site-name-header {
  display: none;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline-start: 20px;
  max-width: 38vw;
}
@media (min-width: 1025px) {
  .site-name-header { display: flex; align-items: center; }
  #header-main .header-main > .menu-main { width: auto !important; flex: 1 1 auto; min-width: 0; }
}

/* Hero: khống chế chiều cao ảnh banner để ảnh nhỏ không phóng to vỡ trang */
.h_section1 .swiper-slide img._pc { width: 100%; max-height: 560px; object-fit: cover; }

/* An toàn: nếu JS/AOS không chạy, nội dung vẫn hiển thị (không kẹt opacity:0) */
html:not(.aos-initialized) [data-aos] { opacity: 1 !important; transform: none !important; }
[data-aos] { transition-property: opacity, transform; }

/* ============================================================
   RESPONSIVE — sửa tràn ngang & xếp chồng khối trên mobile/tablet.
   Nguyên nhân gốc: ảnh trang trí (1320–1440px) + layout 2 cột của IIG
   không co lại → tràn ngang, tiêu đề bị cắt/che. Ép về 1 cột + ẩn tràn.
   ============================================================ */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; }

@media (max-width: 992px) {
  .container_common {
    width: 100% !important; max-width: 100% !important;
    padding-left: 16px !important; padding-right: 16px !important;
    box-sizing: border-box;
  }
  /* Mọi wrapper con cũng phải co về 100% (IIG đặt width cố định lớn) */
  .content_common, .wrap, .label_def, .gird_news, .home-page,
  .is-feature-image, .in-feature-image, .h_section3 .swiper-container,
  .h_section6 ._content, .list_test, .excerpt {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  }
  /* Chống tràn của flex/grid con */
  .swiper-slide, .post-item, .post-item-image, ._intro, .info { min-width: 0; }
  /* Ẩn phần tràn của ảnh decor trong các section nền lớn */
  .h_section2, .h_section3, .h_section4, .h_section5, .h_section6, .h_section7 { overflow: hidden; }

  /* Ép layout 2 cột về 1 cột */
  .h_section3 .wrap, .h_section6 .wrap, .gird_news {
    display: block !important; grid-template-columns: 1fr !important;
  }
  .h_section3 ._left, .h_section3 ._right,
  .h_section6 ._left, .h_section6 ._right,
  .gird_news .grid-item {
    width: 100% !important; max-width: 100% !important; float: none !important;
  }
  .h_section3 ._right, .h_section6 ._right, .gird_news .grid-item + .grid-item { margin-top: 1.6rem; }

  /* Cột tiêu đề tin tức bên phải: full width, chữ tự xuống dòng */
  .in-feature-image .post-item { width: 100% !important; }

  /* Tiêu đề & chữ dài: cho phép xuống dòng, không tràn */
  ._title_def, ._sub_title_def, .ip-hero h1, .ip-section-title,
  .title_post, .h_section6 .content_scroll {
    word-break: break-word; overflow-wrap: anywhere; white-space: normal;
  }

  /* Lưới 4 mục lĩnh vực: 2 cột nhỏ gọn */
  .h_section3 .list_test { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Testimonial: avatar & nội dung xếp dọc, cân giữa */
  .h_section6 .swiper-slide { flex-direction: column; text-align: center; }
  .h_section6 ._avar { margin: 0 auto 1rem; }
}

@media (max-width: 560px) {
  .h_section3 .list_test { grid-template-columns: 1fr; }
  .test-badges .test-badge, .h_section5 .test-logo { min-width: 120px; }
  .ip-form-grid { grid-template-columns: 1fr; }
}

/* Menu mobile: DÙNG cơ chế off-canvas GỐC của IIG (.header-main.is_active trượt từ
   trái, .coating_header.is_active làm nền mờ). Chỉ bổ sung vài chỉnh cho submenu. */
@media (max-width: 1024px) {
  .header-main .menu-main .sub-menu { display: none; }
  .header-main .menu-main .menu-item-has-children.open > .sub-menu { display: block; }
  body.menu-open { overflow: hidden; }
}