/* ================= HERO ================= */
:root {
    --brand: #2E7D32;
    --brand-800: #1f5c24;
    --green: #2E7D32;
    --accent: #8bd38f;
    --divider: rgba(0, 0, 0, .08);
    --brand-green: #2E7D32;
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(0, 0, 0, .25);
    --brand-deep: #093E08;
    /* thêm mới */
    --brand-yellow: #FCCD04;
    --ink-900: #2f4a36;
    --ink-700: #415b4d;
    --rule: rgba(46, 125, 50, .18);
    --soft-green: rgba(46, 125, 50, .12);
    --ink-700: #0f172a;
    --ink-500: #475569;
    /* brand */
    --green: #2E7D32;
    --yellow: #FCCD04;
    --white: #fff;
    --text: #222;
    --brand: var(--green);
    --accent: var(--yellow);
     /* certificates/awards */
    --cc-dark: #172432;
    --cc-bg: #F2FAE3;
    --cc-grad: linear-gradient(130deg, #FFBC3F 0%, #F1B005 23%, #FFF2CD 33%, #F1B005 52%, #B18210 100%);
    --cc-radius: 16px;
    --cc-cap-h: 88px;
    --cc-frame-ratio: 3 / 4;
    
    /* solutions */
    --sol-bg: #F2FAE3;
    --sol-card: #fff;
    --sol-ink: #172432;
    --sol-muted: rgba(0, 0, 0, .87);
    --sol-radius: 24px;
    --sol-shadow: 0 4px 56px rgba(78, 96, 46, .08);
     /* process */
    --flow-bg: #ffffff;
    --nav-h: 90px;
}


/* Khung hero */
.hero-mrg {
    position: relative;
    min-height: 700px; 
    height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    z-index: 0;
    /* tạo stacking context để nền -1 không tụt khỏi trang */
}

/* Nền ảnh full-bleed */
.hero-mrg__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* nằm sau panel/rail nhưng vẫn trong hero */
    background-image: url('../img/hero.png');
    /* nếu đặt CSS trong public/css */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Lớp phủ (tối nhẹ + viền mờ 2 bên cho nổi panel) */
.hero-mrg__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)),
        radial-gradient(80% 80% at 50% 20%, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .38) 100%);
    pointer-events: none;
}

/* Panel nội dung */
.hero-mrg__panel {
    width: min(740px, 92%);
    min-height: 620px;
    padding: 40px 36px;
    background: rgba(0, 82, 30, .5);
    /* xanh semi-transparent */
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    color: #fff;
}

/* Brand + logo */
.hero-mrg__brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero-mrg__mark {
    height: 76px;
    width: auto;
    display: block;
}

/* Tiêu đề & mô tả */
.hero-mrg__title {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: clamp(26px, 2.4vw + 16px, 36px);
    line-height: 1.35;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.hero-mrg__desc {
    max-width: 560px;
    font: 400 15px/1.6 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    margin: 0;
    opacity: .95;
}

/* Nút hành động */
.hero-mrg__actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 40px;
    border-radius: 6px;
    font: 700 15px/22.5px 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .2s, opacity .2s, transform .06s, box-shadow .2s;
}

.hero-btn:active {
    transform: translateY(1px);
}

