:root{
  --bg-dark:#0b1116;
  --bg-deep:#101922;
  --bg-deeper:#0d151d;
  --white:#fff;
  --text-soft:rgba(255,255,255,.82);
  --text-muted:rgba(255,255,255,.75);
  --line:rgba(255,255,255,.08);
  --blue:#1f6fae;
  --blue-light:#4fa3d9;
  --green:#2fa78b;
  --radius:20px;
  --shadow:0 16px 38px rgba(15,23,32,.08);
  --shadow-hover:0 24px 50px rgba(15,23,32,.14);
  --glass:rgba(255,255,255,.82);
  --transition:.3s ease;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-dark);
  color: var(--white);
  overflow-x: hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{width:min(1200px,calc(100% - 40px));margin:auto}

/* ========= COMMON ========= */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:.8s ease;
}
.reveal.active{
  opacity:1;
  transform:translateY(0);
}
.section{
  padding:90px 20px;
  text-align:center;
  background:var(--bg-deep);
}
.section-dark{background:var(--bg-deeper)}
.section h2{
  font-size:clamp(26px,4vw,36px);
  margin-bottom:14px;
  color:var(--blue-light);
}
.section p{
  font-size:clamp(15px,2vw,18px);
  line-height:1.7;
  color:#dbe7ef;
  max-width:800px;
  margin:auto;
}

/* ========= HERO ========= */
.hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:#000;
}
.hero-video,
.hero-overlay,
.hero-lines{
  position:absolute;
  inset:0;
}
.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.45) contrast(1.05);
  z-index:1;
}
.hero-overlay{
  background:rgba(5,10,15,.5);
  z-index:2;
}
.hero-lines{
  z-index:3;
  pointer-events:none;
  background:repeating-linear-gradient(
    to right,
    rgba(255,255,255,.05) 0 1px,
    transparent 1px 180px
  );
}

/* ========= NAVBAR ========= */
.navbar{
  position:absolute;
  top:0;left:0;
  z-index:20;
  width:100%;
  padding:22px 55px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(0,0,0,.14);
  backdrop-filter:blur(4px);
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{
  height:64px;
  width:auto;
  object-fit:contain;
  background:rgba(255,255,255,.95);
  padding:6px 10px;
  border-radius:4px;
}

.menu{
  display:flex;
  align-items:center;
  gap:34px;
}
.menu li,.menu li a{position:relative}
.menu li a{
  display:inline-block;
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:var(--transition);
}
.menu li a:hover,
.menu li a.active{color:var(--white)}
.menu li a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  width:0;
  height:1px;
  background:var(--blue-light);
  transition:width var(--transition);
}
.menu li a:hover::after,
.menu li a.active::after{width:100%}
.menu li a.active::before{content:"[ "}
.menu li a.active .label::after{content:" ]"}

/* ========= TOGGLE ========= */
.menu-toggle{
  display:none;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:30;
}
.menu-toggle span{
  display:block;
  width:26px;
  height:2px;
  margin:5px auto;
  background:var(--white);
  transition:var(--transition);
}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ========= HERO CONTENT ========= */
.hero-content{
  position:relative;
  z-index:10;
  width:min(1100px,100%);
  min-height:100vh;
  margin:auto;
  padding:140px 24px 80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero-content h1{
  font-size:clamp(32px,7vw,72px);
  line-height:1.1;
  margin-bottom:20px;
}
.hero-content h2{
  font-size:clamp(18px,3vw,28px);
  line-height:1.3;
  margin-bottom:14px;
}
.hero-content p{
  max-width:760px;
  font-size:clamp(14px,2vw,18px);
  line-height:1.7;
  color:rgba(255,255,255,.88);
}
.scroll-down{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:12;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  display:grid;
  place-items:center;
  font-size:24px;
  transition:var(--transition);
}
.scroll-down:hover{
  color:var(--blue-light);
  border-color:var(--blue-light);
  transform:translateX(-50%) translateY(-3px);
}

/* ========= ABOUT ========= */
.contact-section,
.contact-section * {
  font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.contact-section input,
.contact-section textarea,
.contact-section select,
.contact-section button {
  font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}

.contact-section input::placeholder,
.contact-section textarea::placeholder {
  font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
  color: #94a3b8;
  opacity: 1;
}
/* aa */
.about{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:70px 20px;
  overflow:hidden;
  color:#111827;
  background:
    radial-gradient(circle at top left, rgba(79,163,217,.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(31,111,174,.1), transparent 24%),
    linear-gradient(180deg,#f8fbfe 0%,#eef4f9 100%);
}
.about::before,
.about::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.about::before{
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.22;
}
.about::after{
  width:420px;
  height:420px;
  top:-140px;
  right:-120px;
  border-radius:50%;
  filter:blur(30px);
  background:radial-gradient(circle, rgba(79,163,217,.18), transparent 70%);
}
.about .container{position:relative;z-index:2;max-width:1120px}

.about-header{text-align:center;margin-bottom:46px}
.about-header h2{
  position:relative;
  display:inline-block;
  font-size:clamp(30px,4vw,46px);
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#0f172a;
}
.about-header h2::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-14px;
  transform:translateX(-50%);
  width:80px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  box-shadow:0 0 18px rgba(79,163,217,.45);
}
.about-header p{
  margin-top:28px;
  font-size:clamp(15px,2vw,19px);
  line-height:1.7;
  color:#475569;
}

.about-content{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:30px;
  align-items:stretch;
}

.about-text,
.about-logos,
.service-card,
.map-card,
.contact-form-box{
  border-radius:26px;
  border:1px solid rgba(79,163,217,.12);
  background:var(--glass);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
  transition:var(--transition);
}

.about-text{
  position:relative;
  padding:34px 30px;
  overflow:hidden;
}
.about-text::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.45) 40%,transparent 60%);
  transform:translateX(-120%);
  transition:.9s ease;
}
.about-text:hover::before{transform:translateX(120%)}
.about-text:hover,
.about-logos:hover,
.service-card:hover,
.map-card:hover,
.contact-form-box:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-hover);
}
.about-text p{
  font-size:16px;
  line-height:1.9;
  color:#334155;
  margin-bottom:24px;
}
.about-text span{
  color:var(--blue);
  font-weight:700;
}
.about-text ul{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px 18px;
}
.about-text li{
  position:relative;
  padding:14px 16px 14px 42px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(79,163,217,.1);
  color:#1e293b;
  font-weight:600;
  transition:var(--transition);
}
.about-text li::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  width:12px;
  height:12px;
  transform:translateY(-50%) rotate(45deg);
  border-radius:2px;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
}
.about-text li:hover{
  transform:translateX(6px);
  background:linear-gradient(135deg,rgba(79,163,217,.1),rgba(255,255,255,.95));
}

.about-logos{
  position:relative;
  padding:28px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  overflow:hidden;
}
.about-logos img{
  max-width:180px;
  margin:auto;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  transition:var(--transition);
}
.about-logos img:hover{
  transform:translateY(-6px) scale(1.04);
}

.about-header,.about-text,.about-logos{
  animation:aboutFloat 6s ease-in-out infinite;
}
.about-text{animation-delay:.3s}
.about-logos{animation-delay:.6s}
@keyframes aboutFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* ========= FIXED BG ========= */
.fixed-bg-section,
.oncall-bg{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.fixed-bg-section{
  position:relative;
  min-height:40vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background-image:url("../images/12460659.jpg");
}
.fixed-bg-overlay,
.oncall-overlay,
.oncall-grid{
  position:absolute;
  inset:0;
}
.fixed-bg-overlay{
  z-index:1;
  background:linear-gradient(90deg,rgba(7,12,18,.88),rgba(7,12,18,.78) 38%,rgba(7,12,18,.58) 68%,rgba(7,12,18,.42));
}
.fixed-bg-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    repeating-linear-gradient(to right,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);
}
.fixed-bg-container{
  position:relative;
  z-index:3;
  width:min(1000px,calc(100% - 40px));
  margin:auto;
  padding:90px 0;
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:56px;
  align-items:center;
}
.fixed-bg-left{max-width:560px}
.fixed-bg-tag,
.services-tag,
.contact-tag{
  display:inline-block;
  margin-bottom:14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--blue-light);
}
.fixed-bg-left h2{
  max-width:520px;
  font-size:clamp(22px,2.8vw,34px);
  line-height:1.3;
}
.fixed-bg-right{
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.fixed-info-box{
  padding:16px;
  border-left:3px solid var(--blue-light);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(4px);
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  transition:var(--transition);
}
.fixed-info-box:hover{
  transform:translateX(4px);
  background:rgba(79,163,217,.08);
}
.fixed-info-box h3{
  margin-bottom:10px;
  font-size:15px;
  color:var(--white);
}
.fixed-info-box p{
  font-size:13px;
  line-height:1.6;
  color:var(--text-soft);
}
.fixed-bg-button,
.contact-btn,
.oncall-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  border:none;
  cursor:pointer;
  text-transform:uppercase;
  font-weight:800;
  transition:var(--transition);
}
.fixed-bg-button{
  margin-top:8px;
  min-width:190px;
  padding:12px 22px;
  border-radius:6px;
  font-size:11px;
  letter-spacing:1.5px;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  color:var(--white);
}
.fixed-bg-button:hover{transform:translateY(-3px)}

