/* =====================================================================
   MT DIGITAL — Recolor layer (Brand Guidelines · Ocean Blue)
   Chuẩn hoá toàn site theo bộ nhận diện chính thức.
   Nạp sau cùng qua functions.php (priority 100).

   Palette (Brand Guidelines):
     Ocean Blue   #0B57C4   (chính · 60%)
     Amber Yellow #FFBB03   (phụ  · 25%)
     Slate Grey   #52546D   (trung tính · 15%)
     Light Grey   #F4F5F7   White #FFFFFF   Black #000000
   Tông đậm #083F8F là Ocean Blue làm tối (dùng cho hover / nền dark).
   ===================================================================== */

:root{
  --fs-color-primary:#0B57C4;
  --fs-color-secondary:#FFBB03;
  --fs-color-success:#52546D;
  --fs-experimental-link-color:#0B57C4;
  --fs-experimental-link-color-hover:#083F8F;
  --mt-primary:#0B57C4;
  --mt-secondary:#FFBB03;
  --mt-accent:#0B57C4;
  --mt-slate:#52546D;
  --mt-dark:#083F8F;
  --mt-bg:#F4F5F7;
}

/* ---- Banner gradient ---- */
.bg-banner-gradient{
  background-image:linear-gradient(80deg,#0B57C4 0%,#FFBB03 100%)!important;
}

/* ---- Buttons (octf) ---- */
.octf-btn-primary{background:#0B57C4!important;}
.octf-btn:hover,.octf-btn:focus{background:#FFBB03!important;color:#3B3D50!important;}
.octf-btn.octf-btn-white{color:#0B57C4!important;}
.octf-btn.octf-btn-white i{background:#0B57C4!important;color:#fff!important;}
.octf-btn-icon i{color:#0B57C4!important;}
.buttom2 i{
  background-color:#FFBB03!important;
  box-shadow:rgba(255,187,3,.30) 8px 9px 18px 0px!important;
}
.buttom2 span{color:#0B57C4!important;}

/* ---- Feature/service boxes hover gradient ---- */
.icon-box.featured-box:hover,
.service-box .overlay,
.service-box .number-box{
  background-color:#0B57C4!important;
  background-image:linear-gradient(145deg,#0B57C4,#083F8F)!important;
}
.service-box:hover .number-box{background:#fff!important;color:#0B57C4!important;}

/* ---- Headings / decorative ---- */
.heading-slogan h2:before{background:#0B57C4!important;}
.ot-heading h6:before,.ot-heading h6:after{background:#FFBB03!important;}
.ot-heading h6{color:#0B57C4!important;}

/* ---- SEO / quote blocks ---- */
.company-quote{border-color:#0B57C4!important;}
.company-quote__icon{color:#FFBB03!important;}
.list-vande-seo .nbtxt{color:#0B57C4!important;}

/* ---- Contact section + title gradient + submit ---- */
.lienhe{background:linear-gradient(to right,#083F8F 0%,#0B57C4 100%)!important;}
.css-title{
  background:-webkit-linear-gradient(45deg,#0B57C4,#FFBB03 80%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
}
.lienhe2 input#NGK{
  background:linear-gradient(270deg,#FFBB03 -22.41%,#0B57C4 108.33%)!important;
}

/* ---- Footer ---- */
.bg-gradient{background-image:linear-gradient(145deg,#083F8F 47%,#0B57C4 100%)!important;}
.absolute-footer.dark{background-color:#F4F5F7!important;color:#52546D!important;}

/* ---- Misc leftovers (person title, testimonial border, underlines) ---- */
span.person-title.is-small.thin-font.op-7{background:#52546D!important;}
.ykienkhachhang .icon-inner img{border-color:#0B57C4!important;background:#0B57C4!important;}
.Underline_underline__wcC4W{--underline-color:#FFBB03;}
.WhyGetresponse_whyGetresponse__dO8iU u{
  -webkit-text-decoration-color:#FFBB03!important;text-decoration-color:#FFBB03!important;
}

/* ---- Scroll progress loading bar ---- */
.loading-bar{background-image:linear-gradient(to right,#0B57C4,#FFBB03)!important;}

/* ---- Chữ nhấn [data-text-color] trong nội dung UX Builder ----
   Amber là màu nhấn cho MẢNG ĐẶC, không dùng làm chữ trên nền sáng
   (#FFBB03 trên trắng chỉ đạt 1.7:1 — không đọc được).
   → nền sáng: Ocean Blue · nền tối: Amber (5.8:1, giống slogan trong logo).
   Lưu ý: flatsome.css nạp SAU file này và cũng dùng !important với cùng độ
   đặc hiệu, nên phải thêm `body` để thắng (0,1,1 > 0,1,0). */
body [data-text-color="secondary"]{color:#0B57C4!important;}
body .dark [data-text-color="secondary"],
body section.dark [data-text-color="secondary"]{color:#FFBB03!important;}
/* Slate quá tối trên nền xanh đậm → dùng Light Grey khi ở section tối */
body .dark [data-text-color="success"],
body section.dark [data-text-color="success"]{color:#E3E6EC!important;}


/* =====================================================================
   OVERRIDE RIÊNG CHO SITE THẬT mtdigital.vn (soi DOM live)
   ===================================================================== */

/* Ảnh nền các section dark vốn đã là tông xanh dương → ĐÚNG guideline,
   giữ nguyên màu gốc (không filter). Chỉ chỉnh nhẹ cho sát Ocean Blue. */
section.hero .section-bg{
  filter:saturate(1.05) hue-rotate(-6deg)!important;
}
section.section.dark:not(.hero) .section-bg{
  filter:saturate(1.05) hue-rotate(-6deg) brightness(.96)!important;
}

/* Overlay cho section tối (không phải hero) */
section.section.dark:not(.hero) .section-bg-overlay{background-color:rgba(8,63,143,.5)!important;}

/* Overlay & màu nền xanh cũ đặt inline trong UX Builder → ép về Ocean Blue */
.section-bg-overlay[style*="rgba(0, 73, 255"]{background-color:rgba(11,87,196,.7)!important;}
section[style*="rgb(0, 73, 255)"]{background-color:#0B57C4!important;}
section[style*="rgb(0, 27, 95)"]{background-color:#083F8F!important;}

/* Chữ xanh cũ đặt inline (text_color trong UX Builder) → Ocean Blue chuẩn */
[style*="color: #0049ff"],[style*="color:#0049ff"],
[style*="color: rgb(0, 73, 255)"]{color:#0B57C4!important;}
[style*="color: #0049ff"] *,[style*="color:#0049ff"] *{color:inherit!important;}

/* Tiêu đề các panel "Dịch vụ nổi bật" */
.hot-sv h1,.hot-sv h2,.hot-sv h3,
.text.hot-sv h1,.text.hot-sv h2{color:#0B57C4!important;}

/* Tick danh sách (li::before đang xanh lá #27d227) → Amber thương hiệu */
.icon-list li:before,.icon-list li::before{color:#FFBB03!important;}

/* Section navy đậm hardcode (#001b5f) → Ocean Blue đậm */
section.section.dark{background-color:#083F8F!important;}

/* Nhãn liên hệ dọc + badge case-study */
.WE_contact-label,
.We_case-study-cat{background-color:#0B57C4!important;}

/* Nút success (xanh lá #68dd55) → Slate; phòng khi chưa đổi Customizer */
.button.success,
a.button.success{background-color:#52546D!important;border-color:#52546D!important;}


/* =====================================================================
   LƯỚI DỊCH VỤ  [mt_services]
   ===================================================================== */
.mt-svc{max-width:1200px;margin:0 auto;padding:10px 15px 20px;}
.mt-svc__title{
  text-align:center;font-size:34px;line-height:1.2;font-weight:700;
  color:#52546D;margin:0 0 6px;
}
.mt-svc__title b,.mt-svc__title strong{color:#0B57C4;}
.mt-svc__rule{width:56px;height:4px;border-radius:2px;background:#FFBB03;margin:12px auto 26px;}

.mt-svc__tabs{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 28px;
  padding:0;list-style:none;
}
.mt-svc__tab{
  cursor:pointer;border:1px solid #DDE1E8;background:#fff;color:#52546D;
  font-size:13px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;
  padding:9px 18px;border-radius:24px;transition:all .2s ease;
}
.mt-svc__tab:hover{border-color:#0B57C4;color:#0B57C4;}
.mt-svc__tab.is-active{background:#0B57C4;border-color:#0B57C4;color:#fff;}

.mt-svc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:849px){.mt-svc__grid{grid-template-columns:repeat(2,1fr);}}
/* Mobile: 2 cột (trước là 1 cột) */
@media(max-width:549px){
  .mt-svc__grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .mt-svc__body{padding:11px 12px 13px;}
  .mt-svc__name{font-size:13.5px;}
  .mt-svc__desc{font-size:11.5px;}
}

/* Thẻ bị kẹp (ngoài 6 thẻ đầu, chỉ trên mobile khi đang thu gọn) */
.mt-svc__card.is-clamp{display:none!important;}

/* Nút "Xem thêm / Thu gọn" — JS bật trên mobile khi có >6 thẻ, desktop luôn ẩn */
.mt-svc__more{
  display:none;margin:20px auto 0;padding:11px 30px;cursor:pointer;
  background:#fff;color:#0B57C4;border:1.5px solid #0B57C4;border-radius:26px;
  font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  transition:background .2s ease,color .2s ease;
}
.mt-svc__more:hover,.mt-svc__more:focus{background:#0B57C4;color:#fff;}

.mt-svc__card{
  background:#fff;border:1px solid #E3E6EC;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease;
}
.mt-svc__card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(11,87,196,.16);}
.mt-svc__card.is-hidden{display:none;}

.mt-svc__media{position:relative;width:100%;aspect-ratio:1/1;background:#083F8F;}
.mt-svc__media img,.mt-svc__media svg{
  display:block;width:100%;height:100%;object-fit:cover;
}
.mt-svc__body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:5px;}
.mt-svc__cat{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.mt-svc__name{font-size:15px;font-weight:600;color:#1F2233;line-height:1.3;}
.mt-svc__desc{font-size:12.5px;color:#52546D;line-height:1.5;margin:0;}

/* fade khi lọc */
.mt-svc__card{animation:mtFade .35s ease;}
@keyframes mtFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}


/* =====================================================================
   NÚT — bảo đảm luôn có màu (không phụ thuộc Custom CSS cũ trong DB)
   ===================================================================== */
.button.primary:not(.is-outline):not(.is-link):not(.is-underline){
  background-color:#0B57C4!important;border-color:#0B57C4!important;color:#fff!important;
}
.button.primary.is-outline{
  color:#0B57C4!important;border-color:#0B57C4!important;background-color:transparent!important;
}
.button.primary.is-outline:hover,.button.primary.is-outline:focus{
  background-color:#0B57C4!important;color:#fff!important;
}
/* Amber là màu phụ → chữ Slate cho đủ tương phản (chữ trắng trên vàng không đọc được) */
.button.secondary:not(.is-outline):not(.is-link):not(.is-underline){
  background-color:#FFBB03!important;border-color:#FFBB03!important;color:#3B3D50!important;
}
.button.success:not(.is-outline):not(.is-link){
  background-color:#52546D!important;border-color:#52546D!important;color:#fff!important;
}
/* nút trắng: chữ Ocean Blue */
.button.white,a.button.white{background-color:#fff!important;color:#0B57C4!important;}
.button.white:hover,a.button.white:hover{background-color:#F4F5F7!important;color:#083F8F!important;}
/* octf: luôn có nền + chữ tương phản kể cả khi thiếu CSS cũ */
.octf-btn{background:#0B57C4!important;color:#fff!important;}
.octf-btn.octf-btn-white{background:#fff!important;color:#0B57C4!important;}
.octf-btn.octf-btn-white i{background:#0B57C4!important;color:#fff!important;}


/* =====================================================================
   ĐỐI TÁC  [mt_partners] — slider marquee, mỗi logo 1 item
   Desktop: 8 logo/hàng (4 hàng) · Tablet: 5 · Mobile: 3
   ===================================================================== */
.mt-pt{max-width:1200px;margin:0 auto;padding:10px 0 20px;overflow:hidden;}
.mt-pt__title{text-align:center;font-size:28px;font-weight:700;color:#52546D;margin:0 0 22px;}
.mt-pt__row{overflow:hidden;position:relative;padding:10px 0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.mt-pt__track{display:flex;width:max-content;animation:mtPtScroll 35s linear infinite;}
.mt-pt__row--rev .mt-pt__track{animation-name:mtPtScrollRev;}
.mt-pt__row:hover .mt-pt__track{animation-play-state:paused;}
@keyframes mtPtScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes mtPtScrollRev{from{transform:translateX(-50%);}to{transform:translateX(0);}}

.mt-pt__item{
  flex:0 0 auto;
  width:calc(1200px / var(--mt-pt-cols,8) - 16px);
  max-width:calc(100vw / var(--mt-pt-cols,8) - 16px);
  margin:0 8px;display:flex;align-items:center;justify-content:center;text-decoration:none;
}
.mt-pt__logo{
  width:100%;height:84px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #E3E6EC;border-radius:12px;padding:6px 8px;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.mt-pt__item:hover .mt-pt__logo{transform:translateY(-4px);box-shadow:0 12px 24px rgba(11,87,196,.14);}
.mt-pt__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.mt-pt__chip{
  font-size:13px;font-weight:600;color:#52546D;text-align:center;line-height:1.3;
  white-space:normal;word-break:break-word;
}
@media(max-width:849px){.mt-pt{--mt-pt-cols:5!important;}.mt-pt__logo{height:64px;}}
@media(max-width:549px){.mt-pt{--mt-pt-cols:3!important;}.mt-pt__logo{height:56px;padding:8px 10px;}.mt-pt__chip{font-size:11px;}}


/* Ẩn hàng nút lọc ngành ở section Câu chuyện khách hàng */
ul.case-study-menu{display:none!important;}


/* =====================================================================
   TRANG CHI TIẾT DỊCH VỤ  (single-mt_service.php)
   ===================================================================== */
.mt-single__hero{padding:64px 20px;}
.mt-single__hero-inner{max-width:1200px;margin:0 auto;display:flex;gap:44px;align-items:center;flex-wrap:wrap;}
.mt-single__hero-text{flex:1 1 340px;color:#fff;}
.mt-single__crumb{font-size:13px;opacity:.9;margin-bottom:14px;}
.mt-single__crumb a{color:#fff;text-decoration:none;} .mt-single__crumb a:hover{text-decoration:underline;}
.mt-single__crumb span{margin:0 4px;}
.mt-single__title{color:#fff!important;font-size:40px;line-height:1.15;margin:0 0 16px;font-weight:700;}
.mt-single__tagline{color:#fff;opacity:.94;font-size:17px;line-height:1.6;margin:0 0 26px;max-width:540px;}
.mt-single__cta{display:inline-block;background:#FFBB03;color:#3B3D50;font-weight:700;padding:14px 30px;border-radius:30px;text-decoration:none;font-size:14px;letter-spacing:.5px;transition:transform .2s,box-shadow .2s;}
.mt-single__cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.2);color:#3B3D50;}
.mt-single__hero-media{flex:0 0 320px;max-width:340px;width:100%;}
.mt-single__hero-media img,.mt-single__hero-media svg{width:100%;border-radius:16px;display:block;box-shadow:0 22px 48px rgba(8,25,60,.28);}

.mt-single__body{max-width:1200px;margin:0 auto;padding:52px 20px 60px;display:grid;grid-template-columns:1fr 340px;gap:44px;}
@media(max-width:849px){.mt-single__body{grid-template-columns:1fr;}}
.mt-single__content{font-size:16px;line-height:1.8;color:#3D3D3D;}
.mt-single__content h2{font-size:24px;color:#1F2233;margin:34px 0 14px;font-weight:700;}
.mt-single__content h2:first-child{margin-top:0;}
.mt-single__content ul,.mt-single__content ol{padding-left:22px;margin:0 0 18px;}
.mt-single__content li{margin-bottom:8px;}
.mt-single__content li::marker{color:var(--mt-accent);font-weight:700;}

.mt-single__aside{align-self:start;position:sticky;top:100px;display:flex;flex-direction:column;gap:20px;}
.mt-single__cta-box{background:var(--mt-accent);color:#fff;border-radius:14px;padding:26px;}
.mt-single__cta-box h3{color:#fff!important;font-size:19px;margin:0 0 10px;line-height:1.3;}
.mt-single__cta-box p{color:#fff;opacity:.94;font-size:14px;line-height:1.6;margin:0 0 18px;}
.mt-single__cta-btn{display:inline-block;background:#FFBB03;color:#3B3D50;font-weight:700;padding:12px 24px;border-radius:26px;text-decoration:none;font-size:14px;}
.mt-single__cta-btn:hover{background:#E5A800;color:#3B3D50;}
.mt-single__rel{background:#fff;border:1px solid #E3E6EC;border-radius:14px;padding:20px 24px;}
.mt-single__rel h3{font-size:17px;color:#1F2233;margin:0 0 10px;}
.mt-single__rel ul{list-style:none;padding:0;margin:0;}
.mt-single__rel li{border-bottom:1px solid #EDEFF3;}
.mt-single__rel li:last-child{border-bottom:0;}
.mt-single__rel a{display:block;padding:10px 0;color:#52546D;text-decoration:none;font-size:14px;font-weight:500;}
.mt-single__rel a:hover{color:var(--mt-accent);}
@media(max-width:549px){.mt-single__title{font-size:30px;}}

/* =====================================================================
   CHỮ CHẠY Ở HERO (.typing-container) — chống xuống hàng trên mobile
   CSS gốc nằm trong Code Snippet #7 (font-size 5.5vw desktop / 13vw mobile,
   kèm transition:all 0.5s). File này nạp trước snippet, nhưng selector
   `body .typing-container` có độ đặc hiệu cao hơn `.typing-container` nên
   thắng kể cả khi snippet có !important.
   Cỡ chữ do biến --mt-typing-fs điều khiển; hàm mtFitTyping() trong
   functions.php đo cả câu rồi đặt biến vừa đủ 1 hàng (fallback = cỡ gốc).
   ===================================================================== */
body .typing-container{
  /* desktop giữ 5.5vw như cũ; JS chỉ can thiệp khi câu tràn */
  font-size:var(--mt-typing-fs,5.5vw)!important;
}
@media only screen and (max-width:600px){
  body .typing-container{
    font-size:var(--mt-typing-fs,13vw)!important;  /* fallback = cỡ mobile gốc */
    white-space:nowrap!important;                  /* không cho xuống hàng */
    transition:none!important;                      /* tắt transition:all → đổi cỡ tức thì, không giật */
    /* letter-spacing gốc -3px cố định làm chữ dính khi cỡ nhỏ → đổi sang em */
    letter-spacing:-0.02em!important;
  }
  body .typing-container #typing-text{white-space:nowrap!important;}
}

/* Nút chuyển ngôn ngữ VN/EN */
.mt-lang{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-transform:uppercase;}
.mt-lang img{display:block;width:22px;height:16px;object-fit:cover;border-radius:2px;}
.mt-lang-item{list-style:none;}