/* Mộc An (thucphamchucnang) — trang chủ theo mockup thucphamchucnang-home/mockups/home-desktop-v1.png (729px -> 1440 = x1.975) */
:root { --ma-pk: #ea0050; --ma-gr: #27ac06; --ma-dk: #136b34; --ma-ink: #1f2421; --ma-mut: #5d635f; --ma-pkbg: #fde9f0; --ma-grbg: #f1f8f0; }
body, p, li, a, span, div, input, select, textarea, button, label { font-family: 'Be Vietnam Pro', sans-serif; }
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a { font-family: 'Be Vietnam Pro', sans-serif !important; }
.home #main, #main { background-image: none !important; background-color: #fff !important; }
.ma-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: 0 0 auto; }

/* ---------- header ---------- */
#top-bar { background: var(--ma-pk) !important; }
#top-bar .ma-tb { color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0; }
#top-bar .ma-tb .ma-ic { font-size: 22px; }
.header-main { box-shadow: none !important; border-bottom: 0; }
#logo { width: 210px !important; }
#logo a { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 40px; color: var(--ma-pk) !important; text-transform: none !important; letter-spacing: -0.5px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; line-height: 1; }
#logo a::before { content: ""; width: 62px; height: 50px; flex: 0 0 62px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 44'%3E%3Cpath d='M26 42C10 40 2 30 3 8c13 2 22 9 23 34z' fill='%2327ac06'/%3E%3Cpath d='M28 42c16-2 24-12 23-34-13 2-22 9-23 34z' fill='%2327ac06'/%3E%3Cpath d='M27 41C21 30 19 18 27 2c8 16 6 28 0 39z' fill='%23ffffff' stroke='%2327ac06' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat; }
#header .header-main .flex-left { flex: 1 1 auto; justify-content: flex-start; }
#header .header-search-form { width: 567px !important; max-width: 567px !important; margin-left: 65px !important; }
#header .header-search-form .searchform { border: 2px solid var(--ma-pk); border-radius: 7px; overflow: hidden; background: #fff; }
#header .header-search-form .search-field { height: 50px !important; border: 0 !important; box-shadow: none !important; font-size: 15px; padding-left: 18px !important; color: var(--ma-ink); }
#header .header-search-form .search-field::placeholder { color: #8a8f8b; }
#header .header-search-form .ux-search-submit { height: 50px; width: 54px; background: #fff !important; color: var(--ma-ink) !important; border: 0; }
#header .header-search-form .ux-search-submit i { font-size: 20px; }
.ma-hr { display: inline-flex; align-items: center; gap: 30px; }
.ma-hr a { display: inline-flex; align-items: center; gap: 8px; color: var(--ma-ink) !important; font-size: 15px; white-space: nowrap; }
.ma-hr .ma-hot .ma-ic { color: var(--ma-pk); font-size: 26px; }
.ma-hr .ma-hot span { font-weight: 600; } .ma-hr .ma-hot b { font-weight: 700; }
.ma-hr .ma-acc .ma-ic { color: var(--ma-ink); font-size: 30px; stroke-width: 1.7; }
.ma-hr .ma-cart .ma-ic { color: var(--ma-pk); font-size: 28px; stroke-width: 2.2; }
#header .header-main li.html, #header .header-main .html { margin: 0; }
.header-bottom { background: var(--ma-gr) !important; }
#header .header-bottom .header-nav > li { margin: 0 15px !important; }
#header .header-bottom .header-nav > li > a { color: #fff !important; font-size: 17px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; padding: 0; }
#header .header-bottom .header-nav > li > a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 6px; }
.ma-mcall { color: var(--ma-pk) !important; font-size: 24px; display: inline-flex; }
.mobile-nav .icon-menu, .header-main .mobile-nav i { color: var(--ma-pk) !important; }