/* ========= SERVICES ========= */
.services-section{
  position:relative;
  padding:110px 20px;
  overflow:hidden;
  background:
    radial-gradient(circle at top left, rgba(79,163,217,.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(31,111,174,.08), transparent 30%),
    linear-gradient(180deg,#f7f9fc 0%,#eef3f8 100%);
}
.services-section .container,
.contact-section .container{position:relative;z-index:2}
.services-bg-glow,
.contact-bg-shape{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
  opacity:.28;
}
.glow-1,.shape-left{
  width:320px;height:320px;left:-90px;
  background:rgba(79,163,217,.25);
}
.glow-1{top:-80px}
.shape-left{top:80px}
.glow-2,.shape-right{
  width:280px;height:280px;right:-80px;
}
.glow-2{
  bottom:-80px;
  background:rgba(31,111,174,.18);
}
.shape-right{
  bottom:30px;
  background:rgba(47,167,139,.18);
}
.services-heading,
.contact-heading{
  max-width:760px;
  margin:0 auto 56px;
  text-align:center;
}
.services-heading h2,
.contact-heading h2{
  font-size:clamp(30px,5vw,50px);
  line-height:1.15;
  color:#111922;
  font-weight:800;
  margin-bottom:18px;
}
.services-line,
.contact-line{
  width:92px;
  height:4px;
  margin:0 auto 20px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
}
.contact-line{background:linear-gradient(90deg,var(--blue),var(--green))}
.services-heading p,
.contact-heading p{
  font-size:clamp(16px,2vw,20px);
  line-height:1.75;
  color:#4f5b67;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.service-card{
  position:relative;
  padding:30px 24px 26px;
  overflow:hidden;
}
.service-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-24deg);
  transition:.8s ease;
}
.service-card::after{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  width:calc(100% - 48px);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  transform:scaleX(.22);
  transform-origin:left;
  transition:var(--transition);
}
.service-card:hover::before{left:150%}
.service-card:hover::after{transform:scaleX(1)}
.service-icon{
  width:72px;
  height:72px;
  margin-bottom:22px;
  border-radius:20px;
  display:grid;
  place-items:center;
  color:var(--green);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(240,248,252,.95));
  box-shadow:0 12px 24px rgba(47,167,139,.08);
  transition:var(--transition);
}
.service-icon svg{width:34px;height:34px}
.service-card:hover .service-icon{transform:rotate(-4deg) scale(1.06)}
.service-card h3{
  font-size:24px;
  line-height:1.25;
  margin-bottom:16px;
  color:#101820;
}
.service-card ul{display:grid;gap:10px}
.service-card li{
  position:relative;
  padding-left:18px;
  font-size:15px;
  line-height:1.7;
  color:#566370;
}
.service-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
}

/* ========= ONCALL ========= */
.oncall-section{
  position:relative;
  height:60vh;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.oncall-bg{
  position:absolute;
  inset:0;
  z-index:0;
  transform:scale(1.02);
  background-image:url("../images/business-4-1024x569.jpg");
}
.oncall-overlay{
  z-index:1;
  background:linear-gradient(to bottom,rgba(8,14,20,.72),rgba(8,14,20,.52),rgba(8,14,20,.72));
}
.oncall-grid{
  z-index:2;
  pointer-events:none;
  mix-blend-mode:soft-light;
  background:
    repeating-linear-gradient(to right,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
}
.oncall-content{
  position:relative;
  z-index:3;
  width:min(680px,calc(100% - 40px));
  margin:auto;
  padding:34px 32px;
  text-align:center;
  border-radius:20px;
  background:rgba(8,14,20,.26);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  animation:oncallFadeUp .9s ease;
}
.oncall-content h2{
  margin-bottom:14px;
  font-size:clamp(24px,2.4vw,34px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:3px;
  text-transform:uppercase;
}
.oncall-content h2::after{
  content:"";
  display:block;
  width:72px;
  height:3px;
  margin:14px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--green));
}
.oncall-content p{
  max-width:560px;
  margin:0 auto 22px;
  font-size:14px;
  line-height:1.8;
  color:var(--text-soft);
}
.oncall-content span{color:var(--green);font-weight:700}
.oncall-btn{
  min-width:170px;
  padding:11px 22px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:4px;
  font-size:11px;
  letter-spacing:2px;
  background:rgba(255,255,255,.03);
  color:var(--white);
}
.oncall-btn:hover{
  transform:translateY(-3px);
  background:rgba(47,167,139,.14);
  border-color:var(--green);
}
@keyframes oncallFadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

/* ========= CONTACT ========= */
.contact-section{
  position:relative;
  padding:110px 20px;
  overflow:hidden;
  background:linear-gradient(180deg,#f7f9fc 0%,#edf2f7 100%);
}
.contact-wrapper{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:28px;
  align-items:stretch;
}
.contact-map,.contact-form-box{min-height:100%}
.map-card{height:100%;overflow:hidden}
.map-card iframe{
  width:100%;
  min-height:520px;
  height:100%;
  border:0;
}
.map-info{
  padding:22px 24px;
  border-top:1px solid rgba(31,111,174,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,250,252,.96));
}
.map-info h3{
  font-size:22px;
  margin-bottom:8px;
  color:#111922;
}
.map-info p,
.form-header p{
  font-size:15px;
  line-height:1.75;
  color:#5b6773;
}
.contact-form-box{padding:34px 30px}
.form-header{
  margin-bottom:26px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(17,25,34,.08);
}
.form-header h3{
  font-size:34px;
  line-height:1.1;
  margin-bottom:10px;
  color:#111922;
}
.contact-form{display:grid;gap:16px}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:16px 18px;
  border:1px solid rgba(17,25,34,.08);
  border-radius:14px;
  outline:none;
  font-size:15px;
  color:#111922;
  background:#fff;
  transition:var(--transition);
}
.contact-form textarea{
  resize:vertical;
  min-height:140px;
}
.contact-form ::placeholder{color:#7a8794}
.contact-form select{
  appearance:none;
  cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,#667482 50%),
    linear-gradient(135deg,#667482 50%,transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 3px),
    calc(100% - 14px) calc(50% - 3px);
  background-size:6px 6px;
  background-repeat:no-repeat;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:rgba(31,111,174,.45);
  box-shadow:0 0 0 4px rgba(79,163,217,.12);
  transform:translateY(-1px);
}
.contact-btn{
  margin-top:6px;
  min-width:190px;
  padding:15px 28px;
  border-radius:8px;
  font-size:13px;
  letter-spacing:2px;
  background:linear-gradient(135deg,var(--blue),var(--green));
  color:var(--white);
}

/* ========= FOOTER ========= */
.site-footer{
  position:relative;
  overflow:hidden;
  color:var(--white);
  background:#15191f;
}
.footer-container{width:min(1200px,calc(100% - 40px));margin:auto}
.footer-top{
  position:relative;
  padding:34px 0;
  overflow:hidden;
  background:linear-gradient(135deg,var(--green),#49b89d);
}
.footer-top::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.12), transparent 22%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,.1), transparent 20%);
}
.footer-top-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.footer-contact-card{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:10px 6px;
  transition:var(--transition);
}
.footer-contact-card:hover{transform:translateY(-4px)}
.footer-icon{
  width:62px;
  height:62px;
  flex-shrink:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
}
.footer-icon svg{width:30px;height:30px}
.footer-contact-text h4{
  font-size:24px;
  margin-bottom:8px;
}
.footer-contact-text p{
  margin:0 0 4px;
  font-size:17px;
  line-height:1.65;
  color:rgba(255,255,255,.92);
}

.footer-cta{background:#1a1d22}
.footer-cta-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.footer-cta-box{
  position:relative;
  min-height:280px;
  padding:60px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
  transition:var(--transition);
}
.footer-cta-left{background:linear-gradient(90deg,#1b1d21,#17191d)}
.footer-cta-right{background:linear-gradient(90deg,#212327,#1b1d21)}
.footer-cta-box::before,
.footer-cta-box::after{
  content:"";
  position:absolute;
  transition:var(--transition);
}
.footer-cta-box::before{
  inset:auto -20% -120px auto;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,167,139,.14), transparent 70%);
  opacity:0;
  transform:scale(.8);
}
.footer-cta-box::after{
  inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.04) 45%,transparent 70%);
  transform:translateX(-120%);
}
.footer-cta-box:hover::before{opacity:1;transform:scale(1)}
.footer-cta-box:hover::after{transform:translateX(120%)}
.footer-cta-box span{
  position:relative;
  z-index:1;
  margin-bottom:14px;
  font-size:18px;
  text-transform:uppercase;
  color:var(--green);
}
.footer-cta-box h3{
  position:relative;
  z-index:1;
  font-size:clamp(30px,4vw,56px);
  line-height:1.1;
  text-transform:uppercase;
  color:var(--green);
}

.footer-bottom{
  position:relative;
  padding:48px 0 54px;
  text-align:center;
  background:linear-gradient(180deg,#2b2d31 0%,#34363a 100%);
}
.footer-bottom::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(to right,rgba(255,255,255,.018) 0 1px,transparent 1px 120px);
}
.footer-social{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  gap:14px;
  margin-bottom:22px;
}
.footer-social a{
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.22);
  transition:var(--transition);
}
.footer-social a:hover{
  transform:translateY(-4px);
  background:linear-gradient(135deg,var(--blue),var(--green));
}
.footer-social svg{width:20px;height:20px}
.footer-copy{
  position:relative;
  z-index:1;
  font-size:17px;
  line-height:1.7;
  color:rgba(255,255,255,.76);
}

