/* AI Visibility landing (VI/JA/EN) - scoped duoi .ai-vis de khong xung dot Flatsome/Bootstrap.
   Luu y: class .row/.btn/.nav/.wrap cua Bootstrap/Flatsome da duoc doi ten thanh ai-* de tranh de. */
.ai-vis{
  --ink:#11142a;
  --ink-2:#1b2145;
  --paper:#f7f4ec;
  --panel:#ffffff;
  --text-ink:#1c2033;
  --text-muted:#5f6373;
  --text-onDark:#f3f1e9;
  --muted-onDark:#9aa0ba;
  --line:#e2dcce;
  --gold:#c8963c;
  --gold-soft:#e9d8ae;
  --teal:#3f7d6c;
  --serif:'Lora', serif;
  --sans:'Be Vietnam Pro', sans-serif;
  background:var(--paper);
  color:var(--text-ink);
  font-family:var(--sans);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
.ai-vis--ja{ --serif:'Shippori Mincho', serif; --sans:'Noto Sans JP', sans-serif; }
.ai-vis--en{ --serif:'Lora', serif; --sans:'Inter', sans-serif; }
.ai-vis--vi{ --serif:'Lora', serif; --sans:'Be Vietnam Pro', sans-serif; }

.ai-vis *, .ai-vis *::before, .ai-vis *::after{ box-sizing:border-box; }
.ai-vis h1, .ai-vis h2, .ai-vis h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.35;
  letter-spacing:0.005em;
  margin:0;
  text-transform:none;
}
.ai-vis--ja h1, .ai-vis--ja h2, .ai-vis--ja h3{ line-height:1.4; letter-spacing:0.01em; }
.ai-vis p{ margin:0; }
.ai-vis a{ text-decoration:none; }
.ai-vis img{ display:block; max-width:100%; }

/* Full-bleed: page Flatsome nam trong container hep -> section tran full viewport */
.ai-vis .ai-sec{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:96px 0;
}
.ai-wrap{ max-width:1120px; margin:0 auto; padding:0 32px; }

.ai-kicker{ font-size:15px; color:var(--gold); font-weight:600; margin-bottom:14px; }
.ai-sec h2{ font-size:32px; color:var(--text-ink); max-width:700px; }
.ai-vis--ja .ai-sec h2{ font-size:34px; max-width:680px; }
.ai-sub{ font-size:18px; color:var(--text-muted); max-width:620px; margin-top:18px; }
.ai-vis--ja .ai-sub{ max-width:600px; }

/* Nut: dinh nghia day du de thang Bootstrap .btn/.btn-primary */
.ai-vis .ai-btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  font-size:16px;
  line-height:1.5;
  padding:14px 30px;
  border-radius:2px;
  border:1px solid transparent;
  text-align:center;
  vertical-align:middle;
  cursor:pointer;
  user-select:none;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ai-vis .ai-btn-primary{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.ai-vis .ai-btn-primary:hover{ background:#b98a34; border-color:#b98a34; color:var(--ink); }
.ai-vis .ai-btn-ghost{ border-color:rgba(255,255,255,0.35); color:var(--text-onDark); background:transparent; }
.ai-vis .ai-btn-ghost:hover{ border-color:rgba(255,255,255,0.7); color:var(--text-onDark); }
.ai-vis .ai-btn-outline{ border-color:var(--gold); color:var(--ink); background:transparent; }
.ai-vis .ai-btn-outline:hover{ background:var(--gold); color:var(--ink); }

/* HERO */
.ai-vis .ai-hero{
  background:linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  color:var(--text-onDark);
  padding:96px 0 104px;
}
.ai-hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; }
.ai-hero h1{ font-size:40px; color:var(--text-onDark); max-width:640px; }
.ai-vis--ja .ai-hero h1{ font-size:44px; max-width:620px; }
.ai-hero .ai-lead{ font-size:19px; color:var(--muted-onDark); max-width:560px; margin-top:26px; line-height:1.9; }
.ai-hero-ctas{ display:flex; gap:20px; align-items:center; margin-top:40px; flex-wrap:wrap; }

.ai-chatcard{
  background:var(--panel);
  border-radius:4px;
  padding:28px;
  box-shadow:0 30px 60px rgba(8,10,26,0.35);
  color:var(--text-ink);
}
.ai-chatcard .ai-qbubble{
  background:#eef0f6; color:var(--text-ink);
  padding:14px 18px; border-radius:14px 14px 14px 2px;
  font-size:16px; max-width:92%; margin-bottom:18px;
}
.ai-vis--ja .ai-chatcard .ai-qbubble{ max-width:88%; }
.ai-chatcard .ai-qbubble b{ font-weight:700; }
.ai-chatcard .ai-aname{ font-size:13px; color:var(--text-muted); margin-bottom:10px; font-weight:600; }
.ai-chatcard .ai-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line);
  margin:0;
}
.ai-chatcard .ai-row:last-of-type{ border-bottom:none; }
.ai-chatcard .ai-row .ai-name{ font-size:16px; font-weight:600; }
.ai-chatcard .ai-row .ai-mark{ font-size:13px; color:var(--teal); font-weight:600; white-space:nowrap; }
.ai-chatcard .ai-row.ai-dim{ opacity:0.55; }
.ai-chatcard .ai-row.ai-dim .ai-mark{ color:#b23b32; }
.ai-chatcard .ai-caption{ font-size:13px; color:var(--text-muted); margin-top:14px; text-align:right; }

/* PROBLEM */
.ai-vis .ai-problem{ background:var(--paper); border-bottom:1px solid var(--line); }
.ai-problem .ai-cols{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; margin-top:8px; }
.ai-problem ul{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.ai-problem ul li{ padding-left:22px; position:relative; font-size:17px; color:var(--text-ink); margin:0; }
.ai-problem ul li::before{
  content:""; position:absolute; left:0; top:11px; width:8px; height:8px; background:var(--gold);
}
.ai-problem p.ai-body{ font-size:18px; color:var(--text-ink); line-height:1.95; }

/* FLOW */
.ai-vis .ai-flow{ background:var(--panel); border-bottom:1px solid var(--line); }
.ai-steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; margin-top:56px; border-top:1px solid var(--line); }
.ai-step{ padding:36px 36px 0 0; border-right:1px solid var(--line); }
.ai-step:last-child{ border-right:none; }
.ai-step .ai-num{
  font-family:var(--serif); font-size:52px; line-height:1;
  color:var(--gold-soft); -webkit-text-stroke:1px var(--gold);
}
.ai-step h3{ font-size:21px; margin-top:18px; color:var(--text-ink); }
.ai-vis--ja .ai-step h3{ font-size:22px; }
.ai-step p{ font-size:16px; color:var(--text-muted); margin-top:12px; line-height:1.85; }

/* REPORT */
.ai-vis .ai-report{ background:var(--paper); }
.ai-report-list{ margin-top:56px; border-top:1px solid var(--line); }
.ai-report-item{
  display:grid; grid-template-columns:300px 1fr; gap:40px;
  padding:30px 0; border-bottom:1px solid var(--line);
}
.ai-vis--ja .ai-report-item{ grid-template-columns:260px 1fr; }
.ai-report-item h3{
  font-size:20px; color:var(--text-ink);
  border-left:3px solid var(--gold); padding-left:16px;
  align-self:start;
}
.ai-vis--ja .ai-report-item h3{ font-size:21px; }
.ai-report-item p{ font-size:16px; color:var(--text-muted); line-height:1.9; padding-top:2px; }

/* WHY */
.ai-vis .ai-why{ background:var(--ink); color:var(--text-onDark); }
.ai-why h2{ color:var(--text-onDark); }
.ai-why .ai-sub{ color:var(--muted-onDark); }
.ai-why .ai-kicker{ color:var(--gold-soft); }
.ai-why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:56px; }
.ai-why-card{ border-top:2px solid var(--gold); padding-top:22px; }
.ai-why-card h3{ font-family:var(--sans); font-size:19px; font-weight:700; color:var(--text-onDark); }
.ai-why-card p{ font-size:15px; color:var(--muted-onDark); margin-top:12px; line-height:1.85; }

