/* Mây Ngoan (milk) — landing 1 thương hiệu y hệt mockup (cyan #00B6F0 + navy #030282 màu gốc), cỡ đo theo mockup x1.95 (10-04) */
:root { --mn-c: #10AEEB; --mn-c2: #0E98D8; --mn-navy: #16226E; --mn-navy2: #0B1D7A; --mn-text: #46507A; --mn-muted: #6B7395; --mn-sky: #E6F4FD; --mn-line: #DCEBF7; }
body, p, li, a, input, select, textarea, button, h1, h2, h3, h4, td, th, label, summary, .nav > li > a { font-family: "Lexend", sans-serif !important; }
h1 a, h2 a, h3 a, h4 a { font-family: inherit !important; }
.mn-sec, .mn-footer, #header { word-break: normal !important; }
/* ---------- header viên thuốc nổi trên hero (trang chủ) ---------- */
.home #header { position: absolute; top: 0; left: 0; right: 0; z-index: 40; background: transparent !important; }
.home #header .header-wrapper, .home #header .header-bg-color, .home #header .header-main { background: transparent !important; box-shadow: none !important; }
#header .header-main { height: 101px; background: #fff; }
#header .header-main .header-inner { height: 76px; margin-top: 25px; background: #fff; border-radius: 38px; padding: 0 20px 0 28px !important; box-shadow: 0 6px 24px rgba(14,80,150,.08); }
#header #logo { width: 230px !important; margin: 0 !important; top: 0 !important; }
#header #logo a { position: relative; top: 0 !important; margin: 0 !important; display: flex !important; align-items: center; height: 56px; padding-left: 64px; background: url(icons/logo.png) left center / 54px 54px no-repeat; color: var(--mn-navy2) !important; font-size: 27px !important; font-weight: 600 !important; letter-spacing: -.4px; line-height: 1; text-transform: none !important; white-space: nowrap; }
@media (min-width: 850px) { #header .header-main .flex-left { flex: 1 1 auto; justify-content: flex-start; margin-left: 40px; } }
#header .header-nav-main { flex-wrap: nowrap !important; } #header .header-nav-main > li { margin: 0 17px !important; white-space: nowrap; border: 0 !important; }
#header .header-nav-main > li > a { font-size: 15px !important; font-weight: 400 !important; color: #2E3A6E !important; text-transform: none !important; letter-spacing: 0 !important; padding: 0 !important; line-height: 40px !important; flex-wrap: nowrap !important; background: transparent !important; }
#header .header-nav-main > li > a:hover { color: var(--mn-c2) !important; }
#header .header-nav-main > li > a::before, #header .header-nav-main > li > a::after { display: none !important; }
#header .flex-right .header-nav-main > li { margin: 0 !important; }
#header .header-button .button { background: var(--mn-c) !important; border: 0 !important; color: #fff !important; border-radius: 26px !important; height: 52px; min-height: 52px; padding: 0 38px !important; font-size: 17px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 52px !important; box-shadow: none !important; margin: 0 !important; }
#header .header-button .button span { font-size: inherit !important; }
.mobile-nav i, .mobile-nav .icon-menu { color: var(--mn-navy) !important; }
.home .page-title { display: none !important; }
/* ---------- chung ---------- */
.mn-sec p:not([class]), .mn-footer p:not([class]) { display: contents; }
.mn-sec p, .mn-footer p { margin-bottom: 0; }
.mn-sec .col, .mn-footer .col { padding-bottom: 0 !important; }
.mn-sec ul, .mn-footer ul { margin: 0; padding: 0; list-style: none; } .mn-sec li, .mn-footer li { margin: 0 !important; }
.mn-sec img[src=""] { visibility: hidden; }
.mn-h2 { color: var(--mn-navy2) !important; font-size: 40px !important; font-weight: 600 !important; line-height: 50px !important; letter-spacing: -.6px; margin: 0 !important; }
.mn-c { text-align: center; }
.mn-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.mn-head h2 { flex: 0 1 auto; width: fit-content; min-width: 0; }
.mn-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; color: var(--mn-c2) !important; font-size: 17px; }
.mn-more i, .mn-lk i { display: inline-block; width: 16px; height: 16px; background: url(icons/arr.png) center / contain no-repeat; }
.mn-lk { display: inline-flex; align-items: center; gap: 8px; color: var(--mn-c2) !important; font-size: 17px; }
.mn-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; min-width: 200px; padding: 0 32px; border-radius: 26px; background: var(--mn-c); color: #fff !important; font-size: 18px; font-weight: 500; border: 2px solid var(--mn-c); }
.mn-btn:hover { background: var(--mn-c2); border-color: var(--mn-c2); }
.mn-btn-o { background: transparent; color: var(--mn-navy) !important; border-color: var(--mn-navy); min-width: 248px; } .mn-btn-o:hover { background: var(--mn-navy); color: #fff !important; }
/* ---------- hero ---------- */
.section.mn-hero { min-height: 650px; padding: 0 !important; align-items: flex-start !important; }
.mn-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 60c40-30 90-30 130-8 30-26 90-30 120 0 40-24 100-22 130 4 50-20 110-14 140 10 40-26 110-24 140 0 40-24 100-22 130 2 50-26 120-22 150 6 40-24 100-26 140-2 40-24 100-24 130 0 30-16 70-20 110-8V90H0z' fill='%23ffffff'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; pointer-events: none; }
.mn-hero-in { position: relative; min-height: 650px; z-index: 2; }
.mn-hero-l { padding-top: 192px; }
.mn-h1 { color: var(--mn-navy2) !important; font-size: 78px !important; font-weight: 700 !important; line-height: 88px !important; letter-spacing: -1.6px; margin: 0 0 18px !important; }
.mn-lead { color: var(--mn-text); font-size: 22px; line-height: 35px; margin-bottom: 34px; }
.mn-btns { display: flex; gap: 20px; }
.mn-badge { position: absolute; left: 1083px; top: 132px; width: 150px; height: 150px; border-radius: 50%; background: #10157A; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 10px 30px rgba(16,21,122,.25); }
.mn-badge b { font-size: 26px; font-weight: 600; line-height: 30px; letter-spacing: -.5px; } .mn-badge span { font-size: 14.5px; line-height: 19px; font-weight: 300; }
/* ---------- 6 cam kết ---------- */
.section.mn-f-sec { padding: 40px 0 30px !important; }
.mn-fs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mn-f { text-align: center; }
.mn-f span { width: 126px; height: 126px; border-radius: 50%; background: var(--mn-sky); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.mn-f img { width: 62px; height: 62px; }
.mn-f div { color: #3A4B8C; font-size: 16px; line-height: 25px; }
/* ---------- tình huống ---------- */
.section.mn-s-sec { padding: 30px 0 30px !important; }
.mn-ss { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
.mn-s { text-align: center; display: block; }
.mn-s span { width: 196px; height: 196px; border-radius: 50%; background: radial-gradient(circle, #EDF7FE 0, #E2F2FD 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; transition: transform .25s; }
.mn-s:hover span { transform: translateY(-4px); }
.mn-s img { width: 112px; height: 112px; }
.mn-s h3 { color: var(--mn-navy2) !important; font-size: 23px !important; font-weight: 600 !important; line-height: 30px; margin: 0 0 8px !important; }
.mn-s h3 + div { color: var(--mn-muted); font-size: 17px; }
/* ---------- thành phần ---------- */
.section.mn-ig-sec { padding: 26px 0 34px !important; }
.mn-igs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 20px; }
.mn-ig { position: relative; min-height: 380px; border-radius: 14px; background: var(--mn-sky) center / cover no-repeat; padding: 50px 42px; overflow: hidden; }
.mn-ig h3 { color: var(--mn-navy2) !important; font-size: 36px !important; font-weight: 600 !important; line-height: 44px; margin: 0 0 12px !important; letter-spacing: -.5px; }
.mn-ig h3 + div { color: var(--mn-text); font-size: 19px; line-height: 30px; }
.mn-ig2 { padding: 30px 32px; } .mn-ig2 h3 { margin-bottom: 8px !important; }
.mn-st { display: grid; grid-template-columns: repeat(2, 232px); gap: 12px 12px; margin-top: 18px; }
.mn-st > div { background: rgba(255,255,255,.88); border: 1px solid #CFE6F8; border-radius: 10px; padding: 12px 18px; min-height: 104px; }
.mn-st b { display: block; color: var(--mn-navy2); font-size: 31px; font-weight: 600; line-height: 38px; }
.mn-st span { color: var(--mn-muted); font-size: 14.5px; line-height: 21px; }
/* ---------- bộ sản phẩm ---------- */
.section.mn-pd-sec { padding: 30px 0 34px !important; }
.mn-pds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mn-pd { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 24px; border-radius: 14px; padding: 26px 30px; min-height: 420px; }
.mn-pd-blue { background: linear-gradient(135deg, #E9F6FE 0%, #D9EFFC 100%); } .mn-pd-cream { background: linear-gradient(135deg, #FFF8E6 0%, #FDF0D3 100%); }
.mn-pd-img { display: block; height: 360px; } .mn-pd-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.mn-pd h3 { white-space: nowrap; font-size: 33px !important; font-weight: 600 !important; line-height: 44px; margin: 0 0 14px !important; letter-spacing: -.5px; } .mn-pd h3 a { color: var(--mn-navy2) !important; }
.mn-pd li { position: relative; padding-left: 36px; color: var(--mn-text); font-size: 17.5px; line-height: 34px; }
.mn-pd li::before { content: ""; position: absolute; left: 0; top: 7px; width: 22px; height: 22px; background: url(icons/chk.png) center / contain no-repeat; }
.mn-pd-price { color: var(--mn-navy2); font-size: 35px; font-weight: 600; margin: 22px 0 16px; letter-spacing: -.5px; }
.mn-buy { min-width: 210px; height: 54px; }
.mn-buy.added::after { display: none; } .mn-pd .added_to_cart { display: block; margin-top: 8px; font-size: 14px; color: var(--mn-c2); }
/* ---------- câu chuyện ---------- */
.section.mn-tm-sec { padding: 20px 0 40px !important; }
.mn-tms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mn-tm { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; border: 1px solid var(--mn-line); border-radius: 8px; padding: 20px 20px 20px 18px; }
.mn-tm-av { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; display: block; } .mn-tm-av img { width: 100%; height: 100%; object-fit: cover; }
.mn-q { width: 30px; height: 30px; margin-bottom: 8px; }
.mn-tm-t { color: var(--mn-text); font-size: 15.5px; line-height: 25px; margin-bottom: 14px; }
.mn-tm-n { color: var(--mn-navy2); font-size: 15.5px; font-weight: 500; }
/* ---------- học viện ---------- */
.section.mn-ac-sec { padding: 0 !important; }
.mn-acad { display: grid; grid-template-columns: minmax(0, 470fr) minmax(0, 840fr); gap: 0; background: #DDF0FC; border-radius: 22px; padding: 44px 40px 44px 70px; margin: 0 -55px; }
.mn-acad-l { padding-top: 18px; }
.mn-acad-d { color: var(--mn-text); font-size: 21px; line-height: 33px; margin: 18px 0 36px; }
.mn-acad .mn-btn { min-width: 296px; }
.mn-acs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mn-ac { background: #fff; border-radius: 10px; padding: 12px 12px 20px; }
.mn-ac-img { display: block; height: 190px; border-radius: 6px; overflow: hidden; } .mn-ac-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-ac h3 { font-size: 20px !important; font-weight: 600 !important; line-height: 28px; margin: 16px 12px 10px !important; min-height: 56px; } .mn-ac h3 a { color: var(--mn-navy2) !important; }
.mn-ac .mn-lk { margin-left: 12px; }
/* ---------- hỏi chuyên gia ---------- */
.section.mn-qa-sec { padding: 46px 0 30px !important; }
.mn-qa { display: grid; grid-template-columns: minmax(0, 648fr) minmax(0, 640fr); gap: 28px; margin-top: 20px; align-items: start; }
.mn-qa-img { height: 366px; border-radius: 8px; overflow: hidden; } .mn-qa-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-q-i { border: 2px solid #E1EEF9; border-radius: 10px; margin-bottom: 12px; background: #fff; }
.mn-q-i summary { list-style: none; display: flex; align-items: center; gap: 22px; height: 60px; padding: 0 22px; cursor: pointer; color: var(--mn-navy2); font-size: 18px; }
.mn-q-i summary::-webkit-details-marker { display: none; }
.mn-q-i summary i { width: 16px; height: 16px; background: url(icons/chev.png) center / contain no-repeat; flex: 0 0 16px; }
.mn-q-i summary b { margin-left: auto; width: 20px; height: 20px; background: url(icons/plus.png) center / contain no-repeat; flex: 0 0 20px; transition: transform .2s; }
.mn-q-i[open] summary b { transform: rotate(45deg); }
.mn-q-i > div { padding: 0 24px 18px 60px; color: var(--mn-text); font-size: 16px; line-height: 26px; }
.mn-qa-r .mn-btn { margin-top: 10px; min-width: 226px; }
/* ---------- footer ---------- */
#footer .absolute-footer { display: none !important; }
.mn-footer { padding: 130px 0 0 !important; position: relative; background: #F3F9FE !important; }
.mn-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 64c40-26 90-26 130-6 30-24 90-28 120 0 40-22 100-20 130 4 50-20 110-14 140 10 40-24 110-22 140 0 40-22 100-20 130 2 50-24 120-20 150 6 40-22 100-24 140-2 40-22 100-22 130 0 30-14 70-18 110-6V100H0z' fill='%23E1F1FC'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.mn-footer .section-bg { background: transparent !important; }
.mn-fg { display: grid; grid-template-columns: minmax(0, 340fr) minmax(0, 350fr) minmax(0, 320fr) minmax(0, 300fr); }
.mn-footer a.mn-flogo { display: flex !important; align-items: center; gap: 12px; color: var(--mn-navy2) !important; font-size: 30px; font-weight: 600; letter-spacing: -.5px; margin-bottom: 14px; }
.mn-flogo img { width: 72px; height: 72px; }
.mn-fdesc { color: var(--mn-navy2); font-size: 19px; line-height: 30px; }
.mn-fc h4 { color: var(--mn-c2) !important; font-size: 17px !important; font-weight: 500 !important; margin: 0 0 14px !important; }
.mn-fc li { margin-bottom: 8px !important; font-size: 16.5px; line-height: 24px; } .mn-fc li a { color: #3E4A78 !important; }
.mn-fct li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 18px; align-items: start; color: #3E4A78; font-size: 17px; }
.mn-fct li img { width: 20px; height: 20px; margin-top: 3px; }
.mn-fbot { margin-top: 24px; padding: 18px 0 26px; text-align: center; color: #3E4A78; font-size: 14.5px; }
/* ---------- mobile ---------- */
@media (max-width: 849px) {
  #header .header-main { height: 76px; }
  #header .header-main .header-inner { height: 60px; margin: 10px 10px 0; padding: 0 12px !important; border-radius: 30px; }
  #header #logo, #header #logo a { width: auto !important; }
  #header #logo a { height: 44px; padding-left: 46px; background-size: 40px 40px; font-size: 21px !important; }
  .mn-h2 { font-size: 28px !important; line-height: 36px !important; }
  .section.mn-hero { min-height: 0; padding-top: 330px !important; background-color: #EAF5FD !important; }
  .mn-hero .section-bg { top: 0; bottom: auto; height: 330px; }
  .mn-hero .section-bg img.bg { object-position: 72% 50% !important; }
  .mn-hero::after { display: none; }
  .mn-hero-in { min-height: 0; padding-bottom: 30px; }
  .mn-hero-l { padding-top: 22px; }
  .mn-h1 { font-size: 38px !important; line-height: 46px !important; letter-spacing: -.8px; } .mn-lead { font-size: 16px; line-height: 25px; } .mn-lead br { display: none; }
  .mn-btns { flex-direction: column; gap: 12px; } .mn-btn, .mn-btn-o { min-width: 0; width: 100%; height: 50px; font-size: 16px; }
  .mn-badge { left: auto; right: 6px; top: -150px; width: 108px; height: 108px; } .mn-badge b { font-size: 19px; line-height: 22px; } .mn-badge span { font-size: 11px; line-height: 14px; }
  .mn-fs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; } .mn-f span { width: 80px; height: 80px; margin-bottom: 8px; } .mn-f img { width: 40px; height: 40px; } .mn-f div { font-size: 12.5px; line-height: 18px; } .mn-f div br { display: none; }
  .mn-ss { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin-top: 18px; } .mn-s span { width: 120px; height: 120px; margin-bottom: 12px; } .mn-s img { width: 68px; height: 68px; } .mn-s h3 { font-size: 16px !important; line-height: 22px; } .mn-s h3 + div { font-size: 13.5px; }
  .mn-igs { grid-template-columns: minmax(0, 1fr); gap: 16px; } .mn-ig { height: auto; min-height: 300px; padding: 26px 20px; } .mn-ig h3 { font-size: 26px !important; line-height: 32px; } .mn-ig h3 + div { font-size: 16px; line-height: 25px; } .mn-ig br { display: none; }
  .mn-st { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-st > div { min-height: 0; padding: 10px 12px; } .mn-st b { font-size: 24px; line-height: 30px; } .mn-st span { font-size: 12.5px; line-height: 18px; }
  .mn-pds { grid-template-columns: minmax(0, 1fr); } .mn-pd { grid-template-columns: minmax(0, 1fr); padding: 20px; min-height: 0; text-align: left; } .mn-pd-img { height: 240px; } .mn-pd h3 { font-size: 26px !important; } .mn-pd li { font-size: 15.5px; line-height: 28px; } .mn-pd li::before { top: 4px; } .mn-pd-price { font-size: 28px; margin: 14px 0 12px; }
  .mn-tms { grid-template-columns: minmax(0, 1fr); } .mn-tm { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; } .mn-tm-av { width: 110px; height: 110px; }
  .mn-acad { grid-template-columns: minmax(0, 1fr); margin: 0; padding: 28px 18px; border-radius: 16px; gap: 20px; } .mn-acad-d { font-size: 17px; line-height: 26px; margin: 10px 0 20px; } .mn-acad-d br { display: none; } .mn-acad .mn-btn { min-width: 0; width: 100%; }
  .mn-acs { grid-template-columns: minmax(0, 1fr); gap: 14px; } .mn-ac h3 { font-size: 17px !important; min-height: 0; }
  .mn-qa { grid-template-columns: minmax(0, 1fr); } .mn-qa-img { height: 220px; } .mn-q-i summary { font-size: 15.5px; height: auto; min-height: 54px; padding: 10px 14px; gap: 12px; } .mn-q-i > div { padding: 0 16px 16px 42px; font-size: 14.5px; }
  .mn-footer { padding-top: 90px !important; } .mn-fg { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
}
/* ruler:manual (10-04: ruler.py icon NHO 1.2-1.5, tiêu đề giữ cỡ vì bề rộng chữ khớp _cmpw ±8%) */
@media (min-width: 850px) { .mn-f img { width: 76px; height: 76px; } .mn-s img { width: 130px; height: 130px; } } @media (min-width: 1400px) { #header .header-main .header-inner { max-width: 1292px !important; } }
/* mid-fix */
@media (min-width: 850px) and (max-width: 1399px) { #header .header-main .flex-left { margin-left: 18px !important; } #header .header-nav-main > li { margin: 0 9px !important; } #header .header-nav-main > li > a { font-size: 14px !important; } .mn-badge { left: auto; right: 30%; } }
@media (min-width: 850px) and (max-width: 1199px) { #header #logo { width: auto !important; max-width: none !important; } #header #logo a { font-size: 21px !important; padding-left: 50px; background-size: 42px 42px; } #header .header-nav-main > li { margin: 0 5px !important; } #header .header-nav-main > li > a { font-size: 13px !important; } #header .header-main .flex-right .header-button-1 { display: none !important; } }
@media (max-width: 1449px) { .mn-acad { margin: 0; padding-left: 40px; } }
@media (min-width: 850px) and (max-width: 1199px) { .mn-st { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-ig2 h3 + div br { display: none; } .mn-q-i summary { font-size: 15.5px; gap: 12px; } .mn-tm { grid-template-columns: 100px minmax(0, 1fr); } .mn-tm-av { width: 100px; height: 100px; } .mn-pd { grid-template-columns: 180px minmax(0, 1fr); } .mn-pd h3 { font-size: 26px !important; } .mn-acs { gap: 14px; } .mn-acad { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } .mn-fs { gap: 4px; } .mn-f div br { display: none; } }
@media (max-width: 849px) { #header .header-main .header-inner { width: auto !important; max-width: none; margin: 10px 10px 0 !important; } .mn-f div { overflow-wrap: anywhere; } }
@media (min-width: 850px) and (max-width: 1023px) { .mn-pds { grid-template-columns: minmax(0, 1fr); } .mn-pd { grid-template-columns: 220px minmax(0, 1fr); } }
@media (max-width: 849px) { #header .mobile-nav .nav-icon a, #header .mobile-nav .button, #header .header-main .nav-icon .icon-menu { background: transparent !important; box-shadow: none !important; border: 0 !important; } #header .mobile-nav .icon-menu { color: #16226E !important; font-size: 24px; } .mn-badge { left: 8px; right: auto; top: -112px; width: 96px; height: 96px; } .mn-badge b { font-size: 17px; line-height: 20px; } .mn-badge span { font-size: 10px; line-height: 13px; } }
/* /mid-fix */
/* _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; }