/* ===== The7 YouTube Landing v2 — scoped styles ===== */
.the7yt-root{
  --ink:#14161a; --ink-soft:#525a66; --line:#e7e9ee;
  --yt:#d62828; --yt-dark:#a51d1d; --amber:#f5b301;
  --paper:#f7f8fa; --card:#fff;
  --wa:#25d366; --zalo:#0068ff; --ok:#12855a; --no:#c0392b;
  font-family:"Segoe UI",-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); line-height:1.65; background:var(--paper);
  max-width:100%; overflow-x:hidden;
}
.the7yt-root *{margin:0;padding:0;box-sizing:border-box}
.the7yt-root .en{display:none}
.the7yt-root.lang-en .vi{display:none}
.the7yt-root.lang-en .en{display:inline}

/* lang bar */
.t7-langbar{display:flex;justify-content:flex-end;max-width:1140px;margin:0 auto;padding:14px 20px 0}
.t7-lang-toggle{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:13px;font-weight:700;background:#fff}
.t7-lang-toggle button{border:0;background:transparent;padding:6px 14px;cursor:pointer;color:var(--ink-soft)}
.t7-lang-toggle button.on{background:var(--ink);color:#fff}

/* buttons */
.t7-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;
  text-decoration:none;border-radius:10px;cursor:pointer;border:0;padding:13px 24px;font-size:15px;
  transition:transform .15s ease,box-shadow .15s ease;line-height:1.25;text-align:center}
.t7-btn:hover{transform:translateY(-2px)}
.t7-btn svg{width:19px;height:19px;fill:currentColor;flex:none}
.the7yt-root a.t7-btn,.the7yt-root a.t7-btn:visited,.the7yt-root a.t7-btn:hover,
.the7yt-root a.t7-btn:focus,.the7yt-root a.t7-btn span{text-decoration:none!important}
.t7-btn-yt,.the7yt-root a.t7-btn-yt,.the7yt-root a.t7-btn-yt:visited,
.the7yt-root a.t7-btn-yt:hover,.the7yt-root a.t7-btn-yt:focus{
  background:var(--yt);color:#fff!important;box-shadow:0 8px 20px rgba(214,40,40,.24)}
.t7-btn-ghost,.the7yt-root a.t7-btn-ghost,.the7yt-root a.t7-btn-ghost:visited,
.the7yt-root a.t7-btn-ghost:hover,.the7yt-root a.t7-btn-ghost:focus{
  background:#fff;color:var(--ink)!important;border:1.5px solid var(--line)}
.the7yt-root a.t7-btn-ghost:hover{border-color:var(--ink)}
.t7-btn-wa,.the7yt-root a.t7-btn-wa,.the7yt-root a.t7-btn-wa:visited,
.the7yt-root a.t7-btn-wa:hover{background:var(--wa);color:#fff!important;box-shadow:0 8px 20px rgba(37,211,102,.24)}
.t7-btn-zalo,.the7yt-root a.t7-btn-zalo,.the7yt-root a.t7-btn-zalo:visited,
.the7yt-root a.t7-btn-zalo:hover{background:var(--zalo);color:#fff!important;box-shadow:0 8px 20px rgba(0,104,255,.24)}
.the7yt-root a.t7-mini,.the7yt-root a.t7-mini:visited,.the7yt-root a.t7-mini:hover{color:#fff!important;text-decoration:none!important}
.t7-zalo-badge{font-weight:800;letter-spacing:.3px}
.t7-full{width:100%;margin-top:8px}

/* hero */
.t7-hero{max-width:1140px;margin:0 auto;padding:30px 20px 52px}
.t7-hero-grid{display:grid;grid-template-columns:1fr;gap:38px;align-items:start}
@media(min-width:980px){.t7-hero-grid{grid-template-columns:1.08fr .92fr;gap:48px}}
.t7-eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  color:var(--ink-soft);font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:999px;margin-bottom:18px}
.t7-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(18,133,90,.14)}
.t7-hero-left h1{font-size:clamp(27px,4.6vw,42px);line-height:1.18;font-weight:800;letter-spacing:-.6px}
.t7-hl{color:var(--yt)}
.t7-lead{font-size:17px;color:var(--ink-soft);margin:18px 0 26px;max-width:560px}
.t7-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.t7-cta-row.t7-center{justify-content:center}
.t7-trust{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.t7-ti{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--ink-soft)}
.t7-ti svg{width:18px;height:18px;fill:var(--ok);flex:none}

/* form card */
.t7-form-card{background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 20px 50px rgba(20,22,26,.08);padding:26px 24px;scroll-margin-top:90px}
.t7-form-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.t7-yt-ic svg{width:38px;height:38px;display:block}
.t7-form-title{font-weight:800;font-size:17.5px;line-height:1.3}
.t7-form-sub{color:var(--ink-soft);font-size:12.5px}
.t7-form-intro{font-size:13.5px;color:var(--ink-soft);margin-bottom:16px}
.t7-field{margin-bottom:13px}
.t7-field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px}
.t7-req{color:var(--yt)}
.t7-field input,.t7-field select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 13px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--ink);transition:border-color .15s ease}
.t7-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525a66' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.t7-field input:focus,.t7-field select:focus{outline:none;border-color:var(--ink)}
.t7-form-msg{margin-top:12px;padding:11px 14px;border-radius:9px;font-size:14px;text-align:center}
.t7-form-msg.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.t7-form-msg.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.t7-form-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);text-align:center;
  font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.t7-mini{text-decoration:none;font-weight:700;padding:6px 13px;border-radius:8px;color:#fff;font-size:13px}
.t7-mini-wa{background:var(--wa)}
.t7-mini-zalo{background:var(--zalo)}
.t7-mini-tel{background:var(--ink)}

/* sections */
.t7-block{max-width:1140px;margin:0 auto;padding:56px 20px}
.t7-alt{background:#fff;max-width:100%;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.t7-alt>*{max-width:1140px;margin-left:auto;margin-right:auto}
.t7-sec-head{text-align:center;max-width:680px;margin:0 auto 38px}
.t7-kick{color:var(--yt);font-weight:800;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase}
.t7-sec-head h2{font-size:clamp(22px,3.8vw,32px);font-weight:800;margin:10px 0;letter-spacing:-.5px;line-height:1.25}
.t7-sec-head p{color:var(--ink-soft);font-size:15.5px}

/* prose block */
.t7-prose{max-width:900px;margin:0 auto}
.t7-prose p{font-size:16px;color:var(--ink-soft);margin-bottom:16px}
.t7-two{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
@media(min-width:820px){.t7-two{grid-template-columns:repeat(2,1fr)}}
.t7-note-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px}
.t7-note-card h3{font-size:16.5px;font-weight:800;margin-bottom:8px}
.t7-note-card p{font-size:14.5px;margin:0}

/* commitment columns */
.t7-commit .t7-col{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.t7-alt .t7-commit .t7-col{background:var(--paper)}
.t7-col-head{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16.5px;
  padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.t7-col-head svg{width:22px;height:22px;flex:none;padding:3px;border-radius:6px}
.t7-col-head.t7-do svg{fill:#fff;background:var(--ok)}
.t7-col-head.t7-dont svg{fill:#fff;background:var(--no)}
.t7-list{list-style:none}
.t7-list li{position:relative;padding-left:26px;margin-bottom:11px;font-size:14.5px;color:var(--ink-soft)}
.t7-list li:last-child{margin-bottom:0}
.t7-list-do li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok);font-weight:900}
.t7-list-dont li::before{content:"✕";position:absolute;left:0;top:0;color:var(--no);font-weight:900}

/* steps */
.t7-steps{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:700px){.t7-steps-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.t7-steps-4{grid-template-columns:repeat(4,1fr)}}
.t7-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 20px 22px}
.t7-num{position:absolute;top:-16px;left:20px;width:36px;height:36px;border-radius:10px;
  background:var(--ink);color:#fff;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center}
.t7-step h3{font-size:16px;font-weight:800;margin:14px 0 6px}
.t7-step p{color:var(--ink-soft);font-size:14px}

/* features */
.t7-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.t7-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.t7-grid{grid-template-columns:repeat(3,1fr)}}
.t7-feat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;
  transition:transform .18s ease,box-shadow .18s ease}
.t7-feat:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(20,22,26,.07)}
.t7-fic{width:46px;height:46px;border-radius:11px;background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.t7-fic svg{width:23px;height:23px;fill:var(--ink)}
.t7-feat h3{font-size:16.5px;font-weight:800;margin-bottom:6px}
.t7-feat p{color:var(--ink-soft);font-size:14px}

/* faq */
.t7-faq{max-width:820px;margin:0 auto}
.t7-faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0 20px;margin-bottom:11px}
.t7-faq summary{cursor:pointer;list-style:none;padding:17px 0;font-weight:700;font-size:15.5px;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.t7-faq summary::-webkit-details-marker{display:none}
.t7-chev{transition:transform .2s ease;color:var(--yt);font-size:20px;flex:none;line-height:1}
.t7-faq details[open] .t7-chev{transform:rotate(180deg)}
.t7-ans{padding:0 0 18px;color:var(--ink-soft);font-size:14.5px}

/* final */
.t7-final{text-align:center;padding:60px 20px;max-width:760px;margin:0 auto}
.t7-final h2{font-size:clamp(22px,3.8vw,32px);font-weight:800;margin-bottom:14px;letter-spacing:-.5px;line-height:1.28}
.t7-final p{color:var(--ink-soft);font-size:16px;margin-bottom:26px}
.t7-hotline{margin-top:20px;font-size:15px;color:var(--ink-soft)}
.t7-hotline a{color:var(--ink);font-weight:800;text-decoration:none;margin-left:6px}
.t7-legal{margin-top:20px;font-size:12.5px;color:#8b93a0;letter-spacing:.2px}

/* floating */
.t7-float{position:fixed;z-index:9999;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-weight:800;font-size:14px}
.t7-float svg{width:29px;height:29px;fill:#fff}
.t7-float-wa{right:22px;bottom:22px;background:var(--wa);box-shadow:0 6px 18px rgba(37,211,102,.4)}
.t7-float-zalo{right:22px;bottom:86px;background:var(--zalo);box-shadow:0 6px 18px rgba(0,104,255,.4)}
@media(max-width:768px){.t7-float{width:50px;height:50px}.t7-float-zalo{bottom:78px}}
@media(prefers-reduced-motion:reduce){.the7yt-root *{animation:none!important;transition:none!important}}


/* ================= ước tính ngân sách (slider) ================= */
.t7-est-grid{display:grid;grid-template-columns:1fr;gap:38px;align-items:center;max-width:1000px;margin:0 auto}
@media(min-width:900px){.t7-est-grid{grid-template-columns:1fr 1fr;gap:56px}}

.t7-slider-wrap{position:relative;padding-bottom:6px}
.t7-track{position:relative;width:100%;height:14px;background:#e6e8ec;border-radius:16px}
.t7-track-fill{height:14px;border-radius:16px 10px 10px 16px;
  background:linear-gradient(270deg,var(--yt-dark) 0%,var(--yt) 100%);border:2px solid #e6e8ec;width:0}
.t7-track-ticks{position:absolute;top:50%;left:-8px;right:0;height:7px;transform:translateY(-50%);
  background:repeating-linear-gradient(to right,transparent 0,transparent 23px,#fff 23px,#fff 25px);
  pointer-events:none;z-index:0}
.t7-track input[type=range]{position:absolute;top:50%;left:0;transform:translateY(-50%);
  width:100%;height:22px;opacity:0;cursor:pointer;z-index:10;margin:0}
.t7-thumb{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:26px;height:26px;
  background:#fff;border:2px solid #e4e7ec;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2);
  pointer-events:none;z-index:9}
.t7-track-labels{position:relative;height:34px;margin-top:20px}
.t7-tick-btn{position:absolute;top:0;background:#f9fafb;border:1px solid #f0f1f3;border-radius:999px;
  padding:3px 10px;cursor:pointer;font-size:12px;font-weight:600;color:#666;white-space:nowrap;font-family:inherit}
.t7-tick-btn:hover{color:var(--ink);border-color:#d9dbe0}
.t7-tick-btn{left:-10px}
.t7-tick-mid{left:50%;transform:translateX(-50%)}
.t7-tick-max{left:auto;right:-10px}
.t7-tick-dot{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:6px;height:6px;
  background:#e4e7ec;border-radius:50%}

.t7-est-input-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:22px;flex-wrap:wrap}
.t7-est-input-row h4{font-size:clamp(21px,3vw,30px);font-weight:500;color:var(--ink)}
.t7-est-input{display:flex;align-items:center;background:#fff;border:1px solid #e4e7ec;border-radius:9px;
  height:44px;position:relative;overflow:hidden}
.t7-est-input input{width:150px;border:0;outline:0;font-size:16px;font-weight:600;color:var(--ink);
  background:none;text-align:right;padding:0 40px 0 14px;font-family:inherit;height:100%}
.t7-cur{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;
  background:#f2f4f7;width:32px;font-size:16px;font-weight:600;color:#9ca3af}

.t7-est-result{background:linear-gradient(135deg,#fff1f1 0%,#fff 42%,#fff7ed 62%,#ffe4e4 100%);
  border-radius:16px;padding:44px 24px;display:flex;justify-content:center;align-items:center;min-height:190px}
.t7-est-metrics{display:flex;justify-content:space-around;align-items:center;gap:34px;width:100%}
.t7-est-metrics.t7-one{justify-content:center}
.t7-metric{text-align:center;min-width:150px}
.t7-metric h3{font-size:15.5px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.t7-metric p{font-size:21px;font-weight:800;color:var(--yt);padding-top:6px;white-space:nowrap}
.t7-metric-div{width:1px;height:56px;background:rgba(20,22,26,.18);flex:none}
@media(max-width:546px){
  .t7-est-metrics{flex-direction:column;gap:22px}
  .t7-metric-div{display:none}
}
.t7-est-cta{text-align:center;margin-top:34px}