/* ============================================================
   ux-compat.css — Style bridge cho element NATIVE của Flatsome
   UX Builder trên landing (section, row, col, title, text,
   button, featured_box, accordion, ux_image).
   Chỉ target class Flatsome native → KHÔNG ảnh hưởng block HTML.
   Theme: Silverlife landing (design tokens trong landing.css :root)
   ============================================================ */

/* Bridge token aliases: Flatsome native blocks dùng tên token cũ, còn landing
   dùng namespace --sl-*. Khai báo tại đây giữ layer tương thích không tạo
   giá trị mặc định ngẫu nhiên khi UX Builder chèn block native. */
:root {
  --serif: var(--sl-serif);
  --sans: var(--sl-font);
  --maxw: var(--sl-maxw);
  --green-950: var(--sl-forest-950);
  --green-900: var(--sl-forest-900);
  --green-800: var(--sl-forest-800);
  --green-700: var(--sl-forest-700);
  --gold-3: var(--sl-gold-light);
  --gold-2: var(--sl-gold);
  --gold: var(--sl-gold);
  --gold-soft: var(--sl-gold-soft);
  --paper: var(--sl-bg);
  --cream-2: var(--sl-smoke);
  --ink: var(--sl-ink);
  --muted: var(--sl-muted);
  --on-dark: var(--sl-light);
  --on-dark-muted: var(--sl-light-muted);
  --on-dark-line: var(--sl-border-dark);
  --line: var(--sl-border);
  --line-2: var(--sl-gold-border);
  --r: var(--sl-r);
  --r-lg: var(--sl-r);
  --r-xl: var(--sl-r-card);
  --ease: var(--sl-ease);
  --sh-sm: var(--sl-shadow-subtle);
  --sh: var(--sl-shadow-card);
  --sh-lg: var(--sl-shadow-card);
}

