/* TWIN360 — lớp hoàn thiện cao cấp (25/10/2026): chữ dễ đọc hơn, header khi cuộn, hiệu ứng xuất hiện,
   dải năng lực, hệ sinh thái tích hợp (IOC, Zalo Mini App, CRM…). Nạp sau styles.css. */

/* ---------- Chữ: nâng cỡ tối thiểu, tăng tương phản ---------- */
.eyebrow{font-size:10.5px;letter-spacing:2.6px;color:#6f735f}
.eyebrow.light{color:#e9e1cc}
.section-top>p,.tech-copy>p{font-size:14.5px;line-height:1.95;color:#5f6b60;max-width:400px}
.vision-body p{font-size:14.5px;line-height:1.95}
.vision-body p:first-of-type{font-size:18px;line-height:1.7;color:var(--ink)}
.hero-content>p{font-size:16px;line-height:1.85}
.header nav{font-size:12.5px}
.nav-cta{font-size:12.5px}
.tech-accordion summary{font-size:14px}
.tech-accordion summary>span{font-size:10.5px}
.tech-accordion details p{font-size:13.5px;line-height:1.95;color:#5f6b60}
.developer-grid article>span,.remote-steps article>span{font-size:10px;letter-spacing:2px}
.developer-grid p,.remote-steps p{font-size:14px;line-height:1.9}
figcaption>span,.media-caption span,.media-caption small,.tech-image>span,.viewing-image-top>span,.showcase-foot{font-size:10px}
footer{font-size:13px}

/* ---------- Header: cố định, nền kính khi cuộn ---------- */
.header{position:fixed;margin:0;padding:0 4%;transition:height .45s cubic-bezier(.2,.7,.2,1),background .45s,border-color .45s,backdrop-filter .45s}
.header.scrolled{height:74px;background:rgba(19,38,31,.82);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:rgba(226,214,184,.18)}
.header nav a.active{color:#e8d9b5}
.header nav a.active:after{width:100%}

/* ---------- Hero: chuyển động chậm, chiều sâu ---------- */
.hero{overflow:hidden}
.hero-image{animation:heroDrift 22s cubic-bezier(.25,.6,.3,1) both}
@keyframes heroDrift{from{transform:scale(1.09)}to{transform:scale(1)}}
.hero-content>*{animation:heroIn 1.3s cubic-bezier(.2,.7,.2,1) both}
.hero-content>*:nth-child(2){animation-delay:.12s}.hero-content>*:nth-child(3){animation-delay:.26s}.hero-content>*:nth-child(4){animation-delay:.4s}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- Dải năng lực ---------- */
.capability-band{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:26px 7%;border-bottom:1px solid var(--line);background:var(--ivory)}
.capability-band>span{font-size:10px;letter-spacing:2.6px;color:#7c7d68;white-space:nowrap}
.capability-band ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 0;margin:0;padding:0}
.capability-band li{font:400 15px/1 var(--serif);color:var(--ink);padding:0 20px;border-left:1px solid #cfccbb}
.capability-band li:first-child{border-left:0}

/* ---------- Ảnh: phóng nhẹ khi rê chuột ---------- */
.image-living img,.image-water img,.tech-image img,.eco-shot img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.image-living:hover img,.image-water:hover img,.tech-image:hover img,.eco-shot:hover img{transform:scale(1.035)}

/* ---------- Xuất hiện khi cuộn (chỉ khi JS chạy) ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- Hệ sinh thái tích hợp ---------- */
.eco{background:radial-gradient(1200px 600px at 85% -10%,#24493d 0%,transparent 60%),linear-gradient(180deg,#132a22,#0f221b);color:#efe9da;position:relative;overflow:hidden}
.eco:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(226,214,184,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(226,214,184,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,#000 0%,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 70%);pointer-events:none}
.eco>*{position:relative}
.eco .section-top h2{color:#f4eedf}
.eco .section-top h2 em{color:#d9c497}
.eco .section-top>p{color:#b9c0b0}
.eco-show{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;margin-top:10px}
.eco-shot{position:relative;margin:0;overflow:hidden;border:1px solid rgba(226,214,184,.22);background:#0c1a15;aspect-ratio:16/10}
.eco-shot img{width:100%;height:100%;object-fit:cover;display:block}
.eco-shot:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,22,17,.86),rgba(9,22,17,0) 55%);pointer-events:none}
.eco-shot figcaption{position:absolute;left:26px;right:26px;bottom:22px;z-index:1;display:flex;flex-direction:column;gap:6px}
.eco-shot figcaption span{font-size:10px;letter-spacing:2.4px;color:#d9c497}
.eco-shot figcaption b{font:400 28px/1.2 var(--serif);color:#fff}
.eco-shot figcaption small{font-size:13px;color:#c9cdbf}
.eco-core{display:flex;align-items:center;gap:22px;margin:70px 0 38px;text-align:center}
.eco-core span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(217,196,151,.6),transparent)}
.eco-core b{font:500 12px/1 var(--sans);letter-spacing:4px;color:#e8d9b5;padding:14px 22px;border:1px solid rgba(217,196,151,.5)}
.eco-core em{font:italic 15px/1 var(--serif);color:#b9c0b0;white-space:nowrap}
.eco-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.eco-layer{border:1px solid rgba(226,214,184,.16);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));padding:30px 28px 10px;transition:border-color .5s,background .5s}
.eco-layer:hover{border-color:rgba(217,196,151,.45);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
.eco-layer header{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;padding-bottom:22px;border-bottom:1px solid rgba(226,214,184,.16)}
.eco-layer header span{font:400 13px/1 var(--serif);color:#d9c497}
.eco-layer header h3{font:400 30px/1.15 var(--serif);color:#f4eedf;margin:0}
.eco-layer header small{grid-column:2;font-size:12px;letter-spacing:.6px;color:#9fa898;margin-top:8px}
.eco-layer ul{list-style:none;margin:0;padding:0}
.eco-layer li{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid rgba(226,214,184,.1)}
.eco-layer li:last-child{border-bottom:0}
.eco-layer li>i{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(217,196,151,.4);border-radius:50%;color:#e2cfa2;transition:background .4s,color .4s}
.eco-layer li:hover>i{background:#d9c497;color:#132a22}
.eco-layer svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.eco-layer h4{font:500 15px/1.4 var(--sans);color:#f4eedf;margin:0 0 6px}
.eco-layer li p{font-size:13.5px;line-height:1.75;color:#aeb6a6;margin:0}
.eco-open{display:flex;align-items:center;gap:28px;margin-top:46px;padding:22px 0;border-top:1px solid rgba(226,214,184,.16);border-bottom:1px solid rgba(226,214,184,.16)}
.eco-open>span{font-size:10px;letter-spacing:2.6px;color:#d9c497;white-space:nowrap}
.eco-open ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.eco-open li{font-size:12.5px;color:#dcd6c6;padding:8px 14px;border:1px solid rgba(226,214,184,.22);border-radius:40px}
.eco-note{font-size:12.5px;color:#8e9888;margin:22px 0 0}

@media(max-width:1100px){
  .eco-layers{grid-template-columns:1fr}
  .eco-layer ul{display:grid;grid-template-columns:repeat(3,1fr);column-gap:26px}
  .eco-layer li{grid-template-columns:1fr;border-bottom:0}
  .capability-band{flex-direction:column;align-items:flex-start;gap:14px}
  .capability-band ul{justify-content:flex-start}
  .capability-band li:first-child{padding-left:0}
}

/* ---------- Điện thoại ---------- */
@media(max-width:760px){
  .header{padding:0 6%}
  .header.scrolled{height:64px}
  .header nav{left:0;right:0;top:100%}
  .nav-cta{display:none}
  .menu{margin-left:auto}
  .hero h1{font-size:clamp(40px,12vw,56px);letter-spacing:-1.2px}
  .hero h1 em{white-space:normal}
  .hero-content>p{font-size:14.5px}
  .button{font-size:13px}
  .eyebrow{font-size:9.5px;letter-spacing:2.2px}
  .section-top>p,.tech-copy>p,.vision-body p{font-size:15px}
  .tech-accordion summary{font-size:14.5px}
  .tech-accordion details p,.developer-grid p,.remote-steps p{font-size:14px}
  .capability-band{padding:22px 6%}
  .capability-band li{font-size:14px;padding:0 12px}
  .eco-show{grid-template-columns:1fr}
  .eco-shot figcaption b{font-size:23px}
  .eco-core{margin:46px 0 26px;flex-wrap:wrap;justify-content:center}
  .eco-core span{display:none}
  .eco-core em{white-space:normal;width:100%}
  .eco-layer{padding:24px 20px 4px}
  .eco-layer ul{display:block}
  .eco-layer li{grid-template-columns:38px 1fr;border-bottom:1px solid rgba(226,214,184,.1)}
  .eco-layer header h3{font-size:26px}
  .eco-open{flex-direction:column;align-items:flex-start;gap:14px}
  .mobile-bar{transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  body.past-hero .mobile-bar{transform:none}
  .mobile-bar>a,.mobile-bar>button{font-size:12.5px}
  footer{padding-bottom:70px}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.hero-image,.hero-content>*{animation:none}}

/* ---------- Bổ sung cỡ chữ các chi tiết nhỏ ---------- */
.button,.underlink,.text-link{font-size:13px;letter-spacing:.2px}
.button{padding:19px 26px}
.hero-foot{font-size:10px;letter-spacing:2.2px}
.closing-content p{font-size:15.5px;line-height:1.85}
.beyond>span{font-size:10px;letter-spacing:2.4px}
.beyond p{font-size:13px}
.footer-bottom{font-size:11.5px}
.footer-main p{font-size:18px}
.experience-tabs button{font-size:12.5px}
.experience-panel p{font-size:14px;line-height:1.9}
.viewing-concierge p,.viewing-note{font-size:13.5px;line-height:1.85}
.viewing-concierge [data-preference]{font-size:12px}
/* hai ảnh sản phẩm cao bằng nhau */
.eco-show{align-items:stretch}
.eco-show .eco-shot:not(.eco-shot-main){aspect-ratio:auto;height:100%}
@media(max-width:760px){.eco-show .eco-shot:not(.eco-shot-main){aspect-ratio:16/10;height:auto}.button,.underlink{font-size:13px}.hero-foot{font-size:9px}}
@media(max-width:760px){
  .capability-band ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;width:100%}
  .capability-band li,.capability-band li:first-child{border:0;padding:0 0 0 14px;position:relative;font-size:15px}
  .capability-band li:before{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-3px;border-radius:50%;background:var(--gold)}
  .eco-shot:after{background:linear-gradient(0deg,rgba(9,22,17,.92),rgba(9,22,17,.1) 70%)}
}

/* ---------- Biểu mẫu liên hệ: gửi thật ---------- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-error{font-size:13.5px;line-height:1.7;color:#9a3b2b;background:#f6e6df;border-left:2px solid #b5523d;padding:10px 14px;margin:0 0 16px}
#contact-submit[disabled]{opacity:.65;cursor:progress}
.direct-contact{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px}
.direct-contact span{width:100%;font-size:10px;letter-spacing:2.4px;color:#7c7d68}
.direct-contact a{color:var(--ink);border-bottom:1px solid #b9b49d;padding-bottom:2px}
.direct-contact a:hover{color:var(--gold);border-color:var(--gold)}
#result-text a{color:var(--forest);border-bottom:1px solid currentColor}
.footer-contact{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px}
.footer-contact a{color:#e8dfc8;border-bottom:1px solid rgba(232,223,200,.35)}
@media(max-width:760px){#contact-form .form-row{grid-template-columns:1fr}.direct-contact a{font-size:14.5px}}

/* ---------- Rà soát Chrome 25/10: liên hệ, header, hero màn thấp ---------- */
.direct-contact .dc-item{width:auto;font-size:13.5px;letter-spacing:0;color:var(--muted)}
.footer-contact{color:#b9c0b0}
.footer-contact span{white-space:nowrap}
.header.scrolled{background:rgba(16,36,29,.94)}
.vision .vision-body p+p{font-size:14.5px;line-height:1.95;color:#5f6b60}
@media(min-width:761px) and (max-height:900px){
  .hero{min-height:720px}
  .hero-content{padding-top:150px;padding-bottom:120px}
  .hero h1{font-size:clamp(54px,5.4vw,86px);margin:20px 0 22px}
}

/* ---------- Video đầu trang ---------- */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity 1.8s ease}
.hero-video.on{opacity:1}
.hero-play{margin-left:18px;width:34px;height:34px;border:1px solid rgba(255,255,255,.45);border-radius:50%;color:#fff;font-size:10px;letter-spacing:-1px;background:rgba(0,0,0,.15);cursor:pointer}
.hero-play:hover{background:rgba(255,255,255,.15)}

/* ---------- Nút trình diễn trực tiếp ---------- */
.eco-demo{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:26px}
.eco-demo>span{font-size:10px;letter-spacing:2.6px;color:#d9c497;margin-right:10px}
.eco-demo small{width:100%;font-size:12.5px;color:#9fa898}
.button.outline-light{color:#f4eedf;border:1px solid rgba(244,238,223,.5);background:transparent}
.button.outline-light:hover{background:rgba(244,238,223,.08)}

/* ---------- Quy trình triển khai ---------- */
.process{background:var(--ivory)}
.process-steps{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.process-steps:before{content:'';position:absolute;left:0;right:0;top:27px;height:1px;background:linear-gradient(90deg,var(--gold),#cfccbb 70%)}
.process-steps li{position:relative;padding:0 28px 0 0}
.ps-n{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--ivory);border:1px solid var(--gold);font:400 17px/1 var(--serif);color:var(--forest)}
.ps-t{display:block;margin:24px 0 10px;font-size:10.5px;letter-spacing:2.4px;color:var(--gold);text-transform:uppercase}
.process-steps h3{font:400 23px/1.3 var(--serif);color:var(--ink);margin:0 0 12px}
.process-steps p{font-size:14px;line-height:1.85;color:#5f6b60;margin:0;max-width:290px}
@media(max-width:1100px){.process-steps{grid-template-columns:1fr 1fr;row-gap:44px}.process-steps:before{display:none}}
@media(max-width:760px){
  .process-steps{grid-template-columns:1fr;row-gap:0}
  .process-steps li{display:grid;grid-template-columns:54px 1fr;column-gap:18px;padding:0 0 30px}
  .process-steps li:not(:last-child):after{content:'';position:absolute;left:27px;top:54px;bottom:0;width:1px;background:#cfccbb}
  .ps-n{grid-row:span 3}
  .ps-t{margin:4px 0 6px}
  .eco-demo .button{flex:1 1 100%}
}

/* ---------- Rà soát điện thoại 25/10: chân trang ---------- */
@media(max-width:760px){
  .footer-main{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
  .footer-main .brand{order:1}
  .footer-main>p{order:2;margin:0}
  .footer-contact{order:3;flex-direction:column;gap:10px}
  .footer-main .back-top{position:absolute;right:7%;top:30px;margin:0}
  .footer-bottom,.footer-bottom span,.footer-bottom button{font-size:12px!important;line-height:1.7}
  .footer-bottom{flex-wrap:wrap;gap:8px 20px}
}