/* ETS Tech — page-specific styles for "Chi Tiet Du An" */

.cda-hero { padding:118px 48px 24px; }
.container { max-width:1200px; margin:0 auto; }
.cda-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; color:#6c8194; margin-bottom:26px; }
.text-muted { color:#6c8194; }
.breadcrumb-sep { color:#b7c4cf; }
.breadcrumb-current { color:#0a1929; font-weight:600; }
.cda-title-wrap { max-width:820px; }
.cda-category-badge { display:inline-block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:1.5px; color:#fff; padding:7px 15px; border-radius:999px; background:linear-gradient(135deg,#0f5470,#2eb8eb); box-shadow:0 8px 20px rgba(46,184,235,.3); margin-bottom:20px; }
.cda-title { font-size:54px; line-height:1.08; font-weight:700; letter-spacing:-1.2px; margin-bottom:18px; }
.cda-title-sub { color:#6c8194; font-weight:500; }
.cda-lead { font-size:18px; line-height:1.68; color:#4a5568; max-width:640px; margin:0; }
.cda-body-section { padding:44px 48px 40px; }
.cda-body { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:64px; align-items:start; }
.cda-gallery { position:sticky; top:104px; }
.gallery-main { border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.6); box-shadow:0 20px 60px rgba(15,84,112,.12); background:rgba(255,255,255,.5); }
.gallery-main-media { aspect-ratio:4/3; background:repeating-linear-gradient(45deg,rgba(15,84,112,.08),rgba(15,84,112,.08) 12px,rgba(46,184,235,.1) 12px,rgba(46,184,235,.1) 24px); display:flex; align-items:center; justify-content:center; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.gallery-thumb { aspect-ratio:1/1; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.6); background:repeating-linear-gradient(45deg,rgba(15,84,112,.06),rgba(15,84,112,.06) 8px,rgba(46,184,235,.09) 8px,rgba(46,184,235,.09) 16px); display:flex; align-items:center; justify-content:center; }
.gallery-thumb-caption { font-family:'Space Grotesk',monospace; font-size:11px; color:#6c93ab; }
.info-card { margin-top:16px; padding:22px 24px; border-radius:20px; background:rgba(255,255,255,.62); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.6); box-shadow:0 12px 36px rgba(15,84,112,.08); }
.info-list { display:flex; flex-direction:column; gap:14px; }
.info-row { display:flex; justify-content:space-between; gap:16px; font-size:14px; }
.info-value { color:#0a1929; font-weight:600; text-align:right; }
.info-divider { height:1px; background:rgba(15,84,112,.08); }
.cda-main-col { display:flex; flex-direction:column; gap:52px; }
.step-number { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(46,184,235,.12); color:#0f5470; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; }
.step-title { font-size:30px; letter-spacing:-.5px; }
.step-intro { font-size:16.5px; line-height:1.8; margin:0 0 14px; }
.step-list { margin:0; padding-left:20px; font-size:16px; line-height:1.85; color:#4a5568; }
.step-intro-wide { font-size:16.5px; line-height:1.8; margin:0 0 22px; }
.solution-item { display:flex; gap:16px; padding:20px 22px; border-radius:18px; background:rgba(255,255,255,.62); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.6); box-shadow:0 10px 30px rgba(15,84,112,.07); }
.solution-dot { flex:none; width:10px; height:10px; margin-top:7px; border-radius:50%; background:linear-gradient(135deg,#0f5470,#2eb8eb); }
.solution-item-title { font-size:16.5px; margin-bottom:5px; }
.solution-item-desc { font-size:15px; line-height:1.7; margin:0; }
.step-title-row { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.result-tile { padding:26px 20px; border-radius:20px; text-align:center; background:rgba(255,255,255,.62); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.6); box-shadow:0 10px 30px rgba(15,84,112,.07); }
.result-value { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:38px; line-height:1; }
.result-label { font-size:14px; line-height:1.5; margin:12px 0 0; color:#4a5568; }
.step-summary { font-size:16px; line-height:1.8; margin:22px 0 0; }
.cda-cta-section { padding:40px 48px 90px; }
.cda-cta { position:relative; max-width:1000px; margin:0 auto; padding:72px 56px; border-radius:36px; text-align:center; overflow:hidden; background:linear-gradient(150deg,#0a1929 0%, #0f3a54 70%, #0f5470 130%); box-shadow:0 30px 70px rgba(15,84,112,.24); }
.cda-cta-glow { position:absolute; top:-120px; right:-80px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(46,184,235,.32),transparent 65%); filter:blur(60px); }
.cda-cta-inner { position:relative; }
.cda-cta-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:36px; line-height:1.24; letter-spacing:-.4px; color:#fff; margin:0 0 16px; }
.cda-cta-desc { font-size:17px; line-height:1.7; color:#c3d4e0; max-width:520px; margin:0 auto 32px; }
.cda-cta-btn { display:inline-block; padding:16px 40px; border-radius:999px; background:linear-gradient(135deg,#2eb8eb,#7fd4f2); color:#0a1929; font-weight:700; font-size:16px; box-shadow:0 14px 34px rgba(46,184,235,.4); transition:transform .25s ease; }
.related-section { padding:0 48px 100px; }
.related-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px; }
.related-title { font-size:32px; margin:12px 0 0; letter-spacing:-.5px; }
.related-view-all { font-size:14.5px; font-weight:600; color:#0f5470; white-space:nowrap; }
.related-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:26px; }
.related-grid > .related-card { flex:0 0 calc((100% - 52px) / 3); width:calc((100% - 52px) / 3); max-width:calc((100% - 52px) / 3); }
.related-card { display:flex; flex-direction:column; border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.6); box-shadow:0 16px 46px rgba(15,84,112,.1); background:rgba(255,255,255,.62); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transition:transform .3s ease, box-shadow .3s ease; opacity:0; transform:translateY(24px); }
.related-card-media { aspect-ratio:16/10; background:repeating-linear-gradient(45deg,rgba(15,84,112,.08),rgba(15,84,112,.08) 12px,rgba(46,184,235,.1) 12px,rgba(46,184,235,.1) 24px); display:flex; align-items:center; justify-content:center; }
.related-card-caption { font-family:'Space Grotesk',monospace; font-size:12px; color:#6c93ab; }
.related-card-body { padding:20px 22px 22px; }
.related-card-tag { font-family:'Space Grotesk',sans-serif; font-size:11.5px; letter-spacing:1.5px; color:#2eb8eb; font-weight:600; }
.related-card-title { font-size:18px; line-height:1.3; margin:9px 0 0; letter-spacing:-.2px; }
@media (max-width:1024px) {
  [data-sec] { padding-left:60px; padding-right:60px; padding-top:72px; padding-bottom:72px; }
  [data-hero] { padding-top:104px; padding-bottom:24px; }
  [data-body] { grid-template-columns:1fr !important; gap:44px !important; }
  [data-gallery] { position:static !important; }
  [data-stats] { grid-template-columns:repeat(3,1fr) !important; }
  [data-related] > .related-card { flex-basis:calc((100% - 52px) / 3) !important; width:calc((100% - 52px) / 3) !important; max-width:calc((100% - 52px) / 3) !important; }
  [data-footer-grid] { grid-template-columns:1fr 1fr !important; }
  [data-proj-h] { font-size:44px !important; }
}
@media (max-width:767px) {
  [data-sec] { padding-left:20px !important; padding-right:20px !important; padding-top:44px !important; padding-bottom:44px !important; }
  [data-hero] { padding-top:92px !important; padding-bottom:16px !important; }
  [data-proj-h] { font-size:32px !important; letter-spacing:-.4px !important; }
  [data-h2] { font-size:26px !important; }
  [data-stats] { grid-template-columns:1fr !important; gap:14px !important; }
  [data-related] { gap:20px !important; }
  [data-related] > .related-card { flex-basis:100% !important; width:100% !important; max-width:100% !important; }
  [data-thumbs] { grid-template-columns:repeat(3,1fr) !important; }
  [data-footer-grid] { grid-template-columns:1fr !important; gap:32px !important; }
  [data-cta] { padding:52px 24px !important; margin:12px !important; border-radius:28px !important; }
  [data-cta-h] { font-size:28px !important; }
}