/* ---------- Section ---------- */
.section{position:relative}
.ux-anchor{display:block; height:0; overflow:hidden}
.section-bg{position:absolute; inset:0; overflow:hidden}
.section-bg-image{position:absolute; inset:0; background-size:cover; background-position:center center}
.section-content{position:relative; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* Hero dùng [section class="hero"] — .hero trong landing.css đã có bg/padding */
.section.hero{padding:0}
.section.hero .section-content{max-width:none; padding:0}

/* ---------- Grid (row / col) ---------- */
.row{display:flex !important; flex-wrap:wrap !important; margin-left:-12px !important; margin-right:-12px !important; width:auto !important}
.row .col{padding:0 12px !important; margin-bottom:26px !important; width:100% !important; flex:0 0 auto !important}
.row .col-inner{height:100%}
.row .col .col-inner > *:last-child{margin-bottom:0}

/* Column spans (12-cột) — specificity cao hơn .row .col để span thắng */
.row .col.large-1{width:8.3333% !important; max-width:8.3333% !important; flex-basis:8.3333% !important}
.row .col.large-2{width:16.6667% !important; max-width:16.6667% !important; flex-basis:16.6667% !important}
.row .col.large-3{width:25% !important; max-width:25% !important; flex-basis:25% !important}
.row .col.large-4{width:33.3333% !important; max-width:33.3333% !important; flex-basis:33.3333% !important}
.row .col.large-5{width:41.6667% !important; max-width:41.6667% !important; flex-basis:41.6667% !important}
.row .col.large-6{width:50% !important; max-width:50% !important; flex-basis:50% !important}
.row .col.large-7{width:58.3333% !important; max-width:58.3333% !important; flex-basis:58.3333% !important}
.row .col.large-8{width:66.6667% !important; max-width:66.6667% !important; flex-basis:66.6667% !important}
.row .col.large-9{width:75% !important; max-width:75% !important; flex-basis:75% !important}
.row .col.large-10{width:83.3333% !important; max-width:83.3333% !important; flex-basis:83.3333% !important}
.row .col.large-11{width:91.6667% !important; max-width:91.6667% !important; flex-basis:91.6667% !important}
.row .col.large-12{width:100% !important; max-width:100% !important; flex-basis:100% !important}

@media (max-width:1024px){
  .row .col.large-3,.row .col.large-4,.row .col.large-5,.row .col.large-6{width:50% !important; max-width:50% !important; flex-basis:50% !important}
  .row .col.large-7,.row .col.large-9{width:100% !important; max-width:100% !important; flex-basis:100% !important}
}
@media (max-width:768px){
  .row .col.large-3,.row .col.large-4,.row .col.large-5,.row .col.large-6,.row .col.large-7,.row .col.large-8,.row .col.large-9{width:100% !important; max-width:100% !important; flex-basis:100% !important}
}

/* ---------- Title ([title]) ---------- */
.section-title-container{margin:0 0 30px}
.section-title{
  font-family:var(--serif) !important; font-size:clamp(1.85rem,3.6vw,2.7rem) !important;
  line-height:1.24 !important; letter-spacing:.02em; color:var(--green-950) !important;
  font-weight:700 !important; text-align:center !important; text-wrap:balance;
}
.section-title b{display:none !important}
.section-title-main{display:inline-block; position:relative}
.section-title-main::after{
  content:""; display:block; width:140px; height:2px; margin:20px auto 0;
  background:linear-gradient(90deg, transparent 0%, var(--gold-3) 30%, var(--gold) 50%, var(--gold-3) 70%, transparent 100%);
  border-radius:2px;
}
.section.green .section-title{color:var(--gold-3) !important; text-shadow:0 2px 24px rgba(0,0,0,.45)}
.section.green .section-title-main::after{background:linear-gradient(90deg, transparent 0%, var(--gold-3) 30%, var(--gold) 50%, var(--gold-3) 70%, transparent 100%)}

/* Title căn trái (hero, CTA) */
.section-title-left{text-align:left !important}
.section-title-left .section-title-main::after{margin-left:0; margin-right:auto}

/* Hero native */
.section.hero{position:relative !important; min-height:100vh !important; background:var(--green-950) url(../images/hero-bg.webp) center/cover no-repeat !important; color:var(--on-dark) !important; display:flex !important; align-items:center !important; padding:110px 0 64px !important; overflow:hidden !important}
.section.hero .hero-scrim{position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important; min-height:100% !important; background:radial-gradient(ellipse 65% 75% at 20% 45%, rgba(14,42,32,.78) 0%, rgba(14,42,32,.42) 55%, transparent 100%), linear-gradient(180deg, rgba(8,24,18,.62) 0%, transparent 22%, transparent 75%, rgba(8,24,18,.75) 100%) !important}
.section.hero .section-content{position:relative !important; z-index:2 !important; width:100% !important; max-width:var(--maxw) !important; margin:0 auto !important; padding:0 24px !important; min-height:0 !important; display:block !important}
.section.hero .row{position:relative !important; z-index:2 !important; width:100% !important; max-width:var(--maxw) !important; margin:0 !important}
.section.hero .row .col{padding-left:0 !important}
.section.hero .row .col-inner{max-width:640px !important}  /* khớp .hero-copy */
.section.hero .section-title{color:var(--gold-3) !important; font-size:clamp(2.35rem,4.5vw,3.6rem) !important; line-height:1.15 !important; margin:20px 0 0 !important; text-shadow:0 3px 30px rgba(0,0,0,.6) !important; font-weight:700 !important; letter-spacing:.015em !important; text-wrap:auto !important; text-align:left !important}
.section.hero .section-title-main em{font-style:italic !important; color:var(--gold-soft) !important; font-weight:600 !important}
.section.hero .section-title-main::after{display:none !important}
.section.hero .text p{color:#eef0ea !important; text-shadow:0 1px 12px rgba(0,0,0,.45) !important; font-size:1.08rem !important; max-width:30rem !important}
.section.hero .text p.hero-sub{margin-top:20px !important}  /* khớp .hero-sub */
.section.hero .button{margin-top:34px !important}  /* khớp .hero-cta */

/* Eyebrow (chưa có trong [title] — dùng [text] với class .eyebrow) */
.section-content .eyebrow{display:inline-flex !important; align-items:center !important; gap:9px !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.22em !important; text-transform:uppercase !important; color:var(--gold-2) !important; margin-bottom:6px !important}
.section.green .section-content .eyebrow{color:var(--gold-3) !important}


/* ---------- Text ([ux_text]) — chỉ p con trực tiếp, không đè .sec-head ---------- */
.section-content .text > p{margin:0 0 14px; color:var(--muted); font-size:1.05rem; line-height:1.6}
.section-content .text > p:last-child{margin-bottom:0}
.section.green .section-content .text > p{color:var(--on-dark-muted)}

/* ---------- Button ([button]) — khớp .btn của landing.css ---------- */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap;
  font-family:var(--sans); font-weight:600; font-size:.92rem; letter-spacing:.02em;
  padding:14px 26px; border-radius:var(--r);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
}
.button.primary{background:linear-gradient(180deg,var(--gold-3),var(--gold)) !important; color:#3a2a0c !important; box-shadow:0 12px 26px -12px rgba(174,131,56,.7)}
.button.primary:hover{transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(174,131,56,.8)}
.button.secondary{background:var(--green-800) !important; color:var(--on-dark) !important; box-shadow:var(--sh-sm)}
.button.secondary:hover{background:var(--green-700); transform:translateY(-2px)}
.button.white{background:#fff !important; color:var(--green-800) !important; box-shadow:var(--sh-sm)}
.button.is-outline{background:transparent !important; border:1.5px solid var(--line-2) !important; color:var(--green-800) !important; box-shadow:none}
.button.is-outline:hover{border-color:var(--gold); color:var(--gold-2); transform:translateY(-2px)}
.section.green .button.is-outline{border-color:rgba(255,255,255,.4); color:var(--on-dark)}
.section.green .row .col{margin-bottom:0}

/* Liên hệ: .scene (gradient tối) phủ CẢ section, nội dung nằm trên */
.section.green.contact { position: relative !important; background: var(--green-950) !important; color: var(--on-dark) !important; padding: 84px 0 !important; overflow: hidden !important; }
.section.green.contact .scene { position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: radial-gradient(circle at 10% 20%, rgba(194,151,74,.18) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(46,100,80,.28) 0%, transparent 45%), linear-gradient(180deg, rgba(8,24,18,.4) 0%, rgba(8,24,18,.85) 100%) !important; }
.section.green.contact .section-content { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: var(--maxw) !important; margin: 0 auto !important; padding: 0 24px !important; }
.section.green.contact .row { position: relative !important; z-index: 2 !important; align-items: start !important; }


/* ---------- Featured box ([featured_box]) ---------- */
.icon-box{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 20px; text-align:center; height:100%;
  transition:transform .35s var(--ease), box-shadow .35s, border-color .35s;
  position:relative; overflow:hidden;
}
.icon-box:hover{transform:translateY(-6px); box-shadow:var(--sh); border-color:var(--line-2)}
.icon-box-img{margin:0 auto 16px; width:52px; height:52px}
.icon-box-img .icon{width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  color:var(--gold-2); background:linear-gradient(160deg,#fbf3e1,#efe1c4); border:1px solid var(--line)}
.icon-box-img .icon .icon-inner svg{width:25px; height:25px}
.icon-box-text h5{font-family:var(--sans); font-size:.95rem; font-weight:700; color:var(--ink); letter-spacing:.01em; text-transform:none; margin:0 0 7px}
.icon-box-text p{font-size:.82rem; color:var(--muted); margin:0}

/* ---------- Accordion / FAQ ([accordion]) — khớp .faq của landing.css ---------- */
.accordion{display:grid !important; grid-template-columns:repeat(2, 1fr) !important; gap:16px 24px !important; align-items:start}
/* ≤768px (breakpoint sẵn có của file): 1 cột — 2 cột ở mobile mỗi ô chỉ còn
   ~140px, câu hỏi dài bị cắt mất nhiều dòng. */
@media (max-width:768px){
  .accordion{grid-template-columns:1fr !important}
}

.accordion-item{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; position:relative; transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease)}
.accordion-item::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg, var(--gold-3), var(--gold)); opacity:0; transition:opacity .3s var(--ease)}
.accordion-item.active{border-color:var(--gold); box-shadow:0 10px 28px -10px rgba(20,53,42,.12); background:var(--paper)}
.accordion-item.active::before{opacity:1}
/* row-reverse: câu hỏi (span) trái, toggle (+) phải — đúng .faq-q */
.accordion-title{
  width:100%; display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; text-align:left; font-family:var(--sans); font-weight:600; font-size:.95rem;
  color:var(--ink); transition:color .25s var(--ease); cursor:pointer; text-decoration:none;
}
.accordion-title:hover{color:var(--green-800)}
.accordion-item.active .accordion-title,
.accordion-title.active{color:var(--green-900); font-weight:700}
/* Toggle = nút + giống .pm (fl-icons font không load → vẽ "+" bằng CSS) */
.accordion-title .toggle{width:28px; height:28px; flex:0 0 auto; border-radius:50%; border:1.5px solid var(--line-2);
  color:var(--gold-2); background:rgba(216,184,120,.08); display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease), background .35s, color .35s, border-color .35s}
.accordion-title .toggle i{font-style:normal; font-size:0; line-height:1}
.accordion-title .toggle i::before{content:"+"; font-family:var(--sans); font-size:16px; font-weight:600; line-height:1}
.accordion-item.active .toggle,
.accordion-title.active .toggle{transform:rotate(45deg); background:linear-gradient(135deg, var(--gold-3), var(--gold)); color:#fff; border-color:var(--gold); box-shadow:0 2px 8px rgba(174,131,56,.35)}
.accordion-inner{max-height:0; overflow:hidden; transition:max-height .4s var(--ease)}
/* Native Flatsome đánh dấu trạng thái mở trên title; giữ fallback khi JS chưa chạy. */
.accordion-title.active + .accordion-inner,
.accordion-item.active > .accordion-inner{max-height:none}
.accordion-title:focus-visible{outline:2px solid var(--gold-2); outline-offset:-3px}
.accordion-inner p{padding:2px 20px 20px 20px; color:var(--muted); font-size:.88rem; line-height:1.65}

/* ---------- Image ([ux_image]) ---------- */
.img{position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--cream-2); aspect-ratio:4/3}
.img .img-inner{position:absolute; inset:0}
.img .img-inner img{width:100%; height:100%; object-fit:cover; display:block}

/* Card nội dung native (dùng trong Nguyên liệu / Năng lực) */
.ux-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; height:100%; transition:transform .35s var(--ease), box-shadow .35s}
.ux-card:hover{transform:translateY(-6px); box-shadow:var(--sh)}
.ux-card .ux-card-body{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1}
.ux-card h4{font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--ink)}
.ux-card .ux-card-en{font-size:.74rem; color:var(--gold-2); letter-spacing:.04em; margin-top:2px; font-weight:600}
.ux-card p{font-size:.8rem; color:var(--muted); line-height:1.5; margin:10px 0 0}
.ux-card .button{margin-top:auto; align-self:stretch; justify-content:center; margin-top:16px}