.hero-btn--light {
    background: #fff;
    color: var(--brand);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.hero-btn--light:hover {
    opacity: .95;
}

.hero-btn--solid {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.hero-btn--solid:hover {
    background: #276c2b;
}
@media (max-width: 1250px) {
      .hero-mrg {
        
        height: 40vh;
    }
}
/* Responsive nhỏ hơn */
@media (max-width: 991.98px) {
    .hero-mrg {
       
        height: 34vh;
    }

    .hero-mrg__panel {
        min-height: unset;
        height: 100%;
        width: 100%;
        padding: 28px 24px;
    }
}


@media (max-width: 575.98px) {
    .hero-mrg {
        
        height: 25vh;
    }

    .hero-mrg__title {
        font-size: clamp(22px, 5.2vw + 10px, 28px);
    }

    .hero-mrg__desc {
        font-size: 14px;
    }
}

/* FLOAT CONTACT */
.contact-rail {
    position: fixed;
    right: 16px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1500;
}

/* Mobile Quick Actions */
.mobile-quick-actions {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 24px;
    z-index: 1040;
}

.mobile-fab {
    position: relative;
    width: 60px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    opacity: 0.8;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.mobile-fab::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 2px;
    width: 44px;
    height: 44px;
    background: var(--brand);
    border-radius: 50%;
    box-shadow: 2px 0 0 var(--accent);
}

.mobile-fab svg {
    position: relative;
    z-index: 1;
}

.mobile-fab:hover {
    opacity: 1;
}

.mobile-fab-whatsapp {
    background: #25D366;
}

.mobile-fab-whatsapp::before {
    background: #25D366;
}

.cr-badge {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: var(--green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .10), 0 10px 18px rgba(0, 0, 0, .16);
    transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}

.cr-badge:hover {
    filter: brightness(1.07);
}

.cr-badge:active {
    transform: translateY(1px);
}

.cr-badge img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}

@media (max-width:575.98px) {
    .contact-rail {
        right: 12px;
        bottom: 12px;
        gap: 10px;
    }
}

/* HERO side rail */
.hero-rail {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 24px;
    z-index: 1040;
}

.rail-item {
    position: relative;
    width: 60px;
    height: 48px;
    display: block;
}

.rail-tail {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 48px;
    background: var(--brand);
    opacity: .30;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

@media (max-width: 750px){
.rail-tail {
  width: 50px;
  height: 44px;
}
}

@media (max-width: 575px){
.rail-tail {
  width: 48px;
  height: 42px;
}
}
.rail-btn {
    position: absolute;
    left: 14px;
    top: 2px;
    width: 44px;
    height: 44px;
    background: var(--brand);
    border-radius: 9999px;
    box-shadow: 2px 0 0 var(--accent);
    transition: transform .06s ease, filter .2s ease;
}

.rail-icon {
    position: absolute;
    left: 24px;
    top: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

.rail-icon i {
    font-size: 20px;
    line-height: 1;
    color: #fff;
}

.rail-item:hover .rail-btn {
    filter: brightness(1.05);
}

.rail-item:active .rail-btn {
    transform: scale(.98);
}

@media (max-width:575.98px) {
    .hero-rail {
        left: 0;
        gap: 20px;
    }

    .rail-item {
        width: 52px;
        height: 44px;
    }

    .rail-btn {
        left: 12px;
        top: 2px;
        width: 40px;
        height: 40px;
    }

    .rail-icon {
        left: 22px;
        top: 10px;
        width: 20px;
        height: 20px;
    }

    .rail-icon i {
        font-size: 18px;
    }
}
 /* PRODUCT STRIP */
  .prod-strip {
    --card-h: 240px;
    width: 100%;
    color: #fff;
  }

  .prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #e7eee9;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .prod-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #fff;
    border-right: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
    overflow: hidden;
    outline: 0;
  }

  .prod-card:nth-child(2n) {
    background: var(--mint);
  }

  .prod-card:nth-child(4n) {
    border-right: 0;
  }

  .prod-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, .35) inset;
  }

  .prod-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(90deg, var(--brand-800) 0%, var(--brand) 100%);
    color: #fff;
    border-bottom: 1px solid var(--divider);
    font: 600 20px "Playfair Display", serif;
  }

  .prod-head .bi {
    font-size: 1.05rem;
    opacity: .95;
  }

  .prod-media {
    height: var(--card-h);
    padding: 24px 18px;
  }

  .prod-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    transition: transform .18s ease;
  }

  .prod-card:hover .prod-media img {
    transform: translateY(-2px);
  }

  .prod-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 80px;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .4px;
    background: url("../img/line.png") center/cover no-repeat;
    border-top: 1px solid rgba(0, 0, 0, .2);
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .prod-cta span {
    font-size: 20px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .6);
  }

  .prod-cta .bi {
    font-size: 1.2rem;
  }

  .prod-cta:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  @media (max-width:991.98px) {
    .prod-strip {
      --card-h: 220px;
    }

    .prod-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .prod-card {
      border-right: 1px solid var(--divider);
    }

    .prod-card:nth-child(4n) {
      border-right: 1px solid var(--divider);
    }

    .prod-card:nth-child(2n) {
      border-right: 0;
    }
  }

  @media (max-width:575.98px) {
    .prod-strip {
      --card-h: 180px;
    }

    .prod-grid {
      grid-template-columns: 1fr;
    }

    .prod-card {
      border-right: 0;
    }

    .prod-head {
      font-size: 18px;
    }

    .prod-cta {
      padding: 30px 16px;
    }

    .prod-cta span {
      font-size: 18px;
    }
  }
    /* chung chi */
