/* =========================================================
   CREDENT - Responsive
   ≥1240px : PC (style.css)
   1024–1239px : laptop nhỏ / tablet ngang
   768–1023px  : tablet
   ≤767px      : mobile (theo Figma "Mobile trang chu" - 402px)
   ========================================================= */

/* ---------- Thành phần chỉ dùng trên mobile/tablet ---------- */
.topbar,
.header__menu-btn,
.drawer { display: none; }

body.no-scroll { overflow: hidden; }

/* =========================================================
   ≤1239px
   ========================================================= */
@media (max-width: 1239px) {
  .container,
  .team__inner { width: calc(100% - 64px); }

  /* Header gọn lại */
  .header__inner { gap: 32px; padding: 8px 24px; }
  .header__right { gap: 24px; margin-left: auto; }
  .header__main { gap: 16px; }
  .nav { gap: 16px; }
  .nav__link { font-size: 15px; }
  .header__tools { gap: 12px; }
  .header__search { position: static; }
  .header__search-input { display: none; }
  .header__search.is-open .header__search-input {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: auto;
    padding: 14px 24px;
    background: var(--white);
    border-top: 1px solid #ececec;
    box-shadow: 0 10px 20px rgba(17, 34, 58, .08);
    text-decoration: none;
  }
  .header__search.is-open .header__search-input::placeholder { text-decoration: none; }

  /* Hero */
  .hero__content { left: 32px; width: calc(100% - 64px); }
  .hero__text { width: min(590px, 100%); }
  .hero__features { flex-wrap: wrap; gap: 12px 40px; }

  /* Intro */
  .intro { height: auto; padding: 59px 0 40px; }
  .intro__title { font-size: 32px; line-height: 42px; text-wrap: balance; }
  .intro__contacts { flex-wrap: wrap; gap: 12px 29px; }
  .intro__list { flex-wrap: wrap; justify-content: center; gap: 8px 24px; }

  /* Lợi ích */
  .benefits { height: auto; padding-bottom: 90px; }
  .benefits__bg { background-size: auto, cover; }
  .benefits__inner { padding-top: 90px; }
  .benefits__head { width: min(792px, 100%); }
  .benefits__list { flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 32px 24px; }
  .benefit { width: calc((100% - 48px) / 3); display: flex; flex-direction: column; }
  .benefit--mid { padding-top: 56px; }
  .benefit__card { flex: 1; }
  .benefit__icon { left: auto; right: -21px; }
  .benefit--mid .benefit__icon { top: -3px; }

  /* Lĩnh vực hoạt động: xếp dọc, căn giữa */
  .fields { height: auto; padding: 58px 0; }
  .fields__left { position: static; width: auto; height: auto; }
  .fields__intro { position: static; width: min(704px, calc(100% - 64px)); margin: 0 auto; }
  .fields__visual { position: relative; left: auto; top: auto; width: 402px; max-width: 100%; height: 501px; margin: 40px auto 0; }
  .fields__scale { left: 50%; top: 27px; width: 368px; height: 323px; transform: translateX(calc(-50% + 4px)); }
  .fields__tag { left: auto; right: 39px; top: 273px; }
  .fields__note--1 { left: 16px; top: 319px; }
  .fields__note--2 { left: auto; right: 16px; top: 390px; }
  .fields__note:hover { transform: none; }
  .fields__right { position: static; width: min(704px, calc(100% - 64px)); margin: 40px auto 0; }
  .acc-item__name,
  .acc-item.is-open .acc-item__name { flex: 1; width: auto; }
  .acc-item__desc { width: auto; height: auto; text-align: justify; }

  /* Đội ngũ */
  .team { height: auto; padding: 74px 0 73px; }
  .team__inner { padding-top: 0; }
  .team__bg { background-size: auto, cover; background-position: center, center; }
  .member,
  .member--h331,
  .member--w283 { width: calc((100% - 48px) / 3); height: auto; aspect-ratio: 370 / 434; }
  .member__img,
  .member__img--1,
  .member__img--2,
  .member__img--3,
  .member__img--4 {
    left: 50%;
    top: auto;
    bottom: 81px;
    width: auto;
    height: calc(100% - 81px);
    translate: -50% 0;
    object-fit: fill;
    transform-origin: center bottom;
  }

  /* Tin tức */
  .news { height: auto; padding: 90px 0 60px; }
  .news-item__main { gap: 24px !important; }
  .news-item__title { width: 240px; }
  .news-item__summary,
  .news__sep + .news-item .news-item__summary { flex: 1; width: auto; margin-left: 40px; }
  .news-item__desc { width: auto; }
  .circle-arrow { margin-left: 32px; flex: none; }

  /* Cam kết */
  .commit { height: auto; padding: 70px 0 61px; }
  .commit__inner { padding-top: 0; }
  .commit__bg { background-size: auto, cover; background-position: center, center; }
  .commit__list { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .commit-card,
  .commit-card--w281 { width: auto; height: auto; }

  /* Giới thiệu */
  .about__statue { left: auto; right: 0; }

  /* Footer */
  .footer__main { height: auto; }
  .footer__bg { background-size: auto, cover; background-position: center, center; }
  .footer__inner { position: relative; left: auto; top: auto; width: auto; padding: 49px 32px 50px; }
  .footer__social { left: auto; right: 32px; }
}

/* =========================================================
   1024–1239px
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1239px) {
  .about__inner { left: 32px; width: calc(55% - 32px); }
  .about__head { height: auto; }
  .about__desc { position: static; width: 100%; margin-top: 24px; }
  .about__stats { width: 100%; }
  .stat,
  .stat--w166 { width: auto; flex: 1; }
  .about__bg { left: 45%; }

  .contact__left { width: 38%; flex: none; }
  .contact-form { width: auto; flex: 1; }
  .contact-form__grid { grid-template-columns: 1fr 1fr; }
  .contact__title-1 { font-size: 34px; line-height: 41px; }
  .contact__title-2 { font-size: 28px; line-height: 34px; }

  .footer__cols { gap: 32px; }
  .footer__company { font-size: 22px; line-height: 29px; }
  .footer__col--company { width: 34%; flex: none; }
  .footer__group { flex: 1; gap: 32px; }
  .footer__col--info { width: auto; flex: 1; }
}

/* =========================================================
   ≤1023px : header mobile + bố cục xếp dọc
   ========================================================= */
@media (max-width: 1023px) {
  /* Topbar */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    height: 29px;
    padding: 0 32px;
    background: var(--navy-14);
  }
  .topbar__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: .22px;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
  }
  .topbar__item img { flex: none; margin: 0 .5px; }

  /* Header */
  .header { height: 84px; }
  .header__inner { gap: 17px; padding: 12px 32px; }
  .header__menu-btn { display: flex; align-items: center; flex: none; }
  .header__logo img { width: 64px; height: 60px; }
  .header__main { display: none; }
  .header__right { margin-left: auto; gap: 0; }
  .header__search.is-open .header__search-input { padding: 14px 32px; }

  /* Drawer */
  .drawer { display: block; position: fixed; inset: 0; z-index: 100; visibility: hidden; transition: visibility 0s linear .4s; }
  .drawer.is-open { visibility: visible; transition: none; }
  .drawer__overlay { position: absolute; inset: 0; background: rgba(5, 10, 20, .55); opacity: 0; transition: opacity .4s var(--ease); }
  .drawer.is-open .drawer__overlay { opacity: 1; }
  .drawer__panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(320px, 86vw);
    padding: 16px 24px 32px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--navy);
    transform: translateX(-100%);
    transition: transform .4s var(--ease);
  }
  .drawer.is-open .drawer__panel { transform: none; }
  .drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
  .drawer__logo { display: block; padding: 6px 8px; border-radius: 4px; background: var(--white); }
  .drawer__logo img { width: 54px; height: 51px; object-fit: cover; }
  .drawer__close { position: relative; width: 32px; height: 32px; }
  .drawer__close span { position: absolute; left: 6px; top: 15px; width: 20px; height: 2px; border-radius: 2px; background: var(--white); }
  .drawer__close span:first-child { transform: rotate(45deg); }
  .drawer__close span:last-child { transform: rotate(-45deg); }
  .drawer__link {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    color: var(--white);
  }
  .drawer__link.is-active { color: var(--gold); }
  .drawer__hotline {
    align-self: flex-start;
    margin-top: 28px;
    padding: 8px 18px;
    border-radius: 40px;
    background: var(--gold);
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    color: var(--white);
  }

  /* Intro */
  .intro__title { font-size: 28px; line-height: 36px; }

  /* Tin tức: dạng lưới như mobile */
  .news-item {
    display: grid;
    grid-template-columns: 1fr 40px;
    column-gap: 18px;
    row-gap: 16px;
  }
  .news-item__main { grid-column: 1 / -1; }
  .news-item__title { flex: 1; width: auto; }
  .news-item__summary,
  .news__sep + .news-item .news-item__summary { margin-left: 0; }
  .circle-arrow { margin-left: 0; }

  /* Giới thiệu: xếp dọc, ảnh tượng ở dưới */
  .about { height: auto; display: flex; flex-direction: column; padding-top: 58px; }
  .about__inner { position: static; order: 1; width: min(704px, calc(100% - 64px)); margin: 0 auto; gap: 32px; }
  .about__head { height: auto; }
  .about__desc { position: static; width: auto; margin-top: 18px; }
  .about__stats { width: 100%; gap: 32px; }
  .about__foot { gap: 32px; }
  .about__bg {
    position: relative;
    order: 2;
    left: auto;
    right: auto;
    top: auto;
    height: 596px;
    margin-top: 80px;
    background: url("../images/mobile/bg-about.jpg") center top / cover no-repeat;
  }
  .about__statue { z-index: 1; left: auto; right: 0; top: auto; bottom: 0; width: 338px; height: 449px; }

  /* Liên hệ */
  .contact__inner { flex-direction: column; gap: 48px; }
  .contact__left { width: 100%; }
  .contact-form { width: 100%; }
  .contact-form__fields { height: auto; }

  /* Footer */
  .footer__cols { flex-direction: column; align-items: flex-start; gap: 38px; }
  .footer__logo { margin-bottom: 48px; }
  .footer__col--company { width: 100%; }
  .footer__group { width: 100%; align-items: flex-start; gap: 38px; }
  .footer__col--info { flex: 1; width: auto; }
}

