/* ===== LỚP 2: layout design trên wrapper Flatsome =====
   Flatsome bọc: section.section > .section-content > .row > .col > .col-inner > .text
   Design      : section.snap > .container(.grid) > card                                       */

/* ---------- Section ---------- */
/* .section Flatsome: flex-flow:row + align-items:center ⇒ trả về đúng .snap của design (flex column, stretch) */
.th-design .section { align-items: stretch; min-height: 0; }
/* .section-content trong suốt ⇒ con trực tiếp của .snap đúng như design (justify safe center, gap .combo, flex:1 của .sc-stage) */
.th-home .section.snap > .section-content { display: contents; }
/* .section-bg rỗng là lớp absolute phủ lên nội dung ⇒ không được bắt click */
.th-home .section.snap > .section-bg { pointer-events: none; }
/* Section design có padding-bottom 0 (padding-top để ở attr builder) */
.th-home .section.snap.hero, .th-home .section.snap.products, .th-home .section.snap.combo { padding-bottom: 0 !important; }
/* Anchor không được thành flex item */
.th-design .th-anchor { position: absolute; width: 0; height: 0; }

/* ---------- Row / Col ---------- */
/* (trung hoà .col/.col-inner nằm ở flatsome-pre.css — phải nạp TRƯỚC CSS design) */
/* Row không phải .container mà là hộp full width */
.th-design .row.sc-stage { max-width: none; flex-wrap: nowrap; }
/* Text element trong suốt (card là <a> phải là flex item trực tiếp) */
.th-design .text.th-contents { display: contents; }

/* ---------- Stack Flatsome: bỏ margin !important ép con ---------- */
.th-design .stack { --stack-gap: 0; }

/* ---------- HERO: nền = ảnh [section bg] Flatsome, hình học như .hero-bg design ---------- */
.th-home .hero > .section-bg { top: -35%; bottom: auto; height: 180%; z-index: 0; will-change: transform; background: none; overflow: hidden; }
.th-home .hero > .section-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)), linear-gradient(100deg,rgba(10,55,109,.6),rgba(7,30,58,.45)); }
@media (min-width: 901px) { .th-home .hero > .section-bg { transition: transform .9s cubic-bezier(.83,0,.17,1); } }
@media (prefers-reduced-motion: reduce) { .th-home .hero > .section-bg { transform: none !important; } }

/* ---------- ABOUT: ảnh video = [ux_image class="vthumb"] ---------- */
.th-home .video-card .img.vthumb { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 0; }
.th-home .video-card .img.vthumb .img-inner, .th-home .video-card .img.vthumb img { width: 100%; height: 100%; }
.th-home .video-card .img.vthumb img { object-fit: cover; display: block; max-width: none; }

/* ---------- COMBO: design .combo > .why / .certs / .cta-wrap {padding:0} — ở đây là row (giữ padding ngang .container) ---------- */
.th-home .combo .row.why, .th-home .combo .row.certs, .th-home .combo .row.cta-wrap { padding: 0 24px; }

/* ---------- Nút design trên [button] Flatsome ---------- */
.th-design a.button.btn { line-height: inherit; min-height: 0; min-width: 0; margin: 0; max-width: none; vertical-align: baseline; text-shadow: none; box-shadow: none; text-align: left; text-rendering: auto; }
.th-design a.button.btn span { display: inline; line-height: inherit; }
.th-design a.button.btn:hover { box-shadow: none; }
.th-design a.button.btn-primary:hover { color: var(--navy); }
/* mũi tên → giống <svg width15 stroke 2.5> của design */
.th-design a.button.th-arrow::after { content: ""; width: 15px; height: 15px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Stack Flatsome: .stack>.text>:first-child{margin-top:0} nuốt margin design ⇒ trả lại đúng số đo design ---------- */
.th-home .cta-inner .stack > .text > p { margin-top: 4px; }   /* design .cta-inner p{margin-top:4px} */
/* ux_stack in <style> làm con CUỐI ⇒ .cert:last-child của design không khớp */
.th-home .cert-row > .cert:last-of-type { border-right: 0; }

/* ---------- Trong UX Builder: tắt fullpage, cuộn thường để admin sửa từng màn ---------- */
.th-uxb #fp { position: static; overflow: visible; }
.th-uxb #fp-track { transform: none !important; }
.th-uxb .site-header { position: absolute; }
.th-uxb .reveal { opacity: 1 !important; transform: none !important; }          /* không có JS ⇒ không ẩn */
/* builder bọc mỗi panel trong .uxb-wrapper ⇒ wrapper phải là flex item thay cho .sc-panel */
.th-uxb .sc-panels .uxb-wrapper--th_showcase_panel { flex: 1; min-width: 0; display: flex; }
/* builder render từng panel riêng ⇒ panel nào cũng "active"; preview: panel đầu mở rộng, còn lại thu gọn */
.th-uxb .sc-panels .uxb-wrapper--th_showcase_panel:first-child { flex: 4.4; }
.th-uxb .sc-panels .uxb-wrapper--th_showcase_panel:not(:first-child) .sc-content { opacity: 0; }
.th-uxb .sc-panels .uxb-wrapper--th_showcase_panel:not(:first-child) .sc-vtitle { opacity: 1; }
.th-uxb .sc-panels .uxb-wrapper--text { position: absolute; width: 0; height: 0; }   /* chứa .sc-index (absolute) */
.th-uxb .sc-panels .uxb-wrapper--th_showcase_panel > .sc-panel { flex: 1; }
@media (max-width: 900px) { .th-uxb .sc-panels .uxb-wrapper--th_showcase_panel { flex: none; display: block; } }