/* Mầm Xinh (mevabe2) — trang chủ y hệt mockup home-desktop-v3 (hồng #ee3e80 màu gốc, hồng phấn #ffe9f1, xanh lá #afe26c), cỡ đo theo mockup x1.79 (09-30) */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap");
:root { --mx-pink: #EE3E80; --mx-pink-d: #D92D6E; --mx-blush: #FFE9F1; --mx-blush2: #FEEDF4; --mx-green: #AFE26C; --mx-green-d: #6DB33F; --mx-ink: #1F2233; --mx-text: #4A4A55; --mx-muted: #7B7B86; --mx-line: #F3E3EA; }
body, p, li, a, span, input, select, textarea, button, td, th, label, .nav > li > a { font-family: "Nunito Sans", sans-serif !important; }
h1, h2, h3, h4, .mx-h, .mx-h2, #logo a, .mx-ft-logo b, .mx-perk b { font-family: "Nunito", "Nunito Sans", sans-serif !important; }
body { color: var(--mx-text); background: #fff; }
/* header */
#top-bar { background: var(--mx-pink) !important; } #top-bar .flex-row { justify-content: center; } #top-bar .nav > li, #top-bar li.html { color: #fff !important; font-size: 17.5px !important; text-transform: none !important; letter-spacing: 0 !important; }
.mx-tb { display: inline-flex; align-items: center; gap: 14px; color: #fff; font-weight: 600; } .mx-mi { display: inline-block; width: 30px; height: 26px; background: #fff; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
#header .header-main { background: #fff !important; border-bottom: 1px solid #F6EEF2; } #header #logo { width: 330px !important; margin: 0 !important; top: 0 !important; }
#header #logo a { position: relative; top: 0 !important; margin: 0 !important; white-space: nowrap; display: flex; align-items: center; gap: 12px; height: 97px; font-size: 44px; font-weight: 900; color: var(--mx-pink) !important; line-height: 1; text-transform: none !important; letter-spacing: -0.3px; padding-bottom: 19px; }
#header #logo a::before { content: ""; width: 72px; height: 66px; flex: 0 0 72px; margin-top: 19px; background: url(icons/logo.png) center/contain no-repeat; } #header #logo a::after { content: "Cùng mẹ nuôi mầm hạnh phúc"; position: absolute; left: 84px; top: 62px; line-height: 1.1; font-family: "Nunito Sans", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; color: #5B5560; text-transform: none; }
#header .header-search-form { width: 548px; max-width: 548px; margin-left: 104px; } #header .header-search-form .searchform { background: var(--mx-blush); border-radius: 14px; } #header .header-search-form .search-field { background: transparent !important; border: 0 !important; height: 50px !important; box-shadow: none !important; font-size: 15px !important; padding-left: 24px !important; color: var(--mx-ink); } #header .header-search-form .search-field::placeholder { color: #8A7F86; }
#header .header-search-form .ux-search-submit { background: var(--mx-pink) url(icons/search-w.png) center/24px no-repeat !important; border-radius: 13px !important; height: 50px !important; min-height: 50px !important; width: 62px; margin: 0 !important; } #header .header-search-form .ux-search-submit i { opacity: 0; }
.mx-hr { display: inline-flex; gap: 40px; } .mx-hr a { display: inline-flex; align-items: center; gap: 12px; color: var(--mx-ink) !important; font-size: 16px; font-weight: 600; } .mx-hr img { width: 38px; height: 38px; }
#header .header-bottom { background: #fff !important; border-bottom: 1px solid #F6EEF2 !important; } #header .header-bottom .header-nav { flex-wrap: nowrap !important; } #header .header-bottom .header-nav > li { margin: 0 31px !important; white-space: nowrap; } #header .header-bottom .header-nav > li > a { color: var(--mx-pink) !important; font-size: 17.5px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; padding: 0 !important; }
#header .header-bottom .header-nav > li > a:hover, #header .header-bottom .header-nav > li.active > a { color: var(--mx-pink-d) !important; }
.mobile-nav i, .mobile-nav .icon-menu, .mobile-nav .cart-icon, .mobile-nav .icon-shopping-bag { color: var(--mx-pink) !important; } .mobile-nav .button, .mobile-nav .icon-box { background: transparent !important; box-shadow: none !important; }
.header-nav .cart-icon strong, .mobile-nav .cart-icon strong { border-color: var(--mx-pink) !important; color: var(--mx-pink) !important; } .mobile-nav .cart-icon strong::after { border-color: var(--mx-pink) !important; }
.home #header .header-bottom, #header .header-bottom { display: block !important; } @media (max-width: 849px) { #header .header-search-form { width: 100% !important; max-width: none !important; margin: 0 !important; } #header .header-bottom { padding: 6px 0; } }
/* chung */
.mx-sec p, .mx-footer p { margin-bottom: 0; } .mx-sec .col, .mx-footer .col, .mx-perks-sec .col, .mx-hero .col, .mx-ft-bottom .col { padding-bottom: 0 !important; }
.mx-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 16px 0 42px; margin-bottom: 18px; }
.mx-h2 { color: var(--mx-pink) !important; font-size: 37px !important; font-weight: 900 !important; line-height: 1.2 !important; margin: 0 !important; letter-spacing: -0.3px; } .mx-h2 span { color: var(--mx-ink); } .mx-sub { color: #56525A; font-size: 20.5px; margin-top: 4px !important; }
.mx-more { color: var(--mx-pink) !important; font-size: 18px; font-weight: 600; white-space: nowrap; padding-bottom: 8px; } .mx-more span { margin-left: 8px; }
.mx-btns { display: flex; gap: 34px; } .mx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--mx-pink); color: #fff !important; border: 2px solid var(--mx-pink); border-radius: 12px; font-size: 18px; font-weight: 700; padding: 0 34px; min-height: 54px; box-shadow: 0 6px 14px rgba(238,62,128,.18); } .mx-btn-o { background: #fff; color: var(--mx-pink) !important; box-shadow: none; } .mx-btn:hover { background: var(--mx-pink-d); color: #fff !important; } .mx-btn-o:hover { background: var(--mx-blush); color: var(--mx-pink) !important; }
.mx-eyebrow { color: var(--mx-pink); font-size: 15px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; } .mx-eyebrow-d { color: #24301C; }
.mx-noimg { display: block; width: 100%; height: 100%; min-height: 120px; background: var(--mx-blush); }
/* hero */
.section.mx-hero { max-width: 1380px; margin: 4px auto 0; border-radius: 26px; overflow: hidden; background-color: var(--mx-blush) !important; min-height: 428px; } .mx-hero .section-bg { background-size: cover !important; background-position: 100% 50% !important; }
.mx-hero .row { max-width: 1380px !important; } .mx-hero-in { padding: 54px 0 0 56px; max-width: 790px; min-height: 428px; }
.mx-hero-in .mx-eyebrow { margin-bottom: 14px !important; } .mx-hero-in h1 { color: var(--mx-ink) !important; font-size: 64px !important; font-weight: 900 !important; line-height: 1.1 !important; margin: 0 0 16px !important; letter-spacing: -0.8px; } .mx-hero-in h1 span { color: var(--mx-pink); }
.mx-lead { color: #3A3640; font-size: 21px; line-height: 1.6 !important; margin-bottom: 24px !important; }
/* độ tuổi */
.mx-ages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; max-width: 1300px; margin: 0 auto; } .mx-age { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--mx-pink) !important; }
.mx-age-img { display: block; width: 242px; height: 242px; border-radius: 50%; border: 9px solid #FCE4EE; overflow: hidden; background: var(--mx-blush); box-shadow: 0 4px 16px rgba(238,62,128,.08); } .mx-age-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .mx-age:hover .mx-age-img img { transform: scale(1.05); }
.mx-age b { display: block; margin-top: 12px; font-family: "Nunito", sans-serif; font-size: 21px; font-weight: 800; } .mx-age-1 b { color: var(--mx-ink); } .mx-age small { display: block; color: #5E5A62; font-size: 18px; }
/* nhu cầu */
.mx-needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .mx-need { display: flex; gap: 22px; align-items: center; border: 1px solid var(--mx-line); border-radius: 18px; padding: 16px 12px 16px 18px; background: #fff; box-shadow: 0 2px 12px rgba(238,62,128,.04); }
.mx-need-img { flex: 0 0 220px; } .mx-need-img a { display: block; } .mx-need-img img { display: block; width: 220px; height: 214px; object-fit: cover; border-radius: 14px; background: var(--mx-blush); }
.mx-need h3 { margin: 0 0 12px !important; white-space: nowrap; font-size: 22px !important; font-weight: 800 !important; } .mx-need h3 a { color: var(--mx-pink) !important; } .mx-need ul { list-style: none; margin: 0 0 16px !important; } .mx-need li { margin: 0 0 8px !important; padding-left: 34px; font-size: 17px; color: #4E4A52; background: url(icons/check-c.png) left center/22px no-repeat; }
.mx-go a { color: var(--mx-pink) !important; font-size: 19px; font-weight: 800; } .mx-go span { margin-left: 10px; }
/* tab + sản phẩm */
.mx-tabs { display: flex; gap: 10px; padding-left: 42px; margin-bottom: 22px; flex-wrap: wrap; } .mx-tabs > p { display: contents; } .mx-tabs a { display: inline-flex; align-items: center; height: 46px; padding: 0 28px; border-radius: 23px; background: #F3F2F4; color: #45414A !important; font-size: 17px; font-weight: 600; } .mx-tabs a.on { background: var(--mx-pink); color: #fff !important; box-shadow: 0 4px 12px rgba(238,62,128,.22); }
.mx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .mx-grid > * { min-width: 0; }
.mx-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mx-line); border-radius: 18px; padding: 16px 20px 20px; box-shadow: 0 2px 12px rgba(238,62,128,.04); }
.mx-cimg { display: block; height: 262px; margin-bottom: 14px; } .mx-cimg img { width: 100%; height: 100%; object-fit: contain; } .mx-cname { color: var(--mx-ink) !important; font-size: 17.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; line-height: 1.35; } .mx-csub { color: var(--mx-muted); font-size: 15px; margin-top: 2px; }
.mx-rate { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .mx-rate em { font-style: normal; color: var(--mx-muted); font-size: 15px; }
.mx-stars { position: relative; display: inline-block; font-size: 19px; line-height: 1; letter-spacing: 2px; color: #F4D2DE; } .mx-stars::before { content: "★★★★★"; } .mx-stars i { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--mx-pink); font-style: normal; } .mx-stars i::before { content: "★★★★★"; }
.mx-price { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 14px; } .mx-price b { color: var(--mx-pink); font-family: "Nunito", sans-serif; font-size: 25px; font-weight: 900; } .mx-price s { color: #9A949C; font-size: 15px; }
.mx-add { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 48px; border: 2px solid var(--mx-pink); border-radius: 13px; color: var(--mx-pink) !important; font-size: 17px; font-weight: 700; background: #fff; } .mx-add:hover { background: var(--mx-pink); color: #fff !important; }
.mx-age-b { position: absolute; right: 16px; top: 16px; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: #FDE3EE; color: var(--mx-pink); display: flex; flex-direction: column; align-items: center; justify-content: center; font-style: normal; font-family: "Nunito", sans-serif; font-size: 17px; font-weight: 800; line-height: 1.1; } .mx-age-b small { font-size: 12.5px; font-weight: 700; }
.mx-sale { position: absolute; left: 14px; top: 14px; z-index: 1; background: var(--mx-pink); color: #fff; font-style: normal; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 7px; }
/* câu chuyện */
.mx-story { position: relative; display: grid; grid-template-columns: 624px 1fr; gap: 50px; align-items: center; background: var(--mx-green); border-radius: 26px; padding: 30px; overflow: hidden; }
.mx-story-img img { display: block; width: 100%; height: 312px; object-fit: cover; border-radius: 22px; background: #D9F2B8; } .mx-story-txt { position: relative; z-index: 1; padding-right: 30px; }
.mx-story-txt .mx-eyebrow { margin-bottom: 12px !important; } .mx-story-txt h2 { color: #1D2415 !important; white-space: nowrap; font-size: 46.5px !important; font-weight: 900 !important; line-height: 1.15 !important; margin: 0 0 16px !important; letter-spacing: -0.6px; } .mx-story-p { color: #26301E; font-size: 18.5px; line-height: 1.6 !important; margin-bottom: 20px !important; }
.mx-chips { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .mx-chips > p { display: contents; } .mx-chip { display: inline-flex; align-items: center; gap: 12px; background: #fff; border-radius: 26px; height: 50px; padding: 0 24px 0 16px; color: #26262C; font-size: 17px; font-weight: 600; } .mx-chip img { width: 26px; height: 26px; }
.mx-story-go .mx-btn-o { min-height: 52px; } .mx-story-go span { margin-left: 6px; } .mx-story-leaf { position: absolute; right: 18px; bottom: -8px; width: 150px; pointer-events: none; } .mx-story-leaf img { width: 100%; height: auto; }
/* đánh giá */
.mx-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .mx-review { display: flex; gap: 22px; align-items: center; border: 1px solid var(--mx-line); border-radius: 18px; padding: 24px 16px 22px 24px; background: #fff; }
.mx-av { flex: 0 0 100px; } .mx-av img { display: block; width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #FCE4EE; background: var(--mx-blush); }
.mx-rv-stars { color: var(--mx-pink); font-size: 20px; letter-spacing: 3px; line-height: 1; margin-bottom: 12px; } .mx-rv-q { color: #4A4650; white-space: nowrap; font-size: 16.2px; line-height: 1.6; margin-bottom: 14px; }
.mx-rv-by { display: flex; align-items: center; gap: 26px; } .mx-rv-by b { color: var(--mx-ink); font-size: 16px; } .mx-rv-by span { display: inline-flex; align-items: center; gap: 8px; color: var(--mx-muted); font-size: 14.5px; } .mx-rv-by img { width: 20px; height: 20px; }
/* cẩm nang */
.mx-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .mx-post { border: 1px solid var(--mx-line); border-radius: 18px; overflow: hidden; background: #fff; }
.mx-post-img { display: block; height: 172px; } .mx-post-img img { width: 100%; height: 100%; object-fit: cover; } .mx-post-body { padding: 14px 24px 20px 40px; } .mx-pcat { display: block; color: var(--mx-pink); font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.mx-post h3 { margin: 0 0 8px !important; font-size: 23px !important; font-weight: 800 !important; line-height: 1.3 !important; max-width: 380px; } .mx-post h3 a { color: var(--mx-ink) !important; } .mx-read { color: var(--mx-pink) !important; font-size: 16px; font-weight: 800; } .mx-read span { margin-left: 6px; }
/* cam kết + footer */
.mx-perks { display: grid; grid-template-columns: repeat(3, 1fr); background: #FEEBF2; border-radius: 26px; min-height: 108px; align-items: center; padding: 0 60px; } .mx-perks > p { display: contents; } .mx-perk { display: flex; align-items: center; justify-content: center; gap: 30px; }
.mx-perk img { width: 82px; height: 82px; object-fit: contain; } .mx-perk b { display: block; color: var(--mx-pink); font-size: 19.5px; font-weight: 800; line-height: 1.3; } .mx-perk span { display: block; color: #5A5560; font-size: 16.5px; }
.section.mx-footer { background: var(--mx-blush2) !important; padding-bottom: 0 !important; } .mx-footer h4 { color: var(--mx-pink) !important; font-size: 18.5px !important; font-weight: 800 !important; margin: 20px 0 16px !important; }
.mx-ft-logo { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; } .mx-ft-logo img { width: 84px; height: 84px; object-fit: contain; } .mx-ft-logo b { display: block; color: var(--mx-pink); font-size: 46px; font-weight: 900; line-height: 1; } .mx-ft-logo span { display: block; color: #7A6B72; font-size: 16px; margin-top: 4px; }
.mx-footer ul { list-style: none; margin: 0 !important; } .mx-ft-info li { display: flex; align-items: flex-start; gap: 20px; color: #3E3A44; font-size: 17px; line-height: 1.5; margin: 0 0 12px 18px !important; } .mx-ft-info li a { color: #3E3A44 !important; } .mx-ft-info img { width: 30px; height: 30px; flex: 0 0 30px; }
.mx-ft-links li { margin: 0 0 10px !important; font-size: 17.3px; line-height: 1.5; } .mx-ft-links a { color: #5A5560 !important; } .mx-ft-links a:hover { color: var(--mx-pink) !important; }
.mx-ft-c2, .mx-ft-c3 { border-right: 1px solid #F3D9E4; } .mx-ft-c3 .col-inner { padding-left: 34px; } .mx-ft-c4 .col-inner { padding-left: 32px; } @media (min-width: 850px) { .mx-footer .mx-ft-c1 { flex-basis: 33.3%; max-width: 33.3%; } .mx-footer .mx-ft-c2 { flex-basis: 17%; max-width: 17%; } .mx-footer .mx-ft-c3 { flex-basis: 19%; max-width: 19%; } .mx-footer .mx-ft-c4 { flex-basis: 30.7%; max-width: 30.7%; } }
.mx-ft-note { color: #5A5560; font-size: 16px; margin-bottom: 16px !important; } .mx-nl { display: flex; margin: 0 0 20px; max-width: 420px; } .mx-nl input { flex: 1; min-width: 0; border: 1px solid #F3D9E4 !important; border-right: 0 !important; border-radius: 12px 0 0 12px !important; box-shadow: none !important; margin: 0 !important; height: 54px !important; font-size: 16px !important; background: #fff !important; padding-left: 20px !important; }
.mx-nl button { flex: 0 0 auto; background: var(--mx-pink); color: #fff; border: 0; border-radius: 12px; margin: 0 0 0 -8px; padding: 0 38px; height: 54px; font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.mx-social { display: flex; gap: 14px; } .mx-social > p { display: contents; } .mx-social img { width: 36px; height: 36px; display: block; }
.mx-ft-bottom { background: var(--mx-pink); margin-top: 28px !important; max-width: none !important; } .mx-ft-bottom .col { padding: 0 !important; } .mx-ft-copy { color: #fff !important; text-align: center; font-size: 16px; line-height: 68px; margin: 0 !important; }
.absolute-footer, #zalo-vr, #phone-vr, .button-contact, .echbay-sms-messenger, .float-contact, .hotline-bar { display: none !important; }
/* nhịp dọc theo mockup */ .section.mx-sec { padding-bottom: 0 !important; } .section.mx-ages-sec { padding-top: 10px !important; } .mx-ages-sec .mx-head { margin-bottom: 10px; } .section.mx-needs-sec { padding-top: 18px !important; } .section.mx-best-sec { padding-top: 18px !important; } .mx-best-sec .mx-head { margin-bottom: 14px; } .section.mx-story-sec { padding-top: 22px !important; } .section.mx-reviews-sec { padding-top: 14px !important; } .section.mx-blog-sec { padding-top: 16px !important; padding-bottom: 18px !important; } .section.mx-perks-sec { padding-top: 0 !important; padding-bottom: 14px !important; }
.mx-tabs a { height: 40px; } .mx-card { padding: 14px 18px 16px; } .mx-cimg { height: 246px; margin-bottom: 10px; } .mx-price { margin: 6px 0 12px; } .mx-add { min-height: 46px; }
.mx-story { padding: 16px 40px 16px 24px; } .mx-story-img img { height: 337px; } .mx-story-p { line-height: 1.55 !important; margin-bottom: 18px !important; } .mx-story-txt h2 { margin-bottom: 12px !important; }
.mx-review { padding: 14px 10px 14px 18px; gap: 18px; } .mx-av, .mx-av img { width: 94px; height: 94px; flex-basis: 94px; } .mx-rv-txt { flex: 1; min-width: 0; } .mx-rv-stars { margin-bottom: 10px; } .mx-rv-q { line-height: 1.55; margin-bottom: 12px; } @media (max-width: 1399px) { .mx-rv-q { white-space: normal; } .mx-rv-q br { display: none; } } .mx-post-body { padding: 10px 20px 12px 40px; } .mx-post h3 { line-height: 1.25 !important; margin-bottom: 6px !important; max-width: 310px; }
.section.mx-footer { padding-top: 14px !important; } .mx-footer h4 { margin: 10px 0 14px !important; } .mx-ft-logo { margin-bottom: 12px; } .mx-ft-info li { margin-bottom: 6px !important; } .mx-ft-links li { margin-bottom: 4px !important; } .mx-ft-bottom { margin-top: 14px !important; } .mx-footer .row:first-child .col { padding-bottom: 0 !important; }
@media (min-width: 850px) and (max-width: 1399px) { .mx-age-img { width: 200px; height: 200px; } .mx-need-img { flex-basis: 160px; } .mx-need-img img { width: 160px; height: 170px; } .mx-story { grid-template-columns: 46% minmax(0, 1fr); gap: 30px; } .mx-story-txt h2 { font-size: 40px !important; } .mx-story-txt h2 { white-space: normal; } .mx-story-txt { padding-right: 0; } .mx-social { flex-wrap: wrap; } .mx-rv-q { white-space: normal; } }
@media (min-width: 850px) and (max-width: 1199px) { .mx-age-img { width: 160px; height: 160px; } .mx-needs, .mx-reviews { grid-template-columns: 1fr; } .mx-grid { grid-template-columns: repeat(3, 1fr); } .mx-review { max-width: 700px; } .mx-perks { padding: 0 20px; } .mx-perk { gap: 14px; } .mx-perk img { width: 60px; height: 60px; } .mx-hero-in h1 { font-size: 52px !important; } }
@media (max-width: 849px) {
  #header #logo { width: auto !important; } #header #logo a { font-size: 28px; gap: 8px; padding-bottom: 12px; } #header #logo a::before { width: 44px; height: 44px; flex-basis: 44px; margin-top: 10px; } #header #logo a::after { left: 52px; font-size: 11px; }
  #top-bar li.html { font-size: 12.5px !important; } .mx-tb { gap: 8px; } .mx-mi { width: 22px; height: 18px; }
  .mx-head { padding: 0 4px; } .mx-h2 { font-size: 30px !important; } .mx-sub { font-size: 16px; } .mx-more { font-size: 15px; padding-bottom: 4px; }
  .mx-hero-in { padding: 20px 6px 28px; min-height: 0; } .mx-hero-in h1 { font-size: 34px !important; } .mx-lead { font-size: 16px; } .mx-lead br { display: none; } .mx-btns { gap: 12px; flex-wrap: wrap; } .mx-btn { padding: 0 22px; font-size: 16px; min-height: 48px; }
  .mx-ages { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; } .mx-age-img { width: 100px; height: 100px; border-width: 5px; } .mx-age b { font-size: 16px; margin-top: 6px; } .mx-age small { font-size: 14px; }
  .mx-needs, .mx-reviews, .mx-posts { grid-template-columns: 1fr; gap: 14px; } .mx-need { gap: 16px; padding: 12px; } .mx-need-img { flex-basis: 130px; } .mx-need-img img { width: 130px; height: 140px; } .mx-need h3 { font-size: 20px !important; } .mx-need li { font-size: 15px; margin-bottom: 4px !important; } .mx-go a { font-size: 16px; }
  .mx-tabs { padding-left: 4px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 14px; } .mx-tabs a { flex: 0 0 auto; height: 40px; padding: 0 18px; font-size: 15px; }
  .mx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mx-card { padding: 10px 10px 12px; border-radius: 14px; } .mx-cimg { height: 150px; } .mx-cname { font-size: 15px; } .mx-csub { font-size: 13px; } .mx-rate { gap: 6px; } .mx-stars { font-size: 14px; letter-spacing: 0; } .mx-rate em { font-size: 12.5px; } .mx-price { gap: 6px; flex-wrap: wrap; } .mx-price b { font-size: 19px; } .mx-add { min-height: 40px; font-size: 14.5px; } .mx-age-b { width: 46px; height: 46px; font-size: 13px; right: 8px; top: 8px; } .mx-age-b small { font-size: 10px; }
  .mx-story { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 14px !important; } .mx-story-txt h2 { white-space: normal; } .mx-cname { white-space: normal; } .mx-rv-by { flex-wrap: wrap; gap: 2px 14px; } .mx-rv-q { white-space: normal; } .mx-rv-q br { display: none; } .mx-story-txt { padding-right: 6px !important; } .mx-story-img img { height: 210px; } .mx-story-txt { padding: 0 6px 10px; } .mx-story-txt h2 { font-size: 30px !important; } .mx-story-p { font-size: 16px; } .mx-chip { height: 42px; font-size: 15px; padding: 0 16px 0 12px; } .mx-story-leaf { width: 80px; }
  .mx-review { padding: 18px; gap: 16px; } .mx-av { flex-basis: 72px; } .mx-av img { width: 72px; height: 72px; } .mx-post-body { padding: 12px 18px 16px; } .mx-post h3 { font-size: 19px !important; }
  .mx-perks { grid-template-columns: 1fr; padding: 16px 20px; gap: 14px; } .mx-perk { justify-content: flex-start; gap: 18px; } .mx-perk img { width: 54px; height: 54px; } .mx-perk b { font-size: 19px; } .mx-perk span { font-size: 15px; }
  .mx-ft-c2, .mx-ft-c3 { border: 0; } .mx-ft-c2 .col-inner, .mx-ft-c3 .col-inner, .mx-ft-c4 .col-inner { padding-left: 0; } .mx-ft-logo b { font-size: 36px; } .mx-ft-info li { margin-left: 0 !important; font-size: 15.5px; } .mx-ft-copy { font-size: 14px; line-height: 1.5; padding: 16px 10px; }
}
/* mob-hero */ @media (max-width: 849px) { .section.mx-hero { width: auto !important; margin: 4px 12px 0 !important; border-radius: 18px; padding-top: 250px !important; background-color: var(--mx-blush) !important; min-height: 0 !important; } .section.mx-hero .section-bg { top: 0 !important; bottom: auto !important; height: 250px !important; background-size: cover !important; background-position: 88% 50% !important; } } /* /mob-hero */
/* mid-fix */ @media (min-width: 850px) and (max-width: 1399px) { #header .header-bottom .header-nav > li { margin: 0 14px !important; } #header #logo { width: 290px !important; } #header .header-search-form { margin-left: 30px !important; } .mx-hr { gap: 22px; } } @media (min-width: 850px) and (max-width: 1199px) { #header #logo a { font-size: 34px !important; } #header #logo a::before { width: 56px; height: 56px; flex-basis: 56px; } #header #logo a::after { left: 68px; font-size: 13px; } #header .header-bottom .header-nav > li { margin: 0 8px !important; } #header .header-bottom .header-nav > li > a { font-size: 15px !important; } } /* /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; }