/* Minh Khang Mobile Care (suadienthoai3) — trang chủ theo mockup (đợt 9). Đỏ #e41e31 + đen than #1b1b1f. Tiền tố mk- */
:root { --c1: #e41e31; --c1d: #c4111f; --c2: #1b1b1f; --ink: #16181d; --mu: #5d6470; --bg2: #f5f5f7; --ft: #1b1b1f; --line: #e5e7eb; --hf: "Be Vietnam Pro", Inter, sans-serif; --bf: Inter, sans-serif; --r: 10px; }
/* topbar + header */
#top-bar { font-size: 13px; }
.mk-tb { display: inline-flex; align-items: center; gap: 10px; color: #e9eaee; font-size: 13px; }
.mk-tb i { font-style: normal; opacity: .6; } .mk-tb a { color: #e9eaee !important; }
#header #logo a { display: block; width: 206px; height: 54px; background: url("icons/logo.png") left center / contain no-repeat; font-size: 0 !important; color: transparent !important; }
#header .header-nav-main > li { margin: 0 15px; }
#header .header-nav-main > li > a { font-size: 15px; font-weight: 500; color: #16181d; padding: 0; }
#header .header-nav-main > li.active > a, #header .header-nav-main > li > a:hover { color: var(--c1); }
#header .header-button-1 { margin-left: 22px !important; }
#header .header-button-1 .button { background: var(--c1) !important; border-color: var(--c1) !important; color: #fff !important; min-height: 46px; padding: 0 26px; border-radius: 6px !important; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 46px; }
.header-main { border-bottom: 1px solid #eceef1; }
.mk-sec h2, .mk-h2 { font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.mk-sub { color: var(--mu); font-size: 16px; margin: 8px 0 0; }
/* hero */
.mk-hero { padding: 40px 0 28px !important; }
.mk-hero .row { align-items: center; }
.mk-hero-l .col-inner { padding-right: 10px; }
@media (min-width: 850px) { .mk-hero .mk-hero-l { flex-basis: 54%; max-width: 54%; } .mk-hero .mk-hero-r { flex-basis: 46%; max-width: 46%; } }
.mk-h1 { font-size: 38px; line-height: 1.22; font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; color: #121418; }
.mk-hero-s { font-size: 16px; color: #444b55; margin-bottom: 26px; }
.mk-quote { border: 1px solid #e3e5e9; border-radius: 12px; padding: 22px 22px 24px; background: #fff; box-shadow: 0 10px 28px rgba(20, 24, 33, .06); }
.mk-quote-t { font-size: 18px; font-weight: 700; margin-bottom: 14px; font-family: var(--hf); color: #121418; }
.mk-quote-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.mk-quote-g label { font-size: 13px; color: #4a515b; font-weight: 500; }
.mk-quote select { height: 46px; font-size: 14px; color: #555; }
.mk-quote-b { width: 100%; min-height: 50px; font-size: 16px; border-radius: 6px; }
.mk-hero-img .img-inner, .mk-hero-img img { border-radius: 14px; }
.mk-hero-img img { width: 100%; height: 506px; object-fit: cover; object-position: 50% 40%; display: block; }
/* cam kết */
.mk-com-sec { padding: 14px 0 34px !important; }
.mk-com { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #eceef1; padding-top: 26px; }
.mk-com > div { display: flex; align-items: center; gap: 16px; padding: 4px 28px; border-left: 1px solid #e3e5e9; }
.mk-com > div:first-child { border-left: 0; padding-left: 8px; }
.mk-com img { width: 62px; height: 62px; flex: none; }
.mk-com b { display: block; font-size: 17px; font-weight: 700; color: #16181d; font-family: var(--hf); }
.mk-com span { display: block; font-size: 13.5px; color: #69707b; margin-top: 3px; }
/* dịch vụ */
.mk-svc-sec { padding: 50px 0 46px !important; }
.mk-svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mk-svc a { background: #fff; border-radius: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 14px 20px; transition: box-shadow .2s, transform .2s; }
.mk-svc a:hover { box-shadow: 0 12px 26px rgba(20,24,33,.08); transform: translateY(-2px); }
.mk-svc img { width: 74px; height: 74px; margin-bottom: 14px; }
.mk-svc b { font-size: 18px; color: #16181d; font-weight: 600; margin-bottom: 12px; font-family: var(--hf); }
.mk-svc span { color: var(--c1); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
/* chẩn đoán */
.mk-diag-sec { padding: 40px 0 40px !important; }
.mk-diag-l .col-inner { padding-right: 40px; }
.mk-diag { margin: 22px 0 28px; border-top: 1px solid #e6e8ec; }
.mk-diag a { display: flex; justify-content: space-between; align-items: center; padding: 15px 6px 15px 0; border-bottom: 1px solid #e6e8ec; color: #23272e; font-size: 16px; }
.mk-diag a:hover { color: var(--c1); }
.mk-diag .b9-ic { width: 18px; height: 18px; }
.mk-diag-b { min-width: 192px; min-height: 52px; }
.mk-diag-img img { width: 100%; height: 460px; object-fit: cover; border-radius: 14px; display: block; }
/* kho máy */
.mk-kho-sec { padding: 44px 0 16px !important; }
.mk-kho { --n: 4; --pc-ar: 305 / 230; --pc-pad: 14px; }
.mk-kho .b9-pc { border: 0; border-radius: 12px; }
.mk-kho .b9-pc-t { font-size: 15.5px; font-weight: 500; }
.mk-kho .b9-pc-p { font-size: 21px; font-weight: 800; }
.mk-kho .b9-pc-btn a.b9-btn { background: #fff; color: #2a2e35 !important; border: 1px solid #d0d4da; }
.mk-kho .b9-pc-btn a.b9-btn:hover { border-color: var(--c1); color: var(--c1) !important; }
.mk-kho .b9-pc-btn a.b9-btn-o { background: var(--c1); color: #fff !important; }
/* khuyến mại */
.mk-promo-sec { padding: 14px 0 42px !important; }
.mk-promo { background: var(--c1); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; padding: 34px 36px; gap: 24px; }
.mk-promo-t { color: #fff; font-size: 40px; font-weight: 800; font-family: var(--hf); letter-spacing: -.01em; line-height: 1.15; }
a.mk-promo-b { background: #fff; color: var(--c1) !important; font-weight: 700; font-size: 17px; border-radius: 8px; min-height: 62px; padding: 0 56px; display: inline-flex; align-items: center; white-space: nowrap; }
/* khách hàng */
.mk-cus-sec { padding: 42px 0 36px !important; }
.mk-cus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mk-cus img { width: 100%; aspect-ratio: 413 / 222; object-fit: cover; border-radius: 10px; display: block; }
/* dạy nghề */
.mk-train-sec { padding: 34px 0 34px !important; }
.mk-train-img img { width: 100%; height: 342px; object-fit: cover; border-radius: 14px; display: block; }
.mk-train-r .col-inner { padding-left: 52px; }
.mk-chk { list-style: none; margin: 22px 0 28px; padding: 0; }
.mk-chk li { display: flex; align-items: center; gap: 12px; font-size: 17px; color: #23272e; margin: 0 0 14px; }
.mk-chk .b9-ic { width: 26px; height: 26px; color: var(--c1); }
.mk-train-r .b9-btn { min-width: 210px; min-height: 52px; }
/* tin */
.mk-news-sec { padding: 40px 0 36px !important; }
.mk-news { --po-ar: 413 / 186; }
.mk-news .b9-po-t { font-size: 18px; }
#footer .b9-ft { --ft: #1b1b1f; }
/* mobile */
@media (max-width: 849px) {
  #header #logo a { width: 170px; height: 44px; background-position: center; }
  .mk-sec h2, .mk-h2 { font-size: 26px; }
  .mk-hero { padding: 0 0 24px !important; }
  .mk-hero .row { flex-direction: column-reverse; }
  .mk-hero-r .col-inner { margin: 0; } .mk-hero-r .mk-hero-img { width: calc(100% + 30px); max-width: none; margin-left: -15px; }
  .mk-com-sec { padding: 0 0 26px !important; } .mk-com { grid-template-columns: minmax(0, 1fr); gap: 14px; border-top: 0; } .mk-hero-l .col-inner { padding-bottom: 0; }
  .mk-hero-img .img-inner, .mk-hero-img img { border-radius: 0; }
  .mk-hero-img img { height: 250px; object-position: 55% 40%; }
  .mk-hero-l { padding-top: 22px !important; }
  .mk-hero-l .col-inner { padding-right: 0; }
  .mk-h1 { font-size: 29px; }
  .mk-hero-s { font-size: 15.5px; margin-bottom: 18px; }
  .mk-quote-g { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mk-com > div { padding: 4px 10px; gap: 10px; border-left: 0; }
  .mk-com img { width: 40px; height: 40px; }
  .mk-com b { font-size: 15px; } .mk-com span { font-size: 12.5px; }
  .mk-svc-sec, .mk-diag-sec, .mk-kho-sec, .mk-cus-sec, .mk-news-sec { padding-top: 36px !important; padding-bottom: 30px !important; }
  .mk-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mk-svc a { padding: 20px 8px 16px; } .mk-svc img { width: 48px; height: 48px; } .mk-svc b { font-size: 15px; }
  .mk-diag-l .col-inner { padding-right: 0; } .mk-diag-img img { height: 260px; margin-top: 10px; }
  .mk-kho { --nm: 2; }
  .mk-promo { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .mk-promo-t { font-size: 26px; } a.mk-promo-b { min-height: 48px; padding: 0 28px; font-size: 15px; }
  .mk-cus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mk-train-img img { height: 230px; } .mk-train-r .col-inner { padding-left: 0; padding-top: 18px; }
  .mk-news { --nm: 1; }
}
/* _midwidth: header Flatsome ở 850-1399px (laptop nhỏ/tablet ngang) — menu dựng theo mockup 1440 tràn phải; dùng chung mọi site */
@media (min-width: 850px) and (max-width: 1399px) {
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 6px !important; margin-right: 6px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 14px !important; }
  #header .header-search-form { max-width: 300px !important; width: 300px !important; margin-left: 20px !important; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  #logo { width: auto !important; max-width: 210px !important; } #logo a { font-size: 21px !important; }
  #header .header-main .flex-right .header-button-1, #header .header-main .flex-right li.html, #header .header-search-form, #top-bar .flex-right { display: none !important; }
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 3px !important; margin-right: 3px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 13px !important; }
  #header .flex-col { min-width: 0; } #header .header-inner, #header .header-bottom .container { overflow: hidden; }
}
.col-inner a[href^="mailto"], .col-inner a[href^="tel"] { overflow-wrap: anywhere; }