/* ========= SIDE MENU ========= */
.side-floating-menu{
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%);
  z-index:1200;
  display:flex;
  align-items:center;
}
.side-menu-toggle{
  width:52px;
  height:150px;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px 0 0 14px;
  color:var(--white);
  background:linear-gradient(180deg,var(--blue),var(--green));
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}
.side-menu-toggle span{
  display:inline-block;
  transform:rotate(90deg);
  font-size:12px;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
  white-space:nowrap;
}
.side-menu-panel{
  width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 0;
  background:rgba(10,16,22,.92);
  backdrop-filter:blur(12px);
  border-radius:18px 0 0 18px;
  box-shadow:0 18px 40px rgba(0,0,0,.24);
  transition:.35s ease;
}
.side-floating-menu:hover .side-menu-panel,
.side-floating-menu.active .side-menu-panel{
  width:220px;
  padding:18px 16px 18px 14px;
}
.side-menu-panel a{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:var(--transition);
}
.side-menu-panel a:hover{
  transform:translateX(-4px);
  color:var(--white);
  background:linear-gradient(135deg,rgba(31,111,174,.28),rgba(47,167,139,.2));
}

/* ========= RESPONSIVE ========= */
@media (min-width:1400px){
  .fixed-bg-container{width:min(1080px,calc(100% - 80px))}
}

@media (max-width:1200px){
  .navbar{padding:20px 32px}
  .menu{gap:24px}
  .hero-lines{
    background:repeating-linear-gradient(
      to right,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 140px
    );
  }
  .fixed-bg-container{width:min(940px,calc(100% - 40px));gap:40px}
}

@media (max-width:1100px){
  .contact-wrapper,
  .footer-top-grid,
  .footer-cta-grid{grid-template-columns:1fr}
  .map-card iframe{min-height:420px}
}

@media (max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:992px){
  .navbar{padding:18px 24px}
  .logo img{height:58px}
  .menu{gap:18px}
  .menu li a{font-size:11px;letter-spacing:1.2px}
  .hero-content{padding:150px 22px 80px}
  .about{min-height:auto;padding:90px 20px}
  .about-content,
  .fixed-bg-container{grid-template-columns:1fr}
  .about-text ul{grid-template-columns:1fr 1fr}
  .about-logos{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
  }
  .oncall-section{
    height:auto;
    min-height:380px;
    padding:60px 0;
  }
  .oncall-content{
    width:min(620px,calc(100% - 32px));
    padding:28px 24px;
  }
  .side-floating-menu{display:none}
}

@media (max-width:768px){
  .hero{min-height:100svh}
  .navbar{padding:16px 18px}
  .logo img{height:50px}
  .menu-toggle{display:block}
  .menu{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    max-height:0;
    overflow:hidden;
    flex-direction:column;
    gap:0;
    background:rgba(10,15,20,.96);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:.35s ease;
  }
  .menu.show{
    max-height:400px;
    padding:10px 0 14px;
  }
  .menu li{
    width:100%;
    text-align:center;
  }
  .menu li a{
    padding:14px 0;
    font-size:12px;
    letter-spacing:1px;
  }
  .menu li a::after{bottom:8px}
  .hero-content{
    min-height:100svh;
    padding:150px 18px 85px;
  }
  .hero-content p{max-width:95%}
  .scroll-down{
    width:46px;
    height:46px;
    bottom:22px;
    font-size:20px;
  }
  .hero-lines{
    background:repeating-linear-gradient(
      to right,
      rgba(255,255,255,.03) 0 1px,
      transparent 1px 90px
    );
  }

  .fixed-bg-section,
  .oncall-bg{background-attachment:scroll}
  .fixed-bg-container{
    width:calc(100% - 24px);
    padding:56px 0;
    gap:22px;
  }
  .fixed-bg-left h2{font-size:clamp(24px,7vw,34px)}
  .fixed-info-box{padding:18px 16px}
  .fixed-info-box h3{font-size:18px}
  .fixed-info-box p{font-size:14px}
  .fixed-bg-button,
  .contact-btn{
    width:100%;
    min-width:0;
    padding:14px 20px;
    font-size:12px;
    letter-spacing:1.5px;
  }

  .services-section,
  .contact-section{padding:85px 16px}
  .services-heading,
  .contact-heading{margin-bottom:40px}
  .services-grid{grid-template-columns:1fr;gap:18px}
  .service-card{
    padding:24px 18px 22px;
    border-radius:20px;
  }
  .service-icon{
    width:64px;
    height:64px;
    margin-bottom:18px;
    border-radius:18px;
  }
  .service-icon svg{width:30px;height:30px}
  .service-card h3{font-size:21px}
  .service-card li{font-size:14px}

  .contact-form-box{
    padding:24px 18px;
    border-radius:20px;
  }
  .map-card{border-radius:20px}
  .map-card iframe{min-height:320px}
  .map-info{padding:18px}
  .map-info h3{font-size:20px}
  .form-header h3{font-size:28px}
  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    padding:14px 16px;
    font-size:14px;
    border-radius:12px;
  }

  .oncall-section{
    min-height:unset;
    padding:56px 0;
    overflow:visible;
  }
  .oncall-bg{transform:scale(1)}
  .oncall-content{
    width:calc(100% - 24px);
    padding:24px 16px;
    border-radius:16px;
  }
  .oncall-content h2{
    font-size:20px;
    letter-spacing:2px;
  }
  .oncall-content p{
    font-size:13px;
    line-height:1.65;
    margin-bottom:16px;
  }
  .oncall-btn{
    min-width:150px;
    padding:10px 16px;
    font-size:10px;
    letter-spacing:1.4px;
  }

  .footer-container{width:calc(100% - 24px)}
  .footer-top{padding:28px 0}
  .footer-contact-card{gap:14px}
  .footer-icon{width:54px;height:54px}
  .footer-icon svg{width:26px;height:26px}
  .footer-contact-text h4{font-size:20px}
  .footer-contact-text p{font-size:15px}
  .footer-cta-box{
    min-height:180px;
    padding:40px 20px;
  }
  .footer-cta-box span{font-size:15px}
  .footer-bottom{padding:36px 0 40px}
  .footer-social a{width:42px;height:42px}
  .footer-copy{font-size:14px}
}

@media (max-width:576px){
  .navbar{padding:14px}
  .logo img{
    height:46px;
    padding:5px 8px;
  }
  .hero-content{padding:145px 14px 78px}
  .section{padding:70px 16px}
  .about{padding:75px 14px}
  .about-header{margin-bottom:34px}
  .about-text,
  .about-logos{
    padding:22px 16px;
    border-radius:22px;
  }
  .about-text p{
    font-size:15px;
    line-height:1.8;
  }
  .about-text ul{grid-template-columns:1fr}
  .about-text li{
    padding:12px 14px 12px 40px;
    font-size:14px;
  }
  .about-logos img{
    max-width:130px;
    padding:10px;
  }
}

@media (max-width:480px){
  .fixed-bg-container{
    width:calc(100% - 20px);
    padding:50px 0;
  }
  .fixed-bg-left h2{font-size:24px}
  .fixed-info-box{padding:16px 14px}
  .oncall-section{padding:44px 0}
  .oncall-content{
    width:calc(100% - 20px);
    padding:20px 14px;
  }
  .oncall-content h2{
    font-size:18px;
    letter-spacing:1.5px;
  }
  .oncall-content p{
    font-size:12px;
    line-height:1.6;
  }
  .oncall-btn{
    min-width:138px;
    padding:9px 14px;
    font-size:9px;
  }
}

@media (max-width:380px){
  .logo img{height:42px}
  .hero-content{padding:140px 12px 72px}
  .hero-content p{line-height:1.6}
}
/* ngôn ngữ */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
}

.lang-btn {
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.3s ease;
}

.lang-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

.lang-btn.active {
  background: #fff;
  color: #111;
  border-color: #fff;
}

@media (max-width: 991px) {
  .lang-switcher {
    margin-left: 12px;
  }

  .lang-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
}
/* about */
/* =========================
   ABOUT PRO - WHITE CLEAN
========================= */
.about-pro {
  padding: 100px 0;
  background: #f8fafc;
}

.about-pro .container {
  max-width: 1200px;
}

/* HEADER */
.about-header {
  text-align: center;
  margin-bottom: 60px;
}

.about-tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #e6f0ff;
  color: #0a66ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.about-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 16px;
  color: #0b1f33;
}

.about-header p {
  max-width: 720px;
  margin: 0 auto;
  color: #5c6b7a;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* LAYOUT */
.about-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 30px;
}

/* LEFT MAIN */
.about-main-card {
  background: #ffffff;
  padding: 36px;
  border-radius: 18px;
  border: 1px solid #e6ecf2;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.about-section-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #0b1f33;
}

.about-main-card p {
  color: #4a5a6a;
  line-height: 1.9;
}