/* Cap card (Năng lực) */
.cap-card-ux{border-radius:var(--r-lg); overflow:hidden; background:var(--paper); border:1px solid var(--line);
  display:flex; flex-direction:column; height:100%; transition:transform .35s var(--ease), box-shadow .35s}
.cap-card-ux:hover{transform:translateY(-5px); box-shadow:var(--sh)}
.cap-card-ux .img{aspect-ratio:3/2; border-radius:0}
.cap-cap{border-radius:var(--r-lg); overflow:hidden; background:var(--paper); border:1px solid var(--line)}
.cap-card-ux .ux-card-body{padding:16px 18px 18px}
.cap-card-ux .ux-card-body b{font-weight:700; font-size:.95rem; color:var(--ink); display:block}
.cap-card-ux .ux-card-body span{font-size:.8rem; color:var(--muted)}

/* ---------- CTA banner ([section] + title/text/button) ---------- */
.cta-band{border-radius:var(--r-xl); overflow:hidden; color:var(--on-dark); position:relative;
  padding:54px 56px; min-height:300px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:18px;
  box-shadow:var(--sh-lg); background:#0e2a20 url(../images/cta-bg.webp) right center/cover no-repeat}
.cta-band::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,28,20,.94) 0%, rgba(10,28,20,.82) 40%, rgba(10,28,20,.32) 66%, rgba(10,28,20,0) 100%)}
.cta-band > *{position:relative; z-index:1}
.cta-band .section-title{color:var(--gold-3); text-align:left; font-size:clamp(1.55rem,2.8vw,2.2rem); max-width:580px; line-height:1.24}
.cta-band .section-title-main::after{display:none}
.cta-band p{color:var(--on-dark-muted); max-width:480px; font-size:.95rem}

