/* Astra — mypham03 "MỘC" dựng Y HỆT mockup (2026-09-27). Tiền tố mpm- (trang) / moc- (thẻ sản phẩm). */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&family=Dancing+Script:wght@500&display=swap");
:root { --mpm-green:#1F4D36; --mpm-green2:#2E6A4B; --mpm-cream:#F8F5EF; --mpm-ink:#1F2A24; --mpm-text:#5A6259; --mpm-red:#C0392B; --mpm-line:#E7E1D4; }
body, p, a, li, input, select, textarea, button, .nav > li > a { font-family: "Be Vietnam Pro", Arial, sans-serif !important; }
h1, h2, .mpm-h2, .mpm-hero-title, .mpm-serif { font-family: "Playfair Display", Georgia, serif !important; }
body { background: var(--mpm-cream); color: var(--mpm-ink); }

/* Topbar + header */
#top-bar { background: var(--mpm-green) !important; min-height: 30px; }
#top-bar, #top-bar a, #top-bar p { color: #fff !important; font-size: 12.5px !important; }
.mpm-tb { display: inline-flex; gap: 8px; align-items: center; } .mpm-tb img { width: 14px; height: 14px; }
#header .header-main { background: #F8F5EF !important; height: 72px; box-shadow: 0 1px 0 var(--mpm-line); }
#header .header-main .nav > li > a { font-size: 13.5px !important; font-weight: 500 !important; color: #2A332D !important; text-transform: none !important; letter-spacing: 0 !important; }
#header .header-main .nav > li { margin: 0 12px !important; }
#header .header-main .nav > li.active > a { color: var(--mpm-green) !important; box-shadow: inset 0 -1px 0 var(--mpm-green); }
#header #logo { width: 160px !important; }
#header #logo a { display: flex; align-items: center; gap: 10px; font-family: "Playfair Display", serif !important; font-size: 30px; color: var(--mpm-green) !important; letter-spacing: .04em; }
#header #logo a::before { content: ""; width: 36px; height: 36px; background: url(icons/logo.png) center/contain no-repeat; flex: 0 0 36px; }
#header .header-main .icon-search, #header .header-main .icon-user, #header .header-main .icon-shopping-cart, #header .header-main .icon-shopping-basket { color: #2A332D !important; font-size: 18px; }
#header .cart-icon strong { border-color: var(--mpm-green) !important; color: var(--mpm-green) !important; }

/* Chung */
.mpm-sec p { color: var(--mpm-text); font-size: 14.5px; line-height: 1.65; }
.mpm-sec .col { padding-bottom: 0; }
.mpm-eyebrow { color: #6B6A55 !important; font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px !important; font-weight: 500; }
.mpm-h2 { font-size: 38px !important; font-weight: 400 !important; color: var(--mpm-ink) !important; line-height: 1.2 !important; margin: 0 0 14px !important; }
.mpm-btn { display: inline-flex; gap: 10px; align-items: center; background: var(--mpm-green); color: #fff !important; border-radius: 99px; padding: 0 26px; height: 44px; font-size: 14px; font-weight: 500; }
.mpm-script { font-family: "Dancing Script", cursive !important; color: #6E6A55 !important; font-size: 24px !important; line-height: 1.2 !important; transform: rotate(-6deg); }
.mpm-link { font-size: 14px !important; } .mpm-link a { color: var(--mpm-green) !important; border-bottom: 1px solid var(--mpm-green); }
.mpm-right .col-inner { text-align: right; }

/* Hero */
.mpm-kicker { color: #7B6A47 !important; font-size: 12.5px !important; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px !important; }
.mpm-hero-title { font-size: 38px !important; font-weight: 400 !important; color: #1F2A24 !important; line-height: 1.2 !important; margin: 0 0 14px !important; }
.mpm-hero-lead { font-size: 13.5px !important; color: #4A5249 !important; margin: 0 0 20px !important; }
.mpm-hero-box .mpm-script { font-size: 22px !important; margin: 30px 0 0 !important; }
.mpm-hero-note p { color: #5A6259 !important; font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; line-height: 1.8 !important; border-left: 1px solid #A8B3A0; padding-left: 16px; }

/* Về thương hiệu */
.mpm-about-media .col-inner { position: relative; }
.mpm-about-media .img-inner { border-radius: 200px 200px 0 0; overflow: hidden; }
.mpm-about-script { position: absolute; right: -150px; top: 30px; }
.mpm-usp { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 16px; }
.mpm-usp p { display: flex; gap: 16px; align-items: center; border: 1px solid var(--mpm-line); background: #fff; padding: 14px 20px; margin: 0 !important; font-size: 12.5px !important; }
.mpm-usp img { width: 36px; height: 36px; }
.mpm-usp strong { display: block; color: var(--mpm-ink); font-size: 14.5px; font-weight: 600; }

/* Đại lý */
.mpm-dealer { background: #DCE8D8 url(icons/deco-leaves.png) center/100% 100% no-repeat !important; }
.mpm-dealer-title { font-size: 28px !important; font-weight: 400 !important; color: var(--mpm-ink) !important; margin: 0 !important; }
.mpm-dealer-sub { margin: 0 !important; font-size: 13.5px !important; }
.mpm-dealer-row { display: flex; } .mpm-dealer-row .wpcf7-form-control-wrap { flex: 1; }
.mpm-dealer-row input[type=tel] { height: 40px; border: 0 !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none; }
.mpm-dealer-row input[type=submit] { height: 40px; background: var(--mpm-green) !important; border-radius: 0 !important; margin: 0 !important; padding: 0 26px; text-transform: none; font-weight: 500; }
.mpm-dealer-form p { margin: 0 !important; }

/* Tiêu đề khối sản phẩm */
.mpm-head { display: flex; align-items: center; justify-content: center; position: relative; margin: 26px 0 14px; border-top: 1px solid var(--mpm-line); }
.mpm-head h2 { font-family: "Be Vietnam Pro", sans-serif !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: .02em; text-transform: uppercase; color: var(--mpm-ink) !important; margin: -12px 0 0 !important; background: var(--mpm-cream); padding: 0 18px; }
.mpm-head a { position: absolute; right: 0; top: -9px; font-size: 12px; color: var(--mpm-ink); background: var(--mpm-cream); padding-left: 10px; }
.mpm-head a span { margin-left: 8px; }
.mpm-head-c { border-top: 0; margin-top: 0; } .mpm-head-c h2 { margin: 0 !important; background: none; }
.mpm-blog .mpm-head h2 { background: #E6EFE3; }
.mpm-blog .mpm-head a { background: #E6EFE3; top: 6px; }

/* Danh mục */
.moc-cats { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.moc-cat { background: #fff; border: 1px solid var(--mpm-line); display: block; text-align: center; padding-bottom: 10px; }
.moc-cat-img { display: block; height: 130px; background-size: cover; background-position: center; margin-bottom: 10px; }
.moc-cat-name { display: block; font-size: 14.5px; font-weight: 500; color: var(--mpm-ink); }
.moc-cat-count { display: block; font-size: 12px; color: var(--mpm-text); }

/* Thẻ sản phẩm */
.moc-grid { display: grid; gap: 18px; }
.moc-cols-4 { grid-template-columns: repeat(4,1fr); } .moc-cols-5 { grid-template-columns: repeat(5,1fr); } .moc-cols-6 { grid-template-columns: repeat(6,1fr); }
.moc-card { background: #fff; border: 1px solid var(--mpm-line); display: flex; flex-direction: column; }
.moc-img { display: block; position: relative; height: 118px; background-size: cover; background-position: center; }
.moc-sm .moc-img { height: 96px; }
.moc-badge { position: absolute; left: 8px; top: 8px; background: #B8893E; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; }
.moc-heart { position: absolute; right: 8px; top: 8px; width: 18px; height: 18px; }
.moc-body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.moc-name { font-size: 12.5px; color: var(--mpm-ink) !important; line-height: 1.35; min-height: 17px; }
.moc-old { font-size: 12px; color: #9A9A8F; text-decoration: line-through; margin-top: 2px; }
.moc-price { font-size: 14.5px; font-weight: 700; color: var(--mpm-red); margin: 2px 0 8px; }
.moc-add { display: block; text-align: center; background: var(--mpm-green); color: #fff !important; font-size: 12.5px; font-weight: 500; padding: 7px 4px; margin-top: auto; }
.moc-add.added::after { content: " ✓"; }
.mpm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.mpm-promo { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 20px 30px; background-size: cover; background-position: right center; color: var(--mpm-ink) !important; min-height: 190px; }
.mpm-promo-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6B4A4A; }
.mpm-promo-title { font-size: 24px; font-weight: 600; margin: 4px 0 8px; color: #2A2A28; line-height: 1.15; }
.mpm-promo-title.mpm-serif { font-size: 30px; font-weight: 400; font-style: italic; }
.mpm-promo-sub { font-size: 13px; color: #4A4A45; }
.mpm-promo-price { font-size: 30px; font-weight: 700; color: #2A2A28; margin-bottom: 10px; }
.mpm-promo-btn { background: var(--mpm-green); color: #fff; font-size: 13px; padding: 9px 22px; border-radius: 99px; margin-top: 8px; }
.moc-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.moc-wide-card { display: flex; background: #fff; border: 1px solid var(--mpm-line); min-height: 138px; }
.moc-wide-img { flex: 0 0 52%; background-size: cover; background-position: center; }
.moc-wide-body { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.moc-wide-body .moc-name { font-size: 15px; font-weight: 600; }
.moc-desc { font-size: 12px; color: var(--mpm-text); margin: 4px 0 6px; }
.moc-wide-body .moc-add { padding: 8px 26px; margin-top: 0; }

/* Kinh doanh */
.mpm-biz { background-image: url(icons/deco-leaves.png) !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; }
.mpm-biz .section-bg::after { content: ""; position: absolute; inset: 0; background: rgba(20,60,40,.25); }
.mpm-biz-title { font-size: 32px !important; font-weight: 400 !important; color: #fff !important; margin: 0 0 4px !important; }
.mpm-biz-sub { color: rgba(255,255,255,.9) !important; margin: 0 0 16px !important; }
.mpm-biz-btns { display: flex; gap: 16px; justify-content: center; margin: 0 !important; }
.mpm-btn-w { background: #fff; color: var(--mpm-green) !important; border-radius: 99px; padding: 8px 26px; font-size: 13.5px; font-weight: 500; }
.mpm-btn-o { border: 1px solid #fff; color: #fff !important; border-radius: 99px; padding: 8px 26px; font-size: 13.5px; }
.mpm-biz-script .mpm-script { color: #E9F0E6 !important; }

/* Khách hàng + blog */
.mpm-testi-card { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--mpm-line); padding: 18px 20px; }
.mpm-av { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: 0 0 80px; }
.mpm-stars { color: #E0A93B !important; font-size: 15px !important; letter-spacing: 3px; margin: 0 !important; }
.mpm-quote { font-size: 12.5px !important; font-style: italic; margin: 4px 0 6px !important; line-height: 1.5 !important; }
.mpm-name { font-size: 13px !important; font-weight: 600; color: var(--mpm-ink) !important; margin: 0 !important; }
.mpm-name small { display: block; font-weight: 400; color: var(--mpm-text); font-size: 12px; }
.mpm-blog-list .col-inner { background: #fff; }
.mpm-blog-list .box-text { padding: 12px 16px 14px !important; }
.mpm-blog-list .post-meta { font-size: 11.5px !important; color: #8A8A7F; opacity: 1 !important; }
.mpm-blog-list .post-title { font-size: 15px !important; font-weight: 600; color: var(--mpm-ink); }
.mpm-blog-list .from_the_blog_excerpt { font-size: 12.5px; color: var(--mpm-text); }
.mpm-blog-list .button { border: 0 !important; background: none !important; color: var(--mpm-green) !important; padding: 0 !important; font-size: 13px; text-transform: none; font-weight: 600; min-height: 0; line-height: 1.4; }
.mpm-blog-list .button::after { content: " →"; }
.mpm-blog-list .is-divider, .mpm-blog-list .badge { display: none !important; }

/* Footer */
.mpm-footer { border-top: 1px solid var(--mpm-line); }
.mpm-footer p, .mpm-footer li { color: var(--mpm-text) !important; font-size: 13px !important; }
.mpm-footer p.mpm-ft-logo, .mpm-ft-logo { display: flex; gap: 10px; align-items: center; font-family: "Playfair Display", serif; font-size: 34px !important; color: var(--mpm-green) !important; margin: 0 0 8px !important; }
.mpm-ft-logo img { width: 44px; height: 44px; }
.mpm-ft-title { font-size: 14px !important; font-weight: 600 !important; color: var(--mpm-ink) !important; margin: 0 0 10px !important; }
.mpm-ft-list, .mpm-ft-links { list-style: none; margin: 0 !important; }
.mpm-ft-list li { list-style: none; display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px !important; } .mpm-ft-list img { width: 16px; height: 16px; margin-top: 3px; }
.mpm-ft-links li { list-style: none; margin: 0 0 6px !important; } .mpm-ft-links li::before { content: "›"; margin-right: 8px; }
.mpm-footer a { color: var(--mpm-text) !important; }
.mpm-nl-row { display: flex; } .mpm-nl-row .wpcf7-form-control-wrap { flex: 1; }
.mpm-nl-row input[type=email] { height: 36px; border: 1px solid var(--mpm-line) !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none; font-size: 13px; }
.mpm-nl-row input[type=submit] { height: 36px; background: var(--mpm-green) !important; border-radius: 0 !important; margin: 0 !important; padding: 0 16px; text-transform: none; font-size: 13px; }
.mpm-ft-social { display: flex; gap: 14px; margin-top: 12px !important; } .mpm-ft-social img { width: 24px; height: 24px; }
.mpm-ft-copy { border-top: 1px solid var(--mpm-line); padding-top: 12px !important; margin-top: 14px; }
.mpm-ft-copy p { font-size: 12px !important; margin: 0 !important; } .mpm-ft-copy span { margin: 0 10px; }
#footer .absolute-footer { display: none; }

@media (max-width: 849px) {
  .mpm-hero-title { font-size: 28px !important; } .mpm-h2 { font-size: 28px !important; } .mpm-hero-box .mpm-script, .mpm-about-script { display: none; }
  .mpm-usp, .moc-cats, .moc-cols-4, .moc-cols-5, .moc-cols-6, .mpm-split, .moc-wide { grid-template-columns: 1fr 1fr; }
  .mpm-head a { position: static; } .mpm-head { flex-direction: column; } .mpm-biz-btns { flex-wrap: wrap; } .mpm-right .col-inner { text-align: left; }
}
/* r3 fix: dải đại lý — lá hai bên không đè chữ, ô SĐT + nút cùng hàng */
.mpm-dealer { background: url(icons/deco-leaves-l.png) left center/auto 100% no-repeat, url(icons/deco-leaves-r.png) right center/auto 100% no-repeat, #DCE8D8 !important; }
.mpm-dealer-row p { display: flex !important; align-items: stretch; }
.mpm-dealer-row .wpcf7-spinner { position: absolute; }
@media (max-width: 849px) { .mpm-dealer { background: #DCE8D8 !important; } }
.float-contact { display: none !important; }
/* r3 fix mobile: băng quảng cáo nằm trên lưới sản phẩm (không bị ép 1/2 cột); nền chữ hero để đọc được trên ảnh */
@media (max-width: 549px) {
  .mpm-split { grid-template-columns: 1fr !important; }
  .mpm-split > p:has(.mpm-promo), .mpm-split > .mpm-promo { order: -1; }
  .mpm-hero-box .text-box-content { background: rgba(250,248,242,.9); padding: 16px 18px; border-radius: 10px; }
}
/* ruler:auto BEGIN — tools/astra-bridge/lab/ruler_fix.py, đừng sửa tay */
@media (min-width: 850px) {
  .mpm-biz-main h2.mpm-biz-title { font-size: 36.2px !important; }
  .mpm-ft-col h3.mpm-ft-title { font-size: 20.6px !important; }
  .mpm-sec h2.mpm-dealer-title { font-size: 41.4px !important; }
  .moc-img img[src*="/icons/heart.png"] { width: 34px !important; height: 34px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  .mpm-ft-list img { width: 30px !important; height: 30px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  .mpm-ft-social img { width: 42px !important; height: 42px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  .mpm-tb img { width: 32px !important; height: 32px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  .mpm-usp img { width: 78px !important; height: 78px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  .mpq-badges img { width: 46px !important; height: 46px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  .mpq-hot img[src*="/icons/phone.png"] { width: 32px !important; height: 32px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
}
@media (max-width: 849px) {
  .moc-img img[src*="/icons/heart.png"] { width: 24px !important; height: 24px !important; }
  .mpm-ft-list img { width: 20px !important; height: 20px !important; }
  .mpm-ft-social img { width: 30px !important; height: 30px !important; }
  .mpm-tb img { width: 22px !important; height: 22px !important; }
  .mpm-usp img { width: 54px !important; height: 54px !important; }
  .mpq-badges img { width: 32px !important; height: 32px !important; }
  .mpq-hot img[src*="/icons/phone.png"] { width: 22px !important; height: 22px !important; }
}
/* ruler:auto END */
/* header r4 — cỡ theo mockup: logo, topbar, icon tìm kiếm/tài khoản/giỏ (mockup chỉ icon, không chữ) */
#top-bar, #top-bar a, #top-bar p { font-size: 14px !important; }
.mpm-tb img { width: 18px !important; height: 18px !important; }
@media (min-width: 850px) {
  #header #logo { width: 200px !important; }
  #header #logo a { font-size: 38px !important; }
  #header #logo a::before { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; }
  #header .header-search i, #header .account-item i, #header .cart-item i { font-size: 24px !important; }
  #header .header-nav-main.nav-right > li { margin: 0 10px; }
}
/* ruler:manual — chỉnh sau khi xem review, 09-28 */
@media (min-width: 850px) {
  .mpm-sec h2.mpm-dealer-title { font-size: 34px !important; }
  .moc-img img[src*="/icons/heart.png"] { width: 26px !important; height: 26px !important; }
  .mpm-ft-list img { width: 22px !important; height: 22px !important; }
  .mpm-ft-social img { width: 30px !important; height: 30px !important; }
  .mpm-usp img { width: 52px !important; height: 52px !important; }
  .mpq-badges img { width: 36px !important; height: 36px !important; }
  .mpq-hot img[src*="/icons/phone.png"] { width: 22px !important; height: 22px !important; }
}
/* mockup: tiêu đề nhóm sản phẩm căn giữa, to hơn; "Xem tất cả" ở mép phải */
@media (min-width: 850px) {
  .mpm-head { position: relative; justify-content: center !important; }
  .mpm-head { display: flex !important; } .mpm-head h2 { font-size: 19px !important; display: inline-block !important; width: auto !important; flex: 0 0 auto !important; }
  .mpm-head > p { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}