.about-main-card span {
  color: #0a66ff;
  font-weight: 600;
}

/* FEATURE LIST */
.about-feature-list {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
}

.about-feature-list li {
  background: #f4f7fb;
  border: 1px solid #e4ebf2;
  padding: 12px 14px 12px 36px;
  border-radius: 12px;
  font-size: 0.95rem;
  color: #2c3e50;
  position: relative;
  transition: all 0.2s ease;
}

.about-feature-list li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0a66ff;
}

.about-feature-list li:hover {
  background: #eaf2ff;
  border-color: #cfe0ff;
  transform: translateY(-2px);
}

/* RIGHT SIDE */
.about-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* CARD */
.about-info-card {
  background: #ffffff;
  padding: 26px;
  border-radius: 18px;
  border: 1px solid #e6ecf2;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  transition: all 0.25s ease;
}

.about-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.06);
}

/* TAG */
.about-mini-tag {
  font-size: 12px;
  font-weight: 700;
  color: #0a66ff;
  margin-bottom: 10px;
  display: inline-block;
  letter-spacing: 1.5px;
}

/* TITLE */
.about-info-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
  color: #0b1f33;
}

/* TEXT */
.about-info-card p {
  color: #5c6b7a;
  line-height: 1.8;
  font-size: 0.95rem;
}

/* SPECIAL COLORS */
.mission-card {
  border-left: 4px solid #0a66ff;
}

.vision-card {
  border-left: 4px solid #00b894;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-feature-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .about-feature-list {
    grid-template-columns: 1fr;
  }

  .about-main-card,
  .about-info-card {
    padding: 22px;
  }

  .about-header h2 {
    font-size: 2rem;
  }
}
/* about */
.technical-services-section {
  padding: 90px 20px;
  background: linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
}

.technical-services-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.technical-services-section .section-header {
  max-width: 860px;
  margin: 0 auto 60px;
  text-align: center;
}

.technical-services-section .section-label {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #2e7ecb;
}

.technical-services-section .section-header h2 {
  margin: 0;
  font-size: 52px;
  line-height: 1.15;
  font-weight: 800;
  color: #0f1724;
}

.technical-services-section .header-line {
  width: 88px;
  height: 4px;
  margin: 22px auto 24px;
  border-radius: 999px;
  background: #2e7ecb;
}

.technical-services-section .section-intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.9;
  color: #607083;
}

.technical-services-section .content-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 28px;
  margin-bottom: 28px;
}

.technical-services-section .main-card,
.technical-services-section .info-card,

.technical-services-section .main-card:hover,
.technical-services-section .info-card:hover,


.technical-services-section .main-card {
  padding: 36px;
}

.technical-services-section .side-group {
  display: grid;
  gap: 28px;
}

.technical-services-section .info-card {
  padding: 30px;
}


.technical-services-section .card-line {
  width: 72px;
  height: 4px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: #2e7ecb;
}

.technical-services-section .main-card h3,
.technical-services-section .info-card h3,

.technical-services-section .main-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 36px;
}

.technical-services-section .main-card ul li {
  position: relative;
  break-inside: avoid;
  margin-bottom: 16px;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.8;
  color: #617183;
}

.technical-services-section .main-card ul li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2e7ecb;
}

.technical-services-section .info-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: #617183;
}

.technical-services-section .application-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.technical-services-section .application-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #f4f9fd;
  border: 1px solid #d7e7f5;
  color: #315674;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .technical-services-section .section-header h2 {
    font-size: 42px;
  }

  .technical-services-section .content-layout {
    grid-template-columns: 1fr;
  }

  .technical-services-section .main-card ul {
    columns: 1;
  }
}

@media (max-width: 768px) {
  .technical-services-section {
    padding: 70px 16px;
  }

  .technical-services-section .section-header {
    margin-bottom: 40px;
  }

  .technical-services-section .section-header h2 {
    font-size: 32px;
  }

  .technical-services-section .section-intro {
    font-size: 16px;
    line-height: 1.8;
  }

  .technical-services-section .main-card,
  .technical-services-section .info-card,
  .technical-services-section .application-card {
    padding: 24px;
    border-radius: 20px;
  }

  .technical-services-section .main-card h3,
  .technical-services-section .info-card h3,
  .technical-services-section .application-card h3 {
    font-size: 22px;
  }
}
/* footer */
.footer {
  position: relative;
  background: url('../images/bg4.jpg') center/cover no-repeat;
  color: #fff;
  font-size: 14px;
}

/* lớp phủ tối */
.footer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

/* container */
.footer-container {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding: 60px 80px;
  max-width: 1200px;
  margin: auto;
}

/* cột */
.footer-col p {
  line-height: 1.6;
  color: #ddd;
}

.footer-col h4 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

/* list */
.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 10px;
  color: #ccc;
}

.footer-col ul li a {
  color: #ccc;
  text-decoration: none;
  transition: 0.3s;
}

.footer-col ul li a:hover {
  color: #fff;
  padding-left: 5px;
}

/* bottom */
.footer-bottom {
  position: relative;
  text-align: center;
  padding: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 13px;
  color: #bbb;
}

/* footer */
.gl-footer {
  position: relative;
  background: #020617;
  color: #cbd5e1;
  padding: 80px 0 30px;
  font-family: 'Segoe UI', sans-serif;
  overflow: hidden;
}

/* subtle tech background */
.gl-footer::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(14,165,233,0.08), transparent 40%),
              radial-gradient(circle at 80% 70%, rgba(56,189,248,0.06), transparent 40%);
  top: 0;
  left: 0;
}

/* layout */
.gl-footer-container {
  position: relative;
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.3fr;
  gap: 60px;
  padding: 0 20px;
}

/* brand */
.gl-footer-brand h2 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 24px;
}

.gl-footer-brand p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 12px;
  color: #94a3b8;
}

/* highlight tags */
.gl-footer-highlight {
  margin: 20px 0;
}

.gl-footer-highlight span {
  display: inline-block;
  border: 1px solid #1e293b;
  padding: 5px 10px;
  margin-right: 8px;
  font-size: 12px;
  border-radius: 4px;
}

/* button */
.gl-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 11px 24px;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  color: white;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}

.gl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(14,165,233,0.25);
}

/* columns */
.gl-footer-col h4,
.gl-footer-contact h4 {
  color: #fff;
  margin-bottom: 18px;
  font-size: 15px;
}

.gl-footer-col ul {
  list-style: none;
  padding: 0;
}

.gl-footer-col li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #94a3b8;
  transition: 0.3s;
}

.gl-footer-col li:hover {
  color: #38bdf8;
  transform: translateX(5px);
}

/* contact */
.gl-contact-item {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
}

/* social */
.gl-social a {
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: #cbd5e1;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.gl-social a:hover {
  border-bottom: 1px solid #38bdf8;
}

/* divider */
.gl-footer-line {
  height: 1px;
  background: linear-gradient(to right, transparent, #1e293b, transparent);
  margin: 50px auto;
  max-width: 1200px;
}

/* bottom */
.gl-footer-bottom {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #64748b;
}

.gl-footer-right span {
  margin-left: 20px;
  cursor: pointer;
}

.gl-footer-right span:hover {
  color: #38bdf8;
}

/* responsive */
@media (max-width: 992px) {
  .gl-footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .gl-footer-container {
    grid-template-columns: 1fr;
  }

  .gl-footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}


/* ... */
/* =========================================================
   GRAND LINE ENGINEERING - BRAND COLOR SYSTEM
   Đồng bộ màu theo logo
========================================================= */
:root{
  --bg-dark:#071726;
  --bg-deep:#0A1D2E;
  --bg-deeper:#06131F;

  --white:#ffffff;
  --text-soft:rgba(255,255,255,.84);
  --text-muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.08);

  --blue:#0D5EA8;
  --blue-2:#1678BC;
  --blue-light:#27A4DD;
  --blue-soft:#DDF4FF;
  --navy:#0A2F57;

  --green:#1D8FCC;

  --radius:20px;
  --shadow:0 16px 38px rgba(7,23,38,.08);
  --shadow-hover:0 24px 50px rgba(7,23,38,.14);
  --glass:rgba(255,255,255,.84);
  --transition:.3s ease;
}

/* =========================================================
   GLOBAL
========================================================= */
body{
  background:var(--bg-dark);
  color:var(--white);
}

.section h2{
  color:var(--blue-light);
}

.section p{
  color:#dbe7ef;
}

/* =========================================================
   NAVBAR
========================================================= */
.navbar{
  background:rgba(4,16,28,.22);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
}

.logo img{
  background:rgba(255,255,255,.96);
}

.menu li a{
  color:rgba(255,255,255,.78);
}

.menu li a:hover,
.menu li a.active{
  color:var(--white);
}

.menu li a::after{
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
}

/* =========================================================
   HERO
========================================================= */
.hero{
  background:#000;
}

.hero-video{
  filter:brightness(.45) contrast(1.06);
}

.hero-overlay{
  background:linear-gradient(
    180deg,
    rgba(4,14,24,.48),
    rgba(4,14,24,.60)
  );
}

.hero-content h1{
  color:var(--white);
  text-shadow:0 8px 30px rgba(0,0,0,.24);
}