/* ---------- chung ---------- */
.section.ma-sec { padding: 0 !important; }
.ma-sec .col, .ma-hero .col, .ma-footer .col, .ma-fbar .col { padding-bottom: 0 !important; }
.ma-h2 { font-size: 38px; line-height: 1.2; font-weight: 700; color: var(--ma-pk); margin: 0; letter-spacing: -0.3px; }
.ma-h2.ma-dk { color: var(--ma-dk); }
.ma-center { text-align: center; }
.ma-needs-sec .ma-h2 { font-size: 35px; } .ma-tes-sec .ma-h2 { font-size: 34px; }
.ma-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ma-head h2 { flex: 0 0 auto; width: fit-content; }
.ma-more { color: var(--ma-gr) !important; font-weight: 700; font-size: 17px; text-decoration: underline; text-underline-offset: 5px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ma-more .ma-ic { font-size: 18px; }
.ma-note { text-align: center; color: #6a6f6c; font-size: 14px; margin-top: 16px; }

/* ---------- hero ---------- */
.section.ma-hero { padding: 0 !important; min-height: 624px; background-color: #fbe6ee; }
.ma-hero .section-bg { background-color: #fbe6ee; }
.ma-hero-in { min-height: 624px; padding: 58px 0 40px; box-sizing: border-box; max-width: 640px; position: relative; z-index: 2; }
.ma-eyebrow { font-size: 15px; letter-spacing: 2.4px; text-transform: uppercase; color: #4b4f4c; font-weight: 500; }
.ma-h1 { font-size: 66px; line-height: 1.17; font-weight: 700; margin: 22px 0 18px; letter-spacing: -1px; }
.ma-h1 .ma-pk { color: var(--ma-pk); } .ma-h1 .ma-gr { color: var(--ma-gr); }
.ma-lead { font-size: 22px; color: var(--ma-ink); }
.ma-bens { display: flex; gap: 0; margin: 38px 0 36px; }
.ma-ben { width: 198px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.ma-ben:first-child { margin-left: -48px; }
.ma-ben img { width: 62px; height: 62px; object-fit: contain; }
.ma-ben span { font-size: 18px; line-height: 1.45; color: var(--ma-ink); }
.ma-btns { display: flex; gap: 26px; }
.ma-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; border-radius: 7px; font-size: 18px; font-weight: 700; padding: 0 30px; white-space: nowrap; }
.ma-btn-pk { background: var(--ma-pk); color: #fff !important; min-width: 294px; }
.ma-btn-ol { border: 2px solid var(--ma-gr); color: var(--ma-gr) !important; background: #fff; min-width: 220px; }
.ma-btn:hover { opacity: .92; }

/* ---------- nhu cầu ---------- */
.ma-needs-sec .row { padding: 32px 0 14px; }
.ma-needs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 16px; }
.ma-needs a { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ma-ink) !important; }
.ma-needs b { width: 140px; height: 140px; border-radius: 50%; background: #fdeaf1; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.ma-needs a:hover b { transform: translateY(-3px); }
.ma-needs img { width: 96px; height: 96px; object-fit: contain; }
.ma-needs span { font-size: 19px; font-weight: 600; }

/* ---------- sản phẩm ---------- */
.ma-prod-sec .row { padding: 30px 0 30px; }
.ma-prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.ma-card { border: 1px solid #ececec; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); display: flex; flex-direction: column; min-width: 0; }
.ma-cimg { display: block; height: 290px; background: #f3f3f1; }
.ma-cimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ma-cbody { padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.ma-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.ma-card h3 a { color: var(--ma-ink) !important; }
.ma-cdesc { font-size: 16px; color: var(--ma-mut); line-height: 1.6; }
.ma-price { color: var(--ma-pk); font-size: 22px; font-weight: 700; margin: 16px 0 8px; }
.ma-stars { display: flex; gap: 3px; color: #f0a2bd; font-size: 19px; margin-bottom: 16px; }
.ma-stars .ma-ic { stroke-width: 1.6; }
.ma-add { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border: 2px solid var(--ma-pk); border-radius: 7px; color: var(--ma-pk) !important; font-size: 17px; font-weight: 700; }
.ma-add .ma-ic { font-size: 22px; }
.ma-add:hover { background: var(--ma-pk); color: #fff !important; }

/* ---------- thành phần ---------- */
.ma-ing { display: grid; grid-template-columns: 764px minmax(0, 1fr); min-height: 470px; }
.ma-ing-img { background: #eef2ee center/cover no-repeat; min-height: 470px; }
.ma-ing-txt { padding: 34px 40px 26px 64px; max-width: 680px; box-sizing: border-box; }
.ma-ing .ma-h2 { white-space: nowrap; }
.ma-ing .ma-h2 { font-size: 46px; }
.ma-ing-sub { font-size: 27px; color: var(--ma-mut); margin: 6px 0 18px; }
.ma-checks { list-style: none; margin: 0 0 16px; padding: 0 0 20px; border-bottom: 2px solid #dfe6df; }
.ma-checks li { display: flex; align-items: center; gap: 18px; font-size: 19px; color: var(--ma-ink); margin: 0 0 14px !important; padding: 0 !important; }
.ma-checks .ma-ic { width: 32px; height: 32px; background: var(--ma-gr); color: #fff; border-radius: 50%; padding: 7px; box-sizing: border-box; stroke-width: 3.2; }
.ma-ing-note { font-size: 17px; color: var(--ma-ink); margin-bottom: 18px; }

/* ---------- cam kết ---------- */
.ma-commit-sec .row { padding: 34px 0 30px; }
.ma-commits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 24px; }
.ma-commits > div { background: var(--ma-grbg); border-radius: 10px; padding: 26px 16px 24px; text-align: center; min-height: 221px; box-sizing: border-box; }
.ma-commits img { width: 76px; height: 76px; object-fit: contain; display: block; margin: 0 auto 12px; }
.ma-commits h3 { font-size: 20px; font-weight: 700; color: var(--ma-ink); margin: 0 0 8px; }
.ma-commits div div { font-size: 16px; color: var(--ma-mut); line-height: 1.6; }

/* ---------- tư vấn ---------- */
.ma-consult-sec .row { padding: 30px 0 26px; }
.ma-consult { display: grid; grid-template-columns: 579px minmax(0, 1fr); gap: 66px; align-items: start; }
.ma-cs-img { height: 462px; border-radius: 8px; background: #f6d9e4 center/cover no-repeat; position: relative; }
.ma-cs-img span { position: absolute; left: 12px; bottom: 16px; background: #fff; border-radius: 10px; padding: 12px 22px; font-size: 17px; font-weight: 600; color: var(--ma-ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.ma-cs-form { padding-top: 6px; }
.ma-cs-form .ma-h2 { font-size: 42px; }
.ma-cs-sub { font-size: 22px; color: var(--ma-ink); margin: 6px 0 20px; }
.ma-cs-form .wpcf7-form { margin: 0; }
.ma-f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wpcf7-form div > p:has(> label ~ label) { display: contents; }
.ma-cs-form label { display: block; margin: 0 0 12px; font-weight: 400; }
.ma-cs-form .wpcf7-form-control-wrap { display: block; }
.ma-cs-form input[type=text], .ma-cs-form input[type=tel], .ma-cs-form select, .ma-cs-form textarea { width: 100%; height: 51px; border: 1px solid #e3d3d9; border-radius: 6px; background: #fff; box-shadow: none; font-size: 17px; padding: 0 18px; margin: 0; color: var(--ma-ink); }
.ma-cs-form textarea { height: 99px; min-height: 99px; padding-top: 12px; resize: vertical; }
.ma-cs-form select { appearance: auto; color: #6a6f6c; }
.ma-cs-form input::placeholder, .ma-cs-form textarea::placeholder { color: #8a8f8b; }
.ma-cs-form .ma-fbtn, .ma-cs-form input[type=submit] { width: 100%; height: 58px; margin: 0 0 14px; border-radius: 7px; background: var(--ma-pk) !important; color: #fff !important; font-size: 18px; font-weight: 700 !important; border: 0; text-transform: none; letter-spacing: 0; border-radius: 7px !important; }
.ma-facc, .ma-facc * { font-size: 16.5px; color: var(--ma-ink); }
.ma-facc .wpcf7-list-item { margin: 0; } .ma-facc input[type=checkbox] { accent-color: var(--ma-pk); width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; }
.ma-cs-form .wpcf7-spinner { display: none; }

/* ---------- khách hàng ---------- */
.ma-tes-sec .row { padding: 30px 0 22px; }
.ma-tes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; margin-top: 22px; }
.ma-tcard { border: 1px solid #eee; border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); padding: 16px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 38px; min-height: 197px; box-sizing: border-box; }
.ma-tav { height: 170px; border-radius: 8px; background: #f2e4e9 center/cover no-repeat; }
.ma-ttxt { padding-top: 8px; }
.ma-q { color: var(--ma-pk); font-size: 30px; display: block; line-height: 1; margin-bottom: 8px; }
.ma-tquote { font-size: 19px; line-height: 1.55; color: var(--ma-ink); }
.ma-tname { font-size: 15px; color: var(--ma-dk); font-weight: 600; margin-top: 14px; }

/* ---------- cẩm nang ---------- */
.ma-blog-sec .row { padding: 30px 0 46px; }
.ma-blog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 18px; }
.ma-bcard { border: 1px solid #eee; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); padding-bottom: 22px; }
.ma-bimg { display: block; height: 223px; background: #f3eef0 center/cover no-repeat; position: relative; margin-bottom: 18px; }
.ma-bimg i { position: absolute; left: 16px; bottom: -6px; background: #fff; color: var(--ma-pk); font-style: normal; font-weight: 700; font-size: 15px; text-transform: uppercase; padding: 10px 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.ma-bcard h3 { font-size: 19px; font-weight: 700; margin: 26px 18px 12px; line-height: 1.35; }
.ma-bcard h3 a { color: var(--ma-ink) !important; }
.ma-bcard .ma-more { margin-left: 18px; font-size: 16px; }

/* ---------- footer ---------- */
#footer .section.ma-footer { padding: 0 !important; border-top: 0 !important; }
.ma-footer .row { padding: 38px 0 32px; }
.ma-ft { display: grid; grid-template-columns: 329px 352px 252px minmax(0, 1fr); color: #fff; }
.ma-ft > div { padding: 0 0 0 66px; }
.ma-ft > div:nth-child(3) { padding-left: 0; }
.ma-ft > div:first-child { padding-left: 0; border-right: 1px solid rgba(255, 255, 255, .35); }
.ma-ft > div:nth-child(3) { border-right: 1px solid rgba(255, 255, 255, .35); }
.ma-ft > div:last-child { padding-left: 64px; padding-right: 0; }
.ma-ft-logo { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; font-size: 44px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; }
.ma-ft-mark { width: 74px; height: 60px; flex: 0 0 74px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 44'%3E%3Cpath d='M26 42C10 40 2 30 3 8c13 2 22 9 23 34z' fill='%23ffffff'/%3E%3Cpath d='M28 42c16-2 24-12 23-34-13 2-22 9-23 34z' fill='%23ffffff'/%3E%3Cpath d='M27 41C21 30 19 18 27 2c8 16 6 28 0 39z' fill='%2327ac06' stroke='%23ffffff' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat; }
.ma-ft-tag { font-size: 19px; line-height: 1.5; margin: 18px 0 20px; color: rgba(255, 255, 255, .9); }
.ma-ft-tag b { font-weight: 500; color: #fff; }
.ma-ft-soc { display: flex; gap: 22px; }
.ma-ft-soc a { color: #fff !important; font-size: 32px; display: inline-flex; }
.ma-ft h4 { color: #fff; font-size: 18px; font-weight: 700; margin: 6px 0 18px; }
.ma-ft-col a, .ma-ft-col > div { display: flex; align-items: flex-start; gap: 18px; color: rgba(255, 255, 255, .95) !important; font-size: 17px; margin-bottom: 12px; line-height: 1.45; }
.ma-ft-ct .ma-ic { font-size: 24px; color: #fff; margin-top: 1px; }
.ma-ft-ct a, .ma-ft-ct > div { font-size: 18px; }
.ma-fbar .row { padding: 14px 0; }
.ma-fbar-in { display: flex; justify-content: space-between; gap: 20px; font-size: 14px; color: #3b403d; }
.absolute-footer { display: none !important; }

/* các nút nổi/popup cũ của mẫu */
.sticky-popup, .float-contact, .hotline-phone-ring-wrap { display: none !important; }

/* ---------- mobile ---------- */
@media (max-width: 849px) {
  #logo { width: auto !important; } #logo a { font-size: 26px; } #logo a::before { width: 40px; height: 32px; flex-basis: 40px; }
  #top-bar .ma-tb { font-size: 12.5px; }
  .ma-h2 { font-size: 28px; }
  .ma-hero-in { min-height: 0; padding: 26px 0 34px; max-width: none; }
  .ma-h1 { font-size: 38px; margin: 14px 0 12px; }
  .ma-lead { font-size: 18px; }
  .ma-bens { margin: 24px 0 26px; justify-content: space-between; }
  .ma-ben, .ma-ben:first-child { width: 33%; margin-left: 0; }
  .ma-ben img { width: 48px; height: 48px; } .ma-ben span { font-size: 15px; }
  .ma-btns { flex-direction: column; gap: 12px; } .ma-btn { min-width: 0; width: 100%; height: 52px; font-size: 17px; }
  .ma-needs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .ma-needs b { width: 96px; height: 96px; } .ma-needs img { width: 64px; height: 64px; } .ma-needs span { font-size: 16px; }
  .ma-head { flex-wrap: wrap; } .ma-more { font-size: 15px; }
  .ma-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ma-cimg { height: 170px; } .ma-cbody { padding: 12px; } .ma-card h3 { font-size: 16px; } .ma-cdesc { font-size: 13px; } .ma-price { font-size: 18px; margin: 10px 0 6px; } .ma-add { font-size: 14px; height: 42px; gap: 4px; } .ma-add .ma-ic { font-size: 17px; }
  .ma-ing { grid-template-columns: minmax(0, 1fr); } .ma-ing-img { min-height: 250px; } .ma-ing-txt { padding: 26px 15px 20px; max-width: none; } .ma-ing-sub { font-size: 19px; } .ma-checks li { font-size: 17px; }
  .ma-commits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ma-commits > div { min-height: 0; padding: 18px 10px; } .ma-commits img { width: 56px; height: 56px; } .ma-commits h3 { font-size: 16px; } .ma-commits div div { font-size: 14px; } .ma-commits br { display: none; }
  .ma-consult { grid-template-columns: minmax(0, 1fr); gap: 22px; } .ma-cs-img { height: 260px; } .ma-cs-form .ma-h2 { font-size: 30px; } .ma-cs-sub { font-size: 16px; }
  .ma-f2 { gap: 10px; }
  .ma-tes { grid-template-columns: minmax(0, 1fr); gap: 14px; } .ma-tcard { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; min-height: 0; } .ma-tav { height: 120px; } .ma-tquote { font-size: 16px; } .ma-tquote br { display: none; }
  .ma-blog { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ma-ft { grid-template-columns: minmax(0, 1fr); gap: 22px; } .ma-ft > div, .ma-ft > div:last-child { padding: 0; border: 0 !important; } .ma-ft-logo { font-size: 36px; } .ma-ft-mark { width: 56px; height: 46px; flex-basis: 56px; }
  .ma-fbar-in { flex-direction: column; gap: 6px; }
  .ma-ing .ma-h2 { font-size: 31px; white-space: normal; }
  .ma-eyebrow { font-size: 12.5px; letter-spacing: 1.2px; }
  .ma-mcall .ma-ic { font-size: 24px; }
  .ma-ft { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ma-ft > div:first-child, .ma-ft > div:last-child { grid-column: 1 / -1; }
}
/* mob-hero */
@media (max-width: 849px) {
  .section.ma-hero { padding-top: 250px !important; min-height: 0; background-color: #fdf0f4 !important; }
  .ma-hero .section-bg { top: 0; bottom: auto; height: 250px; background-color: #fbe6ee; }
  .ma-hero .section-bg img.bg { object-position: 78% 50% !important; }
  .ma-hero .section-bg { background-size: cover; background-position: 78% 50% !important; }
}
/* /mob-hero */

/* mid-fix */
@media (min-width: 850px) and (max-width: 1399px) {
  #header .header-search-form { width: 420px !important; max-width: 420px !important; margin-left: 30px !important; }
  .ma-hr { gap: 18px; }
  .ma-ing { grid-template-columns: 52% minmax(0, 1fr); }
  .ma-ing .ma-h2 { white-space: normal; font-size: 40px; }
  .ma-consult { grid-template-columns: 45% minmax(0, 1fr); gap: 40px; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  .ma-hr .ma-hot span, .ma-hr .ma-cart span { display: none; }
  .ma-h1 { font-size: 54px; }
  .ma-needs b { width: 112px; height: 112px; } .ma-needs img { width: 76px; height: 76px; }
  .ma-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-commits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-tcard { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; }
  .ma-blog .ma-bimg { height: 180px; }
  .ma-ft { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } .ma-ft > div:nth-child(3) { border-right: 0; } .ma-ft > div:last-child { padding-left: 20px; }
  .ma-ing-txt { padding-left: 30px; }
}
/* /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; }
/* ruler:auto BEGIN — tools/astra-bridge/lab/ruler_fix.py, đừng sửa tay */
@media (min-width: 850px) {
  .ma-commits img { width: 92px !important; height: 92px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
}
@media (max-width: 849px) {
  .ma-commits img { width: 76px !important; height: 76px !important; }
}
/* ruler:auto END */
/* ruler:manual — sau khối auto: mobile giữ cỡ vừa ô 2 cột */
@media (max-width: 849px) { .ma-commits > div img { width: 60px !important; height: 60px !important; } }