/* ---------- Contact info (Liên hệ native) ---------- */
.contact-native h2{font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.3rem); color:var(--gold-3); line-height:1.24; margin:0 0 12px}
.contact-native .lead{color:var(--on-dark-muted); font-size:1.02rem; margin:0 0 26px}
.contact-native .cd{display:flex; align-items:center; gap:14px; margin-bottom:16px; color:var(--on-dark);
  padding:14px 16px; border:1px solid var(--on-dark-line); border-radius:var(--r); background:rgba(255,255,255,.04)}
.contact-native .cd .cd-ic{width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--gold-3); background:rgba(255,255,255,.07); border:1px solid var(--on-dark-line)}
.contact-native .cd .cd-ic svg{width:21px; height:21px}
.contact-native .cd .cd-txt span{font-size:.78rem; color:var(--on-dark-muted); display:block}
.contact-native .cd .cd-txt strong{font-size:1rem; font-weight:700}

/* ---------- Editor Override (Hiển thị nội dung trong UX Builder preview) ---------- */
.in-ux-builder .reveal,
.ux-builder-iframe .reveal,
.uxb-preview .reveal,
.ux-builder-area .reveal,
body[class*="ux-builder"] .reveal,
html.js body.in-ux-builder .reveal,
html.js .in-ux-builder .reveal,
html.js .ux-builder-iframe .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
}