.hero-content h2{
  color:var(--blue-soft);
}

.hero-content p{
  color:rgba(255,255,255,.88);
}

.scroll-down{
  border:1px solid rgba(255,255,255,.28);
}

.scroll-down:hover{
  color:var(--blue-light);
  border-color:var(--blue-light);
  box-shadow:0 0 0 6px rgba(39,164,221,.10);
}

/* =========================================================
   ABOUT
========================================================= */
.about{
  color:#111827;
  background:
    radial-gradient(circle at top left, rgba(39,164,221,.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(13,94,168,.10), transparent 24%),
    linear-gradient(180deg,#F7FCFF 0%, #EDF7FD 100%);
}

.about::before{
  background:
    linear-gradient(rgba(255,255,255,.36) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.36) 1px, transparent 1px);
}

.about::after{
  background:radial-gradient(circle, rgba(39,164,221,.18), transparent 70%);
}

.about-header h2{
  color:var(--navy);
}

.about-header h2::after{
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  box-shadow:0 0 18px rgba(39,164,221,.28);
}

.about-header p{
  color:#4b5d70;
}

.about-text,
.about-logos,
.service-card,
.map-card,
.contact-form-box{
  border:1px solid rgba(13,94,168,.10);
  background:var(--glass);
  box-shadow:var(--shadow);
}

.about-text p{
  color:#334155;
}

.about-text span{
  color:var(--blue);
  font-weight:700;
}

.about-text li{
  background:rgba(255,255,255,.76);
  border:1px solid rgba(13,94,168,.08);
  color:#1c2b39;
}

.about-text li::before{
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
}

.about-text li:hover{
  background:linear-gradient(135deg,rgba(39,164,221,.10),rgba(255,255,255,.96));
}

.about-logos img{
  background:rgba(255,255,255,.95);
}

/* =========================================================
   ABOUT EXTRA CARD RIGHT
========================================================= */
.about-main-card,
.about-info-card{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(13,94,168,.08);
  box-shadow:0 16px 38px rgba(7,23,38,.08);
}

.about-section-title,
.about-info-card h3{
  color:var(--navy);
}

.about-mini-tag,
.about-tag{
  color:var(--blue);
}

.mission-card{
  border-left:4px solid var(--blue);
}

.vision-card{
  border-left:4px solid var(--blue-light);
}

.about-feature-list li{
  background:#f3f8fc;
  border:1px solid rgba(13,94,168,.08);
  color:#274057;
}

.about-feature-list li::before{
  background:var(--blue-light);
}

/* =========================================================
   ABOUT IMAGES
========================================================= */
.about-images{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:0;
  margin-top:34px;
  overflow:visible;
}

.about-img{
  width:180px;
  height:120px;
  border-radius:18px;
  overflow:hidden;
  border:3px solid rgba(255,255,255,.92);
  box-shadow:0 16px 32px rgba(10,47,87,.14);
  transition:all .35s ease;
  background:#d9eef8;
}

.about-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.img-1{
  transform:translateX(18px) rotate(-6deg);
  z-index:1;
}

.img-2{
  transform:translateY(-10px) rotate(2deg);
  z-index:2;
}

.img-3{
  transform:translateX(-18px) rotate(6deg);
  z-index:1;
}

.about-img:hover{
  transform:translateY(-6px) scale(1.04) rotate(0deg);
  z-index:10;
}

/* =========================================================
   FIXED BG / WHY CHOOSE US
========================================================= */
.fixed-bg-overlay{
  background:linear-gradient(
    90deg,
    rgba(4,14,24,.90),
    rgba(4,14,24,.82) 38%,
    rgba(4,14,24,.62) 68%,
    rgba(4,14,24,.45)
  );
}

.fixed-bg-tag,
.services-tag,
.contact-tag{
  color:var(--blue-light);
}

.fixed-info-box{
  border-left:3px solid var(--blue-light);
  background:rgba(255,255,255,.05);
}

.fixed-info-box:hover{
  background:rgba(39,164,221,.10);
}

.fixed-info-box h3{
  color:var(--white);
}

.fixed-info-box p{
  color:var(--text-soft);
}

/* =========================================================
   BUTTONS
========================================================= */
.fixed-bg-button,
.contact-btn,
.oncall-btn{
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  color:var(--white);
}

.fixed-bg-button:hover,
.contact-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(13,94,168,.24);
}

.oncall-btn{
  border:1px solid rgba(255,255,255,.70);
  background:rgba(13,94,168,.12);
}

.oncall-btn:hover{
  background:linear-gradient(135deg,rgba(13,94,168,.24),rgba(39,164,221,.18));
  border-color:var(--blue-light);
}

/* =========================================================
   SERVICES
========================================================= */
.services-section,
.technical-services-section{
  background:
    radial-gradient(circle at top left, rgba(39,164,221,.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(13,94,168,.08), transparent 30%),
    linear-gradient(180deg,#F7FBFE 0%, #EDF4FA 100%);
}

.services-heading h2,
.contact-heading h2,
.section-header h2{
  color:var(--navy);
}

.services-line,
.contact-line,
.header-line{
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
}

.services-heading p,
.contact-heading p,
.section-intro{
  color:#516273;
}

.service-card::after,
.card-line{
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
}

.service-icon{
  color:var(--blue);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(238,248,255,.96));
  box-shadow:0 12px 24px rgba(13,94,168,.08);
}

.service-card h3,
.main-card h3,
.info-card h3,
.application-card h3{
  color:var(--navy);
}

.service-card li,
.main-card li,
.info-card p,
.application-card p{
  color:#566370;
}

.service-card li::before{
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
}

.main-card,
.info-card{
  background:rgba(255,255,255,.84);
  border:1px solid rgba(13,94,168,.08);
  box-shadow:0 16px 38px rgba(7,23,38,.08);
}

.application-tags span{
  color:var(--blue);
  background:rgba(221,244,255,.95);
  border:1px solid rgba(13,94,168,.10);
}

.application-tags span:hover{
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  color:#fff;
}

/* =========================================================
   ONCALL / ENGINEERING
========================================================= */
.oncall-overlay{
  background:linear-gradient(
    to bottom,
    rgba(6,19,31,.76),
    rgba(6,19,31,.54),
    rgba(6,19,31,.76)
  );
}

.oncall-content{
  background:rgba(7,23,38,.30);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.24);
}

.oncall-content h2{
  color:var(--white);
}

.oncall-content h2::after{
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
}

.oncall-content p{
  color:var(--text-soft);
}

.oncall-content span{
  color:var(--blue-light);
}

/* =========================================================
   CONTACT
========================================================= */
.contact-section{
  background:linear-gradient(180deg,#F7FBFE 0%, #EDF3F8 100%);
}

.map-info{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,251,254,.98));
  border-top:1px solid rgba(13,94,168,.08);
}

.map-info h3,
.form-header h3{
  color:var(--navy);
}

.map-info p,
.form-header p{
  color:#5b6773;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  border:1px solid rgba(13,94,168,.10);
  color:#112234;
  background:#fff;
}

.contact-form ::placeholder{
  color:#7b8794;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:rgba(13,94,168,.42);
  box-shadow:0 0 0 4px rgba(39,164,221,.14);
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  background:#0A1825;
}

.footer-top{
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
}

.footer-icon{
  background:rgba(255,255,255,.16);
}

.footer-contact-text h4{
  color:#fff;
}

.footer-contact-text p{
  color:rgba(255,255,255,.92);
}

.footer-cta{
  background:#0D1C2A;
}