/* =========================================================
   768–1023px
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .benefit { width: calc(50% - 12px); }
  .member,
  .member--h331,
  .member--w283 { width: calc((100% - 24px) / 2); }
  .stats { justify-content: center; }
  .about__statue { left: auto; right: 0; }
  .contact-form__grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   ≤767px : MOBILE (Figma 402px, lề 16px)
   ========================================================= */
@media (max-width: 767px) {
  .only-desk { display: none !important; }
  .only-desk-i { display: none !important; }
  .only-mob { display: block !important; }
  i.only-mob { display: inline !important; }
  .only-mob-i { display: inline !important; }

  .container,
  .team__inner { width: calc(100% - 32px); }

  /* Topbar + Header */
  .topbar { padding: 0 16px; }
  .header__inner { padding: 12px 16px; }
  .header__search.is-open .header__search-input { padding: 14px 16px; }

  /* Hero */
  .hero { height: auto; overflow: visible; background: #162237; }
  .hero__bg { display: none; }
  .hero__content { position: static; left: auto; width: auto; padding: 0 16px 31px; gap: 0; }
  .hero__top { gap: 0; }
  .hero__text { width: auto; }
  .hero__intro { margin: 0 -16px; padding: 81px 16px 40px; background: url("../images/mobile/bg-hero.jpg") center / cover no-repeat; }
  .hero__eyebrow { font-size: 12px; line-height: 16px; }
  .hero__title { max-width: 361px; height: auto; margin-top: 3px; font-size: clamp(22px, 6.47vw, 26px); line-height: 34px; }
  .hero__title-2 { margin-top: 3px; }
  .hero__desc { margin-top: 16px; font-size: 16px; line-height: 21px; color: var(--n-300); }
  .hero__desc strong { color: var(--white); }
  .hero__cta { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 31px; }
  .hero__slogan { width: auto; }
  .hero__line { margin: 30px 5px 0 4px; }
  .hero__features { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 13px; }
  .hero__feature { gap: 8px; font-weight: 500; }

  /* Intro */
  .intro { padding: 58px 0 60px; }
  .intro__title { font-size: 22px; line-height: 29px; }
  .intro__list { display: none; }

  /* Lợi ích */
  .benefits { padding: 58px 0 110px; }
  .benefits__bg { background: url("../images/mobile/bg-benefits.jpg") center top / cover no-repeat; }
  .benefits__inner { padding-top: 0; gap: 38px; }
  .benefits__head { width: 100%; }
  .benefits__desc { margin-top: 24px; text-align: justify; }
  .benefits__list { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 38px; }
  .benefit { width: 100%; }
  .benefit--mid { padding-top: 62px; }
  .benefit__icon { right: -12px; }

  /* Lĩnh vực */
  .fields__intro,
  .fields__right { width: calc(100% - 32px); }
  .acc-item__more { margin-top: 12px; }

  /* Đội ngũ */
  .team { padding: 58px 0 74px; }
  .team__bg { background: url("../images/mobile/bg-team.jpg") center top / cover no-repeat; }
  .slider { gap: 36px; }
  /* 1 slide = 2 nhân sự */
  .slider__track { gap: 12px; }
  .member,
  .member--h331,
  .member--w283 { width: calc((100% - 12px) / 2); aspect-ratio: 179 / 240; }
  .member__img,
  .member__img--1,
  .member__img--2,
  .member__img--3,
  .member__img--4 { bottom: 58px; height: calc(100% - 58px); }
  .member__info { height: 58px; padding: 12px 12px 10px; }
  .member__name { font-size: clamp(11px, 3.23vw, 13px); line-height: 17px; overflow: hidden; text-overflow: ellipsis; }
  .member__role { font-size: 12px; line-height: 16px; }

  /* Tin tức */
  .news { padding: 58px 0; }
  .news .sec-title { text-align: center; }
  .news__list { gap: 34px; }
  .news-item { grid-template-columns: 1fr 30px; }
  .news-item__main { gap: 16px !important; justify-content: space-between; }
  .news-item__thumb { width: 113px; height: 92px; }
  .news-item__title { font-size: 16px; font-weight: 500; line-height: 21px; }
  .circle-arrow { width: 30px; height: 30px; }
  .circle-arrow img { width: 17px; height: 13.744px; }

  /* Đối tác */
  .partners { margin-top: 58px; gap: 40px; }
  .partners .sec-title { text-align: center; }
  .partners__box { height: 73px; }
  .partners__viewport { top: 0; height: 73px; }
  .partners__track { gap: 12px; }
  .partner { width: 115px; height: 73px; }
  .partner img { translate: -50% -50%; top: 50%; left: 50%; }
  .partner__img--1 { width: 75.2px; height: 67.6px; }
  .partner__img--2 { width: 43.5px; height: 56.6px; }
  .partner__img--3 { width: 74px; height: 45px; }
  .partner__img--4 { width: 53px; height: 53px; }
  .partner__img--5 { width: 96px; height: 27px; }
  .partner__img--6 { width: 86.3px; height: 33.1px; }
  .partner__img--7 { width: 52.4px; height: 52.4px; }

  /* Cam kết */
  .commit { padding: 58px 0; }
  .commit__bg { background: url("../images/mobile/bg-commit.jpg") center top / cover no-repeat; }
  .commit__list { grid-template-columns: 1fr; gap: 32px; }

  /* Giới thiệu */
  .about__inner { width: calc(100% - 32px); }
  .stats { flex-wrap: wrap; justify-content: center; gap: 24px 10px; }
  .stat { width: calc(50% - 5px); flex: none; }
  .stat--w166 { width: 166px; }
  .stat__num { font-size: 40px; line-height: 52px; }
  .stat__label--left { text-align: center; }

  /* Liên hệ */
  .contact { padding: 58px 0 78px; }
  .contact__title-1 { font-size: clamp(32px, 9.45vw, 38px); line-height: 46px; }
  .contact-form__grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
  .field--service { order: 3; }
  .field--email { order: 4; }
  .contact-form__fields { padding-bottom: 3px; }

  /* Footer */
  .footer__bg { background: url("../images/mobile/bg-footer.jpg") center top / cover no-repeat; }
  .footer__inner { padding: 73px 16px 52px; }
  .footer__group { flex-direction: column; }
  .footer__col--info { width: 100%; }
  .footer__social { right: 16px; top: 10px; }
}