/* CERTIFICATES / AWARDS (tái dùng) */
.cc { background: var(--cc-bg); }
.cc--white { background: #fff; }

.cc__head {
  width: var(--wrap);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 60px 0;
}

.cc__title-wrap { display: grid; gap: 20px; }
.cc__title { margin: 0; color: var(--brand); font: 600 50px/1.2 "Playfair Display", serif; }
.cc__bar { width: var(--bar-w); height: 3px; background: var(--yellow); border-radius: 999px; margin: 12px 0 0; }

.cc__nav { display: flex; gap: 8px; }
.cc__navbtn {
  width: 40px; height: 40px; border: none; border-radius: 12px; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: filter .2s ease, transform .06s ease;
}
.cc__navbtn--prev { background: var(--cc-dark); }
.cc__navbtn--next { background: var(--brand); }
.cc__navbtn:hover { filter: brightness(1.08); }
.cc__navbtn:active { transform: scale(.98); }
.cc__navbtn:focus { outline: 2px solid var(--yellow); outline-offset: 2px; }

.tk__ico { width: 18px; height: 18px; fill: #fff; display: block; }

/* ==== ONE-ROW CAROUSEL ==== */
:root { --cc-gap: 32px; }

.cc__track{
  width: var(--wrap);
  margin: 0 auto;
  display: flex;                 /* luôn 1 hàng */
  gap: var(--cc-gap);
  overflow: hidden;              /* ẩn phần tràn */
  scroll-snap-type: x mandatory; /* khóa vào từng thẻ */
  scroll-behavior: smooth;
}

.cc-card{
  flex: 0 0 calc((100% - 2*var(--cc-gap)) / 3); /* Desktop: 3 thẻ/khung nhìn */
  display: flex; flex-direction: column; align-items: center;
  border-radius: var(--cc-radius);
  transition: transform .18s ease;
  background: transparent;
  scroll-snap-align: start;      /* bám mép trái khi dừng */
}
.cc-card:hover{ transform: translateY(-2px); }

.cc-card__frame{
  width: 100%; aspect-ratio: var(--cc-frame-ratio);
  padding: 11px; background: var(--cc-grad);
  border-top-left-radius: var(--cc-radius);
  border-top-right-radius: var(--cc-radius);
  display: grid; place-items: center;
}
.cc-card__img{
  width: 100%; height: 100%; object-fit: contain; background: #fff;
  display: block; border-radius: 6px;
}
.cc-card__cap{
  height: var(--cc-cap-h); width: 100%; text-align: center; color:#fff; background: var(--brand);
  border-bottom-left-radius: var(--cc-radius);
  border-bottom-right-radius: var(--cc-radius);
  font: 600 18px/1.35 "Playfair Display", serif;
  display: flex; align-items: center; justify-content: center;
}

/* Tablet: 2 thẻ/khung nhìn */
@media (max-width: 1023.98px){
  :root { --cc-gap: 24px; }
  .cc__track{ width: var(--wrap); }
  .cc-card{ flex-basis: calc((100% - var(--cc-gap)) / 2); }
}

/* Mobile: 1 thẻ/khung nhìn (chiếm ~86%) */
@media (max-width: 640px){
  :root { --cc-gap: 16px; }
  .cc__track{ padding: 0 16px 6px; }
  .cc-card{ flex-basis: 86%; }
}

.cc__track.dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}
.cc__track.dragging .cc-card { pointer-events: none; }

    /* SOLUTIONS */
  .sol {
    background: var(--sol-bg);
    padding: 80px 0;
    display: grid;
    place-items: center;
  }
  .sol__head {
    margin-bottom: 40px;
  }

  .sol__title {
    margin: 0;
    color: var(--brand);
    font: 600 50px/1.2 "Playfair Display", serif;
  }

  .sol__bar {
    height: 3px;
    width: 200px;
    background: var(--yellow);
    border-radius: 999px;
    margin-top: 12px;
  }

  .sol__grid {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(12, 1fr);
  }

  .sol__col--4 {
    grid-column: span 4;
  }

  .sol__col--6 {
    grid-column: span 6;
  }

  .sol__card {
    background: var(--sol-card);
    border-radius: var(--sol-radius);
    box-shadow: var(--sol-shadow);
    padding: 40px 30px 36px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transition: transform .15s ease, box-shadow .15s ease;
  }

  .sol__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 56px rgba(78, 96, 46, .12);
  }

  .sol__card-icon {
    height: 140px;
    width: 100%;
    display: grid;
    place-items: center;
  }

  .sol__card-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
  }

  .sol__card-title {
    margin: 0;
    color: var(--sol-ink);
    font: 600 24px/1.35 "Playfair Display", serif;
  }

  .sol__card-desc {
    margin: 0;
    color: var(--sol-muted);
    font: 400 15px/22.5px "Roboto", system-ui, sans-serif;
  }

  @media (max-width:1023.98px) {
    .sol__col--4 {
      grid-column: span 6;
    }

    .sol__col--6 {
      grid-column: span 6;
    }
  }

  @media (max-width:640px) {
    .sol {
      padding: 60px 0;
    }

    .sol__grid {
      grid-template-columns: 1fr;
    }

    .sol__col--4,
    .sol__col--6 {
      grid-column: 1 / -1;
    }
  }
  /* PROCESS */
  .proc {
    background: var(--flow-bg);
    padding: 72px 0;
    display: grid;
    place-items: center;
  }

  .proc__head {
    margin-bottom: 28px;
  }

  .proc__title {
    margin: 0;
    color: var(--brand);
    font: 600 50px/1.2 "Playfair Display", serif;
  }

  .proc__bar {
    height: 3px;
    width: var(--bar-w);
    background: var(--yellow);
    border-radius: 999px;
    margin-top: 12px;
  }

  .proc__figure {
    margin: 0;
    padding: 14px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .08);
  }

  .proc__figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  @media (max-width:640px) {
    .proc {
      padding: 60px 0;
    }

    .proc__figure {
      padding: 10px;
      border-radius: 14px;
    }

    .proc__figure img {
      border-radius: 8px;
    }
  }
  /* FUTURE PROJECTS */
  .proj {
    --proj-brand: var(--green);
    --proj-accent: var(--yellow);
    --proj-bg: #F2FAE3;
    --proj-ink: #172432;
    --proj-muted: #4B5563;
    --proj-radius: 24px;
    --proj-shadow: 0 10px 50px rgba(46, 125, 50, .10);
    background: var(--proj-bg);
    padding: 80px 0;
    display: grid;
    place-items: center;
  }

  .proj__inner {
    width: var(--wrap);
  }

  .proj__head {
    margin-bottom: 28px;
  }

  .proj__title {
    margin: 0;
    color: var(--proj-brand);
    font: 600 50px/1.2 "Playfair Display", serif;
  }

  .proj__bar {
    height: 3px;
    width: var(--bar-w);
    background: var(--proj-accent);
    border-radius: 999px;
    margin-top: 12px;
  }

  .proj__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .proj-card {
    background: #fff;
    border-radius: var(--proj-radius);
    box-shadow: var(--proj-shadow);
    padding: 28px 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .15s, box-shadow .15s;
  }

  .proj-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 60px rgba(46, 125, 50, .14);
  }

  .proj-card__icon {
    display: grid;
    place-items: center;
    height: 92px;
    color: var(--proj-brand);
  }

  .proj-icon {
    width: 64px;
    height: 64px;
    display: block;
  }

  .proj-card__title {
    margin: 0;
    color: var(--proj-ink);
    font: 600 22px/1.35 "Playfair Display", serif;
  }

  .proj-card__sub {
    margin-top: -4px;
    color: #6B7280;
    font: 700 13px/1.4 "Roboto", system-ui, sans-serif;
    letter-spacing: .2px;
  }

  .proj-card__desc {
    margin: 0;
    color: var(--proj-muted);
    font: 400 15px/22.5px "Roboto", system-ui, sans-serif;
  }

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

  @media (max-width:640px) {
    .proj {
      padding: 60px 0;
    }

    .proj__grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
  /* SERVICES */
  .svc {
    --svc-brand: var(--green);
    --svc-accent: var(--yellow);
    --svc-ink: #172432;
    --svc-muted: #4B5563;
    background: #fff;
    padding: 80px 0;
    display: grid;
    place-items: center;
  }

  .svc__inner {
    width: var(--wrap);
  }

  .svc__head {
    margin-bottom: 20px;
  }

  .svc__title {
    margin: 0;
    color: var(--svc-brand);
    font: 600 50px/1.2 "Playfair Display", serif;
  }

  .svc__bar {
    height: 3px;
    width: var(--bar-w);
    background: var(--svc-accent);
    border-radius: 999px;
    margin-top: 12px;
  }

  .svc__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
  }

  .svc-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .svc-card__media {
    margin: 0;
    background: #f7f7f7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
    aspect-ratio: 4/5;
  }

  .svc-card__media img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .svc-card__title {
    margin: 8px 0 0;
    color: var(--svc-ink);
    font: 700 20px/1.35 "Playfair Display", serif;
  }

  .svc-card__desc {
    margin: 6px 0 0;
    color: var(--svc-muted);
    font: 400 14.5px/1.7 "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  }

  @media (max-width:1200px) {
    .svc__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

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

  @media (max-width:640px) {
    .svc {
      padding: 60px 0;
    }

    .svc__grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .svc-card__title {
      font-size: 19px;
    }
  }
/* ===== Brand + map sang biến Bootstrap ===== */
:root{
  --green: #2E7D32;
  --yellow: #FCCD04;
  --bs-primary: var(--green);
  --bs-warning: var(--yellow);

  /* Vùng chừa cho side-rail khi ở mobile (khoảng 56–72px tùy icon của bạn) */
  --rail-safe: 72px;
}

/* ===== EXPORT MARKETS ===== */
.exp{
  /* full-bleed an toàn, không tràn ngang */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: clamp(320px, 56vh, 800px);
  position: relative;
}
@supports (width: 1svw){
  .exp{ width: 100svw; margin-inline: calc(50% - 50svw); }
}

.exp-bg{ z-index: 0; }
.exp-bg > img{ object-fit: cover; object-position: center; display:block; }

/* overlay làm chữ nổi */
.exp-overlay{
  z-index: 1;
  pointer-events: none;
}

/* khối nội dung */
.exp-inner{
  position: relative;
  z-index: 2;
  min-height: inherit;      /* để d-flex căn giữa theo chiều dọc */
  padding-block: 3rem;      /* py-5 tương đương */
}


.exp-title{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  /* mobile → desktop */
  font-size: clamp(22px, 7.2vw, 56px);
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  color: #fff;
}

/* gạch vàng co giãn */
.exp-bar{
  width: clamp(160px, 28vw, 320px);
  height: 2px;
  border-radius: 100rem;
  background: var(--bs-warning);
}


/* Bottom bar cho mobile */
.mobile-bottom-bar {
  position: fixed;       /* Dính cố định */
  bottom: 0;             /* Luôn ở dưới cùng */
  left: 0;
  right: 0;
  width: 100%;           /* Chiếm hết chiều ngang */
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(46, 125, 50, 0.9); /* xanh + trong suốt 90% */
  
  z-index: 1000;         /* Luôn nổi trên các phần tử khác */
  box-shadow: 0 -2px 6px rgba(0,0,0,0.15); /* bóng nhẹ cho đẹp */
}

.mobile-bottom-bar .bottom-item:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.5); /* trắng, 50% opacity */
}