.footer-cta-left{
  background:linear-gradient(90deg,#0D1C2A,#0A1825);
}

.footer-cta-right{
  background:linear-gradient(90deg,#132536,#0B1926);
}

.footer-cta-box::before{
  background:radial-gradient(circle, rgba(39,164,221,.14), transparent 70%);
}

.footer-cta-box span,
.footer-cta-box h3{
  color:var(--blue-light);
}

.footer-bottom{
  background:linear-gradient(180deg,#122334 0%, #0B1825 100%);
}

.footer-social a{
  background:rgba(255,255,255,.06);
}

.footer-social a:hover{
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
}

.footer-copy{
  color:rgba(255,255,255,.76);
}

/* =========================================================
   SIDE FLOATING MENU
========================================================= */
.side-menu-toggle{
  background:linear-gradient(180deg,var(--blue),var(--blue-light));
}

.side-menu-panel{
  background:rgba(7,23,38,.94);
}

.side-menu-panel a{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.side-menu-panel a:hover{
  background:linear-gradient(135deg,rgba(13,94,168,.28),rgba(39,164,221,.20));
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width:768px){
  .about-images{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    justify-items:center;
  }

  .about-img,
  .img-1,
  .img-2,
  .img-3{
    width:min(100%,280px);
    height:180px;
    transform:none;
  }
}
/* about 1 */
/* ===== SECTION INTRO / ABOUT ===== */
.intro-hero {
  position: relative;
  padding: 110px 0;
  background: linear-gradient(180deg, #f4faff 0%, #ffffff 100%);
  overflow: hidden;
}

.intro-hero::before,
.intro-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(55px);
  opacity: 0.55;
}

.intro-hero::before {
  top: -100px;
  left: -100px;
  width: 280px;
  height: 280px;
  background: rgba(10, 92, 151, 0.12);
}

.intro-hero::after {
  right: -80px;
  bottom: -80px;
  width: 260px;
  height: 260px;
  background: rgba(57, 164, 220, 0.14);
}

.intro-hero .container {
  position: relative;
  z-index: 2;
}

.intro-hero-grid {
  display: grid;
  grid-template-columns: minmax(110px, 170px) minmax(0, 760px) minmax(110px, 170px);
  justify-content: center;
  gap: 24px;
  align-items: start;
}

.intro-side,
.intro-content {
  min-width: 0;
}

/* ===== SIDE IMAGES ===== */
.intro-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.intro-side-left {
  align-items: flex-start;
}

.intro-side-right {
  align-items: flex-end;
}

.intro-image {
  position: relative;
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(10, 92, 151, 0.08);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(8, 61, 107, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.intro-image:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 54px rgba(8, 61, 107, 0.16);
}

.intro-image-top {
  margin-top: -18px;
}

.intro-image-bottom {
  margin-left: 16px;
}

.intro-side-right .intro-image-bottom {
  margin-left: 0;
  margin-right: 16px;
}

.intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== CENTER CONTENT ===== */
.intro-content {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.intro-tag {
  display: inline-block;
  margin-bottom: 16px;
  color: #1f7fbe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.intro-title {
  max-width: 100%;
  margin: 0 auto 20px;
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #081a2f;
  word-break: break-word;
  overflow-wrap: break-word;
}

.intro-title span {
  color: #0a5c97;
}

.intro-desc {
  max-width: 100%;
  margin: 0 auto 28px;
  font-size: 1.02rem;
  line-height: 1.85;
  color: #5f6b7a;
}

/* ===== HIGHLIGHT TAGS ===== */
.intro-highlight-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}

.intro-highlight-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  background: #ffffff;
  color: #0a5c97;
  border: 1px solid rgba(10, 92, 151, 0.1);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(8, 61, 107, 0.05);
  font-size: 14px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.intro-highlight-list span:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 127, 190, 0.22);
  box-shadow: 0 14px 30px rgba(8, 61, 107, 0.08);
}

/* ===== TABS ===== */
.intro-tabs {
  margin-top: 10px;
  text-align: left;
  width: 100%;
}

.intro-tabs-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}

.intro-tab-btn {
  min-width: 170px;
  padding: 14px 22px;
  border: 1px solid rgba(10, 92, 151, 0.1);
  background: #ffffff;
  color: #0a5c97;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(8, 61, 107, 0.05);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.intro-tab-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 127, 190, 0.22);
  box-shadow: 0 16px 32px rgba(8, 61, 107, 0.09);
}

.intro-tab-btn.active {
  background: linear-gradient(135deg, #083d6b 0%, #0a5c97 55%, #39a4dc 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 18px 36px rgba(8, 61, 107, 0.18);
}

.intro-tabs-content {
  position: relative;
  width: 100%;
}

.intro-tab-panel {
  display: none;
  animation: tabFade 0.35s ease;
}

.intro-tab-panel.active {
  display: block;
  width: 100%;
}

@keyframes tabFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== TAB CONTENT CARD ===== */
.intro-tab-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 38px 34px;
  background: #ffffff;
  border: 1px solid rgba(10, 92, 151, 0.1);
  border-radius: 26px;
  box-shadow: 0 20px 44px rgba(8, 61, 107, 0.08);
  overflow: hidden;
}

.intro-tab-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 34px;
  width: 84px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #083d6b 0%, #0a5c97 55%, #39a4dc 100%);
}

.intro-details-tag {
  display: inline-block;
  margin-bottom: 14px;
  color: #1f7fbe;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.intro-tab-card h3 {
  margin: 0 0 16px;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 800;
  color: #081a2f;
  overflow-wrap: break-word;
}

.intro-tab-card p {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.95;
  color: #5f6b7a;
  max-width: none;
  overflow-wrap: break-word;
}

.intro-tab-card p:last-child {
  margin-bottom: 0;
}

/* ===== CORE VALUES ===== */
.intro-core-values-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.intro-core-item {
  min-width: 0;
  padding: 22px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f4faff 100%);
  border: 1px solid rgba(10, 92, 151, 0.09);
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(8, 61, 107, 0.05);
  transition: all 0.3s ease;
}

.intro-core-item:hover {
  transform: translateY(-4px);
  border-color: rgba(31, 127, 190, 0.2);
  box-shadow: 0 18px 34px rgba(8, 61, 107, 0.09);
}

.intro-core-item h4 {
  margin: 0 0 10px;
  font-size: 1.04rem;
  line-height: 1.4;
  font-weight: 800;
  color: #0a5c97;
  overflow-wrap: break-word;
}

.intro-core-item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: #5f6b7a;
  overflow-wrap: break-word;
}

/* ===== REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  animation: revealUp 0.9s ease forwards;
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1199px) {
  .intro-hero-grid {
    grid-template-columns: 100px minmax(0, 700px) 100px;
    gap: 16px;
  }

  .intro-image {
    max-width: 100px;
  }

  .intro-image-bottom {
    margin-left: 6px;
  }

  .intro-side-right .intro-image-bottom {
    margin-right: 6px;
  }

  .intro-content {
    max-width: 700px;
  }

  .intro-title {
    font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  }
}

@media (max-width: 991px) {
  .intro-hero {
    padding: 90px 0;
  }

  .intro-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .intro-side {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .intro-side-left,
  .intro-side-right {
    align-items: center;
  }

  .intro-image,
  .intro-image-top,
  .intro-image-bottom,
  .intro-side-right .intro-image-bottom {
    max-width: 160px;
    width: 160px;
    margin: 0;
  }

  .intro-content {
    order: -1;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .intro-hero {
    padding: 72px 0;
  }

  .intro-hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .intro-side {
    display: none;
  }

  .intro-content {
    max-width: 100%;
  }

  .intro-title {
    font-size: 2rem;
  }

  .intro-desc {
    font-size: 0.97rem;
    line-height: 1.8;
  }

  .intro-highlight-list span {
    width: 100%;
  }

  .intro-tabs-nav {
    gap: 10px;
  }

  .intro-tab-btn {
    width: 100%;
    min-width: unset;
    padding: 13px 18px;
    font-size: 14px;
    border-radius: 12px;
  }

  .intro-tab-card {
    padding: 28px 20px;
    border-radius: 20px;
  }

  .intro-tab-card::before {
    left: 20px;
    width: 60px;
  }

  .intro-tab-card h3 {
    font-size: 1.12rem;
  }

  .intro-tab-card p {
    font-size: 0.94rem;
    line-height: 1.8;
  }

  .intro-core-values-list {
    grid-template-columns: 1fr;
  }

  .intro-core-item {
    padding: 18px 16px;
    border-radius: 16px;
  }
}
/* ================================
   GRAND LINE MOBILE + LAYOUT PATCH
   Dán xuống CUỐI file CSS hiện tại
   Không xóa CSS cũ
================================ */

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  overflow-x: hidden;
}

img,
video,
iframe{
  max-width: 100%;
}

/* Chống tràn chữ cho các tiêu đề */
.hero-content h1,
.hero-content h2,
.intro-title,
.intro-tab-card h3,
.fixed-bg-left h2,
.technical-services-section .section-header h2,
.technical-services-section .main-card h3,
.technical-services-section .info-card h3,
.technical-services-section .application-card h3,
.oncall-content h2,
.contact-heading h2,
.form-header h3,
.footer-contact-text h4,
.footer-cta-box h3{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  text-wrap: balance;
}

/* ===== INTRO / ABOUT mới theo HTML hiện tại ===== */
.intro-hero{
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(79,163,217,.10), transparent 22%),
    radial-gradient(circle at bottom right, rgba(47,167,139,.10), transparent 24%),
    linear-gradient(180deg, #f8fbfe 0%, #eef4f9 100%);
}

.intro-hero .container{
  position: relative;
  z-index: 2;
}

.intro-hero-grid{
  display: grid;
  grid-template-columns: minmax(150px,190px) minmax(0,1fr) minmax(150px,190px);
  gap: 28px;
  align-items: center;
}

