/* Nhà thuốc An Tâm (nhathuoc2) — trang chủ theo mockup nhathuoc2-home/mockups/home-desktop-v1.png (901px -> 1440 = x1.598) */
:root { --nt-b: #1565c0; --nt-bd: #0d3c8c; --nt-nv: #0f2a5f; --nt-g: #43a047; --nt-ink: #1d2433; --nt-mut: #5b6475; --nt-bbg: #e8f1fc; --nt-gbg: #e9f5e7; }
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; }
.nt-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: 0 0 auto; }

/* ---------- header ---------- */
.header-main { background: var(--nt-b) !important; }
#logo { width: 270px !important; }
#logo a { font-size: 0 !important; display: flex !important; flex-direction: column; justify-content: center; padding-left: 84px; min-height: 74px; color: #fff !important; text-transform: none !important; line-height: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 4h18v16h16v18H38v4H20V38H4V20h16z' fill='%23ffffff'/%3E%3Cpath d='M58 22C40 22 26 34 26 60c18 0 32-12 32-38z' fill='%2343a047'/%3E%3Cpath d='M30 56 52 30' stroke='%23ffffff' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") left center/72px 72px no-repeat; }
#logo a::before { content: "NHÀ THUỐC"; white-space: nowrap; font-family: 'Be Vietnam Pro', sans-serif; font-size: 23px; font-weight: 600; letter-spacing: .3px; color: #fff; }
#logo a::after { content: "An Tâm"; white-space: nowrap; font-family: 'Be Vietnam Pro', sans-serif; font-size: 44px; font-weight: 700; color: #fff; margin-top: 2px; text-transform: none; letter-spacing: -.3px; }
#header .header-main .flex-left { flex: 1 1 auto; justify-content: flex-start; }
#header .header-search-form { width: 611px !important; max-width: 611px !important; margin-left: 67px !important; }
#header .header-search-form .searchform { background: #fff; border-radius: 8px; overflow: hidden; }
#header .header-search-form .search-field { height: 50px !important; border: 0 !important; box-shadow: none !important; font-size: 17px; padding-left: 22px !important; color: var(--nt-ink); background: #fff !important; }
#header .header-search-form .search-field::placeholder { color: #8b93a3; }
#header .header-search-form .ux-search-submit { height: 50px; width: 60px; background: #fff !important; color: var(--nt-b) !important; border: 0; border-left: 1px solid #e3e8f0 !important; }
#header .header-search-form .ux-search-submit i { font-size: 22px; }
.nt-hr { display: inline-flex; align-items: center; gap: 24px; }
.nt-hr a { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; white-space: nowrap; }
.nt-hr .nt-ic { font-size: 30px; }
.nt-hot span { display: flex; flex-direction: column; line-height: 1.15; }
.nt-hot small { font-size: 15px; opacity: .95; } .nt-hot b { font-size: 19px; font-weight: 700; letter-spacing: .2px; }
.nt-sep { width: 1px; height: 36px; background: rgba(255, 255, 255, .45); display: inline-block; }
.nt-cart span { font-size: 18px; font-weight: 500; }
.nt-cart .nt-ic { stroke-width: 1.8; font-size: 34px; }
.header-bottom { background: #fff !important; box-shadow: 0 3px 8px rgba(15, 42, 95, .07); border: 0; }
#header .header-bottom .header-nav { justify-content: flex-start; gap: 0 44px; flex-wrap: nowrap; }
#header .header-bottom .flex-left { flex: 1 1 auto; }
#header .header-bottom .header-nav > li { margin: 0 !important; }
#header .header-bottom .header-nav > li > a { color: var(--nt-b) !important; font-size: 17px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap; padding: 0 !important; }
#header .header-bottom .header-nav > li > a:hover { color: var(--nt-bd) !important; }
#header .header-bottom .header-nav > li.nt-catmenu > a .icon-angle-down { font-size: 14px; margin-left: 8px; opacity: 1; }
.nt-mcart { color: #fff !important; font-size: 26px; display: inline-flex; }
.nt-mcart .nt-ic { font-size: 26px; }
.header-main .mobile-nav i, .header-main .icon-menu { color: #fff !important; }

/* ---------- chung ---------- */
.section.nt-sec { padding: 0 !important; }
.nt-sec .col, .nt-footer .col { padding-bottom: 0 !important; }
.nt-h2 { font-size: 30px; line-height: 1.2; font-weight: 600; color: var(--nt-nv); margin: 0; letter-spacing: -.2px; }
.nt-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; }
.nt-head h2 { flex: 0 0 auto; width: fit-content; }
.nt-more { color: var(--nt-b) !important; font-weight: 600; font-size: 17px; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.nt-more .nt-ic { font-size: 20px; }
.nt-note { text-align: center; color: #6b7280; font-size: 15px; margin-top: 18px; }

/* ---------- hero ---------- */
.nt-hero-sec .row { padding: 19px 0 0; }
.nt-hero { display: grid; grid-template-columns: minmax(0, 920px) minmax(0, 440px); gap: 17px; height: 450px; }
.nt-hero-main { position: relative; border-radius: 12px; overflow: hidden; background: #e6f2e8 right center/cover no-repeat; }
.nt-slide { position: absolute; inset: 0; padding: 66px 0 0 113px; box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity .4s; }
.nt-slide.on { opacity: 1; visibility: visible; }
.nt-eyebrow { color: #2e8b2f; font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .2px; font-family: 'Be Vietnam Pro', sans-serif; }
.nt-h1 { font-size: 54px; line-height: 1.12; font-weight: 700; color: #0d47a1; margin: 14px 0 14px; letter-spacing: -1px; }
.nt-lead { font-size: 20px; color: var(--nt-ink); }
.nt-btn { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 28px; background: var(--nt-b); color: #fff !important; border-radius: 8px; font-size: 19px; font-weight: 600; margin-top: 24px; }
.nt-btn .nt-ic { font-size: 20px; }
.nt-harr { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--nt-b) !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); font-size: 20px; z-index: 3; }
.nt-harr.nt-prev { left: 20px; } .nt-harr.nt-next { right: 20px; }
.nt-dots { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.nt-dots i { width: 11px; height: 11px; border-radius: 50%; background: #c4c9d2; cursor: pointer; }
.nt-dots i.on { background: var(--nt-b); }
.nt-hero-side { display: grid; grid-template-rows: 247px 191px; gap: 12px; }
.nt-hs { position: relative; border-radius: 12px; overflow: hidden; padding: 30px 0 0 34px; box-sizing: border-box; background: var(--nt-bbg) right center/cover no-repeat; }
.nt-hs-2 { background-color: var(--nt-gbg); padding-top: 22px; }
.nt-hs h3 { font-size: 28px; line-height: 1.15; font-weight: 700; color: #0d47a1; margin: 0 0 10px; position: relative; z-index: 2; }
.nt-hs > div { font-size: 17px; color: var(--nt-ink); line-height: 1.45; position: relative; z-index: 2; }
.nt-obtn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 24px; border: 2px solid var(--nt-b); border-radius: 999px; color: #0d47a1 !important; background: #fff; font-size: 17px; font-weight: 600; margin-top: 16px; }
.nt-hs-2 .nt-obtn { margin-top: 12px; }
.nt-truck { position: absolute; right: 26px; top: 40px; width: 190px; height: 120px; object-fit: contain; }
.nt-svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(15, 42, 95, .08); height: 92px; align-items: center; }
.nt-svc > div { display: flex; align-items: center; gap: 22px; padding-left: 70px; border-left: 1px solid #e4e8ef; height: 56px; }
.nt-svc > div:first-child { border-left: 0; }
.nt-svc img { width: 54px; height: 54px; object-fit: contain; }
.nt-svc span { display: flex; flex-direction: column; font-size: 16px; color: var(--nt-mut); line-height: 1.4; }
.nt-svc b { font-family: 'Be Vietnam Pro', sans-serif; font-size: 20px; color: #0d47a1; font-weight: 600; }

/* ---------- danh mục ---------- */
.nt-cats-sec .row { padding: 42px 0 0; }
.nt-cats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.nt-cats a { height: 164px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 30px; box-sizing: border-box; gap: 14px; text-align: center; color: var(--nt-ink) !important; transition: transform .2s; }
.nt-cats a:hover { transform: translateY(-3px); }
.nt-cats .nt-b { background: var(--nt-bbg); } .nt-cats .nt-g { background: var(--nt-gbg); }
.nt-cats img { width: 66px; height: 66px; object-fit: contain; }
.nt-cats span { font-size: 17px; line-height: 1.3; font-weight: 500; }

/* ---------- ưu đãi ---------- */
.nt-flash-sec .row { padding: 33px 0 0; }
.nt-flash { background: #e4effc; border-radius: 16px; padding: 24px 32px 28px; }
.nt-fhead { display: flex; align-items: center; gap: 20px; padding: 0 30px 0 12px; }
.nt-fhead h2 { font-size: 40px; font-weight: 700; display: flex; align-items: center; gap: 22px; flex: 0 0 auto; width: fit-content; }
.nt-fhead h2 .nt-ic { color: #f5a623; font-size: 54px; }
.nt-timer { display: flex; align-items: center; gap: 8px; margin-left: 76px; }
.nt-timer span { font-size: 17px; color: var(--nt-nv); font-weight: 600; margin-right: 12px; white-space: nowrap; }
.nt-timer b, .nt-timer { flex: 0 0 auto; }
.nt-timer b { width: 54px; height: 54px; border-radius: 6px; background: #0d47a1; color: #fff; font-size: 26px; font-weight: 600; display: flex; align-items: center; justify-content: center; font-family: 'Be Vietnam Pro', sans-serif; }
.nt-timer i { font-style: normal; font-size: 24px; color: var(--nt-nv); font-weight: 700; }
.nt-fhead .nt-more { margin-left: auto; font-size: 19px; }
.nt-track { position: relative; margin-top: 22px; }
.nt-track .nt-prods { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 12px) / 5); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 0 2px; }
.nt-track .nt-prods::-webkit-scrollbar { display: none; }
.nt-track .nt-card { scroll-snap-align: start; }
.nt-arr { position: absolute; top: 40%; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--nt-b) !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); font-size: 22px; z-index: 3; cursor: pointer; }
.nt-arr.nt-prev { left: -26px; } .nt-arr.nt-next { right: -26px; }
.nt-card { background: #fff; border-radius: 10px; border: 1px solid #e7ebf1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.nt-cimg { display: block; height: 208px; margin: 8px 8px 0; background: #f5f7fa; border-radius: 6px; overflow: hidden; }
.nt-cimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nt-cbody { padding: 8px 16px 14px; display: flex; flex-direction: column; flex: 1; }
.nt-unit { font-size: 15px; color: #7a8291; min-height: 20px; }
.nt-card h3 { font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 17.5px; font-weight: 500; line-height: 1.3; margin: 2px 0 8px; min-height: 46px; }
.nt-card h3 a { color: var(--nt-ink) !important; }
.nt-price { color: #0d47a1; font-size: 21px; font-weight: 700; margin-bottom: 10px; margin-top: auto; }
.nt-buy { display: flex; align-items: center; justify-content: center; height: 42px; border: 2px solid var(--nt-b); border-radius: 7px; color: #0d47a1 !important; font-size: 18px; font-weight: 600; }
.nt-buy:hover { background: var(--nt-b); color: #fff !important; }

/* ---------- theo nhu cầu ---------- */
.nt-tabs-sec .row { padding: 26px 0 0; }
.nt-thead { display: flex; align-items: center; gap: 30px; padding: 0 18px; }
.nt-thead h2 { flex: 0 0 auto; width: fit-content; font-size: 26.5px; }
.nt-tabs { display: flex; gap: 10px; margin-left: 6px; flex-wrap: nowrap; }
.nt-tabs a { height: 43px; padding: 0 22px; border-radius: 8px; background: #eef1f6; color: #5b6475 !important; font-size: 16.5px; display: inline-flex; align-items: center; white-space: nowrap; }
.nt-tabs a.on { background: var(--nt-b); color: #fff !important; font-weight: 600; padding: 0 34px; }
.nt-grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.nt-grid5 .nt-cimg { height: 172px; }

/* ---------- tra cứu bệnh ---------- */
.nt-lookup-sec .row { padding: 22px 0 0; }
.nt-lookup { background: var(--nt-gbg); border-radius: 16px; padding: 26px 38px 24px 64px; }
.nt-lk-top { display: flex; align-items: center; gap: 22px; }
.nt-lk-ic { width: 66px; height: 66px; object-fit: contain; }
.nt-lk-t h2 { font-size: 31px; font-weight: 700; }
.nt-lk-t div { font-size: 19px; color: var(--nt-ink); margin-top: 4px; }
.nt-lk-form { margin: 0 0 0 auto !important; width: 612px; height: 50px; background: #fff; border-radius: 999px; display: flex; align-items: center; gap: 12px; padding: 0 22px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.nt-lk-form .nt-ic { font-size: 24px; color: #4b5563; }
.nt-lk-form input[type=search] { border: 0 !important; box-shadow: none !important; height: 48px; margin: 0; font-size: 17px; background: transparent; padding: 0; }
.nt-az { display: grid; grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0 -26px; }
.nt-az a { height: 46px; border-radius: 6px; background: #fff; color: #0d47a1 !important; font-size: 19px; font-weight: 600; display: flex; align-items: center; justify-content: center; font-family: 'Be Vietnam Pro', sans-serif; }
.nt-az a.on, .nt-az a:hover { background: #0d47a1; color: #fff !important; }
.nt-sug { display: flex; align-items: center; gap: 22px; margin: 16px 0 0 -26px; font-size: 18px; }
.nt-sug b { font-weight: 500; color: var(--nt-ink); margin-right: 14px; }
.nt-sug a { color: var(--nt-b) !important; } .nt-sug i { font-style: normal; color: #98a2b3; }

/* ---------- góc sức khỏe ---------- */
.nt-blog-sec .row { padding: 22px 0 26px; }
.nt-blog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.nt-bcard { border: 1px solid #e8ecf2; border-radius: 10px; overflow: hidden; background: #fff; padding-bottom: 18px; }
.nt-bimg { display: block; height: 155px; background: #eef2f7 center/cover no-repeat; }
.nt-bcard h3 { white-space: normal; overflow-wrap: anywhere; font-size: 18.5px; font-weight: 600; margin: 16px 24px 6px; line-height: 1.3; }
.nt-bcard h3 a { color: var(--nt-nv) !important; }
.nt-bex { font-size: 17px; color: var(--nt-mut); margin: 0 24px 10px; }
.nt-bcard .nt-more { margin-left: 24px; }

/* ---------- footer ---------- */
#footer .section.nt-footer { padding: 0 !important; border-top: 5px solid #6cbf5b !important; }
.nt-footer .row { padding: 16px 0 0; }
.nt-ft { display: grid; grid-template-columns: 595px 253px 269px minmax(0, 1fr); color: #fff; }
.nt-ft a, .nt-ft-brand > div { color: rgba(255, 255, 255, .95) !important; display: flex; align-items: center; gap: 16px; font-size: 16px; margin-bottom: 5px; }
.nt-ft-logo { gap: 14px !important; margin-bottom: 4px !important; }
.nt-mark { width: 58px; height: 58px; flex: 0 0 58px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 4h18v16h16v18H38v4H20V38H4V20h16z' fill='%23ffffff'/%3E%3Cpath d='M58 22C40 22 26 34 26 60c18 0 32-12 32-38z' fill='%2343a047'/%3E%3Cpath d='M30 56 52 30' stroke='%23ffffff' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; }
.nt-ft-logo span { font-family: 'Be Vietnam Pro', sans-serif; font-size: 34px; font-weight: 700; line-height: 1; display: flex; flex-direction: column; }
.nt-ft-logo small { font-size: 18px; font-weight: 600; text-transform: uppercase; margin-bottom: 2px; }
.nt-ft-tag { font-size: 17px !important; margin: 0 0 6px !important; }
.nt-ft-brand .nt-ic { font-size: 22px; color: #fff; }
.nt-ft h4 { color: #fff; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 18px; font-weight: 600; margin: 8px 0 10px; }
.nt-ft-col a { font-size: 16px; margin-bottom: 7px; }
.nt-ft-bar { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255, 255, 255, .4); margin-top: 4px; padding: 10px 24px 10px; font-size: 15px; color: rgba(255, 255, 255, .95); }
.absolute-footer, .text-popupform { display: none !important; }

/* ---------- mobile ---------- */
@media (max-width: 849px) {
  #logo { width: auto !important; } #logo a { padding-left: 46px; min-height: 48px; background-size: 40px 40px; }
  #logo a::before { font-size: 13px; } #logo a::after { font-size: 24px; }
  .nt-h2, .nt-thead h2, .nt-fhead h2, .nt-lk-t h2 { font-size: 25px; }
  .nt-head, .nt-thead, .nt-fhead { padding: 0; flex-wrap: wrap; }
  .nt-hero { grid-template-columns: minmax(0, 1fr); height: auto; gap: 12px; }
  .nt-hero-side { grid-template-rows: none; grid-template-columns: minmax(0, 1fr); }
  .nt-hs { min-height: 190px; padding: 22px 0 18px 20px; } .nt-hs h3 { font-size: 24px; } .nt-hs > div { font-size: 15px; } .nt-truck { width: 120px; height: 80px; top: auto; bottom: 16px; right: 14px; }
  .nt-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; padding: 8px 0; }
  .nt-svc > div { padding: 12px 10px; gap: 10px; border-left: 0; height: auto; } .nt-svc img { width: 38px; height: 38px; } .nt-svc b { font-size: 15px; } .nt-svc span { font-size: 13px; }
  .nt-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .nt-cats a { height: 112px; padding-top: 14px; gap: 8px; } .nt-cats img { width: 44px; height: 44px; } .nt-cats span { font-size: 13px; } .nt-cats br { display: none; }
  .nt-flash { padding: 20px 14px 24px; } .nt-fhead { gap: 10px; } .nt-fhead h2 .nt-ic { font-size: 32px; } .nt-timer { margin-left: 0; } .nt-timer b { width: 38px; height: 38px; font-size: 18px; } .nt-timer span { font-size: 14px; margin-right: 4px; } .nt-fhead .nt-more { margin-left: 0; font-size: 15px; }
  .nt-track .nt-prods { grid-auto-columns: 62%; } .nt-arr { display: none; }
  .nt-card h3 { font-size: 15px; min-height: 40px; } .nt-price { font-size: 17px; } .nt-cimg { height: 150px; } .nt-buy { font-size: 15px; height: 40px; } .nt-cbody { padding: 10px 12px 12px; } .nt-unit { font-size: 13px; }
  .nt-thead { gap: 12px; } .nt-tabs { margin: 0; overflow-x: auto; flex-wrap: nowrap; max-width: 100%; scrollbar-width: none; } .nt-tabs a, .nt-tabs a.on { padding: 0 16px; font-size: 14px; height: 38px; }
  .nt-grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nt-grid5 .nt-cimg { height: 150px; }
  .nt-lookup { padding: 20px 14px; } .nt-lk-top { flex-wrap: wrap; gap: 12px; } .nt-lk-ic { width: 44px; height: 44px; } .nt-lk-t div { font-size: 15px; }
  .nt-lk-form { width: 100%; margin: 0 !important; }
  .nt-az { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-left: 0; } .nt-az a { height: 38px; font-size: 16px; }
  .nt-sug { flex-wrap: wrap; gap: 10px; margin-left: 0; font-size: 15px; }
  .nt-blog { grid-template-columns: minmax(0, 1fr); } .nt-bcard h3 { font-size: 19px; }
  .nt-ft { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .nt-ft-brand { grid-column: 1 / -1; } .nt-ft-brand span { overflow-wrap: anywhere; }
  .nt-ft-bar { flex-direction: column; gap: 6px; padding: 12px 0; }
}
/* mob-hero */
@media (max-width: 849px) {
  .nt-hero-main { height: auto; padding-top: 230px; background-color: #f1f7f2; background-size: auto 230px; background-position: 72% 0; }
  .nt-slide { position: relative; inset: auto; padding: 18px 18px 54px; display: none; }
  .nt-slide.on { display: block; }
  .nt-eyebrow { font-size: 14px; } .nt-h1 { font-size: 32px; margin: 8px 0; } .nt-lead { font-size: 16px; } .nt-btn { height: 46px; font-size: 16px; margin-top: 14px; }
  .nt-harr { top: 115px; width: 36px; height: 36px; } .nt-harr.nt-prev { left: 10px; } .nt-harr.nt-next { right: 10px; }
  .nt-dots { bottom: 18px; }
}
/* /mob-hero */

/* mid-fix */
@media (min-width: 850px) and (max-width: 1399px) {
  #header .header-search-form { width: 400px !important; max-width: 400px !important; margin-left: 30px !important; }
  .nt-hero { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .nt-slide { padding-left: 70px; } .nt-h1 { font-size: 50px; }
  .nt-timer { margin-left: 20px; }
  .nt-lk-form { width: 420px; }
  .nt-ft { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .nt-thead { flex-wrap: wrap; row-gap: 14px; } .nt-tabs { flex-wrap: wrap; margin-left: 0; }
  #header .header-bottom .header-nav { gap: 0 26px; }
}
@media (min-width: 850px) and (max-width: 1199px) { #header .header-bottom .header-nav { gap: 0 12px; } }
@media (min-width: 850px) and (max-width: 1199px) {
  .nt-hot span, .nt-cart span, .nt-sep { display: none !important; }
  .nt-hero { height: 420px; } .nt-slide { padding: 46px 0 0 50px; } .nt-h1 { font-size: 40px; } .nt-lead { font-size: 18px; }
  .nt-hs { padding: 20px 0 0 20px; } .nt-hs h3 { font-size: 22px; } .nt-hs > div { font-size: 14px; } .nt-truck { width: 110px; right: 10px; top: auto; bottom: 10px; } .nt-hs .nt-obtn { height: 38px; font-size: 14px; padding: 0 14px; }
  .nt-hero-side { grid-template-rows: 1fr 1fr; }
  .nt-svc > div { padding-left: 20px; gap: 12px; } .nt-svc b { font-size: 16px; } .nt-svc span { font-size: 13px; } .nt-svc img { width: 40px; height: 40px; }
  .nt-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nt-cats a { height: 140px; }
  .nt-track .nt-prods { grid-auto-columns: calc((100% - 2 * 12px) / 3); }
  .nt-grid5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nt-thead { flex-wrap: wrap; } .nt-tabs { margin-left: 0; }
  .nt-fhead { flex-wrap: wrap; } .nt-fhead h2 { font-size: 32px; }
  .nt-lk-top { flex-wrap: wrap; } .nt-lk-form { width: 100%; margin: 6px 0 0 !important; }
  .nt-az { grid-template-columns: repeat(10, minmax(0, 1fr)); margin-left: 0; } .nt-sug { margin-left: 0; }
  .nt-blog .nt-bcard h3 { font-size: 18px; }
}
/* /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) {
  .nt-b img { width: 88px !important; height: 88px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  .nt-g img { width: 100px !important; height: 100px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  .nt-svc img { width: 64px !important; height: 64px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
}
@media (max-width: 849px) {
  .nt-b img { width: 66px !important; height: 66px !important; }
  .nt-g img { width: 70px !important; height: 70px !important; }
  .nt-svc img { width: 54px !important; height: 54px !important; }
}
/* ruler:auto END */
/* ruler:manual — nhóm ô danh mục CÙNG cỡ (LESSONS 73); mobile ô 4 cột giữ nhỏ */
@media (min-width: 1200px) { .nt-cats a img { width: 80px !important; height: 80px !important; } .nt-cats a { padding-top: 24px; gap: 12px; } }
@media (min-width: 850px) and (max-width: 1199px) { .nt-cats a img { width: 60px !important; height: 60px !important; } }
@media (max-width: 849px) { .nt-cats a img { width: 46px !important; height: 46px !important; } .nt-svc > div img { width: 40px !important; height: 40px !important; } }