/*
 * Trang chủ v2 — style các section NATIVE (port DongA/index.html + style.css).
 * Slider/tab/gallery nằm ở module dsg_* riêng. Palette --brand-* hardcode hex.
 * Layout cột: CSS Grid trên .row.<grid> (0,2,0 + !important thắng .row flex của
 * Flatsome). Card style trên .col-inner. Section dark + .button cần !important.
 *
 * Palette: primary #243642 · secondary #4A6273 · accent #D28C36 ·
 *   accent-hover #B77627 · neutral-dark #1A2229 · neutral-muted #607382 ·
 *   neutral-light #F4F7F9
 */

/* ---------- Grid override (các grid trang chủ) ---------- */
.row.grid-4stats,
.row.grid-4usp,
.row.grid-4press,
.row.grid-4trust,
.row.grid-2contact,
.row.grid-2about {
  display: grid !important;
  gap: 30px;
  align-items: stretch;
}

.row.grid-2about { grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
.row.grid-4stats { grid-template-columns: repeat(4, 1fr); gap: 0; }
.row.grid-4usp { grid-template-columns: repeat(4, 1fr); }
.row.grid-4press { grid-template-columns: repeat(4, 1fr); }
.row.grid-4trust { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.row.grid-2contact { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.row.grid-4stats > *, .row.grid-4usp > *, .row.grid-4press > *,
.row.grid-4trust > *, .row.grid-2contact > *, .row.grid-2about > * { min-width: 0; }

.row.grid-4stats > .col, .row.grid-4usp > .col, .row.grid-4press > .col,
.row.grid-4trust > .col, .row.grid-2contact > .col, .row.grid-2about > .col {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
  padding-bottom: 0;
  padding:0;
}

@media (max-width: 849px) {
  .row.grid-4stats, .row.grid-4usp, .row.grid-4press,
  .row.grid-4trust { 
    grid-template-columns: repeat(2, 1fr) !important; 
    padding:0 10px;
  }
  .dsg-slider__arrow {
width: 30px !important;
    height: 30px !important;
    margin: 0;
    padding: 0px !important;
    padding-bottom: 0px;
    min-height: unset !important;
    font-size: 1.25rem !important;
    padding-bottom: 5px !important;
  }
  .press-mock {
    font-size: 1.25rem;
  }
  .row.grid-2contact, .row.grid-2about { grid-template-columns: 1fr !important; }
}

/* ---------- Eyebrow + tiêu đề dùng chung ---------- */
.section-subtitle p {
  margin: 0 0 12px;
  font-family: 'Montserrat', sans-serif;
  color: #D28C36;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.875rem;
}

.section-title h2 {
  font-family: 'Montserrat', sans-serif;
  color: #243642;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.section-small-title h3 {
  font-family: 'Montserrat', sans-serif;
  color: #243642;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

/* Section nền tối: tiêu đề trắng (testimonial, stats). */
.testimonial-section .section-title h2 { color: #fff; }

/* Gạch cam dưới tiêu đề section (title-divider center) — dùng ::after. */
.section-header .section-title h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background-color: #D28C36;
  border-radius: 2px;
  margin: 16px auto 0;
}
.about-section.section-header .section-title h2::after {
  margin-left: 0;
}
.left-0 {
  left: 0 !important;
}
.section-small-title h3:after {
  content:"";
display: block;
  width: 60px;
  height: 4px;
  background-color: #D28C36;
  border-radius: 2px;
  margin: 16px auto 0;
}
/* ---------- HERO ---------- */
.hero-badge p {
  margin: 0 0 24px;
  display: inline-block;
  background-color: rgba(210, 140, 54, 0.2);
  border: 1px solid #D28C36;
  color: #D28C36 !important;
  padding: 6px 16px !important;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero-title h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 24px;
}

.hero-title .highlight-text { color: #D28C36; }

.hero-desc p {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
  margin: 0 0 32px;
}

.hero-section .btn-accent,
.hero-section a.btn-accent {
  background-color: #D28C36 !important;
  border-color: #D28C36 !important;
  color: #fff !important;
}
.hero-section .btn-accent:hover,
.hero-section a.btn-accent:hover { background-color: #B77627 !important; border-color: #B77627 !important; }

.hero-section .btn-outline-white,
.hero-section a.btn-outline-white {
  background-color: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}
.hero-section .btn-outline-white:hover,
.hero-section a.btn-outline-white:hover { background-color: #fff !important; color: #243642 !important; }

/* ---------- ABOUT (visual grid 2x2 bất đối xứng) ---------- */
.about-visual > .col-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Đặt vị trí grid tường minh + ép height (ux_banner có height inline xung đột). */
.about-visual .visual-card { border-radius: 8px; overflow: hidden; box-shadow: 0 10px 20px rgba(26, 34, 41, 0.08); }
.about-visual .visual-card.primary-visual { grid-column: 1; grid-row: 1 / span 2; height: 480px !important; min-height: 480px !important; }
.about-visual .visual-card.secondary-visual-1 { grid-column: 2; grid-row: 1; height: 232px !important; min-height: 232px !important; }
.about-visual .visual-card.secondary-visual-2 { grid-column: 2; grid-row: 2; height: 232px !important; min-height: 232px !important; }
.about-visual .visual-label p {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}
.about-visual .visual-card .visual-label {
  background: linear-gradient(transparent, rgba(26, 34, 41, 0.9));
  padding: 20px 16px 12px;
}

.about-content .about-text-lead p { font-size: 1.15rem; color: #4A6273; font-weight: 500; margin: 24px 0 16px; }
.about-content .about-text-body p { color: #607382; margin: 0 0 16px; font-size: 0.96rem; line-height: 1.7; }

/* ---------- STATS (khối tối bo góc, 4 counter chia vạch) ---------- */
.stats-section .section-content,
.stats-section .row.grid-4stats {
  background-color: #243642;
  border-radius: 16px;
  padding: 50px 30px;
}

.stats-section .counter-item > .col-inner { border-right: 1px solid rgba(255, 255, 255, 0.1); }
.stats-section .grid-4stats > .col:last-child .col-inner { border-right: 0; }

.counter-number p {
  margin: 0 0 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: #D28C36 !important;
  line-height: 1;
}

.counter-label p {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

/* ---------- USP (featured_box card) ---------- */
.usp-section .usp-card > .col-inner {
  height: 100%;
  background-color: #fff;
  padding: 40px 32px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(26, 34, 41, 0.05);
  border: 1px solid rgba(74, 98, 115, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.usp-section .usp-card:hover > .col-inner {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(26, 34, 41, 0.12);
  border-color: rgba(210, 140, 54, 0.2);
}
.usp-section .usp-card .icon-box-img {
  width: 80px !important;
  height: 80px;
  margin: 0 auto 24px;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(210, 140, 54, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(210, 140, 54, 0.12);
}
.usp-section .usp-card .icon-box-img img { width: 36px; height: 36px; filter: brightness(0) saturate(100%) invert(54%) sepia(99%) saturate(336%) hue-rotate(353deg) brightness(91%) contrast(87%);}
.usp-section .usp-card h3 { font-family: 'Montserrat', sans-serif; color: #243642; font-size: 1.25rem; font-weight: 700; margin: 0 0 12px; }
.usp-section .usp-card p { font-size: 0.9rem; color: #607382; line-height: 1.6; margin: 0; }

/* ---------- PRESS (4 logo chữ) ---------- */
.press-logo-item .ux-text { opacity: 0.45; transition: opacity 0.3s ease; }
.press-logo-item:hover .ux-text { opacity: 1; }
.press-mock {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: #4A6273;
  margin: 0;
}
.press-mock.font-serif { font-family: Georgia, serif; }

/* Section báo chí live là UX Slider (Flickity) autoplay nên logo bị dồn giữa và
   trôi. Ép về hàng tĩnh dàn đều toàn chiều rộng, gốc trái. Flickity đặt
   transform/position bằng inline style nên !important trong stylesheet đè được;
   không cần tắt JS. */
.press-section .flickity-viewport {
  height: auto !important;
  overflow: visible !important;
}
.press-section .flickity-slider {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.press-section .flickity-slider .ux-logo {
  position: static !important;
  left: auto !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
/* Hàng tĩnh thì mũi tên + dots của slider thừa. */
.press-section .flickity-button,
.press-section .flickity-page-dots {
  display: none !important;
}

@media (max-width: 849px) {
  .press-section .flickity-slider {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 30px;
  }
}

/* ---------- CONTACT: trust badges (featured_box ngang) ---------- */
.contact-section .trust-badge-card > .col-inner {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  padding: 22px 24px;
  box-shadow: 0 4px 15px rgba(26, 34, 41, 0.03);
  border: 1px solid rgba(74, 98, 115, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-section .trust-badge-card:hover > .col-inner {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(26, 34, 41, 0.08);
  border-color: rgba(210, 140, 54, 0.25);
}
/* featured_box pos=left: icon trái + text phải. */
.contact-section .trust-badge-card .icon-box {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}
.contact-section .trust-badge-card .icon-box-img {
  width: 48px !important;
  height: 48px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(210, 140, 54, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-section .trust-badge-card .icon-box-img img { width: 24px; height: 24px;filter: brightness(0) saturate(100%) invert(54%) sepia(99%) saturate(336%) hue-rotate(353deg) brightness(91%) contrast(87%); }
.contact-section .trust-badge-card p {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #4A6273;
  line-height: 1.4;
  margin: 0;
}

/* ---------- CONTACT: info + details ---------- */
.contact-info .contact-desc-text p { color: #607382; line-height: 1.7; margin: 0 0 8px; }
.contact-info .contact-detail .icon-box {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
}
.contact-info .contact-detail .icon-box-img {
  width: 50px !important;
  height: 50px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(210, 140, 54, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info .contact-detail .icon-box-img img { width: 20px; height: 20px;filter: brightness(0) saturate(100%) invert(54%) sepia(99%) saturate(336%) hue-rotate(353deg) brightness(91%) contrast(87%); }
.contact-info .contact-detail span {
  font-size: 0.75rem;
  color: #607382;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.contact-info .contact-detail strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  color: #243642;
}

/* Khung form CF7 nền trắng bo góc. */
.contact-form-wrapper > .col-inner {
  background-color: #fff;
  padding: 48px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(26, 34, 41, 0.12);
}

/* ---------- Nội bộ form CF7 trang chủ (port .contact-form của DongA/index.html) ---------- */
.contact-form-wrapper .form-title {
  font-family: 'Montserrat', 'Arial', sans-serif;
  color: #243642;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.contact-form-wrapper .form-subtitle {
  font-size: 0.875rem;
  color: #607382;
  margin: 0 0 32px;
}
.contact-form-wrapper .form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.contact-form-wrapper .form-group label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #4A6273;
  margin-bottom: 8px;
}
.contact-form-wrapper .form-group .required { color: #EF4444; }

/* CF7 bọc mỗi field trong span.wpcf7-form-control-wrap — ép span + input full width. */
.contact-form-wrapper .form-group .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.contact-form-wrapper .form-group input,
.contact-form-wrapper .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(74, 98, 115, 0.2);
  border-radius: 4px;
  color: #243642;
  background-color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form-wrapper .form-group textarea { resize: vertical; }
.contact-form-wrapper .form-group input:focus,
.contact-form-wrapper .form-group textarea:focus {
  outline: none;
  border-color: #D28C36;
  box-shadow: 0 0 0 3px rgba(210, 140, 54, 0.1);
}

/* Nút gửi — btn-accent đã có màu ở trên; btn-block full width. */
.contact-form-wrapper .btn-block {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 4px;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

/* Thông báo lỗi/thành công của CF7. */
.contact-form-wrapper .wpcf7-response-output {
  margin: 16px 0 0;
  border-radius: 4px;
  font-size: 0.85rem;
}
.contact-form-wrapper .wpcf7-not-valid-tip { font-size: 0.75rem; color: #EF4444; }

/* ---------- Buttons dùng chung (btn-accent / btn-secondary / btn-sm) ---------- */
.home-v2 .btn-accent, a.btn-accent {
  background-color: #D28C36 !important;
  border-color: #D28C36 !important;
  color: #fff !important;
}
a.btn-accent:hover { background-color: #B77627 !important; border-color: #B77627 !important; }

/* ---------- Slider ngang dùng chung (home-slider.js) ---------- */
.dsg-slider { position: relative; }
.dsg-slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dsg-slider__viewport::-webkit-scrollbar { display: none; }
.dsg-slider__track { display: flex; gap: 24px; }
.dsg-slider__slide { scroll-snap-align: start; flex: 0 0 auto; }

/* per-view: bề rộng slide = (100% - gap*(n-1)) / n */
.dsg-slider[data-per-view="5"] .dsg-slider__slide { width: calc((100% - 24px * 4) / 5); }
.dsg-slider[data-per-view="4"] .dsg-slider__slide { width: calc((100% - 24px * 3) / 4); }
.dsg-slider[data-per-view="3"] .dsg-slider__slide { width: calc((100% - 24px * 2) / 3); }

.dsg-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(74, 98, 115, 0.15);
  background: #fff;
  color: #243642;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(26, 34, 41, 0.1);
  transition: all 0.25s ease;
  margin:0 !important;min-height:unset !important;padding:unset !important
}

.dsg-slider__arrow:hover { background: #D28C36; color: #fff; border-color: #D28C36; }
.dsg-slider__arrow:disabled { opacity: 0.35; cursor: default; }
.dsg-slider__arrow--prev { left: -18px; }
.dsg-slider__arrow--next { right: -18px; }

@media (max-width: 849px) {
  .dsg-slider[data-per-view] .dsg-slider__slide { width: calc((100% - 24px) / 2); }
  .dsg-slider__arrow--prev { left: 0; }
  .dsg-slider__arrow--next { right: 0; }
  .about-visual  > .col-inner,
  .about-content > .col-inner{
    padding: 0 10px;
  }
  .stats-section .row.grid-4stats {
    padding:0;
  }
.hero-section .button {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  .hero-section .button.btn-accent {
    margin-bottom: 10px !important;
  }
  .row.grid-4stats > .col:nth-child(1) .col-inner,
  .row.grid-4stats > .col:nth-child(2) .col-inner {
    padding-bottom:20px;
  }
 .trust-badge-card .icon-box-left .icon-box-img + .icon-box-text {
    padding-left: 0 !important;
  }
}
@media (max-width: 549px) {
  .dsg-slider[data-per-view] .dsg-slider__slide { width: 85%;}
  .section-small-title h3 {
    font-size: 1.25rem;
  }
  .partners-section .dsg-slider[data-per-view] .dsg-slider__slide { width: calc((100% - 24px) / 3);}
}

/* ---------- Responsive ---------- */
/* Hero là banner layer absolute căn giữa dọc (y50) trong banner cao cố định 600px,
   có wave 60px ở đáy. Trên mobile nội dung cao gần hết banner nên tràn vào wave và
   dính mép trái (.left-0). Fix: layer full-width + gutter đối xứng, neo từ trên thay
   vì căn giữa, và nới chiều cao banner để nội dung nằm trên wave. */
@media (max-width: 849px) {
  .hero-section .banner {
    height: auto !important;
    min-height: 720px;
  }

  .hero-section .text-box.banner-layer {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
}

/* Stats section: padding dọc chồng 3 lớp (section + section-content + row) tạo dải
   tối trống lớn trên mobile khi layout co còn 2x2. Bỏ phần thừa của content/row. */
@media (max-width: 849px) {
  .stats-section .section-content,
  .stats-section .row {
    padding:0 !important;
  }
  .grid-2contact {
    padding: 0 10px;
  }
  .contact-form-wrapper > .col-inner {
    padding: 10px !important;
  }
}

/* Trust badge (contact): icon trái + chữ phải quá chật khi 2 cột trên mobile.
   Đổi sang icon ở giữa, chữ bên dưới. */
@media (max-width: 549px) {
  .contact-section .trust-badge-card .icon-box {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

@media (max-width: 549px) {
  .hero-title h1 { font-size: 2.25rem; }
  .section-title h2 { font-size: 1.75rem; }
  .counter-number p { font-size: 2.5rem; }
  .stats-section .counter-item > .col-inner { border-right: 0; }

  /* USP: mỗi thẻ một hàng dọc cho dễ đọc (2 cột quá hẹp trên điện thoại). */
  .row.grid-4usp { grid-template-columns: 1fr !important; }
}