.board { background: #F2FAE3;padding: 28px 20px 36px; }
.section-title { font-family: "Playfair Display", Georgia, serif; color: var(--green); }
/* Khung ảnh: bo tròn + bóng nhẹ giống pill */
.flow-wrap{
  padding: 10px 8px;
}
.flow-figure { max-width: 1440px; }

   /* ===== Product detail (SVR 3L) ===== */
    .product-detail { background: #FFFFFF !important; }
    .product-detail .product-title { color: var(--brand-green); font-family: "Playfair Display", Georgia, serif; font-size: 35px; line-height: 45px; }

    .main-media { background: #fff; border: 1px solid #D8D8D8; border-radius: 40px; padding: 28px; box-shadow: none; }
    .main-media .carousel-item { display: flex; align-items: center; justify-content: center; height: var(--media-h-md, 360px) !important; } @media (min-width: 992px){ .main-media .carousel-item { height: var(--media-h-lg, 440px) !important; } }
    .main-media .carousel-item img { width: 100%; height: 100%; object-fit: contain; }

    .thumbs { position: relative; padding: 0 44px; }
    .thumbs .nav-btn { width: 36px; height: 36px; border-radius: 9999px; border: 1px solid #d7e6dd; background: #fff; display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.06);} .thumbs .nav-btn.nav-left{ left: 4px; } .thumbs .nav-btn.nav-right{ right: 4px; } .thumbs .nav-btn:hover { border-color: var(--brand-accent); }
    .thumbs .nav-btn:hover { border-color: var(--brand-accent); }

    .thumbs .thumb { flex: 0 0 90px; width: 90px; height: 90px; border-radius: 6px; padding: 0; border: 1px solid #F0F0F0; background: #fff; overflow: hidden; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; }
    .thumbs .thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
    .thumbs .thumb.active { border: 3px solid var(--accent-strong); box-shadow: none; outline: 0; }

    .specs dt { color: #11261B; font-weight: 700; font-size: 15px; line-height: 22.5px; }
    .specs dd { color: #11261B; font-weight: 400; font-size: 15px; line-height: 22.5px; }
    .badge-cat { background: #F8F8F8 !important; border: 1px solid #D8D8D8 !important; color: #11261B !important; min-height: 32px; height: 32px; padding: 4px 24px 4px 16px; border-radius: 80px !important; display: inline-flex; align-items: center; line-height: 1; }

    .btn-brand { background: var(--brand-green); border-color: var(--brand-green); }
    .btn-brand:hover { filter: brightness(0.95); }


    .btn-rect { border-radius: 4px !important; height: 50px !important; padding: 0 40px !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
    .btn-sample { background: #fff; border: 2px solid var(--brand-green); color: var(--brand-green); }
    .btn-sample:hover { background: #f7fff8; }
    .btn-quote { background: var(--brand-green); border: 0; color: #fff; }
    .btn-quote:hover { filter: brightness(0.95); }
  .thumbs-track { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scroll-behavior: smooth; scroll-snap-type: x proximity; } .thumbs-track .thumb { scroll-snap-align: start; }
    
    .main-media, .main-media .carousel, .main-media .carousel-inner, .main-media .carousel-item { background: #fff !important; border-radius: 40px !important; }
    .main-media { border: 1px solid #D8D8D8 !important; padding: 28px !important; }
    .main-media .carousel-item { min-height: 332px !important; }
    .main-media img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; object-position: center; display: block; margin: 0 auto; }
    .main-media .carousel-control-prev, .main-media .carousel-control-next { display: none !important; }

    .thumbs { padding: 0 44px !important; }
    .thumbs-track { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scroll-behavior: smooth; scroll-snap-type: x proximity; }
    .thumbs-track::-webkit-scrollbar { height: 0; }
    .thumbs-track { scrollbar-width: none; }
    .thumbs .thumb { flex: 0 0 90px; width: 90px; height: 90px; border-radius: 6px; padding: 0; border: 1px solid #F0F0F0; background: #fff; overflow: hidden; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; }
    .thumbs .thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
    .thumbs .thumb.active { border: 3px solid #11A811; box-shadow: none; outline: 0; }
    .thumbs .nav-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #d7e6dd; background: #fff; display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.06);} 
    .thumbs .nav-btn.nav-left{ left: 4px; } 
    .thumbs .nav-btn.nav-right{ right: 4px; } 
    .thumbs .nav-btn:hover { border-color: var(--brand-accent); }

    .product-detail .product-title { color: #2E7D32 !important; font-family: "Playfair Display", Georgia, serif; font-size: 35px; line-height: 45px; }
    .specs dt { color: #11261B !important; font-weight: 700; font-size: 15px; line-height: 22.5px; }
    .specs dd { color: #11261B !important; font-weight: 400; font-size: 15px; line-height: 22.5px; }

    .btn-rect { border-radius: 4px !important; height: 50px !important; padding: 0 40px !important; font-weight: 700 !important; font-size: 15px !important; line-height: 22.5px !important; }
    .btn-sample { background: #fff !important; border: 2px solid #2E7D32 !important; color: #2E7D32 !important; }
    .btn-sample:hover { background: #f7fff8 !important; }
    .btn-quote { background: #2E7D32 !important; border: 0 !important; color: #fff !important; }
    .btn-quote:hover { filter: brightness(0.95) !important; }
    .prod-info { max-width: 560px; }
    .prod-info .product-title { margin-bottom: 12px; }
    .specs { --gap-y: 10px; }
    .specs dt, .specs dd { padding: 6px 0; margin: 0; }
    .specs dt { color: #11261B !important; font-weight: 700; }
    .specs dd { color: #11261B !important; }
    .hr-soft { border-top: 1px solid #E3E7E2; opacity: 1; }
    .cta-row { display: flex; gap: 20px; }
    .cta-row .btn-rect { flex: 1 1 0; }
  .gx-90{ --bs-gutter-x:90px; }

  /* ===== Product description tabs (2 columns) – scoped ===== */
.pd-tabs { margin-top: 16px; }
.pd-tabs .pd-tablist { gap: 15px; justify-content: center; }

.pd-tabs .pd-tablink {
  border-radius: 4px 4px 0 0;
  padding: 8px 40px;
  font-weight: 600;
  color: #111;             
}
.pd-tabs .pd-tablink.active {
  background: var(--mint);
  color: var(--green);
  box-shadow: 0 -2px 0 var(--green) inset;
}

.pd-divider { border-top: 2px solid #EBEBEB; margin-top: 0px; margin-bottom: 24px; }

.pd-content h6 { font-weight: 700; color: #111; margin-bottom: .25rem; }
.pd-content p,
.pd-content li { color: #111; font-size: 15px; line-height: 1.5; }
.pd-content ul { padding-left: 1rem; margin-bottom: 1rem; }
/* Ngăn navbar .nav-link ảnh hưởng tabs */
.pd-tabs .nav-link{ color:#111 !important; }
.pd-tabs .nav-link::after{ content:none !important; }   /* bỏ gạch vàng */
.pd-tabs .nav-link:hover{ color:#111 !important; }

/* nếu còn dùng desc-tabs ở nơi khác thì thêm: */
.desc-tabs .nav-link{ color:#111 !important; }
.desc-tabs .nav-link::after{ content:none !important; }
.desc-tabs .nav-link:hover{ color:#111 !important; }
/* Nút Báo giá nhanh trên NAVBAR: luôn VÀNG */
.navbar-custom .btn-quote{
  background: var(--yellow) !important;
  color: var(--green) !important;
  border: 0; border-radius: 6px;
  padding: 6px 12px;
  font: 700 14px Roboto, system-ui;
}
.navbar-custom .btn-quote:hover{ color:#fff !important; }

/* Nút Quote ở trang sản phẩm (CTA): XANH */
.product-detail .btn-quote{
  background: #2E7D32 !important;
  color: #fff !important;
  border: 0 !important;
}
.product-detail .btn-quote:hover{ filter: brightness(0.95) !important; }
/*  */
/* ===== FAQ (giống mock: có gap, card nổi khi mở) ===== */
.faq-topline{ border-top:1px solid #EBEBEB; margin-bottom:20px; }
.faq-heading{ color:#2E7D32; font-family:"Playfair Display", Georgia, serif; font-size:35px; line-height:45px; margin-bottom:18px; }

.faq-accordion .accordion-item{
  background:#fff;
  border:1px solid #D8D8D8;
  border-radius:5px;
  overflow:hidden;
  /* GAP rõ ràng giữa các item */
  margin-bottom:16px;
  padding: 10px 10px;
}

/* Card nổi khi mở (đúng cảm giác “trên cùng”, không nằm sau) */
.faq-accordion .accordion-item:has(.accordion-collapse.show){
  border-color: transparent;
  box-shadow: 0 24px 33px -15px rgba(149,149,149,.25);
}

/* Header */
.faq-btn{
  padding:18px 20px;
  gap:16px;                           /* khoảng cách icon và chữ */
  color:#11261B;
  font:600 18px/1.35 "Open Sans", system-ui, sans-serif;
  background:#fff;
  box-shadow:none;
}
.faq-btn:not(.collapsed){
  background:#fff;
  border-bottom:1px solid #EBEBEB;
}

/* Icon + / – ở BÊN TRÁI */
.q-plus{
  position:relative;
  width:22px; height:22px; flex:0 0 22px;
}
.q-plus::before, .q-plus::after{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:#11261B; border-radius:20px;
}
.q-plus::before{ width:12px; height:3px; }   /* dấu – */
.q-plus::after{ width:3px; height:12px; }    /* dấu |  => + */

/* Khi MỞ: chỉ còn dấu – và chuyển xanh */
.faq-btn:not(.collapsed) .q-plus::after{ opacity:0; }
.faq-btn:not(.collapsed) .q-plus::before{ background:#52BD95; }

/* Body */
.faq-accordion .accordion-body{
  color:#11261B; opacity:.85;
  font:400 14px/1.5 "Open Sans", system-ui, sans-serif;
  padding:16px 20px 20px;
}

/* Loại bỏ caret mặc định của Bootstrap để không “đè” layer */
.faq-accordion .accordion-button::after{ display:none; }

.faq-heading{ margin-bottom: 28px; }   /* trước là ~18px */
.faq-topline{ margin-bottom: 24px; }   /* line cách tiêu đề 24px */

/* accordion full width theo container (= line) */
.faq-accordion{ max-width: 100% !important; width: 100%; }
 :root{
      --green:#2E7D32;
      --yellow:#FCCD04;
      --ink:#11261B;
      --muted:#F7F7F7;
      --line:#D8D8D8;
    }

    /* ===== BLOCK “Sản Phẩm Tương Tự” ===== */
    .sim-prod .sim-title{
      font: 600 36px/1.2 "Playfair Display", Georgia, serif;
      color: var(--green);
    }
    .sim-prod .sim-title-underline{
      width: 440px; height: 3px; background: var(--yellow);
      
    }
    .sim-prod .see-all-link{
      color: var(--green);
      font: 400 15px/1.5 Roboto, system-ui;
      text-decoration: none;
    }
    .sim-prod .see-all-link:hover{ text-decoration: underline; }

    /* Cards */
    .sim-prod .prod-card{
      border:1px solid var(--line);
      border-radius:6px;
      overflow:hidden;
      background:#fff;
      height:100%;
      display:flex;
      flex-direction:column;
    }
    .sim-prod .card-media{
      min-height:220px;
      display:flex; align-items:center; justify-content:center;
      background:#fff;
      border-bottom:1px solid var(--line);
      padding:24px;
    }
    .sim-prod .card-media img{
      max-width:100%; max-height:180px; object-fit:contain; display:block;
    }
    .sim-prod .card-footer{
      background: var(--muted);
      padding:10px 14px;
    }
    .sim-prod .card-footer .name{
      color: var(--ink);
      font: 700 18px/1.2 "Playfair Display", serif;
    }
    .sim-prod .btn-buy{
      background: var(--green);
      color:#fff;
      border:0;
      height:32px;
      padding:0 12px;
      border-radius:4px;
      font:700 11px/1.2 "Open Sans", system-ui;
    }

    /* Viewport để canh giữa nav */
    .sim-prod .slider-viewport{
      position: relative;
      overflow: visible;          /* để nút tràn ra ngoài */
      padding: 0 14px;            /* khoảng cách 2 bên track */
      margin-top: 12px;
    }

    /* Nút điều hướng: ra hẳn ngoài & căn giữa */
    .sim-prod .nav-btn{
      --size:48px;
      position:absolute;
      top:50%; transform:translateY(-50%);
      width:var(--size); height:var(--size);
      display:flex; align-items:center; justify-content:center; /* GIỮA NÚT */
      background:#F7F7F7; color:#111;
      border:0; border-radius:6px;
      box-shadow:0 2px 10px rgba(0,0,0,.12);
      z-index:5; cursor:pointer;
      user-select:none;
    }
    .sim-prod .nav-prev{ left: calc(-1 * var(--size) - 8px); }
    .sim-prod .nav-next{ right: calc(-1 * var(--size) - 8px); }

    .sim-prod .nav-btn svg{
      width:22px; height:22px; display:block;
      stroke:#0A0D0D; stroke-width:2; fill:none;
      stroke-linecap:round; stroke-linejoin:round;
    }

    .sim-prod .nav-btn:focus-visible{
      outline:2px solid rgba(17,38,27,.35); outline-offset:2px;
    }
    .sim-prod .nav-btn:hover{ filter: brightness(0.98); }

    /* Đưa nút vào trong chút ở màn nhỏ để không bị cắt */
    @media (max-width: 992px){
      .sim-prod .nav-prev{ left: 6px; }
      .sim-prod .nav-next{ right: 6px; }
      .sim-prod .sim-title{ font-size:30px; }
      .sim-prod .sim-title-underline{ width:320px; }
    }
     /* ========== FOOTER ========== */
  .mrg-footer {
    color: #fff;
    background: linear-gradient(133deg, #725030 0%, #83653A 25%, #947044 50%, #83613E 100%);
    position: relative;
    /* gutter trái/phải + max width */
    --side-pad: 80px;
    --maxw: 1380px;
  }

  /* wrapper mở rộng – xích 2 bên */
  .mrg-footer__inner,
  .ft-bottom__inner {
    width: min(var(--maxw), calc(100vw - var(--side-pad)*2));
    margin-left: auto;
    margin-right: auto;
  }

  .mrg-footer__inner {
    display: grid;
    grid-template-columns: 316px 1fr 1fr 1fr 1.25fr;
    column-gap: 44px;
    row-gap: 28px;
    padding: 40px 0 34px;
  }

  /* brand */
  .ft-brand {
    display: grid;
    gap: 26px;
    align-content: start;
  }

  .ft-brand__logo {
    width: 90px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  .ft-brand__intro {
    display: grid;
    gap: 6px;
  }

  .ft-brand__name {
    margin: 0;
    font: 700 18px/1.5 "Playfair Display", serif;
  }

  .ft-brand__sub {
    margin: 0;
    font: 400 15px/1.5 "Open Sans", system-ui, sans-serif;
  }

  .ft-social {
    display: flex;
    gap: 12px;
  }

  .ft-social__btn {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
    transition: filter .2s ease, transform .06s ease, background .2s ease;
    border: 1px solid rgba(255, 255, 255, .25);
  }

  .ft-social__btn:hover {
    filter: brightness(1.08);
    background: rgba(255, 255, 255, .16);
  }

  .ft-social__btn:active {
    transform: translateY(1px);
  }

  /* columns */
  .ft-col__title {
    margin: 0 0 14px;
    font: 700 16px/1 "Open Sans", system-ui, sans-serif;
  }

  .ft-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
  }

  .ft-list a {
    color: #fff;
    text-decoration: none;
    font: 400 13px/1.6 "Open Sans", system-ui, sans-serif;
    opacity: .95;
  }

  .ft-list a:hover {
    text-decoration: underline;
  }

  /* contact – mặc định canh giữa theo icon */
  .ft-contact .ft-contact__row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0 0 12px;
    justify-self: start;
    font: 400 13px/1.6 "Open Sans", system-ui, sans-serif;
  }

  .ft-ico {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 18px;
  }

  .ft-ico svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .ft-contact .ft-contact__row p,
  .ft-contact .ft-contact__row a {
    margin: 0;
  }

  .ft-contact a {
    color: #fff;
    text-decoration: none;
  }

  .ft-contact a:hover {
    text-decoration: underline;
  }

  .ft-contact__hotline {
    color: #FCCD04;
    font: 700 19px/1.2 "Open Sans", system-ui, sans-serif;
  }

  /* HÀNG ĐỊA CHỈ: canh theo đỉnh icon (giống ảnh mẫu) */
  .ft-contact .ft-contact__row--addr {
    align-items: flex-start;
  }

  .ft-contact .ft-contact__row--addr .ft-ico {
    margin-top: 4px;
  }

  /* đẩy icon xuống 1 chút cho đẹp */
  .ft-contact .ft-contact__row--addr p {
    line-height: 1.6;
  }

  .ft-contact .ft-contact__row--addr p strong {
    display: block;
    font-weight: 700;
    font-size: 13px;
    /* muốn to hơn/nhỏ hơn chỉnh ở đây */
    line-height: 1.3;
    margin-bottom: 6px;
  }

  /* bottom bar */
  .mrg-footer__bottom {
    background: rgba(34, 34, 34, .25);
  }

  .ft-bottom__inner {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 400 13px/1.2 "Open Sans", system-ui, sans-serif;
  }

  /* responsive */
  @media (max-width:1200px) {
    .mrg-footer {
      --side-pad: 56px;
    }
  }

  @media (max-width:1024px) {
    .mrg-footer__inner {
      grid-template-columns: 1fr 1fr;
      row-gap: 24px;
    }
  }
   @media (max-width:994px) {
    .pd-tablist{
      width: 100%;
    }
    .pd-tablist .nav-item{
      width: auto;
    }
  }
  @media (max-width: 575px) {
    .pd-tabs .pd-tablist{
       gap: 0px;
    }

  .pd-tablist {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pd-tablist .nav-item {
    flex: 0 0 auto; /* Giữ item không co giãn */
    white-space: nowrap; /* Không cho text xuống dòng */
  }

  /* Ẩn thanh scroll nếu muốn */
  .pd-tablist::-webkit-scrollbar {
    display: none;
  }
}


  @media (max-width:640px) {
    .mrg-footer {
      --side-pad: 16px;
      --maxw: 9999px;
    }

    .mrg-footer__inner {
      grid-template-columns: 1fr;
      padding: 32px 0 24px;
    }

    .ft-brand__logo {
      width: 120px;
    }

    .ft-contact__hotline {
      font-size: 12px;
    }
  }

  @media (max-width: 768px) {
  .flow-figure img {
    content: url("public/img/anhquytrinh-mobile.png");
  }
}

/* GIỮ ratio, không xoá ::before */
.main-media .ratio{
  /* mặc định 1:1, JS sẽ cập nhật biến này theo ảnh */
  --bs-aspect-ratio: 100%;
  border-radius: 24px;
  overflow: hidden;
}
.main-media .ratio img#prodMainImg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;   /* không crop ảnh, vừa khung */
  object-position: center;
}




/* (Tùy chọn) giới hạn chiều cao để ảnh quá cao không kéo dài trang */
@media (min-width: 992px) {
  .main-media .ratio {
    max-height: 560px;         /* chỉnh theo thiết kế của bạn */
  }
  .main-media .ratio img#prodMainImg {
    max-height: 560px;
  }
}