.intro-side{
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.intro-side-right{
  justify-self: end;
}

.intro-image{
  width: 100%;
  max-width: 180px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(79,163,217,.12);
  box-shadow: 0 18px 40px rgba(15,23,36,.08);
}

.intro-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-content{
  min-width: 0;
  padding: 36px 32px;
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(79,163,217,.12);
  box-shadow: 0 18px 44px rgba(15,23,36,.08);
}

.intro-tag,
.technical-services-section .section-label{
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
}

.intro-title{
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.15;
  margin-bottom: 18px;
  color: #0f172a;
}

.intro-title span{
  color: var(--blue);
}

.intro-desc{
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.85;
  color: #4f5b67;
}

.intro-highlight-list{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.intro-highlight-list span,
.technical-services-section .application-tags span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  line-height: 1.45;
  text-align: center;
}

.intro-highlight-list span{
  background: rgba(79,163,217,.10);
  border: 1px solid rgba(79,163,217,.18);
  color: #17466d;
  font-weight: 700;
}

.intro-tabs{
  min-width: 0;
}

.intro-tabs-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.intro-tab-btn{
  appearance: none;
  border: 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: #eaf3f9;
  color: #294861;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.intro-tab-btn.active,
.intro-tab-btn:hover{
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: #fff;
}

.intro-tab-panel{
  display: none;
}

.intro-tab-panel.active{
  display: block;
}

.intro-tab-card{
  padding: 26px 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(79,163,217,.12);
  box-shadow: 0 12px 28px rgba(15,23,36,.06);
}

.intro-details-tag{
  display: inline-block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--blue);
}

.intro-tab-card h3{
  margin-bottom: 12px;
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 1.28;
  color: #0f172a;
}

.intro-tab-card p{
  font-size: 15px;
  line-height: 1.8;
  color: #536273;
}

.intro-core-values-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.intro-core-item{
  padding: 18px;
  border-radius: 18px;
  background: #f8fbfd;
  border: 1px solid rgba(79,163,217,.10);
}

.intro-core-item h4{
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.35;
  color: #0f172a;
}

.intro-core-item p{
  margin: 0;
}

/* ===== SERVICES theo HTML hiện tại ===== */
.technical-services-section{
  position: relative;
  padding: 100px 20px;
  background: linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
}

.technical-services-section .container{
  max-width: 1200px;
  margin: 0 auto;
}

.technical-services-section .section-header{
  max-width: 860px;
  margin: 0 auto 56px;
  text-align: center;
}

.technical-services-section .section-header h2{
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.14;
}

.technical-services-section .section-intro{
  max-width: 860px;
  margin: 0 auto;
  color: #607083;
}

.technical-services-section .content-layout{
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(280px,.9fr);
  gap: 28px;
  align-items: start;
}

.technical-services-section .main-card,
.technical-services-section .info-card,
.technical-services-section .application-card{
  background: #fff;
  border: 1px solid #e3eaf2;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(15,23,36,.06);
}

.technical-services-section .main-card{
  min-width: 0;
  padding: 36px;
}

.technical-services-section .info-card{
  padding: 30px;
}

.technical-services-section .application-card{
  margin-top: 30px;
  padding: 32px 36px;
}

.technical-services-section .main-card h3,
.technical-services-section .info-card h3,
.technical-services-section .application-card h3{
  margin-bottom: 18px;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.28;
}

.technical-services-section .main-card ul{
  columns: 2;
  column-gap: 32px;
}

.technical-services-section .main-card ul li{
  break-inside: avoid;
  overflow-wrap: anywhere;
}

.technical-services-section .info-card p{
  font-size: 16px;
  line-height: 1.85;
  color: #617183;
}

.technical-services-section .side-group{
  display: grid;
  gap: 28px;
}

.technical-services-section .application-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.technical-services-section .application-tags span{
  background: #f4f9fd;
  border: 1px solid #d7e7f5;
  color: #315674;
  font-size: 14px;
  font-weight: 600;
}

/* ===== Bổ sung ổn định bố cục chung ===== */
.contact-wrapper,
.footer-top-grid,
.footer-cta-grid{
  align-items: stretch;
}

.map-info p,
.form-header p,
.contact-form input,
.contact-form select,
.contact-form textarea,
.technical-services-section .section-intro,
.intro-desc,
.intro-tab-card p,
.intro-core-item p{
  overflow-wrap: anywhere;
}

/* ===== Tablet ===== */
@media (max-width: 1100px){
  .intro-hero-grid,
  .technical-services-section .content-layout,
  .contact-wrapper,
  .footer-top-grid,
  .footer-cta-grid{
    grid-template-columns: 1fr;
  }

  .intro-side{
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .intro-side-right{
    justify-self: center;
  }

  .technical-services-section .main-card ul{
    columns: 1;
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px){
  .navbar{
    padding: 14px 12px;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }

  .logo{
    order: 1;
  }

  .lang-switcher{
    order: 2;
    margin-left: auto;
    gap: 6px;
  }

  .lang-btn{
    min-width: 40px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .menu-toggle{
    order: 3;
    margin-left: 0;
  }

  .menu{
    order: 4;
    top: 100%;
  }

  .hero-content{
    padding: 120px 14px 82px;
  }

  .hero-content h1{
    font-size: clamp(24px, 8vw, 34px);
    line-height: 1.08;
    margin-bottom: 12px;
  }

  .hero-content h2{
    font-size: clamp(14px, 4.8vw, 18px);
    line-height: 1.22;
    margin-bottom: 10px;
  }

  .hero-content p{
    max-width: 100%;
    font-size: 13px;
    line-height: 1.7;
  }

  .intro-hero{
    padding: 72px 0;
  }

  .intro-side{
    display: none;
  }

  .intro-content{
    padding: 24px 18px;
    border-radius: 22px;
  }

  .intro-title{
    font-size: clamp(24px, 6.4vw, 30px);
    line-height: 1.18;
    margin-bottom: 14px;
  }

  .intro-desc{
    font-size: 14px;
    line-height: 1.75;
  }

  .intro-highlight-list{
    gap: 10px;
  }

  .intro-highlight-list span{
    width: 100%;
    min-height: 40px;
    font-size: 13px;
    padding: 9px 12px;
  }

  .intro-tabs-nav{
    flex-direction: column;
  }

  .intro-tab-btn{
    width: 100%;
    min-width: 0;
    padding: 13px 16px;
    font-size: 14px;
    border-radius: 14px;
  }

  .intro-tab-card{
    padding: 22px 16px;
    border-radius: 18px;
  }

  .intro-tab-card h3{
    font-size: 18px;
  }

  .intro-tab-card p,
  .intro-core-item p{
    font-size: 14px;
    line-height: 1.75;
  }

  .intro-core-values-list{
    grid-template-columns: 1fr;
  }

  .technical-services-section{
    padding: 72px 16px;
  }

  .technical-services-section .section-header{
    margin-bottom: 36px;
  }

  .technical-services-section .section-header h2{
    font-size: clamp(24px, 6.5vw, 30px);
    line-height: 1.18;
  }

  .technical-services-section .section-intro{
    font-size: 14px;
    line-height: 1.75;
  }

  .technical-services-section .main-card,
  .technical-services-section .info-card,
  .technical-services-section .application-card{
    padding: 22px 16px;
    border-radius: 18px;
  }

  .technical-services-section .main-card h3,
  .technical-services-section .info-card h3,
  .technical-services-section .application-card h3{
    font-size: 18px;
    line-height: 1.32;
  }

  .technical-services-section .main-card ul li,
  .technical-services-section .info-card p{
    font-size: 14px;
    line-height: 1.75;
  }

  .technical-services-section .application-tags{
    gap: 10px;
  }

  .technical-services-section .application-tags span{
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    border-radius: 14px;
    font-size: 13px;
    padding: 10px 12px;
  }

  .fixed-bg-left h2,
  .oncall-content h2,
  .contact-heading h2,
  .form-header h3{
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.18;
  }

  .contact-section{
    padding: 80px 16px;
  }

  .contact-form-box{
    padding: 22px 16px;
    border-radius: 20px;
  }

  .map-card iframe{
    min-height: 320px;
  }

  .map-info{
    padding: 18px 16px;
  }

  .map-info h3{
    font-size: 18px;
    line-height: 1.35;
  }

  .contact-form{
    gap: 14px;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    padding: 14px 15px;
    font-size: 14px;
    border-radius: 12px;
  }

  .contact-btn,
  .fixed-bg-button,
  .oncall-btn{
    width: 100%;
    min-width: 0;
  }

  .footer-contact-text h4,
  .footer-cta-box h3{
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px){
  .hero-content{
    padding: 112px 12px 76px;
  }

  .lang-switcher{
    gap: 4px;
  }

  .lang-btn{
    min-width: 36px;
    padding: 6px 9px;
    font-size: 10px;
  }

  .intro-title,
  .technical-services-section .section-header h2,
  .fixed-bg-left h2,
  .oncall-content h2,
  .contact-heading h2,
  .form-header h3{
    font-size: clamp(20px, 6.2vw, 24px);
  }

  .technical-services-section .main-card h3,
  .technical-services-section .info-card h3,
  .technical-services-section .application-card h3,
  .intro-tab-card h3{
    font-size: 17px;
  }

  .scroll-down{
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}
/* ===== FIX TIÊU ĐỀ MOBILE - HẠN CHẾ XUỐNG DÒNG ===== */
@media (max-width: 768px){
  .hero-content h1{
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.08;
    letter-spacing: -.3px;
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .hero-content h2{
    font-size: clamp(14px, 4.2vw, 18px);
    line-height: 1.2;
    letter-spacing: -.2px;
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .intro-title{
    font-size: clamp(22px, 5.8vw, 28px);
    line-height: 1.16;
    letter-spacing: -.3px;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .intro-tab-card h3{
    font-size: clamp(17px, 4.5vw, 21px);
    line-height: 1.24;
    letter-spacing: -.2px;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .fixed-bg-left h2{
    font-size: clamp(21px, 5.4vw, 26px);
    line-height: 1.18;
    letter-spacing: -.2px;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .technical-services-section .section-header h2{
    font-size: clamp(23px, 5.8vw, 29px);
    line-height: 1.16;
    letter-spacing: -.3px;
    text-wrap: balance;
    overflow-wrap: anywhere;
    max-width: 100%;
    padding: 0 4px;
  }

  .technical-services-section .main-card h3,
  .technical-services-section .info-card h3,
  .technical-services-section .application-card h3{
    font-size: clamp(17px, 4.6vw, 21px);
    line-height: 1.24;
    letter-spacing: -.2px;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .oncall-content h2{
    font-size: clamp(20px, 5.4vw, 25px);
    line-height: 1.15;
    letter-spacing: 1px;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .contact-heading h2{
    font-size: clamp(23px, 5.8vw, 29px);
    line-height: 1.16;
    letter-spacing: -.3px;
    text-wrap: balance;
    overflow-wrap: anywhere;
    max-width: 100%;
    padding: 0 4px;
  }

  .form-header h3{
    font-size: clamp(22px, 5.5vw, 27px);
    line-height: 1.16;
    letter-spacing: -.2px;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .footer-contact-text h4{
    font-size: clamp(17px, 4.8vw, 20px);
    line-height: 1.25;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .footer-cta-box h3{
    font-size: clamp(24px, 6vw, 34px);
    line-height: 1.12;
    letter-spacing: -.4px;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
}

/* ===== MÁY RẤT NHỎ ===== */
@media (max-width: 480px){
  .hero-content h1{
    font-size: clamp(22px, 6.6vw, 28px);
  }

  .hero-content h2{
    font-size: clamp(13px, 4vw, 16px);
  }

  .intro-title,
  .technical-services-section .section-header h2,
  .contact-heading h2{
    font-size: clamp(20px, 5.8vw, 24px);
    line-height: 1.14;
  }

  .fixed-bg-left h2,
  .oncall-content h2,
  .form-header h3{
    font-size: clamp(19px, 5.5vw, 23px);
    line-height: 1.14;
  }

  .technical-services-section .main-card h3,
  .technical-services-section .info-card h3,
  .technical-services-section .application-card h3,
  .intro-tab-card h3{
    font-size: clamp(16px, 4.4vw, 19px);
    line-height: 1.22;
  }

  .footer-cta-box h3{
    font-size: clamp(22px, 6vw, 28px);
  }
}
/* =========================================
   FIX TIÊU ĐỀ MOBILE + ANIMATION
   DÁN Ở CUỐI FILE CSS
========================================= */

/* Animation tiêu đề */
@keyframes titleFadeUp{
  0%{
    opacity:0;
    transform:translateY(18px);
    letter-spacing:.06em;
  }
  100%{
    opacity:1;
    transform:translateY(0);
    letter-spacing:normal;
  }
}

@keyframes lineGrow{
  0%{
    opacity:0;
    transform:scaleX(.2);
  }
  100%{
    opacity:1;
    transform:scaleX(1);
  }
}

@keyframes softFloatTitle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

/* Áp dụng animation cho tiêu đề */
.hero-content h1,
.hero-content h2,
.intro-title,
.intro-tab-card h3,
.fixed-bg-left h2,
.technical-services-section .section-header h2,
.technical-services-section .main-card h3,
.technical-services-section .info-card h3,
.technical-services-section .application-card h3,
.oncall-content h2,
.contact-heading h2,
.form-header h3,
.footer-cta-box h3{
  animation:titleFadeUp .8s ease both;
  will-change:transform, opacity;
}

.hero-content h1{
  animation:
    titleFadeUp .8s ease both,
    softFloatTitle 5s ease-in-out 1s infinite;
}

.technical-services-section .header-line,
.services-line,
.contact-line,
.oncall-content h2::after,
.about-header h2::after{
  transform-origin:center;
  animation:lineGrow .9s ease both;
}

/* Chống lỗi tràn dòng chung */
.hero-content h1,
.hero-content h2,
.intro-title,
.intro-tab-card h3,
.fixed-bg-left h2,
.technical-services-section .section-header h2,
.technical-services-section .main-card h3,
.technical-services-section .info-card h3,
.technical-services-section .application-card h3,
.oncall-content h2,
.contact-heading h2,
.form-header h3,
.footer-contact-text h4,
.footer-cta-box h3{
  max-width:100% !important;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  hyphens:auto;
  text-wrap:balance;
}

/* ===== MOBILE ===== */
@media (max-width: 768px){
  .hero-content{
    padding:118px 14px 80px !important;
  }

  .hero-content h1{
    font-size:clamp(22px, 6.4vw, 30px) !important;
    line-height:1.05 !important;
    letter-spacing:-0.02em !important;
    margin-bottom:10px !important;
    max-width:92% !important;
  }

  .hero-content h2{
    font-size:clamp(13px, 3.9vw, 16px) !important;
    line-height:1.18 !important;
    letter-spacing:-0.01em !important;
    margin-bottom:10px !important;
    max-width:94% !important;
  }

  .intro-title{
    font-size:clamp(20px, 5.1vw, 25px) !important;
    line-height:1.12 !important;
    letter-spacing:-0.02em !important;
    margin-bottom:12px !important;
  }

  .intro-tab-card h3{
    font-size:clamp(16px, 4.2vw, 19px) !important;
    line-height:1.2 !important;
    letter-spacing:-0.01em !important;
    margin-bottom:10px !important;
  }

  .fixed-bg-left h2{
    font-size:clamp(20px, 5vw, 24px) !important;
    line-height:1.14 !important;
    letter-spacing:-0.015em !important;
    max-width:100% !important;
  }

  .technical-services-section .section-header{
    margin-bottom:32px !important;
  }

  .technical-services-section .section-header h2{
    font-size:clamp(21px, 5vw, 25px) !important;
    line-height:1.12 !important;
    letter-spacing:-0.02em !important;
    padding:0 2px !important;
    max-width:100% !important;
  }

  .technical-services-section .main-card h3,
  .technical-services-section .info-card h3,
  .technical-services-section .application-card h3{
    font-size:clamp(16px, 4.1vw, 19px) !important;
    line-height:1.2 !important;
    letter-spacing:-0.01em !important;
    margin-bottom:12px !important;
  }

  .oncall-content h2{
    font-size:clamp(18px, 4.8vw, 22px) !important;
    line-height:1.12 !important;
    letter-spacing:.04em !important;
    margin-bottom:12px !important;
  }

  .contact-heading h2{
    font-size:clamp(21px, 5vw, 25px) !important;
    line-height:1.12 !important;
    letter-spacing:-0.02em !important;
    padding:0 2px !important;
  }

  .form-header h3{
    font-size:clamp(20px, 4.8vw, 24px) !important;
    line-height:1.12 !important;
    letter-spacing:-0.015em !important;
  }

  .footer-contact-text h4{
    font-size:clamp(16px, 4.1vw, 18px) !important;
    line-height:1.22 !important;
  }

  .footer-cta-box h3{
    font-size:clamp(22px, 5.5vw, 28px) !important;
    line-height:1.08 !important;
    letter-spacing:-0.02em !important;
  }
}

/* ===== ĐIỆN THOẠI NHỎ ===== */
@media (max-width: 480px){
  .hero-content{
    padding:108px 12px 74px !important;
  }

  .hero-content h1{
    font-size:clamp(20px, 6vw, 26px) !important;
    line-height:1.02 !important;
    max-width:95% !important;
  }

  .hero-content h2{
    font-size:clamp(12px, 3.7vw, 14px) !important;
    line-height:1.16 !important;
    max-width:96% !important;
  }

  .intro-title,
  .technical-services-section .section-header h2,
  .contact-heading h2{
    font-size:clamp(19px, 4.8vw, 22px) !important;
    line-height:1.1 !important;
  }

  .fixed-bg-left h2,
  .form-header h3,
  .oncall-content h2{
    font-size:clamp(18px, 4.7vw, 21px) !important;
    line-height:1.1 !important;
  }

  .technical-services-section .main-card h3,
  .technical-services-section .info-card h3,
  .technical-services-section .application-card h3,
  .intro-tab-card h3{
    font-size:clamp(15px, 4vw, 17px) !important;
    line-height:1.18 !important;
  }

  .footer-cta-box h3{
    font-size:clamp(20px, 5vw, 24px) !important;
  }
}

/* ===== MÁY RẤT NHỎ ===== */
@media (max-width: 380px){
  .hero-content h1{
    font-size:19px !important;
  }

  .hero-content h2{
    font-size:12px !important;
  }

  .intro-title,
  .technical-services-section .section-header h2,
  .contact-heading h2,
  .fixed-bg-left h2,
  .form-header h3,
  .oncall-content h2{
    font-size:17px !important;
    line-height:1.08 !important;
  }

  .technical-services-section .main-card h3,
  .technical-services-section .info-card h3,
  .technical-services-section .application-card h3,
  .intro-tab-card h3{
    font-size:14px !important;
  }
}
/* FIX tiêu đề "Lĩnh vực ứng dụng" không xuống dòng */
.technical-services-section .application-card h3{
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 768px){
  .technical-services-section .application-card h3{
    font-size: 16px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 480px){
  .technical-services-section .application-card h3, .technical-services-section .info-card h3{
    font-size: 14px !important;
    letter-spacing: -0.2px;
    white-space: nowrap !important;
  }
}
.technical-services-section .application-card{
  min-width: 0;
}

.technical-services-section .application-card h3{
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}