.mobile-bottom-bar .bottom-item:last-child {
  border-left: 1px solid rgba(255, 255, 255, 0.5); /* trắng, 50% opacity */
}
.mobile-bottom-bar .bottom-item {
  border-bottom: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  flex: 1;
  display: flex;              /* Hiển thị ngang */
  align-items: center;        /* Căn giữa theo chiều dọc */
  justify-content: center;    /* Căn giữa theo chiều ngang */
  gap: 12px;                   /* Khoảng cách giữa chữ và icon */
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

.mobile-bottom-bar .bottom-item img {
  width: 40px;
  height: 40px;
}

  .pc-only {
    display: flex !important;
  }
  .mobile-only {
    display: none !important;
  }

  @media (max-width: 460px) {
    .mobile-bottom-bar .bottom-item img {
  width: 30px;
  height: 30px;
}
.mobile-bottom-bar .bottom-item {
  font-size: 16px;
}
  }
/* Media query */
@media (max-width: 991px) {
  .pc-only {
    display: none !important;
  }
  .mobile-only {
    display: flex !important;
  }
  .contact-rail{
    bottom: 70px !important;
  }
  .contact-fab{
    bottom: 110px !important;
  }
}



/* Vị trí chung giống trước đây */
.contact-fab{
  position: fixed;
  right: 16px;
  bottom: 60px;
  z-index: 1500;
}

/* Overlay khi mở */
.fab-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.12);
  border: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* Nút chính */