/* CONTACT */
.ai-vis .ai-contact{ background:var(--paper); }
.ai-contact-panel{
  background:var(--panel); border:1px solid var(--line);
  padding:56px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; margin-top:48px;
}
.ai-contact-panel h3{ font-size:23px; margin-bottom:20px; font-family:var(--serif); }
.ai-vis--ja .ai-contact-panel h3{ font-size:24px; }
.ai-field{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line); font-size:16px;
}
.ai-field span.ai-label{ color:var(--text-muted); flex-shrink:0; }
.ai-field span.ai-value{ color:var(--text-ink); font-weight:600; text-align:right; }
.ai-field a.ai-value:hover{ color:var(--gold); }
.ai-contact-side{ display:flex; flex-direction:column; justify-content:center; gap:20px; }
.ai-contact-side p{ font-size:16px; color:var(--text-muted); line-height:1.9; }
.ai-contact-side .ai-btn{ text-align:center; }
.ai-contact-ctas{ display:flex; flex-direction:column; gap:12px; }

/* Responsive */
@media (max-width:860px){
  .ai-wrap{ padding:0 20px; }
  .ai-vis .ai-sec{ padding:64px 0; }
  .ai-vis .ai-hero{ padding:64px 0 72px; }
  .ai-hero-grid{ grid-template-columns:1fr; gap:48px; }
  .ai-hero h1{ font-size:30px; }
  .ai-vis--ja .ai-hero h1{ font-size:32px; }
  .ai-sec h2{ font-size:25px; }
  .ai-vis--ja .ai-sec h2{ font-size:27px; }
  .ai-problem .ai-cols{ grid-template-columns:1fr; gap:32px; }
  .ai-steps{ grid-template-columns:1fr; border-top:none; }
  .ai-step{ border-right:none; border-top:1px solid var(--line); padding:28px 0 0; }
  .ai-report-item{ grid-template-columns:1fr; gap:12px; }
  .ai-why-grid{ grid-template-columns:1fr; gap:32px; }
  .ai-contact-panel{ grid-template-columns:1fr; padding:32px 24px; gap:32px; }
}
/* Man hinh nho: field lien he xuong dong, CTA full-width de de cham */
@media (max-width:549px){
  .ai-chatcard{ padding:20px; }
  .ai-hero-ctas{ flex-direction:column; align-items:stretch; }
  .ai-hero-ctas .ai-btn{ width:100%; }
  .ai-field{ flex-direction:column; gap:4px; }
  .ai-field span.ai-value{ text-align:left; overflow-wrap:anywhere; }
  .ai-step{ padding-right:0; }
}
@media (prefers-reduced-motion: reduce){
  .ai-vis .ai-btn{ transition:none; }
}

/* Neo anchor (#ai-flow/#ai-contact) khong bi header sticky che */
.ai-vis section[id]{ scroll-margin-top:90px; }

/* Full-bleed 100vw rong hon viewport khi co scrollbar doc -> chan scroll ngang thua.
   Dung clip (khong phai hidden): hidden bien body thanh scroll-container gay 2 thanh scroll doc. */
body.page-id-13699, body.page-id-13695, body.page-id-13696{ overflow-x:clip; }