/*
Theme Name: MINHKHANGTHICONG
Theme URI: https://minhkhangthicong.com
Author: Minh Khang
Description: Theme chuyên dụng cho dịch vụ Điện, MEP và ELV của Minh Khang.
Version: 3.3.0
Text Domain: minh-khang-thicong
*/

:root {
  --mk-navy: #082d63;
  --mk-navy-deep: #061d42;
  --mk-red: #d70d20;
  --mk-silver: #f3f5f8;
}

body {
  font-family: 'Manrope', sans-serif;
  background-color: #f8f4ea;
  color: #252727;
  margin: 0;
  padding: 0;
}


/* ===== Cổng nhân viên / Chấm công ===== */
.mk-attendance-page{min-height:calc(100vh - 110px);padding:145px 20px 90px;position:relative;overflow:hidden;background:linear-gradient(135deg,#f7fbff 0%,#fff 46%,#eef5ff 100%)}
.mk-attendance-page:before{content:"";position:absolute;width:680px;height:680px;left:-300px;top:80px;border-radius:50%;border:1px solid rgba(8,45,99,.07);box-shadow:0 0 0 45px rgba(23,105,232,.025),0 0 0 90px rgba(23,105,232,.018);pointer-events:none}
.mk-attendance-page:after{content:"";position:absolute;width:720px;height:260px;right:-190px;bottom:-50px;background:linear-gradient(135deg,transparent 0 35%,rgba(8,45,99,.06) 36% 43%,rgba(23,105,232,.07) 44% 50%,transparent 51%);transform:rotate(-8deg);pointer-events:none}
.mk-attendance-shell{position:relative;z-index:2;width:min(720px,100%);margin:0 auto;text-align:center}
.mk-attendance-logo-wrap{margin:0 auto 22px}
.mk-attendance-logo-link{display:inline-flex;align-items:center;justify-content:center}
.mk-attendance-logo{width:170px;height:170px;object-fit:contain;filter:drop-shadow(0 15px 25px rgba(8,45,99,.18));transition:transform .25s ease}
.mk-attendance-logo:hover{transform:scale(1.03)}
.mk-attendance-heading{margin-bottom:25px}
.mk-attendance-badge{display:inline-block;padding:6px 12px;border-radius:999px;background:#e9f2ff;color:#1769e8;font-size:11px;font-weight:800;letter-spacing:1px;margin-bottom:10px}
.mk-attendance-heading h1{margin:0;color:#082d63;font-size:34px;line-height:1.2;font-weight:800}
.mk-attendance-heading p{margin:9px auto 0;color:#68768b;font-size:14px;max-width:600px;line-height:1.6}
.mk-attendance-card{background:rgba(255,255,255,.96);border:1px solid #e1eaf5;border-radius:22px;padding:28px 34px 32px;text-align:left;box-shadow:0 20px 55px rgba(8,45,99,.13)}
.mk-attendance-card-top{display:flex;align-items:center;gap:14px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid #edf2f8}
.mk-attendance-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#eaf3ff;color:#1769e8;font-size:22px;font-weight:800;flex:0 0 44px}
.mk-attendance-card-top h2{margin:0;color:#082d63;font-size:21px;font-weight:800}
.mk-attendance-card-top p{margin:4px 0 0;color:#718096;font-size:13px}
.mk-attendance-content{color:#334155;font-size:14px;line-height:1.7}
.mk-attendance-content p:first-child{margin-top:0}
.mk-attendance-content a{color:#1769e8;font-weight:700;text-decoration:none}
.mk-attendance-content a:hover{text-decoration:underline}
.mk-attendance-content input[type=text],.mk-attendance-content input[type=password],.mk-attendance-content input[type=email],.mk-attendance-content select{width:100%;box-sizing:border-box;height:48px;border:1px solid #d7e1ee;border-radius:10px;padding:0 13px;background:#fff;color:#17345d;outline:none}
.mk-attendance-content input:focus,.mk-attendance-content select:focus{border-color:#1769e8;box-shadow:0 0 0 3px rgba(23,105,232,.1)}
.mk-attendance-content button,.mk-attendance-content input[type=submit],.mk-attendance-content .button{border:0;border-radius:10px;background:linear-gradient(135deg,#1769e8,#0757d4);color:#fff;padding:12px 22px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(23,105,232,.2)}
.mk-attendance-values{display:flex;justify-content:center;flex-wrap:wrap;gap:28px;margin-top:24px;color:#53657d;font-size:11px;font-weight:800;letter-spacing:.2px}
.mk-attendance-values span{display:inline-flex;align-items:center;gap:6px}
.mk-attendance-values b{font-size:15px;color:#1769e8}
.mk-attendance-values span:nth-child(2) b{color:#159447}.mk-attendance-values span:nth-child(3) b{color:#d3212d}.mk-attendance-values span:nth-child(4) b{color:#4b35a9}
@media(max-width:900px){.mk-attendance-page{padding-top:105px}.mk-attendance-logo{width:145px;height:145px}.mk-attendance-heading h1{font-size:30px}}
@media(max-width:600px){.mk-attendance-page{padding:92px 13px 55px;min-height:calc(100vh - 70px)}.mk-attendance-logo{width:125px;height:125px}.mk-attendance-logo-wrap{margin-bottom:16px}.mk-attendance-heading{margin-bottom:18px}.mk-attendance-heading h1{font-size:25px}.mk-attendance-heading p{font-size:12px}.mk-attendance-card{padding:21px 17px 23px;border-radius:17px}.mk-attendance-card-top{padding-bottom:16px;margin-bottom:17px}.mk-attendance-card-top h2{font-size:18px}.mk-attendance-values{gap:12px 17px;font-size:10px}.mk-attendance-values b{font-size:13px}}


/* ===== Trang Báo giá theo giao diện Minh Khang ===== */
.mk-quote-page{min-height:calc(100vh - 110px);padding:118px 20px 80px;position:relative;overflow:hidden;background:linear-gradient(135deg,#f7fbff 0%,#fff 46%,#eef5ff 100%)}
.mk-quote-page:before{content:"";position:absolute;width:720px;height:720px;left:-340px;top:40px;border-radius:50%;border:1px solid rgba(8,45,99,.07);box-shadow:0 0 0 45px rgba(23,105,232,.025),0 0 0 90px rgba(23,105,232,.018);pointer-events:none}
.mk-quote-page:after{content:"";position:absolute;width:850px;height:300px;right:-230px;bottom:-90px;background:linear-gradient(135deg,transparent 0 35%,rgba(8,45,99,.055) 36% 43%,rgba(23,105,232,.07) 44% 50%,transparent 51%);transform:rotate(-8deg);pointer-events:none}
.mk-quote-shell{position:relative;z-index:2;width:min(1180px,100%);margin:0 auto}
.mk-quote-logo{text-align:center;margin:0 auto 18px}
.mk-quote-logo a{display:inline-flex;align-items:center;justify-content:center}
.mk-quote-logo img{width:145px;height:145px;object-fit:contain;filter:drop-shadow(0 14px 25px rgba(8,45,99,.16));transition:transform .25s ease}
.mk-quote-logo img:hover{transform:scale(1.03)}
.mk-quote-heading{text-align:center;margin-bottom:22px}
.mk-quote-badge{display:inline-block;padding:6px 13px;border-radius:999px;background:#e9f2ff;color:#1769e8;font-size:11px;font-weight:800;letter-spacing:1px;margin-bottom:9px}
.mk-quote-heading h1{margin:0;color:#082d63;font-size:32px;line-height:1.2;font-weight:800}
.mk-quote-heading p{margin:8px auto 0;color:#68768b;font-size:14px;line-height:1.6;max-width:760px}
.mk-quote-card{background:rgba(255,255,255,.97);border:1px solid #e1eaf5;border-radius:22px;padding:28px 32px 32px;box-shadow:0 20px 55px rgba(8,45,99,.13);overflow:hidden}
.mk-quote-card .page-content{color:#334155;font-size:14px;line-height:1.7}
.mk-quote-card .page-content h1,.mk-quote-card .page-content h2,.mk-quote-card .page-content h3{color:#082d63}
.mk-quote-card .page-content input,.mk-quote-card .page-content select,.mk-quote-card .page-content textarea{border-color:#d7e1ee;border-radius:10px}
.mk-quote-card .page-content button,.mk-quote-card .page-content input[type=submit],.mk-quote-card .page-content .button{border-radius:10px}
.mk-quote-values{display:flex;justify-content:center;flex-wrap:wrap;gap:28px;margin-top:24px;color:#53657d;font-size:11px;font-weight:800;letter-spacing:.2px}
.mk-quote-values span{display:inline-flex;align-items:center;gap:6px}
.mk-quote-values b{font-size:15px;color:#1769e8}.mk-quote-values span:nth-child(2) b{color:#159447}.mk-quote-values span:nth-child(3) b{color:#d3212d}.mk-quote-values span:nth-child(4) b{color:#4b35a9}
@media(max-width:900px){.mk-quote-page{padding-top:95px}.mk-quote-logo img{width:125px;height:125px}.mk-quote-heading h1{font-size:28px}.mk-quote-card{padding:23px 22px 26px}}
@media(max-width:600px){.mk-quote-page{padding:78px 12px 50px;min-height:calc(100vh - 70px)}.mk-quote-logo{margin-bottom:12px}.mk-quote-logo img{width:108px;height:108px}.mk-quote-heading{margin-bottom:16px}.mk-quote-badge{font-size:9px;padding:5px 10px}.mk-quote-heading h1{font-size:23px}.mk-quote-heading p{font-size:12px}.mk-quote-card{padding:18px 14px 21px;border-radius:17px}.mk-quote-values{gap:12px 16px;font-size:10px}.mk-quote-values b{font-size:13px}}



/* =========================================================
   MINH KHANG — HEADER + FOOTER UNIFIED
   Single source of truth — 90% content width / 5% side space
   Footer desktop target height: 600px
   ========================================================= */

/* ---------- Global layout container ---------- */
/* ============================================================
   HEADER — OPTIMIZED / ONE SYSTEM
   Desktop + Tablet + Mobile
   Giữ cả .desktop-nav và .mk-main-menu để tương thích HTML hiện tại,
   nhưng dùng chung một bộ rule, không tạo 2 hệ CSS riêng.
   ============================================================ */

 .site-header{
  position:relative;
  z-index:1000;
  width:calc(100% - 100px);
  margin:12px auto 0;
  padding:0 !important;
  background:linear-gradient(135deg,#061d42 0%,#082d63 52%,#063d68 100%) !important;
  border:1px solid rgba(73,213,255,.48);
  border-radius:28px;
  box-shadow:0 12px 34px rgba(2,20,50,.30), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  overflow:visible;
}

.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(25,151,255,.10),transparent 35%,rgba(41,238,194,.08));
}

.site-header.is-scrolled{
  background:linear-gradient(135deg,#051a3b 0%,#07295a 52%,#05365c 100%) !important;
  box-shadow:0 14px 34px rgba(2,20,50,.36),inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.header-wrap{
  width:90% !important;
  max-width:1600px;
  min-height:88px;
  margin:0 auto !important;
  padding:0 !important;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  position:relative;
  z-index:1;
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}

.brand-full-logo{
  width:48px !important;
  height:48px !important;
  flex:0 0 48px;
  object-fit:contain;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.28));
}

.brand-wordmark{min-width:0;}
.brand-wordmark strong{
  display:block;
  font-size:17px;
  line-height:1.1;
  letter-spacing:-.04em;
  color:#fff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.20);
}
.brand-wordmark small{
  display:block;
  margin-top:3px;
  font-size:9px;
  line-height:1.1;
  letter-spacing:.08em;
  color:#35e7c1 !important;
  font-weight:800;
}

.desktop-nav,.mk-main-menu{margin-left:auto;}
.desktop-nav > ul,.desktop-nav ul.menu,.mk-main-menu{
  display:flex;
  align-items:center;
  gap:10px !important;
  list-style:none;
  margin:0;
  padding:0;
}
.desktop-nav ul li,.desktop-nav ul.menu li,.mk-main-menu li{list-style:none;margin:0;padding:0;}
.desktop-nav ul li a,.desktop-nav ul.menu li a,.mk-main-menu li a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 12px;
  border:1px solid rgba(87,203,255,.12);
  border-radius:14px;
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  background:rgba(255,255,255,.025);
  transition:transform .20s ease,background .20s ease,box-shadow .20s ease,color .20s ease,border-color .20s ease;
}
.desktop-nav ul li a:hover,.desktop-nav ul li a:focus-visible,.desktop-nav .current-menu-item > a,
.mk-main-menu li a:hover,.mk-main-menu li a:focus-visible{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(31,151,255,.28),rgba(35,231,190,.16));
  border-color:rgba(69,214,255,.72);
  box-shadow:0 8px 22px rgba(0,164,255,.20),inset 0 1px 0 rgba(255,255,255,.16);
  transform:translateY(-2px);
}
.desktop-nav ul li a::after,.desktop-nav ul.menu li a::after,.mk-main-menu li a::after{
  content:"";position:absolute;left:18%;right:18%;bottom:3px;height:2px;border-radius:99px;
  background:linear-gradient(90deg,#29b8ff,#27e7b4);transform:scaleX(0);transform-origin:center;transition:transform .20s ease;
}
.desktop-nav ul li a:hover::after,.desktop-nav ul li a:focus-visible::after,.desktop-nav .current-menu-item > a::after,
.mk-main-menu li a:hover::after,.mk-main-menu li a:focus-visible::after{transform:scaleX(1);}

.mk-menu-3d-icon,.mk-mobile-menu-icon{
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(216,238,248,.92));
  border:1px solid rgba(255,255,255,.90);
  color:#0870a8 !important;
  box-shadow:0 7px 16px rgba(0,0,0,.20),inset 0 1px 0 #fff;
  transition:transform .24s ease,box-shadow .24s ease;
}
.mk-menu-3d-icon::after,.mk-mobile-menu-icon::after{
  content:"";position:absolute;left:12%;right:12%;top:7%;height:25%;border-radius:999px;background:rgba(255,255,255,.50);pointer-events:none;
}
.desktop-nav a:hover .mk-menu-3d-icon,.desktop-nav a:focus-visible .mk-menu-3d-icon,
.mk-main-menu a:hover .mk-menu-3d-icon,.mk-main-menu a:focus-visible .mk-menu-3d-icon{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 10px 22px rgba(0,187,255,.28),inset 0 1px 0 #fff;
}
.desktop-nav a:active .mk-menu-3d-icon,.mk-main-menu a:active .mk-menu-3d-icon{transform:scale(.92) translateY(1px);}

.header-contact{
  margin-left:14px;
  padding:12px 20px !important;
  border-radius:999px !important;
  font-size:11px !important;
  letter-spacing:.02em;
  color:#fff !important;
  background:linear-gradient(135deg,#17d89b,#32e85f) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 8px 24px rgba(31,224,147,.28),inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.header-contact:hover{transform:translateY(-2px);filter:brightness(1.06);}

.mk-mobile-toggle{
  display:none;width:42px;height:42px;margin-left:auto;border:1px solid rgba(102,220,255,.35);border-radius:14px;
  background:rgba(255,255,255,.10);align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.mk-mobile-toggle span{width:17px;height:2px;border-radius:3px;background:#fff;transition:transform .20s ease,opacity .20s ease;}
.mk-mobile-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.mk-mobile-toggle.is-open span:nth-child(2){opacity:0;}
.mk-mobile-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mk-mobile-menu{
  display:block;position:fixed;inset:0;z-index:9999 !important;
  background:linear-gradient(135deg,rgba(4,23,52,.97),rgba(5,47,88,.97));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;pointer-events:none;overflow-y:auto;transition:opacity .22s ease,visibility .22s ease;
}
.mk-mobile-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.mk-mobile-menu-inner{width:calc(100% - 28px);max-width:700px;margin:0 auto;padding:95px 0 35px;display:flex;flex-direction:column;gap:8px;}
.mk-mobile-menu-inner a{
  display:flex !important;align-items:center;gap:12px;min-height:58px;padding:9px 12px !important;border-radius:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(91,211,255,.22);box-shadow:0 8px 22px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08);
  text-decoration:none;color:#fff !important;font-size:17px;font-weight:800;letter-spacing:-.03em;
}
.mk-mobile-menu-inner a:not(.mk-mobile-call):active{background:rgba(39,231,180,.14);}
.mk-mobile-menu-inner .mk-mobile-menu-icon{width:46px;height:46px;border-radius:15px;font-size:23px;}
.mk-mobile-menu-inner .mk-mobile-call{margin-top:10px;justify-content:center;background:linear-gradient(135deg,#17d89b,#22c9ff);color:#fff;text-align:center;border-radius:18px;box-shadow:0 12px 28px rgba(0,190,220,.24);}

/* Header responsive — gộp vào một hệ */
@media (max-width:1100px){
  .desktop-nav > ul,
  .desktop-nav ul.menu,
  .mk-main-menu{
    gap:10px !important;
  }

  .desktop-nav ul li a,
  .desktop-nav ul.menu li a,
  .mk-main-menu li a{
    padding:8px 9px;
    font-size:13px !important;
  }
}

@media (max-width:900px){
 .site-header{
    padding:7px 0 !important;
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
  }

  .header-wrap{
    width:calc(100% - 24px) !important;
    min-height:58px;
  }

  .desktop-nav,
  .mk-main-menu{
    display:none !important;
  }

  .header-contact{
    margin-left:auto;
    margin-right:8px;
    padding:9px 14px !important;
    font-size:10px !important;
  }

  .mk-mobile-toggle{
    display:flex;
  }
}

@media (max-width:520px){
  .site-header{width:calc(100% - 12px);border-radius:17px;margin-top:6px;}
  .brand-full-logo{
    width:38px !important;
    height:38px !important;
    flex-basis:38px;
  }

  .brand-wordmark strong{
    font-size:14px;
  }

  .brand-wordmark small{
    font-size:7px;
  }

  .header-contact{
    display:none;
  }

  .mk-mobile-toggle{
    width:40px;
    height:40px;
  }
}

/* ---------- FOOTER ---------- */
.site-footer{
  width:100%;
  margin:0!important;
  padding:0!important;
}

/* FOOTER TỔNG */

.mk-footer{
  position:relative;

  width:100%;
  height:520px!important;
  min-height:520px!important;

  box-sizing:border-box;
  overflow:hidden;

  padding:40px 0 0!important;

  background:
    radial-gradient(
      ellipse at 0% 0%,
      rgba(0,146,255,.30),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(0,231,194,.20),
      transparent 38%
    ),
    linear-gradient(
      115deg,
      #06255f 0%,
      #06347d 48%,
      #075a62 100%
    )!important;

  color:#eaf4ff!important;
}

.mk-footer-glow{
  position:absolute;

  width:420px;
  height:420px;

  right:-160px;
  top:-230px;

  border-radius:50%;

  background:rgba(30,220,150,.12);

  filter:blur(30px);

  pointer-events:none;
}



/* =========================================================
   KHUNG CHÍNH - 80%
   ========================================================= */

.mk-footer-wrap{
  position:relative!important;
  z-index:1;

  width:90%;

  height:400px;
  min-height:400px;

  margin:0 auto!important;

  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(220px,.80fr)
    minmax(320px,1.15fr);

  column-gap:28px;

  align-items:center;

  box-sizing:border-box;

  border:1px solid rgba(151,231,255,.55);

  border-radius:26px;

  background:
    linear-gradient(
      135deg,
      rgba(5,43,105,.94),
      rgba(4,29,77,.88)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 30px rgba(0,164,255,.18),
    0 18px 50px rgba(0,0,0,.18);
}


/* =========================================================
   3 CỘT
   ========================================================= */

.mk-footer-main,
.mk-footer-col{
  width:auto!important;
  min-width:0!important;

  box-sizing:border-box;

  padding:25px 24px!important;
}


/* CỘT 1 */

.mk-footer-main{
  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:flex-start;
}


/* BRAND */

.mk-footer-brand{
  display:flex;

  align-items:center;

  gap:16px;

  width:100%;
  min-width:0;
}


/* LOGO */

.mk-footer-logo{
  width:100px!important;
  height:100px!important;

  min-width:100px!important;

  flex:0 0 100px!important;

  padding:0!important;

  border-radius:50%!important;

  overflow:hidden!important;

  background:#fff!important;

  border:2px solid #69dcff!important;

  box-shadow:
    0 0 0 4px rgba(0,91,190,.45),
    0 0 20px rgba(0,188,255,.55)!important;
}

.mk-footer-logo img{
  display:block!important;

  width:100%!important;
  height:100%!important;

  object-fit:cover;

  object-position:center;

  border-radius:50%!important;
}


/* TÊN CÔNG TY */

.mk-footer-brand-text{
  min-width:0;

  flex:1 1 auto;
}

.mk-footer-brand-text strong,
.mk-footer-brand strong{
  display:block;

  margin:0;

  color:#fff!important;

  font-size:30px!important;

  line-height:1.08;

  font-weight:900;

  letter-spacing:.01em;

  white-space:normal!important;
}

.mk-footer-brand-text strong span{
  display:inline;

  color:#ed263b!important;
}

.mk-footer-brand-text small,
.mk-footer-brand span{
  display:block;

  margin-top:7px;

  color:#67e6c0!important;

  font-size:30px!important;

  line-height:1.2;

  font-weight:800;

  letter-spacing:.05em;
}


/* MÔ TẢ */

.mk-footer-desc{
  max-width:560px;

  margin:18px 0 18px;

  color:#c5d9f2!important;

  font-size:14px!important;

  line-height:1.6;
}


/* BADGES */

.mk-footer-badges{
  display:flex;

  flex-wrap:wrap;

  gap:8px;
}

.mk-footer-badges span{
  display:inline-flex;

  align-items:center;

  min-height:34px;

  padding:7px 11px;

  border:1px solid rgba(150,210,255,.25);

  border-radius:11px;

  background:rgba(255,255,255,.07);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);

  color:#eaf4ff;

  font-size:10px;

  font-weight:800;
}


/* =========================================================
   CỘT 2 + 3
   ========================================================= */

.mk-footer-col{
  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:stretch;
}


/* TIÊU ĐỀ */

.mk-footer-col h3{
  margin:0 0 10px!important;

  color:#fff!important;

  font-size:15px!important;

  line-height:1.2;

  letter-spacing:.04em;

  font-weight:900;
}

.mk-footer-heading-line{
  width:46px;

  height:3px;

  margin:0 0 13px;

  border-radius:999px;

  background:#35bfff;

  box-shadow:
    0 0 12px rgba(53,191,255,.6);
}

.mk-footer-heading-line.green{
  background:#27e7b4;

  box-shadow:
    0 0 12px rgba(39,231,180,.6);
}


/* =========================================================
   MENU
   ========================================================= */

.mk-footer-links{
  display:flex;

  flex-direction:column;

  gap:7px!important;

  width:100%;
}

.mk-footer-links a,
.mk-footer-links a:visited{
  display:flex!important;

  align-items:center;

  width:100%;

  min-height:42px;

  padding:6px 9px;

  box-sizing:border-box;

  border:1px solid rgba(150,220,255,.30);

  border-radius:13px!important;

  color:#dcecff!important;

  background:rgba(18,76,145,.55);

  text-decoration:none;
}

.mk-footer-links a:hover{
  transform:translateY(-2px);

  background:rgba(28,102,180,.72);

  box-shadow:
    0 8px 18px rgba(0,0,0,.16);
}

.mk-footer-links a b{
  width:30px!important;
  height:30px!important;

  flex:0 0 30px!important;

  display:grid;

  place-items:center;

  border-radius:9px!important;

  background:
    linear-gradient(
      145deg,
      #138df4,
      #0753b5
    )!important;

  color:#fff!important;
}

.mk-footer-links a i{
  margin-left:auto!important;

  font-size:20px!important;
}


/* =========================================================
   CONTACT
   ========================================================= */

.mk-footer-contact-card{
  display:flex;

  align-items:center;

  width:100%;

  gap:10px;

  min-height:54px;

  margin-bottom:8px;

  padding:8px 10px;

  box-sizing:border-box;

  border:1px solid rgba(210,240,255,.55);

  border-radius:14px!important;

  background:rgba(25,83,130,.65);

  color:#fff!important;

  text-decoration:none;

  box-shadow:
    0 4px 0 rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.mk-footer-contact-card.hotline{
  border-color:rgba(255,190,210,.70);

  background:rgba(110,32,83,.52);
}

.mk-footer-contact-card.email{
  border-color:rgba(140,220,255,.70);
}

.mk-footer-contact-card.location{
  border-color:rgba(100,225,205,.45);
}

.mk-contact-icon{
  width:40px!important;
  height:40px!important;

  flex:0 0 40px!important;

  display:grid;

  place-items:center;

  border-radius:12px!important;

  font-size:20px!important;
}

.mk-footer-contact-card small{
  display:block;

  font-size:8px!important;

  line-height:1.2;

  letter-spacing:.07em;
}

.mk-footer-contact-card strong{
  display:block;

  margin-top:3px;

  font-size:12px!important;

  line-height:1.3;
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.mk-footer-bottom{
  position:absolute;

  z-index:5;

  left:10%;
  right:10%;

  bottom:14px;

  width:auto;

  height:36px;

  margin:0!important;

  padding-top:8px;

  box-sizing:border-box;

  border-top:1px solid rgba(255,255,255,.14)!important;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  color:#c2d7ee!important;

  font-size:11px!important;

  line-height:1.3;
}


/* NÚT LÊN ĐẦU TRANG */

.mk-footer-bottom button,
.mk-back-top{
  flex:0 0 auto;

  padding:8px 16px!important;

  border:1px solid rgba(130,220,255,.55)!important;

  border-radius:16px!important;

  background:
    linear-gradient(
      145deg,
      #116bc4,
      #075e83
    )!important;

  color:#fff!important;

  font-size:11px!important;

  white-space:nowrap;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  .mk-footer-wrap{
    grid-template-columns:1.2fr .9fr 1fr;
    gap:24px!important;
  }

  .mk-footer-logo{
    width:96px!important;
    height:96px!important;
    min-width:96px!important;
    flex-basis:96px!important;
  }

  .mk-footer-brand-text strong,
  .mk-footer-brand strong{
    font-size:25px!important;
  }
}

@media(max-width:900px){
  .mk-mobile-menu-inner .mk-mobile-call{
    margin-top:10px;
    background:var(--mk-navy);
    color:#fff;
    text-align:center;
    border-radius:18px;
    box-shadow:0 12px 28px rgba(8,45,99,.18);
  }


  .mk-footer{
    height:auto;
    min-height:600px;
    padding:28px 0 18px!important;
  }

  .mk-footer-wrap{
    width:calc(100% - 28px)!important;
    height:auto;
    min-height:500px;
    grid-template-columns:1fr!important;
    gap:26px!important;
    padding:28px 20px!important;
    border-radius:24px;
  }

  .mk-footer-main{
    grid-column:auto!important;
  }

  .mk-footer-bottom{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:calc(100% - 28px);
    margin:18px auto 0!important;
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    gap:12px;
  }

  .mk-footer-bottom button{
    width:100%!important;
  }
}

@media(max-width:520px){
  .mk-footer{
    min-height:600px;
  }

  .mk-footer-wrap{
    width:calc(100% - 24px)!important;
    padding:22px 16px!important;
    gap:22px!important;
  }

  .mk-footer-brand{
    gap:14px;
  }

  .mk-footer-logo{
    width:82px!important;
    height:82px!important;
    min-width:82px!important;
    flex-basis:82px!important;
  }

  .mk-footer-brand-text strong,
  .mk-footer-brand strong{
    font-size:21px!important;
  }

  .mk-footer-brand-text small,
  .mk-footer-brand span{
    font-size:10px!important;
  }

  .mk-footer-desc{
    margin:18px 0;
    font-size:13px!important;
  }

  .mk-footer-badges{
    gap:7px;
  }

  .mk-footer-badges span{
    padding:8px 10px;
    font-size:9px;
  }

  .mk-footer-col h3{
    font-size:18px!important;
  }

  .mk-footer-links a{
    min-height:50px;
    font-size:13px;
  }

  .mk-footer-contact-card{
    min-height:68px;
  }
}

/* ===== Trang Bài viết / Tin tức ===== */
.mk-blog-page { background: #f7faff; min-height: 100vh; }
.mk-blog-wrap { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }
.mk-blog-hero { padding: 150px 0 72px; background: linear-gradient(135deg, #f7fbff 0%, #fff 48%, #eef5ff 100%); position: relative; overflow: hidden; }
.mk-blog-hero::before { content: ''; position: absolute; width: 620px; height: 620px; left: -330px; top: 40px; border: 1px solid rgba(8,45,99,.06); border-radius: 50%; box-shadow: 0 0 0 45px rgba(23,105,232,.025), 0 0 0 90px rgba(23,105,232,.018); }
.mk-blog-hero .mk-blog-wrap { position: relative; z-index: 1; }
.mk-blog-eyebrow { color: #1769e8; font: 800 11px/1.2 'DM Mono', monospace; letter-spacing: .16em; }
.mk-blog-hero h1 { max-width: 900px; margin: 18px 0 14px; color: #082d63; font-size: clamp(40px, 6vw, 76px); line-height: .98; letter-spacing: -.065em; font-weight: 800; }
.mk-blog-hero h1 em { color: #d70d20; font-style: normal; }
.mk-blog-hero p { max-width: 720px; margin: 0; color: #64748b; font-size: 15px; line-height: 1.75; }
.mk-blog-admin-btn { display: inline-flex; align-items: center; margin-top: 24px; padding: 13px 19px; border-radius: 9px; background: #082d63; color: #fff !important; text-decoration: none !important; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.mk-blog-admin-btn:hover { background: #1769e8; }
.mk-blog-list { padding: 64px 0 90px; }
.mk-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mk-blog-card { background: #fff; border: 1px solid #e1eaf5; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 35px rgba(8,45,99,.07); transition: transform .25s ease, box-shadow .25s ease; }
.mk-blog-card:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(8,45,99,.12); }
.mk-blog-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: #eaf1fa; }
.mk-blog-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.mk-blog-card:hover .mk-blog-thumb img { transform: scale(1.04); }
.mk-blog-card-body { padding: 22px 22px 24px; }
.mk-blog-meta { display: flex; gap: 10px; flex-wrap: wrap; color: #1769e8; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.mk-blog-meta span + span::before { content: '•'; margin-right: 10px; color: #cbd5e1; }
.mk-blog-card h2 { margin: 11px 0 9px; font-size: 21px; line-height: 1.22; letter-spacing: -.035em; }
.mk-blog-card h2 a { color: #082d63; text-decoration: none; }
.mk-blog-card h2 a:hover { color: #1769e8; }
.mk-blog-card p { margin: 0 0 17px; color: #64748b; font-size: 13px; line-height: 1.7; }
.mk-blog-read { color: #d70d20; font-size: 11px; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.mk-blog-read span { display: inline-block; margin-left: 5px; transition: transform .2s ease; }
.mk-blog-read:hover span { transform: translateX(4px); }
.mk-blog-pagination { margin-top: 38px; text-align: center; }
.mk-blog-pagination ul { display: inline-flex; gap: 7px; list-style: none; margin: 0; padding: 0; }
.mk-blog-pagination a, .mk-blog-pagination span { display: inline-flex; min-width: 38px; height: 38px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid #dbe5f1; border-radius: 9px; background: #fff; color: #082d63; text-decoration: none; font-size: 12px; font-weight: 800; }
.mk-blog-pagination .current { background: #082d63; border-color: #082d63; color: #fff; }
.mk-blog-empty { padding: 50px; border: 1px dashed #cbd5e1; border-radius: 18px; background: #fff; text-align: center; }
.mk-blog-empty h2 { color: #082d63; margin: 0 0 8px; }
.mk-blog-empty p { color: #64748b; }
@media (max-width: 1000px) { .mk-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-blog-wrap { width: min(100% - 32px, 760px); } }
@media (max-width: 650px) { .mk-blog-hero { padding: 105px 0 48px; } .mk-blog-hero h1 { font-size: 39px; } .mk-blog-list { padding: 42px 0 60px; } .mk-blog-grid { grid-template-columns: 1fr; gap: 18px; } .mk-blog-wrap { width: min(100% - 26px, 520px); } .mk-blog-card-body { padding: 19px; } }

/* =========================================================
   MINH KHANG MEP & ELV — CAPABILITY PROFILE / iOS UI
   v1.4.0 — responsive, edge-to-edge, mobile-first
   ========================================================= */
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*:before,*:after{box-sizing:border-box}
img{max-width:100%;height:auto}
a{-webkit-tap-highlight-color:transparent}


/* Hero */
.mk-hero{padding:145px 28px 48px!important;background:
  radial-gradient(circle at 80% 10%,rgba(31,111,235,.25),transparent 32%),
  linear-gradient(145deg,var(--mk-navy) 0%,#061d42 72%)!important}
.mk-wrap{width:min(1440px,100%);max-width:1440px!important}
.mk-grid{gap:28px;grid-template-columns:1.03fr .97fr}
.mk-hero-copy{padding:44px 28px 30px 0}
.mk-eyebrow{font-size:10px;letter-spacing:.16em}
.mk-hero h1{font-size:clamp(48px,6.4vw,88px);letter-spacing:-.075em;max-width:760px}
.mk-hero p{font-size:15px;max-width:600px}
.mk-actions{gap:10px}
.mk-button{border-radius:999px!important;padding:14px 20px;box-shadow:0 10px 25px rgba(8,45,99,.12)}
.mk-button-outline{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.25)!important}
.mk-hero-media{min-height:520px;border-radius:30px;box-shadow:0 24px 70px rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.16)}
.mk-hero-media img{min-height:520px;opacity:.86}

/* Capability strip */
.mk-capability-strip{background:#fff;border-bottom:1px solid #e8edf3}
.mk-capability-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.mk-capability-grid>div{padding:24px 26px;border-right:1px solid #edf0f4}
.mk-capability-grid>div:last-child{border-right:0}
.mk-capability-grid strong{display:block;color:var(--mk-navy);font-size:14px;letter-spacing:-.02em}
.mk-capability-grid span{display:block;color:#7a8697;font-size:11px;margin-top:5px}

/* Sections */
.mk-services,.mk-projects,.mk-products{padding:105px 28px!important}
.mk-services{background:#f7f9fc!important}
.mk-projects{background:#fff!important}
.mk-products{background:#f4f7fb!important}
.mk-section-head{margin-bottom:42px}
.mk-section-head h2{font-size:clamp(38px,5.2vw,72px);letter-spacing:-.07em}
.mk-section-head p{font-size:13px;color:#64748b}
.mk-service-grid{border:0!important;gap:14px}
.mk-service{min-height:255px;padding:28px;border:1px solid #e5eaf1!important;border-radius:24px;background:rgba(255,255,255,.82);box-shadow:0 10px 30px rgba(15,23,42,.045);transition:.25s}
.mk-service:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.08)}
.mk-service-number{font-size:11px}
.mk-service h3{margin:64px 0 9px;font-size:24px}
.mk-service p{font-size:13px}

/* Projects */
.mk-project-grid{gap:16px}
.mk-project-card{min-height:410px!important;border-radius:25px;box-shadow:0 14px 35px rgba(15,23,42,.08)}
.mk-project-card img{min-height:410px!important}
.mk-project-card::after{background:linear-gradient(transparent 25%,rgba(4,17,39,.95))}
.mk-project-info{right:24px;bottom:23px;left:24px}
.mk-project-info h3{font-size:24px}
.mk-cat-nav ul{gap:18px!important}
.mk-cat-nav a{font-size:10px!important}

/* Profile CTA */
.mk-profile-cta{padding:32px 28px 105px;background:#fff}
.mk-profile-card{border-radius:32px;padding:55px 58px;display:grid;grid-template-columns:1fr .8fr;gap:55px;align-items:center;color:#fff;overflow:hidden;position:relative;background:
 radial-gradient(circle at 90% 15%,rgba(49,130,246,.34),transparent 34%),
 linear-gradient(135deg,#082d63,#061d42)}
.mk-profile-card:after{content:"";position:absolute;width:330px;height:330px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-90px;bottom:-150px;box-shadow:0 0 0 40px rgba(255,255,255,.025),0 0 0 80px rgba(255,255,255,.018)}
.mk-profile-card>*{position:relative;z-index:1}
.mk-profile-card h2{font-size:clamp(36px,4.7vw,66px);line-height:.96;letter-spacing:-.065em;margin:15px 0 0}
.mk-profile-card h2 em{font-style:normal;color:#69a8ff}
.mk-profile-copy p{color:rgba(255,255,255,.72);line-height:1.7;font-size:14px;margin:0 0 18px}
.mk-profile-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.mk-profile-pills span{font-size:10px;font-weight:800;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);padding:7px 10px;border-radius:999px}

/* Products */
.mk-product-grid{gap:16px}
.mk-product-card{border:1px solid #e5eaf1!important;border-radius:22px!important;box-shadow:0 8px 25px rgba(15,23,42,.04)}
.mk-product-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px rgba(15,23,42,.09)}
.mk-product-body{padding:18px}
.mk-product-title{font-size:16px}

/* Content pages */
.site-main.pt-32{padding-top:140px!important}
.mk-blog-hero{padding-top:140px!important}
.mk-blog-wrap{width:min(1280px,calc(100% - 56px))}
.mk-quote-page,.mk-attendance-page{padding-top:115px!important}

/* Floating contact */
.fixed.bottom-6.right-6{right:20px!important;bottom:20px!important}
.fixed.bottom-6.right-6 a{border-radius:999px!important;width:52px;height:52px;padding:0!important;justify-content:center;box-shadow:0 12px 30px rgba(15,23,42,.2)!important}

/* Prevent embedded plugins/content from breaking viewport */
.page-content,.entry-content,.prose{overflow-wrap:anywhere}
iframe,video{max-width:100%}

/* iPhone / Android */
@media(max-width:900px){
  .mk-hero{padding:105px 14px 18px!important}
  .mk-grid{grid-template-columns:1fr!important;gap:16px}
  .mk-hero-copy{padding:22px 8px 10px!important}
  .mk-hero h1{font-size:clamp(43px,13vw,66px);line-height:.91;margin:17px 0 19px}
  .mk-hero p{font-size:13px;line-height:1.7}
  .mk-actions{margin-top:24px}
  .mk-button{width:100%;justify-content:center;min-height:48px}
  .mk-hero-media,.mk-hero-media img{min-height:300px!important;height:48vh;max-height:440px}
  .mk-hero-media{border-radius:25px}
  .mk-capability-grid{grid-template-columns:repeat(2,1fr)}
  .mk-capability-grid>div{padding:18px 16px}
  .mk-capability-grid>div:nth-child(2){border-right:0}
  .mk-capability-grid>div:nth-child(-n+2){border-bottom:1px solid #edf0f4}
  .mk-services,.mk-projects,.mk-products{padding:72px 14px!important}
  .mk-section-head{display:block;margin-bottom:28px}
  .mk-section-head h2{font-size:43px;margin-bottom:18px}
  .mk-service-grid,.mk-project-grid,.mk-product-grid{grid-template-columns:1fr!important}
  .mk-service{min-height:220px}
  .mk-service h3{margin-top:50px}
  .mk-project-card,.mk-project-card img{min-height:320px!important}
  .mk-profile-cta{padding:14px 14px 72px}
  .mk-profile-card{grid-template-columns:1fr;padding:35px 25px;border-radius:27px;gap:28px}
  .mk-profile-card h2{font-size:42px}
  .site-main.pt-32{padding-top:100px!important}
  .mk-blog-wrap{width:calc(100% - 28px)}
  .mk-blog-hero{padding-top:105px!important}
}
@media(max-width:520px){
  .mk-hero h1{font-size:44px}
  .mk-capability-grid strong{font-size:12px}
  .mk-capability-grid span{font-size:9px}
  .mk-section-head h2{font-size:39px}
  .mk-project-card,.mk-project-card img{min-height:285px!important}
  .fixed.bottom-6.right-6{right:12px!important;bottom:12px!important}
  .fixed.bottom-6.right-6 a{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
}
/* Blog image fix 1.4.1: mỗi bài dùng ảnh riêng, không dùng hero.jpg chung */
.mk-blog-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mk-blog-thumb img[src$=".svg"]{object-fit:cover;background:#eef5ff}
@media(max-width:767px){.mk-blog-wrap{width:min(100% - 28px,1280px)}.mk-blog-hero{padding:112px 0 44px}.mk-blog-list{padding:30px 0 60px}.mk-blog-grid{grid-template-columns:1fr;gap:18px}.mk-blog-card{border-radius:20px}.mk-blog-thumb{aspect-ratio:16/10}.mk-blog-card-body{padding:18px 18px 20px}.mk-blog-card h2{font-size:19px}}


/* ===== 1.4.2 iOS 3D ACTIONS + TYPOGRAPHY ===== */
html{scroll-behavior:smooth}
body{font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mk-hero h1,.mk-section-head h2,.mk-profile-card h2{font-weight:850}
.mk-actions .mk-button{font-size:15px;font-weight:850;min-height:50px}
.mk-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px;max-width:850px}
.mk-quick-action{display:flex;align-items:center;gap:10px;min-height:72px;padding:10px 12px;border:1px solid rgba(8,45,99,.10);border-radius:19px;background:rgba(255,255,255,.9);box-shadow:0 10px 25px rgba(8,45,99,.09),inset 0 1px 0 rgba(255,255,255,.95);text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.mk-quick-action:hover{transform:translateY(-4px);border-color:rgba(23,105,232,.25);box-shadow:0 16px 32px rgba(8,45,99,.14),inset 0 1px 0 #fff}
.mk-quick-action b{display:block;color:#082d63;font-size:14px;line-height:1.15;font-weight:850;letter-spacing:-.025em}
.mk-quick-action small{display:block;color:#718096;font-size:10px;line-height:1.3;margin-top:4px;font-weight:700}
.mk-3d-icon{position:relative;display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:15px;background:linear-gradient(145deg,#ffffff,#e7eef8);box-shadow:7px 8px 16px rgba(8,45,99,.14),-4px -4px 10px rgba(255,255,255,.9),inset 0 1px 0 #fff;transform:translateZ(0)}
.mk-3d-icon::after{content:"";position:absolute;inset:4px;border-radius:11px;border:1px solid rgba(255,255,255,.75);pointer-events:none}
.mk-3d-icon svg{width:38px;height:38px;filter:drop-shadow(0 4px 5px rgba(8,45,99,.14))}
.mk-quick-call .mk-3d-icon{background:linear-gradient(145deg,#eafffb,#c9fff4)}
.mk-quick-call b{color:#007e70}
.mk-service{position:relative;overflow:hidden}
.mk-service::before{content:"";position:absolute;right:-45px;top:-55px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(23,105,232,.09),transparent 67%);pointer-events:none}
.mk-service-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mk-service-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,#fff,#e8eef7);box-shadow:8px 10px 20px rgba(8,45,99,.12),-5px -5px 12px rgba(255,255,255,.95),inset 0 1px 0 #fff;transform:translateZ(0);transition:transform .22s ease}
.mk-service-icon svg{width:49px;height:49px;filter:drop-shadow(0 5px 5px rgba(8,45,99,.15))}
.mk-service:hover .mk-service-icon{transform:translateY(-3px) rotate(-2deg) scale(1.03)}
.mk-service h3{font-size:27px!important;font-weight:850!important;margin-top:42px!important}
.mk-service p{font-size:15px!important;line-height:1.72!important}
.mk-service-number{font-size:12px!important;font-weight:800}
.mk-capability-grid strong{font-size:16px!important;font-weight:850}
.mk-capability-grid span{font-size:12px!important}
.mk-blog-card h2{font-size:23px!important;font-weight:850!important}
.mk-blog-card p{font-size:14px!important}
.mk-blog-meta{font-size:11px!important}
.mk-blog-read{font-size:12px!important}
.mk-blog-hero h1{font-weight:850!important}
.mk-blog-hero p{font-size:16px!important}
.mk-blog-admin-btn{font-size:13px!important}
@media(max-width:900px){
 .mk-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
 .mk-quick-action{min-height:68px}
 .mk-quick-action b{font-size:13px}
 .mk-service h3{font-size:25px!important}
 .mk-service p{font-size:14px!important}
}
@media(max-width:520px){
 .mk-quick-actions{gap:9px;margin-top:14px}
 .mk-quick-action{min-height:66px;padding:9px;border-radius:17px;gap:8px}
 .mk-3d-icon{width:42px;height:42px;flex-basis:42px;border-radius:14px}
 .mk-3d-icon svg{width:35px;height:35px}
 .mk-quick-action b{font-size:12px}
 .mk-quick-action small{font-size:9px}
 .mk-service{padding:22px!important;border-radius:22px!important}
 .mk-service-icon{width:54px;height:54px;border-radius:17px}
 .mk-service-icon svg{width:45px;height:45px}
 .mk-service h3{font-size:23px!important;margin-top:38px!important}
 .mk-service p{font-size:14px!important}
 .mk-blog-card h2{font-size:21px!important}
 .mk-blog-card p{font-size:14px!important}
 .mk-blog-hero p{font-size:14px!important}
}
@media(prefers-reduced-motion:reduce){.mk-quick-action,.mk-service-icon{transition:none}}


/* =========================================================
   1.5 – 10 theme visual + 10 blog layouts + 3D touch icons
   ========================================================= */
.mk-theme-ios_navy{--mk-ui-glow:rgba(23,105,232,.24)}
.mk-theme-ios_blue{--mk-ui-glow:rgba(14,165,233,.28)}
.mk-theme-ios_green{--mk-ui-glow:rgba(16,185,129,.26)}
.mk-theme-industrial{--mk-ui-glow:rgba(249,115,22,.26)}
.mk-theme-dark_gold{--mk-ui-glow:rgba(212,175,55,.25)}
.mk-theme-safety{--mk-ui-glow:rgba(250,204,21,.25)}
.mk-theme-clean{--mk-ui-glow:rgba(59,130,246,.2)}
.mk-theme-mono{--mk-ui-glow:rgba(113,113,122,.2)}
.mk-theme-red_energy{--mk-ui-glow:rgba(239,68,68,.26)}
.mk-theme-dark_pro{--mk-ui-glow:rgba(234,179,8,.25)}

/* 3D icon/action */
.mk-service-icon,.mk-action-icon,.mk-3d-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:22px;background:linear-gradient(145deg,#fff,#eaf2ff);box-shadow:8px 8px 18px rgba(8,45,99,.14),-5px -5px 12px rgba(255,255,255,.95),inset 0 1px 0 rgba(255,255,255,.9);transform:translateZ(0);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;will-change:transform}
.mk-service-icon svg,.mk-action-icon svg,.mk-3d-icon svg{filter:drop-shadow(0 5px 4px rgba(8,45,99,.2))}
.mk-service-icon:hover,.mk-action-icon:hover,.mk-3d-icon:hover,.mk-service-icon:active,.mk-action-icon:active,.mk-3d-icon:active{transform:translateY(-5px) scale(1.035);box-shadow:10px 14px 25px var(--mk-ui-glow),inset 0 1px 0 #fff}
.mk-service-icon:active,.mk-action-icon:active,.mk-3d-icon:active{transform:scale(.94) translateY(1px);filter:brightness(.98)}
.mk-service-icon::after,.mk-action-icon::after,.mk-3d-icon::after{content:"";position:absolute;inset:2px;border-radius:inherit;border:1px solid rgba(255,255,255,.75);pointer-events:none}
.mk-blog-card,.mk-project-card,.mk-product-card,.mk-profile-card{transition:transform .22s ease,box-shadow .22s ease}
.mk-blog-card:active,.mk-project-card:active,.mk-product-card:active{transform:scale(.985)}

/* 10 blog layouts */
.mk-blog-layout-grid3 .mk-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-blog-layout-grid2 .mk-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mk-blog-layout-editorial .mk-blog-grid{grid-template-columns:1.4fr 1fr 1fr}.mk-blog-layout-editorial .mk-blog-card:first-child{grid-row:span 2}.mk-blog-layout-editorial .mk-blog-card:first-child .mk-blog-thumb{height:420px}
.mk-blog-layout-featured .mk-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-blog-layout-featured .mk-blog-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr}.mk-blog-layout-featured .mk-blog-card:first-child .mk-blog-thumb{height:100%;min-height:330px}
.mk-blog-layout-list .mk-blog-grid{grid-template-columns:1fr}.mk-blog-layout-list .mk-blog-card{display:grid;grid-template-columns:300px 1fr}.mk-blog-layout-list .mk-blog-thumb{height:100%;min-height:220px}
.mk-blog-layout-magazine .mk-blog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.mk-blog-layout-magazine .mk-blog-card:first-child{grid-column:span 2;grid-row:span 2}.mk-blog-layout-magazine .mk-blog-card:first-child .mk-blog-thumb{height:390px}
.mk-blog-layout-masonry .mk-blog-grid{display:block;column-count:3;column-gap:24px}.mk-blog-layout-masonry .mk-blog-card{display:inline-block;width:100%;margin:0 0 24px;break-inside:avoid}.mk-blog-layout-masonry .mk-blog-thumb{height:auto}.mk-blog-layout-masonry .mk-blog-thumb img{height:auto;aspect-ratio:16/10}
.mk-blog-layout-timeline .mk-blog-grid{display:grid;grid-template-columns:1fr}.mk-blog-layout-timeline .mk-blog-card{display:grid;grid-template-columns:150px 1fr;position:relative}.mk-blog-layout-timeline .mk-blog-thumb{height:180px}.mk-blog-layout-timeline .mk-blog-meta{flex-direction:column}
.mk-blog-layout-compact .mk-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.mk-blog-layout-compact .mk-blog-card-body{padding:16px}.mk-blog-layout-compact .mk-blog-card h2{font-size:19px}
.mk-blog-layout-split .mk-blog-grid{grid-template-columns:1fr 1fr}.mk-blog-layout-split .mk-blog-card:nth-child(odd){transform:translateY(30px)}

.mk-source-box{padding:15px 18px;border-radius:16px;background:#f5f9ff;border:1px solid #dce8f5}
@media(max-width:1000px){.mk-blog-layout-grid3 .mk-blog-grid,.mk-blog-layout-compact .mk-blog-grid,.mk-blog-layout-magazine .mk-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-blog-layout-editorial .mk-blog-grid{grid-template-columns:1fr 1fr}.mk-blog-layout-masonry .mk-blog-grid{column-count:2}}
@media(max-width:700px){
 .mk-blog-wrap{width:min(100% - 28px,1280px)}
 .mk-blog-layout-grid3 .mk-blog-grid,.mk-blog-layout-grid2 .mk-blog-grid,.mk-blog-layout-editorial .mk-blog-grid,.mk-blog-layout-featured .mk-blog-grid,.mk-blog-layout-magazine .mk-blog-grid,.mk-blog-layout-compact .mk-blog-grid,.mk-blog-layout-split .mk-blog-grid{grid-template-columns:1fr}
 .mk-blog-layout-editorial .mk-blog-card:first-child,.mk-blog-layout-featured .mk-blog-card:first-child{grid-column:auto;grid-row:auto;display:block}.mk-blog-layout-editorial .mk-blog-card:first-child .mk-blog-thumb,.mk-blog-layout-featured .mk-blog-card:first-child .mk-blog-thumb{height:220px;min-height:0}
 .mk-blog-layout-list .mk-blog-card,.mk-blog-layout-timeline .mk-blog-card{display:block}.mk-blog-layout-list .mk-blog-thumb,.mk-blog-layout-timeline .mk-blog-thumb{height:220px;min-height:0}
 .mk-blog-layout-masonry .mk-blog-grid{column-count:1}
 .mk-blog-layout-split .mk-blog-card:nth-child(odd){transform:none}
 .mk-blog-hero h1{font-size:clamp(36px,12vw,56px)}
}
@media(prefers-reduced-motion:reduce){.mk-service-icon,.mk-action-icon,.mk-3d-icon,.mk-blog-card,.mk-project-card,.mk-product-card{transition:none!important}}

/* =========================================================
   1.6 — Topic pages / separate writing areas / 3D touch icons
   ========================================================= */
.mk-topic-page{background:#f5f8fc;min-height:100vh;padding-top:72px;color:#1f2937}
.mk-topic-wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
.mk-topic-hero{padding:72px 0 58px;background:radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--topic-accent) 22%,transparent),transparent 32%),linear-gradient(145deg,#fff,#eef5fc);border-bottom:1px solid #e1e9f3}
.mk-topic-icon-3d{width:76px;height:76px;display:grid;place-items:center;border-radius:24px;font-size:38px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);box-shadow:0 18px 30px rgba(8,45,99,.14),inset 0 2px 0 rgba(255,255,255,.95);margin-bottom:18px;transform:translateZ(0);transition:transform .18s ease,box-shadow .18s ease}
.mk-topic-icon-3d:active{transform:scale(.92) translateY(2px);box-shadow:0 8px 16px rgba(8,45,99,.12)}
.mk-topic-icon-3d.small{margin:0 auto 16px;width:64px;height:64px;font-size:32px}
.mk-topic-hero h1{font-size:clamp(38px,6vw,68px);letter-spacing:-.065em;color:#082d63;margin:7px 0 14px;line-height:1.02}
.mk-topic-hero p{max-width:760px;font-size:17px;line-height:1.75;color:#64748b;margin:0 0 24px}
.mk-topic-write{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;background:var(--topic-accent);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 12px 25px color-mix(in srgb,var(--topic-accent) 24%,transparent);transition:transform .16s ease,box-shadow .16s ease}
.mk-topic-write:hover{transform:translateY(-2px);box-shadow:0 16px 32px color-mix(in srgb,var(--topic-accent) 30%,transparent)}
.mk-topic-write:active{transform:scale(.95)}
.mk-topic-list{padding:46px 0 60px}
.mk-topic-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:15px}.mk-topic-toolbar strong{font-size:24px;color:#082d63}.mk-topic-toolbar span{font-size:13px;color:#64748b}
.mk-topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mk-topic-card{background:#fff;border:1px solid #e0e8f2;border-radius:24px;overflow:hidden;box-shadow:0 12px 35px rgba(8,45,99,.07);transition:transform .22s ease,box-shadow .22s ease}
.mk-topic-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(8,45,99,.13)}
.mk-topic-card:active{transform:scale(.985)}
.mk-topic-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#eaf1fa}.mk-topic-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.mk-topic-card:hover .mk-topic-thumb img{transform:scale(1.045)}
.mk-topic-card-icon{position:absolute;left:14px;bottom:14px;width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);font-size:24px;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:transform .18s ease}.mk-topic-card:active .mk-topic-card-icon{transform:scale(.88)}
.mk-topic-card-body{padding:20px}.mk-topic-card h2{font-size:21px;line-height:1.25;margin:10px 0}.mk-topic-card h2 a{color:#082d63;text-decoration:none}.mk-topic-card p{font-size:14px;line-height:1.7;color:#64748b;margin:0 0 15px}
.mk-topic-related{padding:52px 0 70px;background:#fff;border-top:1px solid #e4ebf3}.mk-topic-related h2{font-size:28px;color:#082d63;margin:0 0 22px}.mk-topic-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.mk-topic-link-3d{min-height:110px;padding:18px;border-radius:22px;background:linear-gradient(145deg,#fff,#f3f7fb);border:1px solid #e1e8f1;box-shadow:0 12px 26px rgba(8,45,99,.07);text-decoration:none;display:flex;align-items:center;gap:13px;color:#082d63;transition:transform .18s ease,box-shadow .18s ease}.mk-topic-link-3d span{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:25px;background:#fff;box-shadow:0 9px 20px rgba(8,45,99,.12)}.mk-topic-link-3d:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(8,45,99,.12)}.mk-topic-link-3d:active{transform:scale(.94)}
@media(max-width:900px){.mk-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-topic-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.mk-topic-page{padding-top:58px}.mk-topic-wrap{width:min(100% - 24px,520px)}.mk-topic-hero{padding:52px 0 42px}.mk-topic-icon-3d{width:66px;height:66px;font-size:32px;border-radius:20px}.mk-topic-hero h1{font-size:42px}.mk-topic-hero p{font-size:15px}.mk-topic-grid,.mk-topic-links{grid-template-columns:1fr}.mk-topic-card-body{padding:18px}.mk-topic-toolbar{align-items:flex-start;flex-direction:column}.mk-topic-toolbar strong{font-size:22px}}


/* =========================================================
   1.8 — MEP/ELV full-screen corporate responsive homepage
   ========================================================= */
:root{--mk-green:#087a3f;--mk-green2:#12b24b;--mk-ink:#0b3b2d;--mk-soft:#f4faf7;--mk-line:#dce9e2;--mk-shadow:0 20px 50px rgba(7,63,40,.12)}
body{overflow-x:hidden}.mk-home{background:#fff;color:#163128;font-family:inherit}.mk-home-wrap{width:min(1440px,calc(100% - 56px));margin:auto}
.mk-home-hero{min-height:clamp(650px,88vh,920px);padding:120px 0 50px;background:linear-gradient(120deg,#063f2d 0%,#0b6542 48%,#0b7d42 100%);position:relative;overflow:hidden}
.mk-home-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,37,27,.88) 0%,rgba(2,37,27,.58) 48%,rgba(2,37,27,.12) 100%),var(--mk-hero-img) center/cover no-repeat;opacity:.72}.mk-home-hero:after{content:"";position:absolute;right:-10%;top:-25%;width:55vw;height:100%;background:linear-gradient(130deg,transparent 0 38%,rgba(255,255,255,.1) 39%,rgba(255,255,255,.02) 61%,transparent 62%);transform:skewX(-12deg)}
.mk-home-hero-inner{position:relative;z-index:1;width:min(1440px,calc(100% - 56px));margin:auto;display:grid;grid-template-columns:1.05fr .95fr;min-height:650px;align-items:center}.mk-home-hero-copy{padding:30px 0}.mk-home-kicker{display:inline-flex;padding:9px 15px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#d8ffe7;font-size:12px;font-weight:900;letter-spacing:.12em}.mk-home-hero h1{margin:24px 0 20px;color:#fff;font-size:clamp(48px,6.8vw,92px);line-height:.93;letter-spacing:-.07em;font-weight:900;max-width:800px}.mk-home-hero h1 span,.mk-home-hero h1 em{color:#b9ff37;font-style:normal}.mk-home-hero p{max-width:650px;color:rgba(255,255,255,.86);font-size:clamp(17px,1.6vw,22px);font-weight:700;line-height:1.4;text-transform:uppercase}.mk-home-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0}.mk-home-btn{display:inline-flex;align-items:center;gap:12px;padding:15px 23px;border-radius:999px;text-decoration:none;font-size:12px;font-weight:900;letter-spacing:.04em;transition:transform .18s ease,box-shadow .18s ease}.mk-home-btn.primary{background:linear-gradient(145deg,#35d95c,#0aa83f);color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.3)}.mk-home-btn.ghost{border:1px solid rgba(255,255,255,.65);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(12px)}.mk-home-btn:hover{transform:translateY(-3px)}.mk-home-btn:active{transform:scale(.95)}
.mk-hero-trust{display:flex;gap:28px;flex-wrap:wrap;color:#fff}.mk-hero-trust span{display:grid;grid-template-columns:28px 1fr;column-gap:8px;align-items:center}.mk-hero-trust span:first-letter{font-size:22px}.mk-hero-trust b{font-size:12px}.mk-hero-trust small{grid-column:2;color:rgba(255,255,255,.62);font-size:10px}.mk-home-hero-visual{min-height:480px;position:relative;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.18);border-radius:34px;box-shadow:0 35px 80px rgba(0,0,0,.25);overflow:hidden;transform:perspective(1200px) rotateY(-5deg)}.mk-home-hero-visual:before{content:"";position:absolute;inset:0;background:var(--mk-hero-img) center/cover;opacity:.65;filter:saturate(1.1)}.mk-hero-glass-card{position:absolute;left:28px;right:28px;bottom:28px;padding:22px;border-radius:24px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);box-shadow:0 20px 45px rgba(0,0,0,.2);color:#0b3b2d}.mk-hero-glass-card span{font-size:11px;font-weight:900}.mk-hero-glass-card strong{display:block;font-size:28px;line-height:1;margin:8px 0 18px}.mk-hero-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.mk-hero-mini-grid i{font-style:normal;text-align:center;padding:10px 5px;border-radius:15px;background:#f4faf7;box-shadow:inset 0 1px #fff,0 8px 18px rgba(7,63,40,.08);font-size:20px}.mk-hero-mini-grid b{display:block;font-size:8px;margin-top:5px}
.mk-home-services,.mk-home-topics,.mk-home-projects{padding:100px 0}.mk-home-services{background:#fff}.mk-home-heading{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:34px}.mk-home-heading>div>span{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--mk-green)}.mk-home-heading h2{font-size:clamp(36px,5vw,68px);line-height:.95;letter-spacing:-.065em;color:#0c3e2e;margin:12px 0 0;font-weight:900}.mk-home-heading h2 em{font-style:normal;color:var(--mk-green2)}.mk-home-heading p{max-width:480px;color:#688078;line-height:1.7}.mk-service-3d-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mk-service-3d{position:relative;min-height:245px;padding:24px;border:1px solid var(--mk-line);border-radius:26px;background:linear-gradient(145deg,#fff,#f2f9f5);text-decoration:none;color:#0b3b2d;box-shadow:10px 14px 28px rgba(7,63,40,.07),-6px -6px 15px rgba(255,255,255,.95);transition:transform .2s ease,box-shadow .2s ease}.mk-service-3d:hover{transform:translateY(-7px) rotateX(1deg);box-shadow:14px 24px 45px rgba(7,63,40,.13)}.mk-service-3d:active{transform:scale(.97)}.mk-service-3d-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(145deg,#18b64e,#066d39);color:#fff;font-size:31px;box-shadow:7px 9px 17px rgba(7,63,40,.22),inset 0 2px 0 rgba(255,255,255,.32);transition:transform .18s ease}.mk-service-3d:active .mk-service-3d-icon{transform:scale(.9) rotate(-4deg)}.mk-service-3d small{position:absolute;top:26px;right:24px;font-size:10px;font-weight:900;color:#8aa196}.mk-service-3d h3{font-size:22px;margin:26px 0 7px;color:#0a5034}.mk-service-3d p{font-size:13px;line-height:1.65;color:#70827b;margin:0 0 16px}.mk-service-3d>b{font-size:11px;color:var(--mk-green);text-transform:uppercase}
.mk-home-stats{background:linear-gradient(115deg,#063f2d,#087c42);color:#fff}.mk-stats-grid{display:grid;grid-template-columns:repeat(4,1fr) 1.6fr;min-height:150px}.mk-stats-grid>div{padding:28px;border-right:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;justify-content:center}.mk-stats-grid strong{font-size:38px;line-height:1;font-weight:900}.mk-stats-grid span{font-size:12px;color:rgba(255,255,255,.72);margin-top:8px}.mk-stat-quote{font-size:14px;line-height:1.5;font-weight:800}
.mk-home-topics{background:#f4faf7}.mk-topic-3d-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.mk-topic-3d-grid a{display:flex;align-items:center;gap:12px;min-height:86px;padding:14px 16px;border-radius:20px;background:#fff;border:1px solid #e0eee6;text-decoration:none;color:#0b3b2d;box-shadow:0 10px 25px rgba(7,63,40,.06);transition:.18s}.mk-topic-3d-grid a:hover{transform:translateY(-4px);box-shadow:0 17px 35px rgba(7,63,40,.1)}.mk-topic-3d-grid a:active{transform:scale(.95)}.mk-topic-3d-grid span{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#fff,#e6f4eb);box-shadow:6px 7px 14px rgba(7,63,40,.1);font-size:23px}.mk-topic-3d-grid b{font-size:13px;line-height:1.2}.mk-topic-3d-grid i{margin-left:auto;font-style:normal;color:var(--mk-green);font-weight:900}
.mk-home-projects{background:#fff}.mk-text-link{color:var(--mk-green);font-size:12px;font-weight:900;text-decoration:none}.mk-home-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mk-home-project{height:360px;position:relative;overflow:hidden;border-radius:26px;background:#083d2b;box-shadow:0 15px 35px rgba(7,63,40,.12);text-decoration:none}.mk-home-project img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.mk-home-project:hover img{transform:scale(1.06)}.mk-home-project:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(2,31,22,.9))}.mk-home-project>div{position:absolute;z-index:1;left:22px;right:22px;bottom:20px;color:#fff}.mk-home-project small{color:#a8ff39;font-size:10px;font-weight:900}.mk-home-project h3{font-size:23px;line-height:1.1;margin:7px 0}.mk-home-final{padding:70px 0;background:#f5faf7}.mk-final-card{border-radius:32px;padding:50px;background:linear-gradient(135deg,#063f2d,#0b8a48);color:#fff;display:grid;grid-template-columns:1fr .8fr;gap:40px;box-shadow:0 24px 55px rgba(7,63,40,.18)}.mk-final-card span{font-size:11px;letter-spacing:.15em;font-weight:900}.mk-final-card h2{font-size:clamp(40px,5vw,70px);line-height:.94;letter-spacing:-.06em;margin:12px 0 0}.mk-final-card h2 em{color:#baff3a;font-style:normal}.mk-final-card p{color:rgba(255,255,255,.76);line-height:1.7}.mk-home-empty{padding:40px;border-radius:20px;background:#f4f7f5}
/* 10 home layouts */
.mk-home-modern_pro .mk-home-hero{background:linear-gradient(120deg,#071b3d,#0a4c8a)}.mk-home-modern_pro .mk-service-3d-icon{background:linear-gradient(145deg,#1583ff,#082d63)}
.mk-home-tech_blue .mk-home-hero{background:linear-gradient(120deg,#06283e,#0877b8)}.mk-home-tech_blue .mk-home-heading h2 em{color:#0ea5e9}
.mk-home-eco_future .mk-home-hero{background:linear-gradient(120deg,#064e3b,#12a85a)}
.mk-home-safety_pccc .mk-home-hero{background:linear-gradient(120deg,#631313,#dc2626)}.mk-home-safety_pccc .mk-service-3d-icon{background:linear-gradient(145deg,#ef4444,#7f1d1d)}
.mk-home-urban_tower .mk-home-hero{background:linear-gradient(120deg,#172554,#2563eb)}
.mk-home-construction .mk-home-hero{background:linear-gradient(120deg,#292524,#ea580c)}.mk-home-construction .mk-service-3d-icon{background:linear-gradient(145deg,#fb923c,#9a3412)}
.mk-home-smart_elv .mk-home-hero{background:linear-gradient(120deg,#111827,#0f766e)}
.mk-home-solutions .mk-home-hero{background:linear-gradient(120deg,#0f172a,#334155)}
.mk-home-contact_cta .mk-home-hero{background:linear-gradient(120deg,#7f1d1d,#0b3b2d)}
@media(max-width:1000px){.mk-home-hero-inner{grid-template-columns:1fr}.mk-home-hero-visual{min-height:340px;margin-top:15px}.mk-service-3d-grid{grid-template-columns:repeat(2,1fr)}.mk-stats-grid{grid-template-columns:repeat(2,1fr)}.mk-stat-quote{grid-column:1/-1}.mk-topic-3d-grid{grid-template-columns:repeat(2,1fr)}.mk-home-project-grid{grid-template-columns:repeat(2,1fr)}.mk-final-card{grid-template-columns:1fr}}
@media(max-width:640px){.mk-home-wrap,.mk-home-hero-inner{width:min(100% - 24px,600px)}.mk-home-hero{min-height:auto;padding:86px 0 28px}.mk-home-hero-inner{min-height:0}.mk-home-hero h1{font-size:48px}.mk-home-hero p{font-size:14px}.mk-hero-trust{gap:12px}.mk-hero-trust span{flex:1;min-width:29%}.mk-hero-trust small{font-size:8px}.mk-home-hero-visual{min-height:310px;border-radius:24px;transform:none}.mk-hero-glass-card{left:14px;right:14px;bottom:14px;padding:16px;border-radius:19px}.mk-hero-glass-card strong{font-size:20px}.mk-home-services,.mk-home-topics,.mk-home-projects{padding:65px 0}.mk-home-heading{display:block}.mk-home-heading h2{font-size:42px}.mk-service-3d-grid,.mk-topic-3d-grid,.mk-home-project-grid{grid-template-columns:1fr}.mk-service-3d{min-height:210px}.mk-stats-grid{grid-template-columns:1fr 1fr}.mk-stats-grid>div{padding:22px 16px}.mk-stats-grid strong{font-size:30px}.mk-final-card{padding:30px 22px;border-radius:24px}.mk-final-card h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){.mk-service-3d,.mk-service-3d-icon,.mk-home-btn,.mk-home-project img,.mk-topic-3d-grid a{transition:none!important}}



/* ============================================================
   MINH KHANG — RESPONSIVE + 3D OPTIMIZED LAYER
   Thay thế toàn bộ các block patch từ 1.8.1 đến cuối file cũ.

   Mục tiêu:
   - 1 hệ responsive duy nhất.
   - 1 hệ 3D / glass duy nhất.
   - Mobile launcher 4 cột, không lặp 4x8 nhiều lần.
   - Footer 600px desktop, mobile tự co chiều cao.
   - Không dùng global button/card/img để tránh phá plugin.
   - Giảm blur, shadow, transform và !important.
   - Không dùng will-change đại trà.
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root{
  --mk-content-width:90%;
  --mk-content-max:1440px;
  --mk-side-space:5%;

  --mk-3d-radius:18px;
  --mk-3d-shadow:0 8px 20px rgba(8,45,99,.10), inset 0 1px 0 rgba(255,255,255,.88);
  --mk-3d-shadow-hover:0 12px 26px rgba(8,45,99,.15), inset 0 1px 0 rgba(255,255,255,.95);

  --mk-glass-bg:rgba(255,255,255,.72);
  --mk-glass-line:rgba(255,255,255,.88);

  --mk-ios-ease:cubic-bezier(.22,1,.36,1);
  --mk-ios-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- GLOBAL WIDTH / OVERFLOW ---------- */
.mk-home-wrap,
.mk-home-hero-inner,
.mk-topic-wrap,
.mk-blog-wrap{
  width:min(var(--mk-content-width),var(--mk-content-max));
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.page-content,
.entry-content,
.prose{
  overflow-wrap:anywhere;
}

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

/* ============================================================
   ============================================================ */

.site-footer{
  width:100%;
  margin:0 !important;
  padding:0 !important;
}

.mk-footer{
  width:100%;
  height:600px !important;
  min-height:600px !important;
  box-sizing:border-box;
  overflow:hidden;
  padding:22px 0 0 !important;
}

.mk-footer-wrap{
  width:min(var(--mk-content-width),var(--mk-content-max));
  height:500px;
  min-height:500px;
  margin:0 auto !important;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(220px,.8fr) minmax(280px,1.05fr);
  gap:28px;
  box-sizing:border-box;
}

.mk-footer-col{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.mk-footer-logo{
  width:110px !important;
  height:110px !important;
  min-width:110px !important;
  flex:0 0 110px !important;
  object-fit:contain;
}

.mk-footer-brand-text strong,
.mk-footer-brand strong{
  display:block;
  font-size:30px !important;
  line-height:1.08;
  white-space:normal !important;
  overflow-wrap:anywhere;
}

.mk-footer-col h3{
  font-size:16px !important;
  line-height:1.2;
  margin:0 0 12px !important;
}

.mk-footer-contact-card{
  transition:
    transform .20s var(--mk-ios-ease),
    box-shadow .20s ease;
}

.mk-footer-contact-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(8,45,99,.12);
}

.mk-footer-contact-card:active{
  transform:scale(.97);
}

/* ============================================================
   3D SYSTEM — CHỈ MỘT HỆ
   ============================================================ */

.mk-home-btn,
.mk-button,
.mk-button-outline,
.mk-topic-write,
.mk-text-link,
.mk-blog-admin-btn,
.mk-blog-read,
.mk-home-project,
.mk-project-card,
.mk-product-card,
.mk-blog-card,
.mk-topic-card,
.mk-topic-link-3d,
.mk-service-3d{
  -webkit-tap-highlight-color:transparent;
  transform:translateZ(0);
  transition:
    transform .20s var(--mk-ios-ease),
    box-shadow .20s ease,
    filter .20s ease,
    background .20s ease;
}

.mk-home-btn:hover,
.mk-button:hover,
.mk-button-outline:hover,
.mk-topic-write:hover,
.mk-text-link:hover,
.mk-blog-admin-btn:hover,
.mk-blog-read:hover,
.mk-home-project:hover,
.mk-project-card:hover,
.mk-product-card:hover,
.mk-blog-card:hover,
.mk-topic-card:hover,
.mk-topic-link-3d:hover,
.mk-service-3d:hover{
  transform:translateY(-3px);
}

.mk-home-btn:active,
.mk-button:active,
.mk-button-outline:active,
.mk-topic-write:active,
.mk-text-link:active,
.mk-blog-admin-btn:active,
.mk-blog-read:active,
.mk-home-project:active,
.mk-project-card:active,
.mk-product-card:active,
.mk-blog-card:active,
.mk-topic-card:active,
.mk-topic-link-3d:active,
.mk-service-3d:active{
  transform:scale(.965) translateY(1px);
}

/* Icon 3D dùng chung */
.mk-service-3d-icon,
.mk-service-icon,
.mk-action-icon,
.mk-3d-icon,
.mk-topic-icon-3d,
.mk-topic-3d-grid a span,
.mk-topic-card-icon,
.mk-topic-link-3d span,
.mk-hero-mini-grid i,
.mk-attendance-icon,
.mk-footer-contact-card>b{
  position:relative;
  isolation:isolate;
  border:1px solid var(--mk-glass-line) !important;
  background:linear-gradient(145deg,#fff,#eaf5ef) !important;
  box-shadow:
    7px 9px 17px rgba(7,63,40,.12),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  transition:
    transform .22s var(--mk-ios-spring),
    box-shadow .22s ease,
    filter .22s ease;
}

.mk-service-3d-icon::after,
.mk-service-icon::after,
.mk-action-icon::after,
.mk-3d-icon::after,
.mk-topic-icon-3d::after,
.mk-topic-3d-grid a span::after,
.mk-topic-card-icon::after,
.mk-topic-link-3d span::after,
.mk-hero-mini-grid i::after,
.mk-attendance-icon::after,
.mk-footer-contact-card>b::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:7%;
  height:24%;
  border-radius:999px;
  background:rgba(255,255,255,.48);
  pointer-events:none;
}

.mk-service-3d:hover .mk-service-3d-icon,
.mk-service-icon:hover,
.mk-action-icon:hover,
.mk-3d-icon:hover,
.mk-topic-icon-3d:hover,
.mk-topic-3d-grid a:hover span,
.mk-topic-card-icon:hover,
.mk-topic-link-3d:hover span,
.mk-hero-mini-grid i:hover{
  transform:translateY(-4px) scale(1.035);
  box-shadow:
    10px 14px 23px rgba(7,63,40,.15),
    inset 0 1px 0 #fff !important;
}

.mk-service-3d:active .mk-service-3d-icon,
.mk-service-icon:active,
.mk-action-icon:active,
.mk-3d-icon:active,
.mk-topic-icon-3d:active,
.mk-topic-3d-grid a:active span,
.mk-topic-card-icon:active,
.mk-topic-link-3d:active span,
.mk-hero-mini-grid i:active{
  transform:scale(.92) translateY(1px);
}

/* Card glass: nhẹ, không blur toàn bộ */
.mk-service-3d,
.mk-topic-3d-grid a,
.mk-project-card,
.mk-product-card,
.mk-blog-card,
.mk-topic-card{
  position:relative;
  border:1px solid rgba(255,255,255,.82) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(239,248,244,.62)) !important;
  box-shadow:var(--mk-3d-shadow) !important;
}

.mk-service-3d::before,
.mk-topic-3d-grid a::before,
.mk-project-card::before,
.mk-product-card::before,
.mk-blog-card::before,
.mk-topic-card::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:inherit;
  pointer-events:none;
}

/* ============================================================
   HOMEPAGE / SERVICE GRID
   ============================================================ */

.mk-home-hero{
  overflow:hidden;
}

.mk-home-btn{
  position:relative;
  overflow:hidden;
}

.mk-home-btn::after{
  content:"";
  position:absolute;
  left:-80%;
  top:-50%;
  width:40%;
  height:200%;
  background:rgba(255,255,255,.22);
  transform:skewX(-18deg);
  transition:left .55s ease;
  pointer-events:none;
}

.mk-home-btn:hover::after{
  left:140%;
}

.mk-service-3d-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.mk-service-3d{
  min-width:0;
  min-height:245px;
  padding:24px;
  border-radius:24px;
}

.mk-service-3d-icon{
  width:68px;
  height:68px;
  border-radius:21px;
  font-size:35px;
}

.mk-service-3d h3{
  margin:22px 0 8px;
}

.mk-service-3d p{
  line-height:1.65;
}

/* ============================================================
   TOPIC LAUNCHER
   Desktop 4 cột / Mobile 4 cột
   ============================================================ */

.mk-topic-3d-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.mk-topic-3d-grid a{
  min-width:0;
  min-height:112px;
  padding:16px;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:12px;
}

.mk-topic-3d-grid a span{
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:28px;
}

.mk-topic-3d-grid a b{
  min-width:0;
  font-size:13px;
  line-height:1.25;
}

.mk-topic-3d-grid a i{
  margin-left:auto;
}

/* ============================================================
   MOBILE APP GRID — DUY NHẤT
   4 CỘT, 8 HÀNG / KHÔNG CÓ HỆ GRID THỨ HAI
   ============================================================ */

@media (max-width:640px){

  .mk-home-wrap,
  .mk-home-hero-inner,
  .mk-topic-wrap,
  .mk-blog-wrap{
    width:calc(100% - 24px);
    max-width:600px;
  }

  .mk-home-hero{
    min-height:auto;
    padding-top:86px;
    padding-bottom:28px;
  }

  .mk-home-hero-inner{
    grid-template-columns:1fr;
    min-height:0;
  }

  .mk-home-hero h1{
    font-size:clamp(42px,12vw,52px);
  }

  .mk-home-hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
  }

  .mk-home-btn{
    width:100%;
    min-height:54px;
    border-radius:17px;
  }

  /* Services: 4 cột */
  .mk-home-services{
    padding:34px 6px 42px !important;
  }

  .mk-home-services .mk-home-wrap{
    width:100%;
    max-width:none;
  }

  .mk-home-services .mk-home-heading{
    padding:0 8px;
    margin-bottom:18px;
  }

  .mk-home-services .mk-service-3d-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px 5px;
    width:100%;
  }

  .mk-home-services .mk-service-3d{
    min-width:0;
    min-height:108px;
    height:auto;
    aspect-ratio:1 / 1.08;
    padding:8px 3px 7px;
    border-radius:19px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-align:center;
    overflow:hidden;
  }

  .mk-home-services .mk-service-3d-icon{
    width:52px;
    height:52px;
    flex:0 0 52px;
    border-radius:17px;
    font-size:28px;
  }

  .mk-home-services .mk-service-3d small{
    position:absolute;
    top:7px;
    right:7px;
    font-size:7px;
  }

  .mk-home-services .mk-service-3d h3{
    width:100%;
    margin:1px 0 0;
    padding:0 2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9.5px;
    line-height:1.15;
  }

  .mk-home-services .mk-service-3d p,
  .mk-home-services .mk-service-3d>b{
    display:none;
  }

  /* Topics: đúng 4 cột */
  .mk-home-topics{
    width:100%;
    padding:22px 6px 34px !important;
    overflow:hidden;
  }

  .mk-home-topics .mk-home-wrap{
    width:100%;
    max-width:none;
  }

  .mk-home-topics .mk-home-heading{
    margin:0 6px 16px;
    padding:0;
  }

  .mk-home-topics .mk-topic-3d-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px 5px;
    width:100%;
  }

  .mk-home-topics .mk-topic-3d-grid a{
    min-height:0;
    height:auto;
    aspect-ratio:1 / 1;
    padding:6px 2px 5px;
    border-radius:19px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-align:center;
    overflow:hidden;
  }

  .mk-home-topics .mk-topic-3d-grid a span{
    width:52px;
    height:52px;
    flex:0 0 52px;
    border-radius:17px;
    display:grid;
    place-items:center;
    font-size:29px;
  }

  .mk-home-topics .mk-topic-3d-grid a b{
    display:block;
    width:100%;
    min-height:22px;
    padding:0 2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9.5px;
    line-height:1.15;
  }

  .mk-home-topics .mk-topic-3d-grid a i{
    display:none;
  }

  /* Không blur 32 tile — nhẹ hơn cho điện thoại */
  .mk-home-topics .mk-topic-3d-grid a,
  .mk-home-services .mk-service-3d{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  /* Project grid */
  .mk-home-project-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .mk-home-project{
    height:290px;
  }

  /* Hero mini */
  .mk-hero-mini-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  /* Blog */
  .mk-blog-wrap{
    width:calc(100% - 24px);
  }

  .mk-blog-grid{
    grid-template-columns:1fr !important;
    gap:18px;
  }

  .mk-blog-card h2{
    font-size:21px !important;
  }
}

/* ============================================================
   TABLET
   ============================================================ */

@media (min-width:641px) and (max-width:1100px){

  .header-wrap,
  .mk-home-wrap,
  .mk-home-hero-inner,
  .mk-topic-wrap,
  .mk-blog-wrap,
  .mk-footer-wrap{
    width:calc(100% - 40px);
  }

  .mk-main-menu{
    gap:16px;
  }

  .mk-main-menu li a,
  .desktop-nav ul li a{
    padding:8px 9px;
    font-size:13px;
  }

  .mk-service-3d-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mk-topic-3d-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mk-footer-wrap{
    grid-template-columns:1.15fr .9fr 1fr;
    gap:20px;
  }
}

/* ============================================================
   Cột 2 bị ẩn; giữ cột 1 + cột 3
   ============================================================ */

@media (max-width:700px){

  .mk-footer{
    height:auto !important;
    min-height:0 !important;
    padding:20px 0 24px !important;
    overflow:visible;
  }

  .mk-footer-wrap{
    width:calc(100% - 24px);
    height:auto;
    min-height:0;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:18px;
    align-items:start;
  }

  .mk-footer-wrap > .mk-footer-col:nth-child(2){
    display:none !important;
  }

  .mk-footer-wrap > .mk-footer-col:nth-child(1),
  .mk-footer-wrap > .mk-footer-col:nth-child(3){
    min-width:0;
  }

  .mk-footer-logo{
    width:82px !important;
    height:82px !important;
    min-width:82px !important;
    flex-basis:82px !important;
  }

  .mk-footer-brand-text strong,
  .mk-footer-brand strong{
    font-size:21px !important;
  }

  .mk-footer-col h3{
    font-size:14px !important;
  }

  .mk-footer-contact-card{
    padding:10px !important;
  }

  .mk-footer-contact-card strong{
    font-size:11px !important;
    overflow-wrap:anywhere;
  }
}

/* Small phones */
@media (max-width:390px){

  .mk-home-wrap,
  .mk-home-hero-inner,
  .mk-topic-wrap,
  .mk-blog-wrap,
  .mk-footer-wrap{
    width:calc(100% - 16px);
  }

  .mk-home-services .mk-service-3d-grid,
  .mk-home-topics .mk-topic-3d-grid{
    gap:7px 4px;
  }

  .mk-home-services .mk-service-3d{
    min-height:98px;
    border-radius:16px;
  }

  .mk-home-services .mk-service-3d-icon{
    width:48px;
    height:48px;
    flex-basis:48px;
    border-radius:15px;
    font-size:26px;
  }

  .mk-home-services .mk-service-3d h3{
    font-size:8.6px;
  }

  .mk-home-topics .mk-topic-3d-grid a{
    border-radius:16px;
    gap:4px;
  }

  .mk-home-topics .mk-topic-3d-grid a span{
    width:48px;
    height:48px;
    flex-basis:48px;
    border-radius:15px;
    font-size:26px;
  }

  .mk-home-topics .mk-topic-3d-grid a b{
    font-size:8.8px;
  }

  .mk-footer-wrap{
    gap:12px;
  }

  .mk-footer-logo{
    width:72px !important;
    height:72px !important;
    min-width:72px !important;
    flex-basis:72px !important;
  }

  .mk-footer-brand-text strong,
  .mk-footer-brand strong{
    font-size:17px !important;
  }
}

/* ============================================================
   FLOATING CONTACT
   ============================================================ */

.mk-floating-contact-wrap{
  position:fixed;
  right:18px;
  bottom:20px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mk-floating-contact{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  overflow:hidden;
  text-decoration:none !important;
  color:#fff !important;
  background:rgba(7,42,91,.82) !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.42),
    0 0 0 1px rgba(42,194,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .20s var(--mk-ios-spring),box-shadow .20s ease,background .20s ease;
}
.mk-floating-contact:hover{
  transform:translateY(-3px) scale(1.04);
  background:rgba(8,55,112,.96) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.22),0 0 20px rgba(0,200,255,.20);
}
.mk-floating-icon{
  width:30px;
  height:30px;
  display:block;
  flex:0 0 auto;
}
.mk-floating-label{
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
  color:#fff !important;
  text-decoration:none !important;
}
.mk-floating-zalo .mk-zalo-icon{
  width:28px;
  height:28px;
}
.mk-floating-call .mk-phone-icon{
  width:29px;
  height:29px;
}

.mk-floating-contact:active{
  transform:scale(.91) !important;
}

@media (max-width:640px){
  .mk-floating-contact-wrap{
    right:12px;
    bottom:14px;
    gap:8px;
  }

  .mk-floating-contact{
    width:58px;
    height:58px;
  }
  .mk-floating-icon{width:27px;height:27px}
  .mk-floating-label{font-size:8px}
}

/* ============================================================
   FORM CONTROLS — CHỈ COMPONENT MINH KHANG, KHÔNG GLOBAL
   ============================================================ */

.mk-home input,
.mk-home textarea,
.mk-home select,
.mk-quote-card input,
.mk-quote-card textarea,
.mk-quote-card select{
  border-radius:14px;
  transition:box-shadow .18s ease,border-color .18s ease;
}

.mk-home input:focus,
.mk-home textarea:focus,
.mk-home select:focus,
.mk-quote-card input:focus,
.mk-quote-card textarea:focus,
.mk-quote-card select:focus{
  box-shadow:0 0 0 3px rgba(18,178,75,.14);
}

/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */

a,
button,
input[type="button"],
input[type="submit"],
[role="button"]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.mk-mobile-app-grid > a,
.mk-mobile-menu-inner > a,
.mk-main-menu > li > a,
.mk-floating-contact{
  user-select:none;
  -webkit-user-select:none;
}

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto !important;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }

  .mk-home-btn::after{
    display:none;
  }
}

/* ============================================================
   FOOTER FINAL SIZE — 90% / 370px / TOTAL 470px
   Giảm khoảng trống giữa footer-wrap và footer-bottom
   ============================================================ */
.mk-footer{
  width:100% !important;
  height:470px !important;
  min-height:470px !important;
  padding:40px 0 0 !important;
  box-sizing:border-box;
  position:relative;
}

.mk-footer-wrap{
  width:90% !important;
  max-width:none !important;
  height:370px !important;
  min-height:370px !important;
  margin:0 auto !important;
  box-sizing:border-box;
}

/* Đưa thanh bottom lên sát ngay dưới footer-wrap */
.mk-footer-bottom{
  left:5% !important;
  right:5% !important;
  width:90% !important;
  bottom:0px !important;
  height:36px !important;
  box-sizing:border-box;
}

/* Giảm khoảng trống dọc trong các cột footer */
.mk-footer-col{
  justify-content:flex-start;
  padding-top:8px;
  box-sizing:border-box;
}

/* Mobile giữ footer tự co theo nội dung */
@media (max-width:700px){
  .mk-footer{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:16px 0 20px !important;
  }

  .mk-footer-wrap{
    width:calc(100% - 24px) !important;
    height:auto !important;
    min-height:0 !important;
  }

  .mk-footer-bottom{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:calc(100% - 24px) !important;
    height:auto !important;
    min-height:34px;
    margin:10px auto 0 !important;
  }
}

/* ============================================================
   MINH KHANG — HERO / NAVY GLASS MASTER OVERRIDE v2.3
   Desktop + tablet + mobile đồng bộ theo concept Navy/Cyan/Glass.
   ============================================================ */
:root{
  --mk-navy:#062a66;
  --mk-navy-deep:#03183f;
  --mk-cyan:#18d7ff;
  --mk-cyan2:#27f0d0;
  --mk-green:#20df8a;
  --mk-line-blue:rgba(76,201,255,.34);
}

/* Header */
.site-header{
  position:fixed !important;
  top:0;left:0;right:0;
  padding:14px 0 !important;
  background:linear-gradient(105deg,rgba(3,24,63,.97),rgba(5,48,111,.94) 55%,rgba(4,71,94,.94)) !important;
  border-bottom:1px solid rgba(84,214,255,.30) !important;
  box-shadow:0 10px 35px rgba(0,12,40,.28),inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
}
.site-header.is-scrolled{
  background:linear-gradient(105deg,rgba(3,22,57,.99),rgba(5,42,96,.98)) !important;
  box-shadow:0 12px 35px rgba(0,12,40,.34) !important;
}
.header-wrap{
  width:min(94%,1780px) !important;
  max-width:none !important;
  min-height:66px !important;
  padding:0 10px !important;
}
.brand-lockup{gap:10px !important}
.brand-full-logo{
  width:52px !important;height:52px !important;flex-basis:52px !important;
  filter:drop-shadow(0 5px 14px rgba(0,204,255,.30));
}
.brand-wordmark strong{color:#fff !important;font-size:18px !important;text-shadow:0 2px 10px rgba(0,0,0,.22)}
.brand-wordmark small{color:#3df1c5 !important;font-size:9px !important}
.desktop-nav,.mk-main-menu{margin-left:auto !important}
.desktop-nav > ul,.desktop-nav ul.menu,.mk-main-menu{
  gap:10px !important;
}
.desktop-nav ul li a,.desktop-nav ul.menu li a,.mk-main-menu li a{
  min-height:50px !important;
  padding:6px 12px !important;
  gap:9px !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:850 !important;
  border:1px solid transparent !important;
  text-shadow:0 1px 7px rgba(0,0,0,.25);
}
.desktop-nav ul li a:hover,.desktop-nav ul li a:focus-visible,
.desktop-nav .current-menu-item>a,.desktop-nav .current_page_item>a,
.mk-main-menu li a:hover,.mk-main-menu li a:focus-visible{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(20,139,255,.34),rgba(23,230,209,.17)) !important;
  border-color:rgba(62,213,255,.42) !important;
  box-shadow:0 0 0 1px rgba(44,190,255,.08),0 10px 26px rgba(0,205,255,.18),inset 0 1px 0 rgba(255,255,255,.18) !important;
  transform:translateY(-2px) !important;
}
.desktop-nav ul li a::after,.desktop-nav ul.menu li a::after,.mk-main-menu li a::after{
  background:linear-gradient(90deg,var(--mk-cyan),var(--mk-green)) !important;
  height:3px !important;bottom:1px !important;
}
.mk-menu-3d-icon,.mk-mobile-menu-icon{
  width:38px !important;height:38px !important;border-radius:12px !important;
  background:linear-gradient(145deg,#ffffff,#dcecff 60%,#c6e2f1) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  color:#07518a !important;
  box-shadow:5px 8px 18px rgba(0,0,0,.25),inset 0 1px 0 #fff !important;
}
.header-contact{
  margin-left:10px !important;
  padding:13px 20px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#25efc4,#20d76e) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.45) !important;
  box-shadow:0 10px 28px rgba(17,232,163,.26),inset 0 1px 0 rgba(255,255,255,.45) !important;
  font-size:11px !important;font-weight:950 !important;
}
.header-contact:hover{background:linear-gradient(135deg,#48f5d2,#31eb7f) !important;transform:translateY(-2px)}

/* Hero */
.mk-home-hero{
  min-height:calc(100vh - 0px) !important;
  padding:138px 0 42px !important;
  background:linear-gradient(125deg,#031d4d 0%,#063b86 48%,#07526a 100%) !important;
}
.mk-home-hero:before{
  background:
    radial-gradient(circle at 74% 45%,rgba(0,211,255,.17),transparent 34%),
    linear-gradient(90deg,rgba(1,22,55,.91) 0%,rgba(2,35,78,.66) 48%,rgba(2,45,69,.24) 100%),
    var(--mk-hero-img) center/cover no-repeat !important;
  opacity:.88 !important;
}
.mk-home-hero:after{
  background:linear-gradient(130deg,transparent 0 38%,rgba(76,215,255,.12) 39%,rgba(30,245,200,.04) 61%,transparent 62%) !important;
}
.mk-home-hero-inner{
  width:min(94%,1780px) !important;
  min-height:650px !important;
  grid-template-columns:minmax(0,1fr) minmax(500px,.96fr) !important;
  gap:45px !important;
}
.mk-home-kicker{
  color:#d8fbff !important;
  border-color:rgba(62,214,255,.48) !important;
  background:rgba(3,32,76,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.12);
}
.mk-home-hero h1{
  color:#fff !important;
  max-width:850px !important;
  font-size:clamp(52px,5.7vw,94px) !important;
  line-height:.92 !important;
  text-shadow:0 5px 30px rgba(0,0,0,.24);
}
.mk-home-hero h1 span,.mk-home-hero h1 em{
  background:linear-gradient(90deg,#24d8ff,#26f0cf,#45f58d);
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
}
.mk-home-hero p{
  color:rgba(255,255,255,.90) !important;
  max-width:680px !important;
}
.mk-home-btn.primary{
  background:linear-gradient(135deg,#20e7a5,#18d96c) !important;
  box-shadow:0 14px 32px rgba(0,224,145,.22),inset 0 1px 0 rgba(255,255,255,.40) !important;
}
.mk-home-btn.ghost{
  border-color:rgba(94,216,255,.56) !important;
  background:rgba(7,55,115,.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.mk-hero-trust{gap:32px !important}
.mk-hero-trust b{color:#fff !important}
.mk-hero-trust small{color:rgba(255,255,255,.72) !important}
.mk-home-hero-visual{
  min-height:500px !important;
  border:1px solid rgba(87,216,255,.48) !important;
  background:linear-gradient(145deg,rgba(39,192,255,.17),rgba(255,255,255,.04)) !important;
  box-shadow:0 35px 90px rgba(0,0,0,.36),0 0 45px rgba(0,194,255,.12) !important;
  transform:perspective(1400px) rotateY(-4deg) !important;
}
.mk-home-hero-visual:before{opacity:.78 !important;filter:saturate(1.08) contrast(1.02)}
.mk-hero-glass-card{
  background:linear-gradient(145deg,rgba(244,252,255,.92),rgba(225,244,247,.82)) !important;
  border:1px solid rgba(255,255,255,.76);
  box-shadow:0 22px 55px rgba(0,0,0,.28),inset 0 1px 0 #fff !important;
  color:#073d54 !important;
}
.mk-hero-glass-card strong{color:#063f56 !important}
.mk-hero-mini-grid i{
  background:linear-gradient(145deg,#fff,#e6f4f5) !important;
  border:1px solid rgba(20,135,180,.10);
  box-shadow:inset 0 1px #fff,0 8px 20px rgba(7,63,40,.10) !important;
}

/* Home sections continue same language */
.mk-home-services{background:#f7fbff !important}
.mk-home-topics{background:linear-gradient(180deg,#edf7ff,#f7fbff) !important}
.mk-home-heading>div>span,.mk-text-link{color:#0789c7 !important}
.mk-home-heading h2{color:#082d63 !important}
.mk-home-heading h2 em{color:#00a9d9 !important}
.mk-service-3d,.mk-topic-3d-grid a{
  border-color:rgba(8,83,142,.10) !important;
  background:linear-gradient(145deg,#fff,#edf7fb) !important;
  box-shadow:10px 14px 30px rgba(8,45,99,.08),inset 0 1px 0 #fff !important;
}
.mk-service-3d-icon{background:linear-gradient(145deg,#0b9cf0,#073c88) !important}
.mk-home-stats{background:linear-gradient(115deg,#041f51,#07589b,#087b80) !important}
.mk-home-final{background:#eef7fb !important}
.mk-final-card{background:linear-gradient(135deg,#04245b,#075da3 60%,#078b83) !important;box-shadow:0 24px 60px rgba(5,55,110,.22) !important}

/* Mobile: chuẩn kiểu app, không thu nhỏ desktop */
.mk-mobile-toggle{
  width:46px !important;height:46px !important;border-radius:15px !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(111,220,255,.35) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 18px rgba(0,0,0,.18);
}
.mk-mobile-toggle span{background:#fff !important}
.mk-mobile-menu{
  background:linear-gradient(145deg,rgba(3,22,58,.98),rgba(4,56,105,.98)) !important;
  backdrop-filter:blur(22px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(130%) !important;
}
.mk-mobile-menu-inner{
  width:calc(100% - 28px) !important;
  max-width:520px !important;
  padding:92px 0 28px !important;
  gap:10px !important;
}
.mk-mobile-menu-inner a{
  min-height:62px !important;
  padding:8px 12px !important;
  color:#fff !important;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.06)) !important;
  border:1px solid rgba(90,213,255,.22) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.mk-mobile-menu-inner .mk-mobile-menu-icon{width:46px !important;height:46px !important}
.mk-mobile-menu-inner .mk-mobile-call{
  background:linear-gradient(135deg,#20e7a5,#16c970) !important;
  border-color:rgba(255,255,255,.32) !important;
}

@media(max-width:1100px) and (min-width:901px){
  .desktop-nav > ul,.desktop-nav ul.menu,.mk-main-menu{gap:5px !important}
  .desktop-nav ul li a,.desktop-nav ul.menu li a,.mk-main-menu li a{font-size:13px !important;padding:5px 7px !important}
  .mk-menu-3d-icon{width:34px !important;height:34px !important}
  .header-contact{padding:11px 13px !important}
}
@media(max-width:1000px){
  .mk-home-hero{padding-top:120px !important}
  .mk-home-hero-inner{grid-template-columns:1fr !important;gap:22px !important}
  .mk-home-hero-visual{min-height:430px !important;transform:none !important}
}
@media(max-width:640px){
 .site-header{padding:7px 0 !important}
  .header-wrap{width:calc(100% - 20px) !important;min-height:58px !important}
  .brand-full-logo{width:43px !important;height:43px !important;flex-basis:43px !important}
  .brand-wordmark strong{font-size:15px !important}
  .brand-wordmark small{font-size:7px !important}
  .mk-home-hero{padding:92px 0 24px !important;min-height:auto !important}
  .mk-home-hero-inner{width:calc(100% - 24px) !important;min-height:auto !important}
  .mk-home-hero-copy{padding:18px 0 0 !important}
  .mk-home-kicker{font-size:9px !important;padding:8px 11px !important}
  .mk-home-hero h1{font-size:clamp(42px,13vw,58px) !important;line-height:.94 !important;margin:18px 0 16px !important}
  .mk-home-hero p{font-size:12px !important;line-height:1.55 !important}
  .mk-home-hero-actions{margin:22px 0 !important;gap:9px !important}
  .mk-home-btn{padding:13px 16px !important;font-size:10px !important}
  .mk-hero-trust{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:7px !important}
  .mk-hero-trust span{min-width:0 !important;grid-template-columns:20px 1fr !important;column-gap:4px !important}
  .mk-hero-trust b{font-size:9px !important}
  .mk-hero-trust small{font-size:7px !important}
  .mk-home-hero-visual{min-height:300px !important;border-radius:23px !important}
  .mk-hero-glass-card{left:11px !important;right:11px !important;bottom:11px !important;padding:14px !important;border-radius:18px !important}
  .mk-hero-glass-card span{font-size:9px !important}
  .mk-hero-glass-card strong{font-size:19px !important;line-height:1.05 !important;margin:7px 0 13px !important}
  .mk-hero-mini-grid{gap:6px !important}
  .mk-hero-mini-grid i{padding:8px 3px !important;font-size:17px !important;border-radius:12px !important}
  .mk-hero-mini-grid b{font-size:7px !important}
  .mk-home-services,.mk-home-topics,.mk-home-projects{padding:58px 0 !important}
  .mk-home-heading h2{font-size:38px !important}
  .mk-service-3d-grid,.mk-topic-3d-grid,.mk-home-project-grid{grid-template-columns:1fr !important}
  .mk-service-3d{min-height:205px !important}
  .mk-final-card{padding:28px 20px !important;border-radius:24px !important}
  .mk-final-card h2{font-size:39px !important}
}

/* ============================================================
   MINH KHANG — DARK NAVY HEADER / BRIGHT GLASS MENU v2.4
   Đồng bộ theo mẫu Header Navy Glass: nền xanh navy đậm,
   menu trắng sáng, icon kính nổi, CTA xanh ngọc.
   Chỉ tác động Header + Mobile Menu.
   ============================================================ */
.site-header{
  background:linear-gradient(135deg,#061d42 0%,#082d63 52%,#0a416f 100%) !important;
  border-bottom:1px solid rgba(86,220,255,.28) !important;
  box-shadow:0 8px 28px rgba(2,15,35,.30), inset 0 -1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:saturate(170%) blur(16px);
  -webkit-backdrop-filter:saturate(170%) blur(16px);
}
.site-header.is-scrolled{
  background:linear-gradient(135deg,#041936 0%,#07295a 55%,#083d67 100%) !important;
  box-shadow:0 10px 30px rgba(2,15,35,.38) !important;
}
.header-wrap{min-height:76px !important;}
.brand-lockup{filter:drop-shadow(0 5px 12px rgba(0,0,0,.22));}
.brand-wordmark strong{color:#fff !important;text-shadow:0 1px 8px rgba(0,0,0,.25);}
.brand-wordmark small{color:#43e6bb !important;text-shadow:0 1px 6px rgba(0,0,0,.20);}

.desktop-nav ul li a,
.desktop-nav ul.menu li a,
.mk-main-menu li a{
  color:#f8fcff !important;
  font-size:15px !important;
  font-weight:900 !important;
  min-height:50px !important;
  padding:7px 11px !important;
  text-shadow:0 1px 8px rgba(0,0,0,.24);
  border:1px solid transparent !important;
}
.desktop-nav ul li a:hover,
.desktop-nav ul li a:focus-visible,
.desktop-nav .current-menu-item > a,
.desktop-nav .current_page_item > a,
.mk-main-menu li a:hover,
.mk-main-menu li a:focus-visible{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(36,188,255,.20),rgba(26,242,184,.13)) !important;
  border-color:rgba(80,220,255,.46) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 9px 22px rgba(0,0,0,.28),0 0 20px rgba(0,190,255,.14) !important;
  transform:translateY(-2px);
}
.desktop-nav ul li a::after,
.desktop-nav ul.menu li a::after,
.mk-main-menu li a::after{
  background:linear-gradient(90deg,#39dfff,#43e6bb) !important;
  box-shadow:0 0 8px rgba(57,223,255,.55);
}

.mk-menu-3d-icon,
.mk-mobile-menu-icon{
  background:linear-gradient(145deg,#ffffff 0%,#e9f7fb 48%,#cfe8ee 100%) !important;
  color:#07528a !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:5px 7px 16px rgba(0,0,0,.26),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(8,45,99,.10) !important;
}
.desktop-nav a:hover .mk-menu-3d-icon,
.desktop-nav a:focus-visible .mk-menu-3d-icon,
.mk-main-menu a:hover .mk-menu-3d-icon,
.mk-main-menu a:focus-visible .mk-menu-3d-icon{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 10px 20px rgba(0,0,0,.30),0 0 16px rgba(57,223,255,.22),inset 0 1px 0 #fff !important;
}

.header-contact{
  background:linear-gradient(135deg,#4fe0a9 0%,#18d79a 48%,#11b87f 100%) !important;
  color:#032b24 !important;
  border:1px solid rgba(157,255,226,.75) !important;
  box-shadow:0 9px 24px rgba(0,214,154,.28),0 0 18px rgba(0,214,154,.16),inset 0 1px 0 rgba(255,255,255,.72) !important;
  font-weight:950 !important;
}
.header-contact:hover{
  background:linear-gradient(135deg,#70f2be,#21e5a7) !important;
  color:#032b24 !important;
  transform:translateY(-2px);
}

/* Mobile: vẫn giữ cùng hệ Navy, không dùng header trắng */
.mk-mobile-toggle{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.14);
}
.mk-mobile-toggle span{background:#fff !important;}
.mk-mobile-menu{
  background:linear-gradient(145deg,rgba(4,25,54,.98),rgba(7,45,88,.98)) !important;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.mk-mobile-menu-inner a{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(50,210,255,.06)) !important;
  border:1px solid rgba(95,218,255,.18) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.mk-mobile-menu-inner a:hover,
.mk-mobile-menu-inner a:focus-visible{
  background:linear-gradient(135deg,rgba(42,200,255,.20),rgba(28,235,174,.13)) !important;
  border-color:rgba(72,224,255,.45) !important;
}

@media(max-width:900px){
 .site-header{padding:8px 0 !important;}
  .header-wrap{min-height:64px !important;padding:0 14px !important;max-width:100% !important;}
  .brand-full-logo{width:42px !important;height:42px !important;}
  .brand-wordmark strong{font-size:15px !important;}
  .brand-wordmark small{font-size:8px !important;}
}

/* ============================================================
   MINH KHANG — BLUE NAVY GLASS MASTER PALETTE v2.5
   Đồng bộ toàn website theo mẫu: Navy đậm + Blue/Cyan + Emerald.
   ============================================================ */
:root{
  --mk-navy:#062b66;
  --mk-navy-deep:#031b46;
  --mk-blue:#0a56b5;
  --mk-cyan:#39dfff;
  --mk-emerald:#19e0a5;
  --mk-green:#19e0a5;
  --mk-green2:#39dfff;
  --mk-red:#ff4b57;
  --mk-bg:#061d42;
  --mk-text:#f4f9ff;
  --mk-line:rgba(86,214,255,.18);
}
html,body{background:#061d42 !important;color:#f4f9ff !important;}
body{background:linear-gradient(180deg,#061d42 0%,#062a63 48%,#031a40 100%) !important;}

/* Header */
.site-header{
  background:linear-gradient(135deg,#041b42 0%,#06347a 55%,#07518b 100%) !important;
  border-bottom:1px solid rgba(65,220,255,.38) !important;
  box-shadow:0 8px 30px rgba(0,10,35,.42),inset 0 -1px 0 rgba(255,255,255,.10) !important;
}
.site-header.is-scrolled{
  background:linear-gradient(135deg,#031735,#06285e 55%,#064675) !important;
}
.brand-wordmark strong{color:#fff !important;}
.brand-wordmark small{color:#46e9c0 !important;}
.desktop-nav ul li a,.desktop-nav ul.menu li a,.mk-main-menu li a{color:#f8fcff !important;}
.desktop-nav ul li a:hover,.desktop-nav ul.menu li a:hover,
.desktop-nav .current-menu-item>a,.desktop-nav .current_page_item>a,
.mk-main-menu li a:hover,.mk-main-menu li a:focus-visible{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(40,205,255,.22),rgba(30,230,180,.14)) !important;
  border-color:rgba(73,222,255,.48) !important;
  box-shadow:0 0 22px rgba(35,205,255,.16),0 10px 24px rgba(0,0,0,.28) !important;
}
.mk-menu-3d-icon,.mk-mobile-menu-icon{
  background:linear-gradient(145deg,#fff 0%,#eaf9ff 50%,#cbe9f2 100%) !important;
  color:#0755a0 !important;
}
.header-contact{
  background:linear-gradient(135deg,#4ce6b2,#16d89b 52%,#0db77d) !important;
  color:#032b25 !important;
}

/* Hero — replace old green palette completely */
.mk-home-hero{
  background:linear-gradient(120deg,#031b46 0%,#063d91 52%,#075f93 100%) !important;
}
.mk-home-hero:before{
  background:
    linear-gradient(90deg,rgba(2,20,55,.94) 0%,rgba(3,44,96,.78) 48%,rgba(3,77,105,.30) 100%),
    var(--mk-hero-img) center/cover no-repeat !important;
  opacity:.84 !important;
}
.mk-home-hero:after{
  background:linear-gradient(130deg,transparent 0 38%,rgba(62,222,255,.10) 39%,rgba(30,225,190,.03) 61%,transparent 62%) !important;
}
.mk-home-kicker{
  color:#c8fbff !important;
  border-color:rgba(71,220,255,.45) !important;
  background:rgba(11,75,135,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(40,210,255,.08) !important;
}
.mk-home-hero h1{color:#fff !important;text-shadow:0 5px 22px rgba(0,0,0,.18);}
.mk-home-hero h1 span,.mk-home-hero h1 em{
  background:linear-gradient(90deg,#52dfff 0%,#18e8c0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
}
.mk-home-hero p{color:rgba(244,251,255,.88) !important;}
.mk-home-btn.primary{
  background:linear-gradient(135deg,#21e7a5,#13c987) !important;
  color:#032b25 !important;
  box-shadow:0 15px 34px rgba(0,215,157,.24),inset 0 2px 0 rgba(255,255,255,.42) !important;
}
.mk-home-btn.ghost{border-color:rgba(82,220,255,.55) !important;background:rgba(8,72,137,.28) !important;color:#fff !important;}
.mk-hero-trust{color:#fff !important;}
.mk-hero-trust small{color:rgba(226,244,255,.68) !important;}
.mk-home-hero-visual{
  background:linear-gradient(145deg,rgba(62,208,255,.18),rgba(255,255,255,.03)) !important;
  border-color:rgba(82,220,255,.40) !important;
  box-shadow:0 35px 80px rgba(0,0,0,.34),0 0 35px rgba(35,194,255,.10) !important;
}
.mk-home-hero-visual:before{opacity:.72 !important;}
.mk-hero-glass-card{
  background:linear-gradient(145deg,rgba(9,57,107,.94),rgba(7,76,119,.82)) !important;
  border:1px solid rgba(95,225,255,.40) !important;
  color:#fff !important;
  box-shadow:0 20px 45px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.mk-hero-glass-card span{color:#43dfff !important;}
.mk-hero-glass-card strong{color:#fff !important;}
.mk-hero-glass-card strong::first-line{color:#fff;}
.mk-hero-mini-grid i{
  background:linear-gradient(145deg,rgba(28,111,178,.72),rgba(8,58,112,.88)) !important;
  color:#fff !important;
  border:1px solid rgba(91,221,255,.26) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.20) !important;
}
.mk-hero-mini-grid b{color:#fff !important;}

/* All following sections use the same visual language */
.mk-home-services,.mk-home-projects{background:linear-gradient(180deg,#061f49,#072e68) !important;}
.mk-home-topics{background:linear-gradient(180deg,#052657,#031b45) !important;}
.mk-home-stats{background:linear-gradient(115deg,#031a42,#064b94 58%,#087f83) !important;}
.mk-home-final{background:linear-gradient(180deg,#041d46,#03152f) !important;}
.mk-home-heading>div>span,.mk-text-link{color:#42dfff !important;}
.mk-home-heading h2{color:#fff !important;}
.mk-home-heading h2 em{color:#35e4bf !important;}
.mk-home-heading p{color:rgba(222,240,255,.72) !important;}
.mk-service-3d,.mk-topic-3d-grid a{
  background:linear-gradient(145deg,rgba(12,75,137,.88),rgba(5,43,91,.94)) !important;
  border-color:rgba(81,212,255,.18) !important;
  color:#fff !important;
  box-shadow:10px 16px 34px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.mk-service-3d h3,.mk-service-3d p,.mk-topic-3d-grid a b{color:#fff !important;}
.mk-service-3d p{color:rgba(222,240,255,.70) !important;}
.mk-service-3d small{color:#6ddfff !important;}
.mk-service-3d>b,.mk-topic-3d-grid i{color:#3ce5c0 !important;}
.mk-service-3d-icon{background:linear-gradient(145deg,#0ca9ef,#0750a1) !important;}
.mk-topic-3d-grid a span{
  background:linear-gradient(145deg,#fff,#d8f2f7) !important;
  box-shadow:6px 8px 16px rgba(0,0,0,.22) !important;
}
.mk-home-project{background:#03295c !important;box-shadow:0 18px 38px rgba(0,0,0,.25) !important;}
.mk-home-project small{color:#42e7c0 !important;}
.mk-final-card{
  background:linear-gradient(135deg,#03215a,#075fa7 60%,#078d82) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.28) !important;
}

/* Mobile stays in the same Navy/Cyan system */
.mk-mobile-menu{background:linear-gradient(145deg,rgba(3,20,52,.99),rgba(5,57,105,.99)) !important;}
.mk-mobile-menu-inner a{color:#fff !important;background:linear-gradient(135deg,rgba(28,126,194,.24),rgba(21,210,173,.10)) !important;border-color:rgba(79,218,255,.24) !important;}
.mk-mobile-menu-inner a:hover{background:linear-gradient(135deg,rgba(46,203,255,.28),rgba(28,232,177,.16)) !important;}

@media(max-width:900px){
 .site-header{background:linear-gradient(135deg,#041b42,#063779 60%,#07518b) !important;}
  .mk-home-hero{padding-top:110px !important;}
}
@media(max-width:640px){
  .mk-home-hero{padding-top:88px !important;background:linear-gradient(145deg,#031b46,#064b8e) !important;}
  .mk-home-hero h1{font-size:clamp(40px,12.5vw,56px) !important;}
  .mk-home-hero-visual{min-height:300px !important;}
  .mk-hero-glass-card{background:linear-gradient(145deg,rgba(5,54,103,.96),rgba(6,81,120,.91)) !important;}
  .mk-service-3d,.mk-topic-3d-grid a{background:linear-gradient(145deg,rgba(10,73,133,.92),rgba(5,39,84,.96)) !important;}
}

/* ============================================================
   MINH KHANG NAVY UNIFIED v2.8
   Mobile: 4-column app grid + header card theo mẫu tham chiếu.
   ============================================================ */
@media (max-width:640px){
  /* Mobile header: Navy frame + light glass card */
  .site-header,
  .site-header.is-scrolled{
    top:0 !important;
    padding:10px 0 14px !important;
    background:linear-gradient(180deg,#061d42 0%,#082f67 100%) !important;
    border-bottom:1px solid rgba(92,218,255,.38) !important;
    box-shadow:0 8px 26px rgba(0,18,48,.30) !important;
  }
  .header-wrap{
    width:calc(100% - 24px) !important;
    max-width:none !important;
    min-height:112px !important;
    padding:14px 16px !important;
    margin:0 auto !important;
    border-radius:28px !important;
    background:linear-gradient(135deg,rgba(247,252,255,.98),rgba(233,248,247,.94)) !important;
    border:1px solid rgba(255,255,255,.92) !important;
    box-shadow:0 12px 30px rgba(0,18,48,.25),inset 0 1px 0 #fff !important;
    box-sizing:border-box !important;
  }
  .brand-lockup{gap:10px !important;min-width:0 !important;}
  .brand-full-logo{
    width:70px !important;height:70px !important;flex:0 0 70px !important;
    filter:drop-shadow(0 7px 12px rgba(8,45,99,.20)) !important;
  }
  .brand-wordmark strong{
    color:#082d63 !important;font-size:21px !important;line-height:1 !important;
    letter-spacing:-.02em !important;
  }
  .brand-wordmark small{
    color:#10a96b !important;font-size:9px !important;margin-top:5px !important;
    letter-spacing:.02em !important;
  }
  .header-contact{display:none !important;}
  .mk-mobile-toggle{
    display:grid !important;place-items:center !important;gap:4px !important;
    width:58px !important;height:58px !important;flex:0 0 58px !important;
    margin-left:auto !important;border-radius:20px !important;
    border:1px solid rgba(255,255,255,.86) !important;
    background:linear-gradient(145deg,#ffffff,#eaf5f5) !important;
    box-shadow:8px 10px 22px rgba(8,45,99,.14),inset 0 1px 0 #fff !important;
  }
  .mk-mobile-toggle span{width:24px !important;height:2px !important;border-radius:99px !important;background:#082d63 !important;}

  /* Open mobile menu = iOS app launcher */
  .mk-mobile-menu{
    top:132px !important;
    left:12px !important;right:12px !important;
    width:auto !important;
    padding:16px !important;
    border-radius:26px !important;
    background:linear-gradient(145deg,rgba(5,31,72,.98),rgba(8,69,119,.97)) !important;
    border:1px solid rgba(93,221,255,.42) !important;
    box-shadow:0 24px 50px rgba(0,0,0,.30) !important;
  }
  .mk-mobile-menu-inner{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .mk-mobile-menu-inner a,
  .mk-mobile-menu-inner a.mk-mobile-call{
    min-width:0 !important;height:86px !important;padding:7px 3px !important;
    border-radius:18px !important;
    display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;gap:5px !important;
    text-align:center !important;color:#fff !important;
    background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(52,194,224,.08)) !important;
    border:1px solid rgba(122,225,255,.28) !important;
    box-shadow:0 7px 16px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  .mk-mobile-menu-inner .mk-mobile-menu-icon{
    width:44px !important;height:44px !important;flex:0 0 44px !important;
    border-radius:14px !important;font-size:21px !important;
    display:grid !important;place-items:center !important;
    background:linear-gradient(145deg,#fff,#e9f5f4) !important;
    border:1px solid rgba(255,255,255,.85) !important;
    box-shadow:5px 7px 14px rgba(0,0,0,.18),inset 0 1px 0 #fff !important;
  }
  .mk-mobile-menu-inner a > span:last-child{font-size:8.5px !important;font-weight:800 !important;line-height:1.05 !important;white-space:nowrap !important;}

  /* 4 x N iOS-style service grid: override older 1-column rules */
  .mk-home-services .mk-service-3d-grid,
  .mk-home-topics .mk-topic-3d-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px 5px !important;
    width:100% !important;
  }
  .mk-home-services .mk-service-3d,
  .mk-home-topics .mk-topic-3d-grid a{
    min-width:0 !important;
    width:auto !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    padding:6px 2px !important;
    border-radius:18px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    text-align:center !important;
    overflow:hidden !important;
  }
  .mk-home-services .mk-service-3d-icon,
  .mk-home-topics .mk-topic-3d-grid a span{
    width:48px !important;height:48px !important;flex:0 0 48px !important;
    border-radius:15px !important;font-size:25px !important;
  }
  .mk-home-services .mk-service-3d h3,
  .mk-home-topics .mk-topic-3d-grid a b{
    width:100% !important;margin:0 !important;padding:0 2px !important;
    font-size:8.5px !important;line-height:1.12 !important;
    white-space:normal !important;display:-webkit-box !important;
    -webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .mk-home-services .mk-service-3d small,
  .mk-home-services .mk-service-3d p,
  .mk-home-services .mk-service-3d>b,
  .mk-home-topics .mk-topic-3d-grid a i{display:none !important;}

  /* compact spacing so the app grid never becomes giant cards */
  .mk-home-services,.mk-home-topics{padding:34px 0 !important;}
  .mk-home-services .mk-home-wrap,.mk-home-topics .mk-home-wrap{width:calc(100% - 20px) !important;padding:0 !important;}
}

@media (max-width:390px){
  .header-wrap{min-height:102px !important;padding:12px 13px !important;border-radius:25px !important;}
  .brand-full-logo{width:62px !important;height:62px !important;flex-basis:62px !important;}
  .brand-wordmark strong{font-size:18px !important;}
  .brand-wordmark small{font-size:8px !important;}
  .mk-mobile-toggle{width:52px !important;height:52px !important;flex-basis:52px !important;border-radius:18px !important;}
  .mk-home-services .mk-service-3d-icon,.mk-home-topics .mk-topic-3d-grid a span{width:44px !important;height:44px !important;flex-basis:44px !important;font-size:23px !important;}
}

/* ============================================================
   MINH KHANG NAVY UNIFIED v2.8
   Đồng bộ Header desktop + mobile theo hệ Navy/Cyan.
   Không dùng thẻ Header trắng nữa.
   ============================================================ */
.site-header,
.site-header.is-scrolled{
  background:linear-gradient(135deg,#031a3d 0%,#062d66 55%,#074c78 100%) !important;
  border-bottom:1px solid rgba(76,213,255,.42) !important;
  box-shadow:0 10px 30px rgba(0,15,45,.28) !important;
}
.header-wrap{
  background:linear-gradient(135deg,rgba(7,39,82,.96),rgba(7,62,105,.92)) !important;
  border:1px solid rgba(82,213,255,.42) !important;
  box-shadow:0 12px 30px rgba(0,13,40,.28),inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.brand-wordmark strong{color:#f7fbff !important;}
.brand-wordmark small{color:#42e0bb !important;}
.desktop-nav ul li a,
.desktop-nav ul.menu li a,
.mk-main-menu li a{color:#f7fbff !important;text-shadow:0 1px 8px rgba(0,0,0,.22) !important;}
.desktop-nav ul li a:hover,
.desktop-nav ul.menu li a:hover,
.desktop-nav .current-menu-item>a,
.desktop-nav .current_page_item>a{
  color:#55e7ff !important;
  background:linear-gradient(135deg,rgba(55,205,255,.18),rgba(32,224,177,.10)) !important;
  border-color:rgba(83,222,255,.40) !important;
  box-shadow:0 0 18px rgba(42,208,255,.16),inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.mk-menu-3d-icon,
.mk-mobile-menu-icon{
  background:linear-gradient(145deg,#f9fdff,#d9edf2) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:0 7px 16px rgba(0,0,0,.22),inset 0 1px 0 #fff !important;
}
.header-contact{
  background:linear-gradient(135deg,#19d99b,#0ac7df) !important;
  color:#fff !important;
  box-shadow:0 9px 22px rgba(15,220,174,.28) !important;
}

@media(max-width:640px){
  .site-header,
  .site-header.is-scrolled{
    padding:10px 0 14px !important;
    background:linear-gradient(180deg,#031a3d 0%,#062d66 58%,#074b78 100%) !important;
  }
  .header-wrap{
    width:calc(100% - 24px) !important;
    min-height:112px !important;
    padding:14px 16px !important;
    border-radius:28px !important;
    background:linear-gradient(135deg,rgba(5,29,65,.98),rgba(7,63,108,.96)) !important;
    border:1px solid rgba(82,213,255,.48) !important;
    box-shadow:0 14px 34px rgba(0,10,35,.34),inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  .brand-full-logo{filter:drop-shadow(0 7px 14px rgba(0,0,0,.34)) !important;}
  .brand-wordmark strong{color:#fff !important;font-size:21px !important;}
  .brand-wordmark small{color:#45dfb9 !important;}
  .mk-mobile-toggle{
    background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(61,214,239,.08)) !important;
    border:1px solid rgba(111,225,255,.42) !important;
    box-shadow:7px 10px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.14) !important;
  }
  .mk-mobile-toggle span{background:#fff !important;box-shadow:0 0 8px rgba(90,224,255,.30) !important;}
  .mk-mobile-menu{top:132px !important;background:linear-gradient(145deg,rgba(3,25,59,.99),rgba(7,69,119,.98)) !important;}
}

@media(max-width:390px){
  .header-wrap{min-height:102px !important;background:linear-gradient(135deg,rgba(5,29,65,.98),rgba(7,63,108,.96)) !important;}
  .brand-wordmark strong{font-size:18px !important;}
}

/* ============================================================
   MINH KHANG NAVY GLASS v2.9.0 — REFERENCE MATCH
   Desktop + Mobile unified with the approved Navy/Cyan mockup.
   ============================================================ */
:root{
  --mk-ref-navy:#031a42;
  --mk-ref-blue:#063d91;
  --mk-ref-blue2:#075f93;
  --mk-ref-cyan:#42dfff;
  --mk-ref-cyan2:#12cfe9;
  --mk-ref-green:#18e8b5;
  --mk-ref-panel:rgba(7,45,94,.86);
}
body{background:#031a42 !important;}

/* Desktop header: compact futuristic glass bar */
@media(min-width:901px){
  .site-header,.site-header.is-scrolled{
    top:14px !important;left:14px !important;right:14px !important;
    padding:0 !important;background:transparent !important;border:0 !important;
    box-shadow:none !important;
  }
  .header-wrap{
    width:calc(100% - 28px) !important;max-width:1800px !important;min-height:96px !important;
    padding:10px 18px !important;border-radius:28px !important;
    background:linear-gradient(135deg,rgba(4,28,67,.97),rgba(5,57,111,.94)) !important;
    border:1px solid rgba(71,216,255,.52) !important;
    box-shadow:0 16px 42px rgba(0,9,30,.32),inset 0 1px 0 rgba(255,255,255,.13) !important;
    backdrop-filter:blur(18px) saturate(135%) !important;
  }
  .brand-lockup{gap:10px !important;flex:0 0 auto !important;}
  .brand-full-logo{width:58px !important;height:58px !important;}
  .brand-wordmark strong{font-size:18px !important;color:#fff !important;}
  .brand-wordmark small{font-size:9px !important;color:#43e4bd !important;}
  .desktop-nav{flex:1 1 auto !important;margin:0 18px !important;}
  .desktop-nav>ul,.desktop-nav ul.menu,.desktop-nav .mk-main-menu{
    display:flex !important;justify-content:center !important;gap:8px !important;
  }
  .desktop-nav ul li a,.desktop-nav ul.menu li a,.mk-main-menu li a{
    min-height:54px !important;padding:6px 13px !important;border-radius:14px !important;
    color:#f7fbff !important;font-size:15px !important;font-weight:850 !important;
    border:1px solid rgba(74,212,255,0) !important;
    background:transparent !important;display:flex !important;align-items:center !important;gap:9px !important;
    text-shadow:0 1px 8px rgba(0,0,0,.28) !important;
  }
  .desktop-nav ul li a:hover,.desktop-nav ul.menu li a:hover,
  .desktop-nav .current-menu-item>a,.desktop-nav .current_page_item>a{
    color:#55e7ff !important;
    background:linear-gradient(135deg,rgba(38,204,255,.19),rgba(21,231,184,.10)) !important;
    border-color:rgba(75,221,255,.45) !important;
    box-shadow:0 0 22px rgba(34,204,255,.17),inset 0 1px 0 rgba(255,255,255,.10) !important;
    transform:translateY(-1px);
  }
  .mk-menu-3d-icon{
    width:38px !important;height:38px !important;border-radius:12px !important;flex:0 0 38px !important;
    display:grid !important;place-items:center !important;font-size:18px !important;
    background:linear-gradient(145deg,#fafdff,#d9eff5) !important;color:#07579b !important;
    border:1px solid rgba(255,255,255,.88) !important;
    box-shadow:0 7px 16px rgba(0,0,0,.22),inset 0 1px 0 #fff !important;
  }
  .header-contact{
    flex:0 0 auto !important;border-radius:18px !important;padding:13px 22px !important;
    background:linear-gradient(135deg,#19e5a8,#0fc9e6) !important;color:#fff !important;
    border:1px solid rgba(255,255,255,.30) !important;
    box-shadow:0 10px 24px rgba(10,220,175,.25),inset 0 1px 0 rgba(255,255,255,.38) !important;
  }
}

/* Hero: match reference composition and palette */
.mk-home-hero{
  background:linear-gradient(120deg,#031b46 0%,#063d91 52%,#075f93 100%) !important;
}
.mk-home-hero-inner{min-height:680px !important;}
.mk-home-hero h1{max-width:820px !important;}
.mk-home-hero-visual{border-radius:34px !important;overflow:hidden !important;}
.mk-hero-glass-card{border-radius:26px !important;}

/* Mobile: one dark shell, compact header, 4-column iOS menu */
@media(max-width:900px){
  html,body{background:#031a42 !important;overflow-x:hidden !important;}
  .site-header,.site-header.is-scrolled{
    position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
    padding:8px 0 10px !important;background:linear-gradient(180deg,#031a42,#052e68) !important;
    border:0 !important;box-shadow:0 8px 28px rgba(0,8,28,.30) !important;
  }
  .header-wrap{
    width:calc(100% - 20px) !important;max-width:none !important;min-height:76px !important;
    margin:0 auto !important;padding:10px 12px !important;border-radius:25px !important;
    background:linear-gradient(135deg,rgba(6,38,82,.98),rgba(7,70,121,.96)) !important;
    border:1px solid rgba(78,218,255,.50) !important;
    box-shadow:0 14px 32px rgba(0,8,30,.34),inset 0 1px 0 rgba(255,255,255,.12) !important;
  }
  .brand-lockup{gap:8px !important;min-width:0 !important;}
  .brand-full-logo{width:52px !important;height:52px !important;flex:0 0 52px !important;}
  .brand-wordmark strong{font-size:18px !important;color:#fff !important;}
  .brand-wordmark small{font-size:8px !important;color:#45dfb9 !important;}
  .mk-mobile-toggle{
    display:grid !important;place-items:center !important;width:52px !important;height:52px !important;
    border-radius:17px !important;flex:0 0 52px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(42,207,238,.12)) !important;
    border:1px solid rgba(100,226,255,.55) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.16) !important;
  }
  .mk-mobile-toggle span{background:#fff !important;box-shadow:0 0 8px rgba(72,221,255,.45) !important;}
  .header-contact{display:none !important;}

  .mk-home{padding-top:94px !important;}
  .mk-home-hero{padding:30px 0 28px !important;min-height:0 !important;}
  .mk-home-hero-inner{width:calc(100% - 24px) !important;display:flex !important;flex-direction:column !important;min-height:0 !important;gap:22px !important;}
  .mk-home-hero-copy{padding:8px 2px 0 !important;order:1 !important;}
  .mk-home-kicker{font-size:9px !important;padding:8px 11px !important;}
  .mk-home-hero h1{font-size:clamp(39px,11.8vw,56px) !important;line-height:.94 !important;margin:18px 0 16px !important;letter-spacing:-.065em !important;}
  .mk-home-hero p{font-size:13px !important;line-height:1.45 !important;margin-bottom:0 !important;}
  .mk-home-hero-actions{margin:20px 0 !important;gap:10px !important;}
  .mk-home-btn{padding:13px 17px !important;font-size:10px !important;}
  .mk-hero-trust{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:7px !important;}
  .mk-hero-trust span{font-size:10px !important;min-width:0 !important;}
  .mk-hero-trust small{font-size:8px !important;display:block !important;}
  .mk-home-hero-visual{order:2 !important;width:100% !important;min-height:300px !important;border-radius:26px !important;}

  /* Open menu: 4 x 2 app launcher */
  .mk-mobile-menu{
    position:fixed !important;z-index:99 !important;top:94px !important;left:10px !important;right:10px !important;
    width:auto !important;height:auto !important;max-height:calc(100vh - 108px) !important;overflow:auto !important;
    border-radius:26px !important;padding:10px !important;
    background:linear-gradient(145deg,#031a42,#07558b) !important;
    border:1px solid rgba(73,220,255,.48) !important;
    box-shadow:0 22px 55px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter:blur(22px) !important;
  }
  .mk-mobile-menu-inner{
    width:100% !important;max-width:none !important;margin:0 !important;padding:10px !important;
    display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px 8px !important;
  }
  .mk-mobile-menu-inner a,
  .mk-mobile-menu-inner .mk-mobile-call{
    min-width:0 !important;margin:0 !important;padding:5px 2px 7px !important;
    display:flex !important;flex-direction:column !important;justify-content:flex-start !important;align-items:center !important;gap:6px !important;
    background:transparent !important;border:0 !important;box-shadow:none !important;color:#fff !important;text-align:center !important;
    border-radius:16px !important;
  }
  .mk-mobile-menu-inner a:hover,.mk-mobile-menu-inner a:focus-visible{background:rgba(62,215,255,.10) !important;}
  .mk-mobile-menu-inner .mk-mobile-menu-icon{
    width:56px !important;height:56px !important;flex:0 0 56px !important;border-radius:17px !important;
    display:grid !important;place-items:center !important;font-size:25px !important;
    background:linear-gradient(145deg,#f9fdff,#d6edf4) !important;color:#075aa1 !important;
    border:1px solid rgba(255,255,255,.9) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.25),0 0 14px rgba(53,212,255,.12),inset 0 1px 0 #fff !important;
  }
  .mk-mobile-menu-inner a>span:last-child{font-size:10px !important;line-height:1.15 !important;font-weight:800 !important;white-space:normal !important;}
  .mk-mobile-menu-inner .mk-mobile-call{grid-column:1 / -1 !important;flex-direction:row !important;justify-content:center !important;gap:8px !important;padding:13px !important;border-radius:17px !important;background:linear-gradient(135deg,#19e5a8,#0fc9e6) !important;box-shadow:0 10px 24px rgba(11,218,181,.22) !important;}
  .mk-mobile-menu-inner .mk-mobile-call .mk-mobile-menu-icon{width:34px !important;height:34px !important;flex-basis:34px !important;font-size:17px !important;box-shadow:none !important;}

  /* Service/topic sections: compact cards, 4-column iOS ecosystem for topics */
  .mk-home-services,.mk-home-topics,.mk-home-projects{padding:58px 0 !important;}
  .mk-home-wrap{width:calc(100% - 24px) !important;}
  .mk-home-heading{display:block !important;margin-bottom:20px !important;}
  .mk-home-heading h2{font-size:34px !important;}
  .mk-home-heading p{font-size:12px !important;}
  .mk-service-3d-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}
  .mk-service-3d{min-height:190px !important;padding:15px !important;border-radius:20px !important;}
  .mk-service-3d-icon{width:50px !important;height:50px !important;border-radius:15px !important;font-size:24px !important;}
  .mk-service-3d h3{font-size:15px !important;margin:17px 0 5px !important;}
  .mk-service-3d p{font-size:10px !important;line-height:1.45 !important;}
  .mk-topic-3d-grid{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:12px 7px !important;}
  .mk-topic-3d-grid a{min-height:0 !important;padding:4px 2px 7px !important;border-radius:15px !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;gap:6px !important;background:transparent !important;border:0 !important;box-shadow:none !important;text-align:center !important;}
  .mk-topic-3d-grid a span{width:54px !important;height:54px !important;flex:0 0 54px !important;border-radius:17px !important;font-size:25px !important;display:grid !important;place-items:center !important;}
  .mk-topic-3d-grid a b{font-size:9px !important;line-height:1.15 !important;color:#fff !important;}
  .mk-topic-3d-grid a i{display:none !important;}
  .mk-home-project-grid{grid-template-columns:1fr !important;gap:12px !important;}
  .mk-stats-grid{grid-template-columns:repeat(2,1fr) !important;}
  .mk-stat-quote{grid-column:1 / -1 !important;}
}

@media(max-width:390px){
  .header-wrap{min-height:72px !important;padding:8px 10px !important;}
  .brand-full-logo{width:48px !important;height:48px !important;flex-basis:48px !important;}
  .brand-wordmark strong{font-size:16px !important;}
  .brand-wordmark small{font-size:7px !important;}
  .mk-mobile-toggle{width:48px !important;height:48px !important;flex-basis:48px !important;}
  .mk-mobile-menu-inner{gap:12px 5px !important;}
  .mk-mobile-menu-inner .mk-mobile-menu-icon{width:51px !important;height:51px !important;flex-basis:51px !important;}
  .mk-topic-3d-grid a span{width:50px !important;height:50px !important;flex-basis:50px !important;}
}

/* ============================================================
   MINH KHANG NAVY REFERENCE v3.0 — CLEAN MASTER
   Fix: remove nested/white header and match approved mockup.
   Desktop + mobile use one Navy/Cyan glass language.
   ============================================================ */
:root{
  --mk-ref-navy:#031a42;
  --mk-ref-navy2:#062d66;
  --mk-ref-blue:#07508d;
  --mk-ref-cyan:#42dfff;
  --mk-ref-emerald:#19e5a8;
}

/* Never allow an old theme preset to paint the header white. */
.site-header,
.site-header.is-scrolled{
  position:fixed !important;
  z-index:1000 !important;
  background:linear-gradient(135deg,#031a42 0%,#062d66 55%,#07508d 100%) !important;
  border:0 !important;
  border-bottom:1px solid rgba(76,215,255,.34) !important;
  box-shadow:0 12px 34px rgba(0,9,35,.34),inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
}

/* Desktop = ONE dark glass bar, no white outer frame. */
@media (min-width:901px){
  .site-header,.site-header.is-scrolled{
    top:14px !important;
    left:14px !important;
    right:14px !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:30px !important;
    overflow:visible !important;
  }
  .site-header::before{border-radius:30px !important;}
  .header-wrap{
    width:100% !important;
    max-width:1800px !important;
    min-height:96px !important;
    margin:0 auto !important;
    padding:10px 18px !important;
    box-sizing:border-box !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .brand-lockup{flex:0 0 auto !important;gap:10px !important;}
  .brand-full-logo{width:58px !important;height:58px !important;flex:0 0 58px !important;}
  .brand-wordmark strong{color:#fff !important;font-size:18px !important;text-shadow:0 2px 10px rgba(0,0,0,.28) !important;}
  .brand-wordmark small{color:#43e4bd !important;font-size:9px !important;}
  .desktop-nav{flex:1 1 auto !important;margin:0 16px !important;min-width:0 !important;}
  .desktop-nav>ul,.desktop-nav ul.menu,.desktop-nav .mk-main-menu{
    display:flex !important;align-items:center !important;justify-content:center !important;
    gap:7px !important;margin:0 !important;padding:0 !important;
  }
  .desktop-nav ul li a,.desktop-nav ul.menu li a,.mk-main-menu li a{
    min-height:54px !important;
    padding:6px 12px !important;
    border-radius:14px !important;
    color:#f7fbff !important;
    background:transparent !important;
    border:1px solid transparent !important;
    font-size:15px !important;font-weight:850 !important;
    text-shadow:0 1px 8px rgba(0,0,0,.25) !important;
  }
  .desktop-nav ul li a:hover,.desktop-nav ul.menu li a:hover,
  .desktop-nav .current-menu-item>a,.desktop-nav .current_page_item>a,
  .mk-main-menu li a:hover,.mk-main-menu li a:focus-visible{
    color:#55e7ff !important;
    background:linear-gradient(135deg,rgba(45,205,255,.20),rgba(24,229,178,.11)) !important;
    border-color:rgba(78,220,255,.46) !important;
    box-shadow:0 0 20px rgba(35,205,255,.16),inset 0 1px 0 rgba(255,255,255,.10) !important;
    transform:translateY(-1px) !important;
  }
  .mk-menu-3d-icon{
    width:38px !important;height:38px !important;flex:0 0 38px !important;
    border-radius:12px !important;display:grid !important;place-items:center !important;
    background:linear-gradient(145deg,#fafdff,#d9eff5) !important;
    color:#07579b !important;border:1px solid rgba(255,255,255,.88) !important;
    box-shadow:0 7px 16px rgba(0,0,0,.25),inset 0 1px 0 #fff !important;
  }
  .header-contact{
    flex:0 0 auto !important;margin-left:8px !important;
    padding:13px 20px !important;border-radius:18px !important;
    background:linear-gradient(135deg,#19e5a8,#0fc9e6) !important;
    color:#fff !important;border:1px solid rgba(255,255,255,.30) !important;
    box-shadow:0 10px 24px rgba(10,220,175,.25),inset 0 1px 0 rgba(255,255,255,.38) !important;
    font-weight:950 !important;
  }
}

/* Mobile = compact Navy glass header, no white card. */
@media (max-width:900px){
  html,body{background:#031a42 !important;overflow-x:hidden !important;}
  .site-header,.site-header.is-scrolled{
    top:0 !important;left:0 !important;right:0 !important;width:100% !important;
    margin:0 !important;padding:8px 0 10px !important;border-radius:0 !important;
    background:linear-gradient(180deg,#031a42 0%,#062d66 100%) !important;
    border:0 !important;border-bottom:1px solid rgba(76,215,255,.30) !important;
    box-shadow:0 8px 28px rgba(0,8,28,.34) !important;
  }
  .site-header::before{display:none !important;}
  .header-wrap{
    width:calc(100% - 20px) !important;max-width:none !important;
    min-height:76px !important;margin:0 auto !important;padding:10px 12px !important;
    border-radius:24px !important;
    background:linear-gradient(135deg,rgba(5,29,65,.98),rgba(7,63,108,.96)) !important;
    border:1px solid rgba(82,213,255,.46) !important;
    box-shadow:0 14px 32px rgba(0,8,30,.34),inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  .brand-lockup{gap:8px !important;min-width:0 !important;}
  .brand-full-logo{width:52px !important;height:52px !important;flex:0 0 52px !important;}
  .brand-wordmark strong{font-size:18px !important;color:#fff !important;}
  .brand-wordmark small{font-size:8px !important;color:#45dfb9 !important;}
  .desktop-nav,.mk-main-menu,.header-contact{display:none !important;}
  .mk-mobile-toggle{
    display:grid !important;place-items:center !important;width:52px !important;height:52px !important;
    flex:0 0 52px !important;margin-left:auto !important;border-radius:17px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(42,207,238,.12)) !important;
    border:1px solid rgba(100,226,255,.55) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.16) !important;
  }
  .mk-mobile-toggle span{background:#fff !important;box-shadow:0 0 8px rgba(72,221,255,.45) !important;}
}

@media(max-width:390px){
  .header-wrap{min-height:72px !important;padding:8px 10px !important;border-radius:22px !important;}
  .brand-full-logo{width:48px !important;height:48px !important;flex-basis:48px !important;}
  .brand-wordmark strong{font-size:16px !important;}
  .brand-wordmark small{font-size:7px !important;}
  .mk-mobile-toggle{width:48px !important;height:48px !important;flex-basis:48px !important;}
}

/* =========================================================
   MINH KHANG LOGO / WORDMARK — FINAL REFERENCE MATCH
   Match the supplied Minh Khang branding reference image.
   ========================================================= */
.mk-footer-brand{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
}
.mk-footer-logo{
  width:108px !important;
  height:108px !important;
  min-width:108px !important;
  flex:0 0 108px !important;
  padding:0 !important;
  border-radius:50% !important;
  overflow:hidden !important;
  background:#fff !important;
  border:2px solid #69dcff !important;
  box-shadow:0 0 0 4px rgba(0,91,190,.45),0 0 22px rgba(0,188,255,.55) !important;
}
.mk-footer-logo img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:50% !important;
}
.mk-footer-brand-text strong,
.mk-footer-brand strong{
  display:block !important;
  margin:0 !important;
  color:#fff !important;
  font-size:30px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
}
.mk-footer-brand-text strong span{
  color:#ed263b !important;
}
.mk-footer-brand-text small,
.mk-footer-brand span{
  display:block !important;
  margin-top:7px !important;
  color:#48e1bc !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.045em !important;
}

/* Header branding follows the same proportions, but remains compact. */
.brand-full-logo{
  width:62px !important;
  height:62px !important;
  flex:0 0 62px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.30)) !important;
}
.brand-lockup{gap:12px !important;}
.brand-wordmark strong{
  font-size:22px !important;
  line-height:1.05 !important;
  letter-spacing:.005em !important;
  white-space:nowrap !important;
}
.brand-wordmark small{
  margin-top:5px !important;
  font-size:10px !important;
  line-height:1.1 !important;
  letter-spacing:.06em !important;
}

@media (max-width: 900px){
  .mk-footer-logo{
    width:92px !important;
    height:92px !important;
    min-width:92px !important;
    flex-basis:92px !important;
  }
  .mk-footer-brand-text strong,
  .mk-footer-brand strong{font-size:25px !important;}
  .mk-footer-brand-text small,
  .mk-footer-brand span{font-size:11px !important;}
  .brand-full-logo{width:58px !important;height:58px !important;flex-basis:58px !important;}
  .brand-wordmark strong{font-size:19px !important;}
  .brand-wordmark small{font-size:9px !important;}
}

@media (max-width: 600px){
  .mk-footer-brand{gap:11px !important;}
  .mk-footer-logo{
    width:78px !important;
    height:78px !important;
    min-width:78px !important;
    flex-basis:78px !important;
  }
  .mk-footer-brand-text strong,
  .mk-footer-brand strong{font-size:21px !important;}
  .mk-footer-brand-text small,
  .mk-footer-brand span{font-size:9px !important;margin-top:5px !important;}
  .brand-full-logo{width:54px !important;height:54px !important;flex-basis:54px !important;}
  .brand-wordmark strong{font-size:18px !important;}
  .brand-wordmark small{font-size:8px !important;}
}

/* =========================================================
   FINAL HEADER BRAND — match Minh Khang reference logo
   ========================================================= */
.site-header .brand-lockup{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex:0 0 auto !important;
}
.site-header .brand-full-logo{
  width:68px !important;
  height:68px !important;
  flex:0 0 68px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 0 10px rgba(45,211,255,.28)) drop-shadow(0 5px 10px rgba(0,0,0,.28)) !important;
}
.site-header .brand-wordmark{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:145px !important;
  line-height:1 !important;
}
.site-header .brand-wordmark strong{
  display:block !important;
  margin:0 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:23px !important;
  line-height:1 !important;
  letter-spacing:-.045em !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  color:#fff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.24) !important;
}
.site-header .brand-wordmark .mk-brand-minh{color:#fff !important}
.site-header .brand-wordmark .mk-brand-khang{color:#ff2538 !important}
.site-header .brand-wordmark small{
  display:block !important;
  margin-top:6px !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.045em !important;
  font-weight:900 !important;
  color:#31efc2 !important;
  white-space:nowrap !important;
  text-shadow:0 1px 8px rgba(0,0,0,.18) !important;
}
/* Keep brand from shrinking when navigation gets tight. */
@media (min-width:1201px){
  .site-header .header-wrap{width:min(96%,1840px) !important;padding:0 18px !important}
  .site-header .brand-full-logo{width:74px !important;height:74px !important;flex-basis:74px !important}
  .site-header .brand-wordmark strong{font-size:25px !important}
  .site-header .brand-wordmark small{font-size:10px !important}
}
@media (max-width:1200px) and (min-width:641px){
  .site-header .brand-full-logo{width:62px !important;height:62px !important;flex-basis:62px !important}
  .site-header .brand-wordmark strong{font-size:20px !important}
  .site-header .brand-wordmark small{font-size:9px !important}
}
@media (max-width:640px){
  .site-header .header-wrap{width:calc(100% - 24px) !important;min-height:68px !important;padding:0 8px !important}
  .site-header .brand-lockup{gap:10px !important}
  .site-header .brand-full-logo{width:54px !important;height:54px !important;flex-basis:54px !important}
  .site-header .brand-wordmark{min-width:0 !important}
  .site-header .brand-wordmark strong{font-size:18px !important;letter-spacing:-.04em !important}
  .site-header .brand-wordmark small{font-size:8px !important;margin-top:5px !important;letter-spacing:.035em !important}
}

/* v3.0.3 - Header logo + bright 3D menu refinement */
.site-header .header-wrap{
  position:relative !important;
  z-index:5 !important;
}
.site-header .brand-lockup{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  color:#fff !important;
  text-decoration:none !important;
}
.site-header .brand-full-logo{
  width:58px !important;
  height:58px !important;
  flex:0 0 58px !important;
  object-fit:contain !important;
  padding:4px !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,#ffffff 0%,#f4fbff 52%,#dceff7 100%) !important;
  border:2px solid rgba(255,255,255,.95) !important;
  box-shadow:0 0 0 3px rgba(41,205,255,.20),0 7px 18px rgba(0,0,0,.30),inset 0 2px 3px rgba(255,255,255,.95) !important;
}
.site-header .brand-wordmark strong{
  display:block !important;
  color:#fff !important;
  font-size:21px !important;
  line-height:1.05 !important;
  letter-spacing:.1px !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35) !important;
}
.site-header .brand-wordmark .mk-brand-minh{color:#fff !important}
.site-header .brand-wordmark .mk-brand-khang{color:#ff3346 !important}
.site-header .brand-wordmark small{
  display:block !important;
  margin-top:5px !important;
  color:#31f0c0 !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.35px !important;
}
.site-header .desktop-nav ul li a,
.site-header .desktop-nav ul.menu li a,
.site-header .mk-main-menu li a{
  color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
  font-weight:900 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.45) !important;
  filter:none !important;
}
.site-header .desktop-nav ul li a span:last-child,
.site-header .desktop-nav ul.menu li a span:last-child,
.site-header .mk-main-menu li a span:last-child{
  color:#ffffff !important;
  opacity:1 !important;
}
.site-header .mk-menu-3d-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;
  border-radius:13px !important;
  background:linear-gradient(145deg,#ffffff 0%,#f2fbff 45%,#c9e4f0 100%) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  color:#075b93 !important;
  font-size:18px !important;
  box-shadow:6px 8px 15px rgba(0,0,0,.28),inset 0 2px 3px rgba(255,255,255,.98),inset 0 -3px 7px rgba(70,150,190,.12) !important;
  text-shadow:none !important;
  transform:translateZ(0) !important;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease !important;
}
.site-header .desktop-nav li a:hover .mk-menu-3d-icon,
.site-header .desktop-nav li a:focus-visible .mk-menu-3d-icon,
.site-header .mk-main-menu li a:hover .mk-menu-3d-icon{
  transform:translateY(-3px) scale(1.04) !important;
  filter:brightness(1.04) !important;
  box-shadow:0 10px 24px rgba(0,214,255,.30),inset 0 2px 3px #fff !important;
}
.site-header .desktop-nav li a:hover,
.site-header .desktop-nav li a:focus-visible,
.site-header .mk-main-menu li a:hover,
.site-header .mk-main-menu li a:focus-visible{
  color:#ffffff !important;
  background:linear-gradient(135deg,rgba(28,151,255,.38),rgba(24,231,205,.22)) !important;
  border-color:rgba(91,224,255,.62) !important;
  box-shadow:0 10px 28px rgba(0,208,255,.20),inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.site-header .header-contact{
  color:#ffffff !important;
  opacity:1 !important;
  background:linear-gradient(135deg,#23f1c2,#19d86c) !important;
  box-shadow:0 8px 24px rgba(22,232,151,.32),inset 0 2px 0 rgba(255,255,255,.48),inset 0 -3px 8px rgba(0,120,70,.16) !important;
  text-shadow:0 1px 3px rgba(0,80,50,.25) !important;
}
.site-header .mk-mobile-toggle{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(211,237,247,.90)) !important;
  border:1px solid rgba(255,255,255,.98) !important;
  box-shadow:6px 9px 20px rgba(0,0,0,.28),inset 0 2px 4px rgba(255,255,255,.95),inset 0 -4px 8px rgba(50,130,170,.13) !important;
}
.site-header .mk-mobile-toggle span{background:#073a68 !important}
@media(max-width:640px){
  .site-header .brand-full-logo{width:50px !important;height:50px !important;flex-basis:50px !important}
  .site-header .brand-wordmark strong{font-size:17px !important}
  .site-header .brand-wordmark small{font-size:8px !important}
}

/* =========================================================
   v3.0.4 – iOS 4-COLUMN ACTION TILES
   Đồng bộ các nút tác vụ 4 cột trên desktop + mobile.
   ========================================================= */
.mk-home-services .mk-service-3d-grid,
.mk-home-topics .mk-topic-3d-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
}

.mk-home-services .mk-service-3d,
.mk-home-topics .mk-topic-3d-grid > a{
  position:relative;
  border-radius:24px !important;
  border:1px solid rgba(76,205,255,.20) !important;
  background:linear-gradient(145deg,rgba(12,78,142,.96),rgba(5,35,78,.98)) !important;
  color:#fff !important;
  box-shadow:10px 14px 28px rgba(3,20,50,.22),inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,filter .2s ease !important;
}
.mk-home-services .mk-service-3d:hover,
.mk-home-topics .mk-topic-3d-grid > a:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(47,229,255,.65) !important;
  box-shadow:0 18px 38px rgba(0,170,255,.20),inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.mk-home-services .mk-service-3d:active,
.mk-home-topics .mk-topic-3d-grid > a:active{
  transform:scale(.95) !important;
}

.mk-home-services .mk-service-3d-icon,
.mk-home-topics .mk-topic-3d-grid > a > span{
  background:linear-gradient(145deg,#ffffff,#dcecff) !important;
  color:#082d63 !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:7px 9px 18px rgba(0,0,0,.22),inset 0 2px 0 #fff !important;
}
.mk-home-services .mk-service-3d h3,
.mk-home-services .mk-service-3d p,
.mk-home-services .mk-service-3d>b,
.mk-home-topics .mk-topic-3d-grid > a > b{
  color:#fff !important;
}
.mk-home-topics .mk-topic-3d-grid > a > i{color:#3ce5c0 !important;}

@media(max-width:1000px){
  .mk-home-services .mk-service-3d-grid,
  .mk-home-topics .mk-topic-3d-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
  }
}

@media(max-width:640px){
  .mk-home-services .mk-service-3d-grid,
  .mk-home-topics .mk-topic-3d-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px 7px !important;
  }
  .mk-home-services .mk-service-3d,
  .mk-home-topics .mk-topic-3d-grid > a{
    min-width:0 !important;
    min-height:0 !important;
    padding:8px 3px 10px !important;
    border-radius:20px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    text-align:center !important;
  }
  .mk-home-services .mk-service-3d-icon,
  .mk-home-topics .mk-topic-3d-grid > a > span{
    width:52px !important;
    height:52px !important;
    flex:0 0 52px !important;
    border-radius:17px !important;
    font-size:24px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
  }
  .mk-home-services .mk-service-3d small,
  .mk-home-services .mk-service-3d p,
  .mk-home-services .mk-service-3d>b,
  .mk-home-topics .mk-topic-3d-grid > a > i{
    display:none !important;
  }
  .mk-home-services .mk-service-3d h3,
  .mk-home-topics .mk-topic-3d-grid > a > b{
    margin:0 !important;
    font-size:9px !important;
    line-height:1.18 !important;
    font-weight:850 !important;
    color:#fff !important;
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }
}

@media(max-width:380px){
  .mk-home-services .mk-service-3d-grid,
  .mk-home-topics .mk-topic-3d-grid{gap:10px 5px !important;}
  .mk-home-services .mk-service-3d,
  .mk-home-topics .mk-topic-3d-grid > a{padding:7px 2px 8px !important;}
  .mk-home-services .mk-service-3d-icon,
  .mk-home-topics .mk-topic-3d-grid > a > span{
    width:47px !important;height:47px !important;flex-basis:47px !important;border-radius:15px !important;font-size:22px !important;
  }
  .mk-home-services .mk-service-3d h3,
  .mk-home-topics .mk-topic-3d-grid > a > b{font-size:8px !important;}
}


/* ============================================================
   PERFORMANCE PATCH v3.0.5
   Keep iOS-like press feedback in CSS instead of JS pointer listeners.
   ============================================================ */
a.mk-ios-touch,button.mk-ios-touch,.mk-mobile-menu-inner a{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
a.mk-ios-touch:active,button.mk-ios-touch:active,.mk-mobile-menu-inner a:active{
  transform:scale(.965) translateY(1px) !important;
}
.mk-menu-3d-icon,.mk-mobile-menu-icon,.mk-service-3d-icon,.mk-topic-3d-grid a span{
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{scroll-behavior:auto !important;transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}

/* ============================================================
   MINH KHANG NAVY iOS PRO — v3.1.0
   FINAL DESKTOP/LAPTOP GRID + HEADER WIDTH FIX
   ============================================================ */

/* Prevent desktop header from overlapping or clipping its children */
.site-header,
.header-wrap,
.desktop-nav,
.mk-main-menu,
.mk-main-menu li,
.mk-main-menu li a{
  box-sizing:border-box;
}

.site-header{
  width:min(1840px,calc(100% - 48px)) !important;
  margin:12px auto 0 !important;
  overflow:visible !important;
}

.header-wrap{
  width:calc(100% - 44px) !important;
  max-width:none !important;
  min-height:82px !important;
  gap:16px !important;
}

.brand-lockup{
  flex:0 0 auto !important;
  width:245px !important;
  min-width:245px !important;
  gap:10px !important;
}

.brand-full-logo{
  width:54px !important;
  height:54px !important;
  flex:0 0 54px !important;
}

.brand-wordmark strong{
  font-size:18px !important;
  white-space:nowrap !important;
}

.desktop-nav{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin-left:0 !important;
}

.desktop-nav > ul,
.desktop-nav ul.menu,
.mk-main-menu{
  width:100% !important;
  min-width:0 !important;
  justify-content:center !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
}

.desktop-nav ul li,
.desktop-nav ul.menu li,
.mk-main-menu li{
  min-width:0 !important;
  flex:0 1 auto !important;
}

.desktop-nav ul li a,
.desktop-nav ul.menu li a,
.mk-main-menu li a{
  min-width:0 !important;
  min-height:48px !important;
  padding:6px 8px !important;
  gap:7px !important;
  font-size:13px !important;
  letter-spacing:-.02em !important;
}

.mk-menu-3d-icon{
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
  border-radius:12px !important;
}

.header-contact{
  flex:0 0 auto !important;
  margin-left:4px !important;
  white-space:nowrap !important;
  padding:12px 17px !important;
}

/* Laptop/desktop: service cards always fit the viewport */
.mk-home-services .mk-home-wrap,
.mk-home-topics .mk-home-wrap,
.mk-home-projects .mk-home-wrap{
  width:min(1440px,calc(100% - 48px)) !important;
  max-width:1440px !important;
  box-sizing:border-box !important;
}

.mk-home-services .mk-service-3d-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  width:100% !important;
  min-width:0 !important;
}

.mk-home-services .mk-service-3d{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:225px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

.mk-home-services .mk-service-3d h3,
.mk-home-services .mk-service-3d p{
  overflow-wrap:anywhere !important;
}

.mk-home-topics .mk-topic-3d-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  width:100% !important;
  min-width:0 !important;
}

.mk-home-topics .mk-topic-3d-grid a{
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Keep floating contact buttons inside the viewport */
.mk-floating-contact,
.mk-float-contact,
.mk-contact-float,
.mk-zalo-float,
.mk-call-float{
  max-width:calc(100vw - 18px) !important;
}

/* Tablet */
@media (max-width:1200px) and (min-width:901px){
  .site-header{width:calc(100% - 28px) !important;}
  .header-wrap{width:calc(100% - 28px) !important;gap:8px !important;}
  .brand-lockup{width:205px !important;min-width:205px !important;}
  .brand-full-logo{width:48px !important;height:48px !important;flex-basis:48px !important;}
  .desktop-nav > ul,.desktop-nav ul.menu,.mk-main-menu{gap:3px !important;}
  .desktop-nav ul li a,.desktop-nav ul.menu li a,.mk-main-menu li a{padding:5px 5px !important;font-size:12px !important;gap:5px !important;}
  .mk-menu-3d-icon{width:33px !important;height:33px !important;flex-basis:33px !important;}
  .header-contact{padding:10px 11px !important;font-size:10px !important;}
  .mk-home-services .mk-home-wrap,.mk-home-topics .mk-home-wrap,.mk-home-projects .mk-home-wrap{width:calc(100% - 36px) !important;}
}

/* Mobile remains the dedicated 4-column iOS grid */
@media (max-width:900px){
  .site-header{width:calc(100% - 14px) !important;}
  .header-wrap{width:calc(100% - 20px) !important;}
  .brand-lockup{width:auto !important;min-width:0 !important;}
  .desktop-nav{display:none !important;}
  .mk-home-services .mk-home-wrap,
  .mk-home-topics .mk-home-wrap,
  .mk-home-projects .mk-home-wrap{width:100% !important;max-width:none !important;}
}

@media (max-width:640px){
  .mk-home-services .mk-service-3d-grid,
  .mk-home-topics .mk-topic-3d-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

/* Remove accidental horizontal overflow from legacy fixed widths */
@media (min-width:901px){
  .mk-home-services,
  .mk-home-topics,
  .mk-home-projects{overflow-x:hidden !important;}
}

/* ============================================================
   FINAL SAFE LAYOUT OVERRIDE v3.2.0
   Fix legacy CSS collisions: header/menu overlap + clipped home text.
   ============================================================ */
html, body { max-width:100%; overflow-x:hidden !important; }

/* Header: one row, stable columns, no text overlap */
.site-header{
  position:relative !important;
  z-index:1000 !important;
  width:min(1840px, calc(100% - 48px)) !important;
  min-height:88px !important;
  margin:12px auto 0 !important;
  padding:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
.header-wrap{
  width:calc(100% - 40px) !important;
  max-width:none !important;
  min-height:88px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:245px minmax(0,1fr) 136px !important;
  align-items:center !important;
  gap:14px !important;
  box-sizing:border-box !important;
}
.brand-lockup{
  width:auto !important;
  min-width:0 !important;
  flex:none !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  overflow:hidden !important;
}
.brand-full-logo{
  width:56px !important;
  height:56px !important;
  flex:0 0 56px !important;
  object-fit:contain !important;
}
.brand-wordmark{min-width:0 !important; overflow:hidden !important;}
.brand-wordmark strong{
  font-size:18px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  color:#fff !important;
}
.brand-wordmark small{
  font-size:9px !important;
  white-space:nowrap !important;
  color:#35e7c1 !important;
}
.desktop-nav{
  display:block !important;
  min-width:0 !important;
  width:100% !important;
  margin:0 !important;
  overflow:visible !important;
}
.desktop-nav > ul,
.desktop-nav ul.menu,
.mk-main-menu{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:4px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  flex-wrap:nowrap !important;
}
.desktop-nav ul li,
.desktop-nav ul.menu li,
.mk-main-menu li{
  flex:1 1 0 !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.desktop-nav ul li a,
.desktop-nav ul.menu li a,
.mk-main-menu li a{
  width:100% !important;
  min-width:0 !important;
  min-height:48px !important;
  padding:5px 4px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  border:1px solid rgba(87,203,255,.12) !important;
  border-radius:14px !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.desktop-nav ul li a > span:last-child,
.desktop-nav ul.menu li a > span:last-child,
.mk-main-menu li a > span:last-child{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.mk-menu-3d-icon{
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
  border-radius:12px !important;
  font-size:16px !important;
}
.header-contact{
  width:136px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:12px 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  font-size:10px !important;
  box-sizing:border-box !important;
}

/* Never let the homepage copy be clipped by legacy fixed widths */
.mk-home,
.mk-home section,
.mk-home-hero,
.mk-home-hero-inner,
.mk-home-hero-copy,
.mk-home-services,
.mk-home-topics,
.mk-home-projects,
.mk-home-final{
  box-sizing:border-box !important;
  max-width:100% !important;
}
.mk-home-hero-inner{
  width:min(1440px, calc(100% - 56px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.mk-home-hero-copy{min-width:0 !important; overflow:visible !important;}
.mk-home-hero h1,
.mk-home-hero p,
.mk-home-heading h2,
.mk-final-card h2{
  overflow:visible !important;
  max-width:100% !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* Desktop grids: fit inside viewport */
@media (min-width:1201px){
  .mk-home-services .mk-service-3d-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  .mk-home-topics .mk-topic-3d-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}
@media (min-width:901px) and (max-width:1200px){
  .site-header{width:calc(100% - 24px) !important;}
  .header-wrap{width:calc(100% - 24px) !important;grid-template-columns:205px minmax(0,1fr) 118px !important;gap:7px !important;}
  .brand-full-logo{width:48px !important;height:48px !important;flex-basis:48px !important;}
  .brand-wordmark strong{font-size:16px !important;}
  .brand-wordmark small{font-size:8px !important;}
  .desktop-nav ul li a,.desktop-nav ul.menu li a,.mk-main-menu li a{font-size:11px !important;gap:3px !important;padding:4px 2px !important;}
  .mk-menu-3d-icon{width:31px !important;height:31px !important;flex-basis:31px !important;font-size:14px !important;}
  .header-contact{width:118px !important;font-size:9px !important;padding:10px 5px !important;}
  .mk-home-services .mk-service-3d-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .mk-home-topics .mk-topic-3d-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}

/* Mobile: dedicated header + 4-column launcher */
@media (max-width:900px){
  .site-header{width:calc(100% - 14px) !important;min-height:72px !important;margin:7px auto 0 !important;border-radius:22px !important;}
  .header-wrap{width:calc(100% - 20px) !important;min-height:72px !important;display:flex !important;gap:8px !important;}
  .brand-lockup{flex:1 1 auto !important;width:auto !important;min-width:0 !important;}
  .brand-full-logo{width:48px !important;height:48px !important;flex-basis:48px !important;}
  .brand-wordmark strong{font-size:16px !important;}
  .brand-wordmark small{font-size:8px !important;}
  .desktop-nav{display:none !important;}
  .header-contact{display:none !important;}
  .mk-mobile-toggle{display:flex !important;flex:0 0 44px !important;width:44px !important;height:44px !important;}
  .mk-home-hero-inner{width:calc(100% - 24px) !important;grid-template-columns:1fr !important;}
  .mk-home-hero-copy{padding:24px 0 !important;}
  .mk-home-hero h1{font-size:clamp(42px,12vw,64px) !important;}
  .mk-home-hero p{font-size:14px !important;}
  .mk-home-services .mk-service-3d-grid,
  .mk-home-topics .mk-topic-3d-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px !important;}
  .mk-home-services .mk-service-3d,
  .mk-home-topics .mk-topic-3d-grid a{min-width:0 !important;overflow:hidden !important;}
  .mk-home-topics .mk-topic-3d-grid a{min-height:92px !important;padding:8px 5px !important;display:flex !important;flex-direction:column !important;justify-content:center !important;text-align:center !important;gap:5px !important;}
  .mk-home-topics .mk-topic-3d-grid a span{width:48px !important;height:48px !important;flex:0 0 48px !important;border-radius:15px !important;font-size:22px !important;}
  .mk-home-topics .mk-topic-3d-grid a b{font-size:9px !important;line-height:1.1 !important;max-width:100% !important;}
  .mk-home-topics .mk-topic-3d-grid a i{display:none !important;}
}
@media (max-width:390px){
  .brand-full-logo{width:44px !important;height:44px !important;flex-basis:44px !important;}
  .brand-wordmark strong{font-size:14px !important;}
  .brand-wordmark small{font-size:7px !important;}
  .mk-home-services .mk-service-3d-grid,.mk-home-topics .mk-topic-3d-grid{gap:6px !important;}
}


/* =========================================================
   MINH KHANG FOOTER PATCH - 4 CONTACTS / RESPONSIVE LAYOUT
   ========================================================= */
#colophon.mk-footer{
  height:auto!important;
  min-height:0!important;
  padding:28px 0 18px!important;
  overflow:visible!important;
}
#colophon .mk-footer-wrap{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(210px,.8fr) minmax(390px,1.35fr)!important;
  gap:26px!important;
  width:92%!important;
  max-width:1500px!important;
  height:auto!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:30px 28px!important;
  align-items:center!important;
}
#colophon .mk-footer-main,
#colophon .mk-footer-col{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
#colophon .mk-footer-main{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important}
#colophon .mk-footer-brand{display:flex!important;flex-direction:row!important;align-items:center!important;gap:16px!important;width:100%!important;min-width:0!important}
#colophon .mk-footer-logo{flex:0 0 88px!important;width:88px!important;height:88px!important;min-width:88px!important}
#colophon .mk-footer-brand-text{flex:1 1 auto!important;min-width:0!important}
#colophon .mk-footer-brand-text strong{font-size:28px!important;line-height:1.1!important}
#colophon .mk-footer-brand-text small{font-size:13px!important;line-height:1.3!important}
#colophon .mk-footer-desc{max-width:100%!important;width:100%!important;overflow-wrap:normal!important;word-break:normal!important}
#colophon .mk-footer-contact{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important}
#colophon .mk-footer-contact-list{display:flex!important;flex-direction:column!important;gap:8px!important;width:100%!important}
#colophon .mk-footer-contact-card{width:100%!important;min-width:0!important;max-width:none!important;min-height:56px!important;margin:0 0 8px!important;padding:8px 10px!important;gap:10px!important;box-sizing:border-box!important}
#colophon .mk-footer-contact-list .mk-footer-contact-card{margin:0!important}
#colophon .mk-contact-icon{flex:0 0 38px!important;width:38px!important;height:38px!important;background:rgba(255,255,255,.94)!important;color:#082d63!important}
#colophon .mk-contact-info{display:block!important;flex:1 1 auto!important;min-width:0!important}
#colophon .mk-footer-contact-card small{font-size:8px!important;line-height:1.35!important;color:#c8def4!important}
#colophon .mk-footer-contact-card strong{font-size:12px!important;line-height:1.35!important;color:#fff!important;overflow-wrap:anywhere!important}
#colophon .mk-footer-contact-card strong a{color:inherit!important;text-decoration:none!important}
#colophon .mk-contact-actions{display:flex!important;align-items:center!important;gap:6px!important;flex:0 0 auto!important}
#colophon .mk-contact-call,#colophon .mk-contact-zalo{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:38px!important;height:34px!important;padding:0 9px!important;
  border:1px solid #00d6b0!important;border-radius:9px!important;
  background:#082d63!important;color:#fff!important;font-size:11px!important;
  font-weight:800!important;text-decoration:none!important;line-height:1!important;
}
#colophon .mk-contact-call{min-width:32px!important;font-size:15px!important}
#colophon .mk-footer-contact-card.hotline{border-color:rgba(0,214,176,.65)!important;background:rgba(18,68,119,.88)!important}
#colophon .mk-footer-contact-card.email{margin-top:10px!important}
#colophon .mk-footer-contact-card.location{margin-bottom:0!important}
#colophon .mk-footer-bottom{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
  width:92%!important;max-width:1500px!important;height:auto!important;min-height:40px!important;
  margin:14px auto 0!important;padding:12px 0 0!important;
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  box-sizing:border-box!important;
}
@media(max-width:1100px){
  #colophon .mk-footer-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  #colophon .mk-footer-main{grid-column:1/-1!important}
  #colophon .mk-footer-contact{grid-column:1/-1!important}
}
@media(max-width:650px){
  #colophon .mk-footer-wrap{grid-template-columns:minmax(0,1fr)!important;width:calc(100% - 24px)!important;padding:24px 16px!important;gap:24px!important;border-radius:20px!important}
  #colophon .mk-footer-main,#colophon .mk-footer-contact,#colophon .mk-footer-nav-col{grid-column:auto!important}
  #colophon .mk-footer-logo{flex-basis:70px!important;width:70px!important;height:70px!important;min-width:70px!important}
  #colophon .mk-footer-brand-text strong{font-size:23px!important}
  #colophon .mk-footer-brand-text small{font-size:11px!important}
  #colophon .mk-footer-bottom{width:calc(100% - 30px)!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important}
}


/* MINH KHANG: FOUR EQUAL FOOTER COLUMNS */
#colophon.mk-footer-4col{
  height:auto!important;min-height:0!important;padding:24px 0 16px!important;
  overflow:visible!important;box-sizing:border-box!important;
}
#colophon.mk-footer-4col .mk-footer-wrap{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:22px!important;width:96%!important;max-width:1800px!important;
  height:auto!important;min-height:0!important;margin:0 auto!important;
  padding:28px 24px!important;align-items:start!important;box-sizing:border-box!important;
  border:1px solid rgba(0,214,190,.65)!important;border-radius:24px!important;
}
#colophon.mk-footer-4col .mk-footer-col{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  width:auto!important;min-width:0!important;max-width:none!important;
  margin:0!important;padding:0 0 0 18px!important;box-sizing:border-box!important;
  border-left:1px solid rgba(50,190,220,.16)!important;
}
#colophon.mk-footer-4col .mk-footer-col:first-child{border-left:0!important;padding-left:0!important}
#colophon.mk-footer-4col .mk-footer-col h3{margin:0 0 12px!important;font-size:20px!important;line-height:1.3!important}
#colophon.mk-footer-4col .mk-footer-heading-line{margin:0 0 14px!important;width:72px!important;height:5px!important}
#colophon.mk-footer-4col .mk-footer-brand-card{
  display:flex!important;align-items:center!important;gap:14px!important;width:100%!important;
  min-height:76px!important;margin:0 0 10px!important;padding:10px 12px!important;
  border:1px solid rgba(0,214,190,.55)!important;border-radius:17px!important;
  background:rgba(10,65,120,.72)!important;box-sizing:border-box!important;
}
#colophon.mk-footer-4col .mk-footer-brand-card .mk-footer-logo{
  flex:0 0 86px!important;width:86px!important;height:86px!important;min-width:86px!important;
}
#colophon.mk-footer-4col .mk-footer-brand-card .mk-footer-brand-text{min-width:0!important}
#colophon.mk-footer-4col .mk-footer-desc-card{min-height:100px!important}
#colophon.mk-footer-4col .mk-footer-desc-card p{margin:0!important;color:#d8e8f8!important;font-size:14px!important;line-height:1.5!important}
#colophon.mk-footer-4col .mk-footer-feature{min-height:68px!important}
#colophon.mk-footer-4col .mk-footer-feature span{display:flex!important;flex-direction:column!important;gap:3px!important}
#colophon.mk-footer-4col .mk-footer-feature strong{color:#fff!important;font-size:14px!important}
#colophon.mk-footer-4col .mk-footer-feature small{color:#b9d5ec!important;font-size:12px!important}
#colophon.mk-footer-4col .mk-footer-links{display:flex!important;flex-direction:column!important;gap:10px!important}
#colophon.mk-footer-4col .mk-footer-links a{
  display:flex!important;align-items:center!important;gap:10px!important;
  width:100%!important;min-height:58px!important;margin:0!important;padding:8px 12px!important;
  box-sizing:border-box!important;border-radius:14px!important;
}
#colophon.mk-footer-4col .mk-footer-links a b{flex:0 0 42px!important;width:42px!important;height:42px!important}
#colophon.mk-footer-4col .mk-footer-links a span{flex:1 1 auto!important;min-width:0!important}
#colophon.mk-footer-4col .mk-footer-contact-list{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important}
#colophon.mk-footer-4col .mk-footer-contact-card{
  display:flex!important;align-items:center!important;gap:10px!important;
  width:100%!important;min-width:0!important;max-width:none!important;
  min-height:76px!important;margin:0 0 10px!important;padding:10px 11px!important;
  box-sizing:border-box!important;border-radius:16px!important;
}
#colophon.mk-footer-4col .mk-contact-icon{
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 48px!important;width:48px!important;height:48px!important;
}
#colophon.mk-footer-4col .mk-contact-info{display:block!important;flex:1 1 auto!important;min-width:0!important}
#colophon.mk-footer-4col .mk-footer-contact-card small{display:block!important;font-size:10px!important;line-height:1.35!important}
#colophon.mk-footer-4col .mk-footer-contact-card strong{display:block!important;font-size:13px!important;line-height:1.4!important;overflow-wrap:anywhere!important}
#colophon.mk-footer-4col .mk-contact-actions{display:flex!important;flex:0 0 auto!important;align-items:center!important;gap:6px!important}
#colophon.mk-footer-4col .mk-contact-call,#colophon.mk-footer-4col .mk-contact-zalo{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:42px!important;min-width:42px!important;height:42px!important;padding:0 7px!important;
  border:1px solid #00d6b0!important;border-radius:11px!important;background:#0068d9!important;
  color:#fff!important;font-size:12px!important;font-weight:800!important;text-decoration:none!important;
  box-sizing:border-box!important;
}
#colophon.mk-footer-4col .mk-contact-call{background:#13b98b!important;font-size:17px!important}
#colophon.mk-footer-4col .mk-footer-contact-card.email,
#colophon.mk-footer-4col .mk-footer-contact-card.location,
#colophon.mk-footer-4col .mk-footer-contact-card.info-hotline,
#colophon.mk-footer-4col .mk-footer-contact-card.copyright{margin-bottom:10px!important}
#colophon.mk-footer-4col .mk-footer-bottom{
  position:relative!important;inset:auto!important;display:flex!important;justify-content:space-between!important;
  align-items:center!important;width:96%!important;max-width:1800px!important;height:auto!important;
  min-height:42px!important;margin:12px auto 0!important;padding:10px 0 0!important;box-sizing:border-box!important;
}
@media(max-width:1100px){
  #colophon.mk-footer-4col .mk-footer-wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #colophon.mk-footer-4col .mk-footer-col:nth-child(3){border-left:0!important;padding-left:0!important}
}
@media(max-width:620px){
  #colophon.mk-footer-4col .mk-footer-wrap{grid-template-columns:minmax(0,1fr)!important;width:calc(100% - 20px)!important;padding:22px 14px!important;gap:22px!important}
  #colophon.mk-footer-4col .mk-footer-col{border-left:0!important;padding-left:0!important}
  #colophon.mk-footer-4col .mk-footer-bottom{width:calc(100% - 24px)!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
}


/* BALANCED ROWS - preserve Minh Khang colors, borders, glow and hover effects */
#colophon.mk-footer-4col .mk-footer-wrap{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:22px!important;
}
#colophon.mk-footer-4col .mk-footer-col{
  height:100%!important;
  min-height:0!important;
}
#colophon.mk-footer-4col .mk-footer-links a{
  min-height:76px!important;
  height:76px!important;
  margin:0!important;
}
#colophon.mk-footer-4col .mk-footer-links{
  gap:10px!important;
}
#colophon.mk-footer-4col .mk-footer-contact-list{
  gap:10px!important;
}
#colophon.mk-footer-4col .mk-footer-contact-list .mk-footer-contact-card{
  height:76px!important;
  min-height:76px!important;
  margin:0!important;
}
#colophon.mk-footer-4col .mk-footer-info-col > .mk-footer-contact-card{
  height:76px!important;
  min-height:76px!important;
  margin:0 0 10px!important;
}
#colophon.mk-footer-4col .mk-footer-info-col > .mk-footer-contact-card:last-child{
  margin-bottom:0!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-brand-card{
  height:76px!important;
  min-height:76px!important;
  margin:0 0 10px!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-brand-card:first-of-type{
  height:92px!important;
  min-height:92px!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-desc-card{
  height:92px!important;
  min-height:92px!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-feature{
  height:76px!important;
  min-height:76px!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-brand-card:last-child{
  margin-bottom:0!important;
}
#colophon.mk-footer-4col .mk-footer-contact-card .mk-contact-info{
  overflow:hidden!important;
}
#colophon.mk-footer-4col .mk-footer-contact-card strong{
  overflow-wrap:anywhere!important;
}
@media(max-width:1100px){
  #colophon.mk-footer-4col .mk-footer-wrap{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:620px){
  #colophon.mk-footer-4col .mk-footer-wrap{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #colophon.mk-footer-4col .mk-footer-links a{
    height:64px!important;min-height:64px!important;
  }
}


/* FINAL CTA CONTACTS - retain navy/teal gradient and soft glow */
.mk-home-final{background:#061a3a!important;padding:70px 0!important}
.mk-final-card-contacts{
  grid-template-columns:1.05fr .95fr!important;align-items:center!important;
  gap:34px!important;padding:42px 48px!important;
  background:linear-gradient(115deg,#082d63 0%,#075b91 58%,#078b82 100%)!important;
  border:1px solid rgba(0,220,195,.38)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.24),0 0 32px rgba(0,190,190,.10)!important;
}
.mk-final-card-contacts .mk-final-message h2{font-size:clamp(38px,5vw,68px)!important;line-height:1.02!important}
.mk-final-card-contacts .mk-final-message h2 em{color:#a8ff27!important}
.mk-final-contact-area{min-width:0!important}
.mk-final-contact-area .mk-final-intro{margin:0 0 16px!important;color:#d5e8fa!important;font-size:15px!important;line-height:1.55!important}
.mk-final-contact-area .mk-final-intro strong{color:#fff!important;font-size:13px!important;font-weight:600!important}
.mk-final-contact-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.mk-final-contact{
  min-width:0!important;min-height:64px!important;padding:10px 12px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
  border:1px solid rgba(0,224,194,.55)!important;border-radius:14px!important;
  background:rgba(5,37,83,.48)!important;color:#fff!important;
  transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease!important;
}
.mk-final-contact:hover{transform:translateY(-3px)!important;background:rgba(8,55,105,.85)!important;border-color:#21e6c3!important;box-shadow:0 10px 24px rgba(0,0,0,.18)!important}
.mk-final-contact-copy{display:flex!important;flex-direction:column!important;min-width:0!important;gap:2px!important}
.mk-final-contact-copy small{font-size:9px!important;letter-spacing:.04em!important;color:#b8d8ef!important;line-height:1.25!important}
.mk-final-contact-copy b{font-size:11px!important;color:#dceeff!important;line-height:1.2!important}
.mk-final-contact-copy strong{font-size:15px!important;color:#fff!important;line-height:1.3!important;white-space:nowrap!important}
.mk-final-contact-actions{display:flex!important;align-items:center!important;gap:5px!important;flex:0 0 auto!important}
.mk-final-contact-actions a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:34px!important;height:34px!important;padding:0 5px!important;border-radius:10px!important;
  border:1px solid rgba(0,235,197,.75)!important;background:#0875d1!important;
  color:#fff!important;font-size:11px!important;font-weight:800!important;text-decoration:none!important;
  transition:filter .2s ease,transform .2s ease!important;
}
.mk-final-contact-actions a:first-child{background:#12b98b!important;font-size:16px!important}
.mk-final-contact-actions a:hover{filter:brightness(1.15)!important;transform:scale(1.05)!important}
@media(max-width:900px){
 .mk-final-card-contacts{grid-template-columns:1fr!important;padding:32px!important;gap:22px!important}
}
@media(max-width:560px){
 .mk-home-final{padding:36px 0!important}
 .mk-final-card-contacts{padding:24px 18px!important;border-radius:22px!important}
 .mk-final-card-contacts .mk-final-message h2{font-size:clamp(34px,10vw,48px)!important}
 .mk-final-contact-grid{grid-template-columns:1fr!important}
 .mk-final-contact{min-height:62px!important}
}


/* COMPACT FOOTER ROWS - preserve existing colors and motion */
#colophon.mk-footer .mk-footer-wrap{
  height:auto!important;
  min-height:0!important;
  padding:28px 24px!important;
  align-items:start!important;
  column-gap:22px!important;
}
#colophon.mk-footer .mk-footer-col h3{
  margin:0 0 12px!important;
  font-size:18px!important;
  line-height:1.25!important;
}
#colophon.mk-footer .mk-footer-heading-line{
  margin:0 0 12px!important;
}
#colophon.mk-footer .mk-footer-links{gap:7px!important}
#colophon.mk-footer .mk-footer-links a{
  height:auto!important;
  min-height:52px!important;
  padding:7px 9px!important;
  gap:8px!important;
  font-size:14px!important;
  line-height:1.25!important;
}
#colophon.mk-footer .mk-footer-links a b{
  width:34px!important;height:34px!important;flex:0 0 34px!important;
}
#colophon.mk-footer .mk-footer-contact-card{
  min-height:58px!important;
  height:auto!important;
  margin:0 0 8px!important;
  padding:7px 9px!important;
  gap:9px!important;
  border-radius:13px!important;
}
#colophon.mk-footer .mk-footer-contact-card:last-child{margin-bottom:0!important}
#colophon.mk-footer .mk-contact-icon{
  width:38px!important;height:38px!important;flex:0 0 38px!important;
}
#colophon.mk-footer .mk-footer-contact-card small{
  font-size:9px!important;line-height:1.2!important;margin-bottom:2px!important;
}
#colophon.mk-footer .mk-footer-contact-card strong{
  font-size:13px!important;line-height:1.3!important;
}
#colophon.mk-footer .mk-footer-brand{gap:10px!important}
#colophon.mk-footer .mk-footer-logo{
  width:76px!important;height:76px!important;min-width:76px!important;flex:0 0 76px!important;
}
#colophon.mk-footer .mk-footer-brand-text strong{font-size:23px!important;line-height:1.1!important}
#colophon.mk-footer .mk-footer-brand-text small{font-size:11px!important}
#colophon.mk-footer .mk-footer-desc{
  font-size:13px!important;line-height:1.45!important;margin:10px 0!important;
}
#colophon.mk-footer .mk-footer-badges{gap:6px!important;flex-wrap:wrap!important}
#colophon.mk-footer .mk-footer-badges span{
  font-size:10px!important;padding:6px 8px!important;
}
#colophon.mk-footer .mk-footer-bottom{
  padding:12px 24px!important;font-size:12px!important;
}
@media(max-width:900px){
 #colophon.mk-footer .mk-footer-wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
 #colophon.mk-footer .mk-footer-wrap{grid-template-columns:1fr!important;padding:22px 16px!important}
 #colophon.mk-footer .mk-footer-col h3{font-size:17px!important}
}


/* =========================================================
   MINH KHANG FOOTER FIX — 4 CỘT, GỌN, RESPONSIVE
   Giữ nguyên tone navy/cyan/teal và hiệu ứng glow/hover
   ========================================================= */
.mk-footer.mk-footer-4col{
  height:auto!important;
  min-height:0!important;
  padding:26px 0 18px!important;
  overflow:visible!important;
}
.mk-footer-4col .mk-footer-wrap{
  width:min(96%, 1780px)!important;
  height:auto!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:22px 18px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.08fr) minmax(0,1.08fr)!important;
  gap:18px!important;
  align-items:start!important;
}
.mk-footer-4col .mk-footer-col,
.mk-footer-4col .mk-footer-main{
  padding:8px 6px!important;
  min-width:0!important;
  width:auto!important;
  align-self:start!important;
}
.mk-footer-4col .mk-footer-col:not(:first-child){
  border-left:1px solid rgba(100,220,255,.16);
  padding-left:18px!important;
}
.mk-footer-4col .mk-footer-col h3{
  font-size:clamp(13px,1.05vw,17px)!important;
  line-height:1.2!important;
  margin:0 0 9px!important;
  white-space:nowrap;
}
.mk-footer-4col .mk-footer-heading-line{
  width:54px!important;
  height:4px!important;
  margin:0 0 12px!important;
}
.mk-footer-4col .mk-footer-brand-card{
  min-width:0;
}
.mk-footer-4col .mk-footer-brand-col .mk-footer-brand-card{
  margin-bottom:9px!important;
}
.mk-footer-4col .mk-footer-logo{
  width:68px!important;height:68px!important;min-width:68px!important;flex-basis:68px!important;
}
.mk-footer-4col .mk-footer-brand-text strong,
.mk-footer-4col .mk-footer-brand strong{
  font-size:clamp(18px,1.5vw,25px)!important;
  white-space:nowrap!important;
}
.mk-footer-4col .mk-footer-brand-text small,
.mk-footer-4col .mk-footer-brand span{
  font-size:11px!important;
  line-height:1.2!important;
}
.mk-footer-4col .mk-footer-desc-card p{
  font-size:12px!important;
  line-height:1.45!important;
  margin:0!important;
}
.mk-footer-4col .mk-footer-feature{
  min-height:54px!important;
}
.mk-footer-4col .mk-footer-links{gap:6px!important}
.mk-footer-4col .mk-footer-links a{
  min-height:43px!important;
  padding:5px 8px!important;
  font-size:13px!important;
  white-space:nowrap;
}
.mk-footer-4col .mk-footer-links a b{
  width:30px!important;height:30px!important;flex-basis:30px!important;
}
.mk-footer-4col .mk-footer-contact-list{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}
.mk-footer-4col .mk-footer-contact-card{
  min-height:60px!important;
  margin:0!important;
  padding:7px 8px!important;
  gap:8px!important;
  border-radius:13px!important;
}
.mk-footer-4col .mk-contact-icon{
  width:36px!important;height:36px!important;flex:0 0 36px!important;
  font-size:19px!important;
}
.mk-footer-4col .mk-contact-info,
.mk-footer-4col .mk-footer-contact-card .mk-contact-info,
.mk-footer-4col .mk-contact-info span{
  min-width:0!important;
  flex:1 1 auto!important;
}
.mk-footer-4col .mk-footer-contact-card small{
  font-size:8px!important;line-height:1.15!important;
  letter-spacing:.02em!important;
}
.mk-footer-4col .mk-footer-contact-card strong{
  font-size:12px!important;line-height:1.2!important;
  margin-top:3px!important;white-space:nowrap!important;
}
.mk-footer-4col .mk-footer-contact-card strong a{
  white-space:nowrap!important;
}
.mk-footer-4col .mk-contact-actions{
  display:flex!important;align-items:center!important;gap:5px!important;
  flex:0 0 auto!important;
}
.mk-footer-4col .mk-contact-call,
.mk-footer-4col .mk-contact-zalo{
  width:34px!important;height:34px!important;min-width:34px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:10px!important;font-size:11px!important;font-weight:800!important;
  white-space:nowrap!important;
}
.mk-footer-4col .mk-footer-info-col .mk-footer-contact-card{
  min-height:60px!important;
}
.mk-footer-4col .mk-footer-bottom{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
  width:min(92%,1700px)!important;height:auto!important;min-height:34px!important;
  margin:12px auto 0!important;padding-top:10px!important;
}
@media(max-width:1100px){
  .mk-footer-4col .mk-footer-wrap{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .mk-footer-4col .mk-footer-col:nth-child(3){border-left:0!important;padding-left:6px!important}
}
@media(max-width:600px){
  .mk-footer.mk-footer-4col{padding:18px 0 14px!important}
  .mk-footer-4col .mk-footer-wrap{
    width:calc(100% - 20px)!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:15px!important;padding:16px 12px!important;border-radius:18px!important;
  }
  .mk-footer-4col .mk-footer-col,
  .mk-footer-4col .mk-footer-main,
  .mk-footer-4col .mk-footer-col:not(:first-child){
    border-left:0!important;padding:4px 2px!important;
  }
  .mk-footer-4col .mk-footer-col h3{font-size:15px!important}
  .mk-footer-4col .mk-footer-contact-card{min-height:56px!important;padding:6px 7px!important}
  .mk-footer-4col .mk-contact-icon{width:34px!important;height:34px!important;flex-basis:34px!important}
  .mk-footer-4col .mk-footer-contact-card strong{font-size:12px!important;white-space:nowrap!important}
  .mk-footer-4col .mk-footer-contact-card small{font-size:7.5px!important}
  .mk-footer-4col .mk-contact-actions{gap:4px!important}
  .mk-footer-4col .mk-contact-call,.mk-footer-4col .mk-contact-zalo{
    width:31px!important;height:31px!important;min-width:31px!important;font-size:10px!important;
  }
  .mk-footer-4col .mk-footer-bottom{
    width:calc(100% - 28px)!important;flex-direction:column!important;
    align-items:center!important;text-align:center!important;gap:9px!important;
  }
  .mk-footer-4col .mk-footer-bottom button{width:auto!important}
}


/* MK FOOTER — COMPACT + EVEN ROW HEIGHTS */
.mk-footer-4col .mk-footer-wrap{
  align-items:stretch!important;
  gap:16px!important;
}
.mk-footer-4col .mk-footer-col{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
}
.mk-footer-4col .mk-footer-heading-line{margin-bottom:10px!important}

/* Cột liên kết: 4 hàng đồng đều */
.mk-footer-4col .mk-footer-links{display:flex!important;flex-direction:column!important;gap:6px!important}
.mk-footer-4col .mk-footer-links a{
  box-sizing:border-box!important;
  height:44px!important;min-height:44px!important;
  padding:5px 8px!important;
  border-radius:11px!important;
}

/* Cột tư vấn: 4 thẻ nhỏ, cùng chiều cao, số không xuống dòng */
.mk-footer-4col .mk-footer-contact-list{gap:7px!important}
.mk-footer-4col .mk-footer-contact-list .mk-footer-contact-card{
  box-sizing:border-box!important;
  height:52px!important;min-height:52px!important;
  padding:5px 7px!important;
  gap:7px!important;
  display:flex!important;align-items:center!important;
}
.mk-footer-4col .mk-footer-contact-list .mk-contact-icon{
  width:32px!important;height:32px!important;flex:0 0 32px!important;
  font-size:17px!important;
}
.mk-footer-4col .mk-footer-contact-list .mk-contact-info{
  min-width:0!important;flex:1 1 auto!important;
}
.mk-footer-4col .mk-footer-contact-list .mk-contact-info small{
  display:block!important;font-size:7px!important;line-height:1.1!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.mk-footer-4col .mk-footer-contact-list .mk-contact-info strong,
.mk-footer-4col .mk-footer-contact-list .mk-contact-info strong a{
  display:block!important;font-size:11px!important;line-height:1.15!important;
  margin-top:2px!important;white-space:nowrap!important;
}
.mk-footer-4col .mk-contact-actions{gap:4px!important;flex:0 0 auto!important}
.mk-footer-4col .mk-contact-call,
.mk-footer-4col .mk-contact-zalo{
  width:30px!important;height:30px!important;min-width:30px!important;
  border-radius:8px!important;font-size:10px!important;
}

/* Cột thông tin: 4 thẻ cân nhau */
.mk-footer-4col .mk-footer-info-col .mk-footer-contact-card{
  box-sizing:border-box!important;
  height:52px!important;min-height:52px!important;
  padding:5px 7px!important;margin:0 0 7px!important;
  gap:7px!important;display:flex!important;align-items:center!important;
}
.mk-footer-4col .mk-footer-info-col .mk-contact-icon{
  width:32px!important;height:32px!important;flex:0 0 32px!important;
  font-size:16px!important;
}
.mk-footer-4col .mk-footer-info-col .mk-contact-info{min-width:0!important;flex:1 1 auto!important}
.mk-footer-4col .mk-footer-info-col .mk-contact-info small{
  font-size:7px!important;line-height:1.1!important;display:block!important;
}
.mk-footer-4col .mk-footer-info-col .mk-contact-info strong{
  font-size:10.5px!important;line-height:1.15!important;margin-top:2px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.mk-footer-4col .mk-footer-info-col .copyright .mk-contact-info strong{white-space:normal!important}

/* Cột thương hiệu: thẻ gọn, nhịp dọc hài hòa */
.mk-footer-4col .mk-footer-brand-col .mk-footer-brand-card{
  box-sizing:border-box!important;margin:0 0 7px!important;
}
.mk-footer-4col .mk-footer-brand-col .mk-footer-brand-card:first-of-type{
  min-height:64px!important;padding:6px 8px!important;
}
.mk-footer-4col .mk-footer-brand-col .mk-footer-logo{
  width:48px!important;height:48px!important;min-width:48px!important;flex-basis:48px!important;
}
.mk-footer-4col .mk-footer-brand-col .mk-footer-desc-card{
  min-height:62px!important;padding:7px 8px!important;
}
.mk-footer-4col .mk-footer-brand-col .mk-footer-feature{
  min-height:44px!important;height:44px!important;padding:5px 8px!important;
}
.mk-footer-4col .mk-footer-brand-col .mk-footer-feature .mk-contact-icon{
  width:30px!important;height:30px!important;flex:0 0 30px!important;font-size:16px!important;
}
.mk-footer-4col .mk-footer-brand-col .mk-footer-feature strong{font-size:11px!important;line-height:1.1!important}
.mk-footer-4col .mk-footer-brand-col .mk-footer-feature small{font-size:9px!important;line-height:1.1!important}

@media(max-width:1100px){
  .mk-footer-4col .mk-footer-wrap{align-items:start!important}
}
@media(max-width:600px){
  .mk-footer-4col .mk-footer-contact-list .mk-footer-contact-card,
  .mk-footer-4col .mk-footer-info-col .mk-footer-contact-card{
    height:50px!important;min-height:50px!important;
  }
  .mk-footer-4col .mk-footer-contact-list .mk-contact-info small{font-size:6.8px!important}
  .mk-footer-4col .mk-footer-contact-list .mk-contact-info strong,
  .mk-footer-4col .mk-footer-contact-list .mk-contact-info strong a{font-size:10.5px!important}
  .mk-footer-4col .mk-contact-call,.mk-footer-4col .mk-contact-zalo{
    width:28px!important;height:28px!important;min-width:28px!important;
  }
}


/* FINAL FIX: equal compact card rows in all four footer columns.
   Keep existing navy/cyan/teal surfaces, borders, glow and hover transitions. */
@media (min-width: 1101px){
  #colophon.mk-footer-4col .mk-footer-wrap{align-items:start!important;gap:16px!important}
}
#colophon.mk-footer-4col .mk-footer-links,
#colophon.mk-footer-4col .mk-footer-contact-list{
  display:flex!important;flex-direction:column!important;gap:7px!important;
}
#colophon.mk-footer-4col .mk-footer-links a,
#colophon.mk-footer-4col .mk-footer-contact-list .mk-footer-contact-card,
#colophon.mk-footer-4col .mk-footer-info-col > .mk-footer-contact-card,
#colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-brand-card,
#colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-desc-card,
#colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-feature{
  box-sizing:border-box!important;
  height:58px!important;min-height:58px!important;
  margin:0 0 7px!important;
  padding:6px 9px!important;
  border-radius:12px!important;
}
#colophon.mk-footer-4col .mk-footer-links a{
  display:flex!important;align-items:center!important;gap:8px!important;
}
#colophon.mk-footer-4col .mk-footer-links a b{
  width:32px!important;height:32px!important;flex:0 0 32px!important;
}
#colophon.mk-footer-4col .mk-footer-contact-list .mk-footer-contact-card,
#colophon.mk-footer-4col .mk-footer-info-col > .mk-footer-contact-card{
  display:flex!important;align-items:center!important;gap:8px!important;
}
#colophon.mk-footer-4col .mk-contact-icon{
  width:34px!important;height:34px!important;flex:0 0 34px!important;
}
#colophon.mk-footer-4col .mk-contact-info{
  min-width:0!important;flex:1 1 auto!important;overflow:hidden!important;
}
#colophon.mk-footer-4col .mk-footer-contact-card small,
#colophon.mk-footer-4col .mk-footer-info-col .mk-footer-contact-card small{
  display:block!important;font-size:8px!important;line-height:1.1!important;
  margin:0 0 3px!important;white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important;
}
#colophon.mk-footer-4col .mk-footer-contact-card strong,
#colophon.mk-footer-4col .mk-footer-info-col .mk-footer-contact-card strong{
  display:block!important;font-size:11px!important;line-height:1.15!important;
  margin:0!important;white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:normal!important;
}
#colophon.mk-footer-4col .mk-contact-actions{
  display:flex!important;align-items:center!important;gap:5px!important;flex:0 0 auto!important;
}
#colophon.mk-footer-4col .mk-contact-call,
#colophon.mk-footer-4col .mk-contact-zalo{
  width:30px!important;height:30px!important;min-width:30px!important;
  border-radius:8px!important;font-size:10px!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-brand-card:first-child{
  height:58px!important;min-height:58px!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col .mk-footer-logo{
  width:44px!important;height:44px!important;min-width:44px!important;flex:0 0 44px!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col .mk-footer-brand-text strong{
  font-size:19px!important;line-height:1.05!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col .mk-footer-desc-card p{
  font-size:11px!important;line-height:1.25!important;margin:0!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-feature{
  display:flex!important;align-items:center!important;gap:8px!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col .mk-footer-feature .mk-contact-icon{
  width:30px!important;height:30px!important;flex:0 0 30px!important;
}
#colophon.mk-footer-4col .mk-footer-brand-col .mk-footer-feature strong{font-size:11px!important;line-height:1.1!important}
#colophon.mk-footer-4col .mk-footer-brand-col .mk-footer-feature small{font-size:9px!important;line-height:1.1!important}
#colophon.mk-footer-4col .mk-footer-info-col > .mk-footer-contact-card:last-child,
#colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-brand-card:last-child{margin-bottom:0!important}

@media (max-width:1100px){
  #colophon.mk-footer-4col .mk-footer-wrap{align-items:start!important}
}
@media (max-width:600px){
  #colophon.mk-footer-4col .mk-footer-links a,
  #colophon.mk-footer-4col .mk-footer-contact-list .mk-footer-contact-card,
  #colophon.mk-footer-4col .mk-footer-info-col > .mk-footer-contact-card,
  #colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-brand-card,
  #colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-desc-card,
  #colophon.mk-footer-4col .mk-footer-brand-col > .mk-footer-feature{
    height:54px!important;min-height:54px!important;padding:5px 7px!important;margin-bottom:6px!important;
  }
  #colophon.mk-footer-4col .mk-footer-contact-list .mk-footer-contact-card,
  #colophon.mk-footer-4col .mk-footer-info-col > .mk-footer-contact-card{gap:6px!important}
  #colophon.mk-footer-4col .mk-footer-contact-card strong,
  #colophon.mk-footer-4col .mk-footer-info-col .mk-footer-contact-card strong{font-size:10px!important}
  #colophon.mk-footer-4col .mk-contact-icon{width:30px!important;height:30px!important;flex-basis:30px!important}
  #colophon.mk-footer-4col .mk-contact-call,
  #colophon.mk-footer-4col .mk-contact-zalo{width:27px!important;height:27px!important;min-width:27px!important}
}


/* MINHKHANGTHICONG 3.3.0 — Hồ sơ công trình responsive grid */
.mk-home-projects .mk-home-project-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
}
.mk-home-projects .mk-home-project{
  min-width:0 !important;
  height:clamp(230px,19vw,310px) !important;
  border-radius:20px !important;
}
.mk-home-projects .mk-home-project>div{
  left:15px !important;
  right:15px !important;
  bottom:14px !important;
}
.mk-home-projects .mk-home-project h3{
  font-size:clamp(13px,1.05vw,18px) !important;
  line-height:1.22 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:4 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  overflow-wrap:anywhere !important;
}
@media (min-width:641px) and (max-width:1100px){
  .mk-home-projects .mk-home-project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }
  .mk-home-projects .mk-home-project{height:280px !important;}
}
@media (max-width:640px){
  .mk-home-projects .mk-home-project-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .mk-home-projects .mk-home-project{height:250px !important;border-radius:16px !important;}
  .mk-home-projects .mk-home-project h3{font-size:15px !important;-webkit-line-clamp:3 !important;}
}


/* MINHKHANGTHICONG — CTA khảo sát, 4 cột cân đối và hiệu ứng */
.mk-home-final{background:#061d42!important;padding:42px 0!important}
.mk-final-card-contacts{
  display:grid!important;grid-template-columns:1fr!important;gap:18px!important;
  padding:30px!important;border:1px solid rgba(0,220,190,.55)!important;
  background:linear-gradient(115deg,#082d63 0%,#075b86 58%,#078b83 100%)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.24)!important;
}
.mk-final-card-contacts .mk-final-message{
  display:flex!important;flex-direction:column!important;gap:8px!important;
}
.mk-final-card-contacts .mk-final-message>span{font-size:10px!important;letter-spacing:.15em!important;color:#b9e8f7!important}
.mk-final-card-contacts .mk-final-message h2{
  font-size:clamp(28px,3.4vw,48px)!important;line-height:1.02!important;
  letter-spacing:-.045em!important;margin:0!important;
}
.mk-final-card-contacts .mk-final-message h2 em{color:#a8ff27!important}
.mk-final-survey-copy{
  max-width:900px!important;margin:0!important;color:#d5e8fa!important;
  font-size:14px!important;line-height:1.55!important;letter-spacing:0!important;font-weight:400!important;
}
.mk-final-contact-area{min-width:0!important}
.mk-final-contact-area .mk-final-intro{
  margin:0 0 12px!important;color:#d5e8fa!important;font-size:13px!important;line-height:1.45!important;
}
.mk-final-contact-area .mk-final-intro strong{color:#fff!important;font-size:12px!important;font-weight:600!important}
.mk-final-contact-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;align-items:stretch!important;
}
.mk-final-contact{
  min-width:0!important;min-height:72px!important;padding:10px 11px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:7px!important;
  border:1px solid rgba(0,224,194,.58)!important;border-radius:13px!important;
  background:rgba(5,37,83,.62)!important;color:#fff!important;
  transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease!important;
  animation:mkSurveyRise .55s both!important;
}
.mk-final-contact:nth-child(2){animation-delay:.08s!important}
.mk-final-contact:nth-child(3){animation-delay:.16s!important}
.mk-final-contact:nth-child(4){animation-delay:.24s!important}
.mk-final-contact:hover{
  transform:translateY(-4px)!important;background:rgba(8,55,105,.92)!important;
  border-color:#21e6c3!important;box-shadow:0 12px 26px rgba(0,0,0,.22)!important
}
.mk-final-contact-copy{display:flex!important;flex-direction:column!important;min-width:0!important;gap:3px!important}
.mk-final-contact-copy small{font-size:8px!important;letter-spacing:.035em!important;color:#b8d8ef!important;line-height:1.2!important}
.mk-final-contact-copy b{font-size:10px!important;color:#dceeff!important;line-height:1.2!important}
.mk-final-contact-copy strong{font-size:clamp(11px,.95vw,14px)!important;color:#fff!important;line-height:1.25!important;white-space:nowrap!important}
.mk-final-contact-actions{display:flex!important;align-items:center!important;gap:4px!important;flex:0 0 auto!important}
.mk-final-contact-actions a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:30px!important;height:30px!important;padding:0 4px!important;border-radius:9px!important;
  border:1px solid rgba(0,235,197,.75)!important;background:#0875d1!important;
  color:#fff!important;font-size:10px!important;font-weight:800!important;text-decoration:none!important;
  transition:filter .2s ease,transform .2s ease!important;
}
.mk-final-contact-actions a:first-child{background:#12b98b!important}
.mk-final-contact-actions a:hover{filter:brightness(1.15)!important;transform:scale(1.06)!important}
@keyframes mkSurveyRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){
 .mk-final-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:600px){
 .mk-home-final{padding:25px 0!important}
 .mk-final-card-contacts{padding:20px!important;border-radius:20px!important}
 .mk-final-card-contacts .mk-final-message h2{font-size:30px!important}
 .mk-final-survey-copy{font-size:13px!important}
 .mk-final-contact-grid{grid-template-columns:1fr!important;gap:8px!important}
 .mk-final-contact{min-height:62px!important;padding:8px 10px!important}
 .mk-final-contact-copy strong{font-size:13px!important}
}


/* MINHKHANGTHICONG 3.5.0 — FIX DỊCH VỤ TRÊN ĐIỆN THOẠI
   2 cột gọn, icon không bị kéo cao; đồ nghề chuyển động nhẹ. */
.mk-home-services .mk-service-3d-grid{
  align-items:stretch!important;
}
.mk-home-services .mk-service-3d{
  overflow:hidden!important;
  transform-style:preserve-3d!important;
}
.mk-home-services .mk-service-3d-icon{
  position:relative!important;
  transform:translateZ(8px)!important;
  animation:mkToolFloat 2.8s ease-in-out infinite!important;
  will-change:transform,filter!important;
}
.mk-home-services .mk-service-3d:nth-child(2) .mk-service-3d-icon{animation-delay:.35s!important}
.mk-home-services .mk-service-3d:nth-child(3) .mk-service-3d-icon{animation-delay:.7s!important}
.mk-home-services .mk-service-3d:nth-child(4) .mk-service-3d-icon{animation-delay:1.05s!important}
.mk-home-services .mk-service-3d:nth-child(5) .mk-service-3d-icon{animation-delay:1.4s!important}
.mk-home-services .mk-service-3d-icon:after{
  content:""!important;
  position:absolute!important;
  inset:-7px!important;
  border-radius:24px!important;
  border:1px solid rgba(0,220,194,.35)!important;
  box-shadow:0 0 0 0 rgba(0,220,194,.28)!important;
  animation:mkToolPulse 2.8s ease-out infinite!important;
  pointer-events:none!important;
}
@keyframes mkToolFloat{
  0%,100%{transform:translate3d(0,0,8px) rotate(0deg)}
  25%{transform:translate3d(0,-5px,8px) rotate(-3deg)}
  50%{transform:translate3d(0,-8px,8px) rotate(3deg)}
  75%{transform:translate3d(0,-4px,8px) rotate(-2deg)}
}
@keyframes mkToolPulse{
  0%{opacity:.7;transform:scale(.92)}
  70%{opacity:0;transform:scale(1.15)}
  100%{opacity:0;transform:scale(1.15)}
}

/* Desktop: cân 5 thẻ */
@media (min-width:1001px){
  .mk-home-services .mk-service-3d-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:14px!important;
  }
  .mk-home-services .mk-service-3d{
    min-height:235px!important;
    padding:20px!important;
    border-radius:22px!important;
  }
  .mk-home-services .mk-service-3d h3{
    font-size:18px!important;
    margin:22px 0 7px!important;
  }
}

/* Tablet: 2 cột */
@media (min-width:601px) and (max-width:1000px){
  .mk-home-services .mk-service-3d-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }
}

/* Điện thoại: 2 cột, không còn 4 thẻ cao kéo dài */
@media (max-width:600px){
  .mk-home-services .mk-home-wrap{
    width:calc(100% - 20px)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .mk-home-services .mk-home-heading{
    display:block!important;
  }
  .mk-home-services .mk-home-heading h2{
    font-size:34px!important;
    line-height:.98!important;
  }
  .mk-home-services .mk-home-heading p{
    font-size:14px!important;
    line-height:1.5!important;
    margin-top:12px!important;
  }
  .mk-home-services .mk-service-3d-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .mk-home-services .mk-service-3d{
    box-sizing:border-box!important;
    min-height:185px!important;
    height:185px!important;
    padding:14px 9px!important;
    border-radius:20px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    justify-content:flex-start!important;
  }
  .mk-home-services .mk-service-3d-icon{
    width:62px!important;
    height:62px!important;
    min-width:62px!important;
    border-radius:18px!important;
    font-size:31px!important;
    margin:0 auto!important;
  }
  .mk-home-services .mk-service-3d small{
    display:none!important;
  }
  .mk-home-services .mk-service-3d h3{
    font-size:13px!important;
    line-height:1.18!important;
    margin:13px 0 0!important;
    min-height:31px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .mk-home-services .mk-service-3d p{
    font-size:10px!important;
    line-height:1.3!important;
    margin:5px 0 0!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .mk-home-services .mk-service-3d>b{
    font-size:8px!important;
    margin-top:auto!important;
  }
}

/* Tắt chuyển động nếu thiết bị người dùng yêu cầu giảm animation */
@media (prefers-reduced-motion:reduce){
  .mk-home-services .mk-service-3d-icon,
  .mk-home-services .mk-service-3d-icon:after{
    animation:none!important;
  }
}


/* MINHKHANGTHICONG 3.6.0 — HIỆU ỨNG ĐỒ NGHỀ RƠI NHƯ MƯA
   Chỉ là lớp trang trí, không chặn thao tác và không ảnh hưởng layout. */
.mk-tool-rain{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:20!important;
  opacity:.72!important;
}
.mk-tool-rain span{
  position:absolute!important;
  top:-12vh!important;
  left:var(--x)!important;
  font-size:var(--s)!important;
  line-height:1!important;
  opacity:0!important;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.25))!important;
  animation:mkToolRainFall var(--d) linear var(--delay) infinite!important;
  transform:rotate(var(--r))!important;
  will-change:transform,opacity!important;
}
@keyframes mkToolRainFall{
  0%{
    transform:translate3d(0,-12vh,0) rotate(var(--r));
    opacity:0;
  }
  8%{opacity:var(--o)}
  82%{opacity:var(--o)}
  100%{
    transform:translate3d(var(--drift),112vh,0) rotate(calc(var(--r) + 420deg));
    opacity:0;
  }
}
@media(max-width:600px){
  .mk-tool-rain{opacity:.42!important}
  .mk-tool-rain span{font-size:calc(var(--s) * .78)!important}
}
@media(prefers-reduced-motion:reduce){
  .mk-tool-rain{display:none!important}
}


/* MINHKHANGTHICONG 3.7.0 — MƯA THIẾT BỊ KỸ THUẬT */
.mk-tool-rain span{
  animation:mkTechRainFall var(--d) linear var(--delay) infinite!important;
  transform-origin:center center!important;
}
@keyframes mkTechRainFall{
  0%{
    transform:translate3d(0,-14vh,0) rotate(var(--r)) scale(.75);
    opacity:0;
  }
  7%{opacity:var(--o)}
  35%{transform:translate3d(calc(var(--drift) * .25),30vh,0) rotate(calc(var(--r) + 100deg)) scale(1)}
  68%{transform:translate3d(calc(var(--drift) * .7),72vh,0) rotate(calc(var(--r) + 250deg)) scale(.94)}
  90%{opacity:var(--o)}
  100%{
    transform:translate3d(var(--drift),116vh,0) rotate(calc(var(--r) + 420deg)) scale(.72);
    opacity:0;
  }
}


/* MINHKHANGTHICONG 3.8.0 — ROBUST TECH RAIN */
#mk-tech-rain{
  position:fixed!important;
  top:0!important;
  left:0!important;
  width:100vw!important;
  height:100vh!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:2147483000!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
#mk-tech-rain span{
  position:absolute!important;
  top:-70px!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  color:#fff!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:24px!important;
  line-height:1!important;
  opacity:var(--opacity,.45)!important;
  text-shadow:0 3px 8px rgba(0,0,0,.35)!important;
  transform:rotate(0deg)!important;
  animation:mkTechRainVisible linear infinite!important;
  will-change:transform!important;
}
@keyframes mkTechRainVisible{
  0%{
    transform:translate3d(0,-80px,0) rotate(0deg);
    opacity:0!important;
  }
  8%{opacity:var(--opacity,.45)!important}
  90%{opacity:var(--opacity,.45)!important}
  100%{
    transform:translate3d(var(--drift),calc(100vh + 100px),0) rotate(var(--rot));
    opacity:0!important;
  }
}
@media(max-width:600px){
  #mk-tech-rain{z-index:2147483000!important}
  #mk-tech-rain span{font-size:20px!important}
}
@media(prefers-reduced-motion:reduce){
  #mk-tech-rain{display:block!important}
  #mk-tech-rain span{animation-duration:12s!important}
}



/* MINHKHANGTHICONG 4.0.0 — ICON THẬT RÕ */
#mk-tech-rain-svg{
 position:fixed!important; inset:0!important; width:100vw!important; height:100vh!important;
 overflow:hidden!important; pointer-events:none!important; z-index:999999!important;
}
.mk-rain-tool{
 position:absolute!important; top:-110px!important; left:0!important;
 width:var(--size)!important; height:var(--size)!important;
 display:block!important; opacity:0!important;
 animation:mkCrispToolRain var(--time) linear var(--delay) infinite!important;
 will-change:transform,opacity!important;
 filter:drop-shadow(0 4px 5px rgba(0,0,0,.28))!important;
}
.mk-rain-tool svg{width:100%!important;height:100%!important;display:block!important}
@keyframes mkCrispToolRain{
 0%{transform:translate3d(0,-120px,0) rotate(0deg) scale(.9);opacity:0!important}
 8%{opacity:var(--alpha)!important}
 88%{opacity:var(--alpha)!important}
 100%{transform:translate3d(var(--drift),calc(100vh + 150px),0) rotate(var(--spin)) scale(1);opacity:0!important}
}
@media(max-width:600px){
 .mk-rain-tool{width:calc(var(--size)*.78)!important;height:calc(var(--size)*.78)!important}
}