.fab-main{
  width: 44px; height: 44px;
  border: 0;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(46,125,50,.90);     /* xanh brand có trong suốt */
  box-shadow: 0 8px 20px rgba(0,0,0,.18), 0 4px 0 rgba(0,0,0,.12);
  color: #fff; cursor: pointer;
  position: relative;
  transition: transform .18s ease, filter .2s ease, background .2s ease;
}
.fab-main:hover{ filter: brightness(1.05); }

/* Dấu + xoay khi mở (tùy chọn) */
.fab-plus{
  position:absolute; inset:0; margin:auto;
  width: 12px; height: 12px;
  background: #fff;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23000" d="M9 0h2v20H9zM0 9h20v2H0z"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23000" d="M9 0h2v20H9zM0 9h20v2H0z"/></svg>') center/contain no-repeat;
  transition: transform .24s ease;
}

/* Menu con: ẩn mặc định, bật pointer-events khi mở */
.fab-menu{
  position: absolute;
  right: 0px;
  bottom: 56px;
  display: grid;
  gap: 12px;
  pointer-events: none;
}

/* Icon con */
.fab-item{
  width: 46px; height: 46px;
  border-radius: 999px;
  background: var(--green);
  display: grid; place-items: center;
  box-shadow: 0 6px 0 rgba(0,0,0,.10), 0 10px 18px rgba(0,0,0,.16);
  transform: translateY(8px) scale(.92);
  opacity: 0;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
.fab-item img{ width: 22px; height: 22px; display: block; }

/* Stagger (trễ từng nút) khi MỞ */
.fab-item:nth-child(1){ transition-delay: .02s; }
.fab-item:nth-child(2){ transition-delay: .06s; }
.fab-item:nth-child(3){ transition-delay: .10s; }

/* Trễ ngược khi ĐÓNG */
.contact-fab:not(.open) .fab-item:nth-child(1){ transition-delay: .10s; }
.contact-fab:not(.open) .fab-item:nth-child(2){ transition-delay: .06s; }
.contact-fab:not(.open) .fab-item:nth-child(3){ transition-delay: .02s; }

/* Trạng thái mở */
.contact-fab.open .fab-menu{ pointer-events: auto; }
.contact-fab.open .fab-item{ opacity: 1; transform: translateY(0) scale(1); }
.contact-fab.open .fab-backdrop{ opacity: 1; pointer-events: auto; }
.contact-fab.open .fab-plus{ transform: rotate(45deg); } /* thành dấu x */

/* Mobile khoảng cách nhỏ hơn */
@media (max-width:575.98px){
  .contact-fab{ right: 12px; }
}

/* Nút chính – bạn đang dùng nền xanh/ vàng tùy ý */
.fab-main{
  width:44px;height:44px;border:0;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;
  background: rgba(46,125,50,.9); color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.18), 0 4px 0 rgba(0,0,0,.12);
}

/* Khối 2 icon chồng lên nhau */
.fab-ico{ position:relative; width:24px; height:24px; display:block; }
.fab-ico svg{
  position:absolute; inset:0;
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    opacity .22s ease;
  will-change: transform, opacity;
}

/* Trạng thái ĐÓNG: hiện chat, ẩn X */
.fab-chat { opacity:1; transform: rotate(0deg) scale(1); }
.fab-close{ opacity:0; transform: rotate(-90deg) scale(.8); }

/* Trạng thái MỞ: ẩn chat (xoay ra), hiện X (xoay vào) */
.contact-fab.open .fab-chat { opacity:0; transform: rotate(90deg) scale(.8); }
.contact-fab.open .fab-close{ opacity:1; transform: rotate(0deg)  scale(1); }

/* (tùy chọn) delay nhẹ để khớp animation menu con */
.contact-fab.open  .fab-close{ transition-delay:.06s; }
.contact-fab:not(.open) .fab-chat{ transition-delay:.06s; }