/* Hoa Mây (shophoa) — trang chủ y hệt mockup, cỡ đo theo mockup x1.93 (09-28) */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&family=Dancing+Script:wght@500;600&display=swap");
:root { --hm-green: #1F4D36; --hm-pink: #E75A7C; --hm-red: #D94A57; --hm-cream: #FBF8F2; --hm-ink: #1F2A22; --hm-muted: #6A6F68; --hm-gold: #B8893E; }
body, p, li, a, input, button, .nav > li > a { font-family: "Be Vietnam Pro", sans-serif; }
.hm-h2, .hm-hero-title, .hm-ban b, .hm-offer span, .hm-nl-t, .hm-ft-logo span { font-family: "Playfair Display", serif !important; }
.hm-scr { font-family: "Dancing Script", cursive !important; }
#top-bar { background: var(--hm-green) !important; min-height: 40px; } #top-bar, #top-bar a, #top-bar span { color: #fff !important; font-size: 14.5px !important; }
.hm-tb { display: inline-flex; gap: 10px; align-items: center; } .hm-tb img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
#header .header-main { background: #fff !important; }
#header #logo { width: 250px !important; }
#header #logo a { display: flex; align-items: center; gap: 12px; font-family: "Playfair Display", serif !important; font-size: 40px; font-weight: 600; color: var(--hm-green) !important; line-height: 1; white-space: nowrap; position: relative; top: -7px; text-transform: uppercase; }
#header #logo a::before { content: ""; width: 58px; height: 58px; flex: 0 0 58px; background: url(icons/logo.png) center/contain no-repeat; margin-top: 14px; }
#header #logo a::after { content: "HOA TƯƠI & QUÀ TẶNG"; position: absolute; left: 70px; top: 50%; margin-top: 18px; font-family: "Be Vietnam Pro", sans-serif; font-size: 11px; letter-spacing: .1em; color: var(--hm-muted); font-weight: 600; }
#header .header-search-form { width: 470px; } #header .searchform .search-field { height: 46px !important; border: 1px solid #DAD6CC !important; border-radius: 4px 0 0 4px !important; box-shadow: none !important; font-size: 15px !important; }
#header .searchform .button.icon { height: 46px !important; width: 56px; background: var(--hm-green) !important; border-radius: 0 4px 4px 0 !important; }
.hm-hot { display: inline-flex; gap: 10px; align-items: center; } .hm-hot img { width: 30px; height: 30px; } .hm-hot > span { display: flex; flex-direction: column; font-size: 13px; color: var(--hm-muted); line-height: 1.2; } .hm-hot b { font-size: 18px; color: var(--hm-ink); }
#header .account-item a, #header .cart-item a { color: var(--hm-ink) !important; font-size: 15px !important; text-transform: none !important; } #header .account-item i, #header .cart-item i { font-size: 24px !important; }
#header .header-bottom { background: #fff !important; border-top: 1px solid #EFEBE2; border-bottom: 1px solid #EFEBE2; }
#header .header-bottom .nav > li > a { font-size: 16px !important; font-weight: 500 !important; color: var(--hm-ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
#header .header-bottom .nav > li { margin: 0 24px !important; } #header .header-bottom .nav > li.active > a { color: var(--hm-green) !important; font-weight: 700 !important; box-shadow: inset 0 -3px 0 var(--hm-green); }
.hm-top .col, .hm-sec .col { padding-bottom: 14px !important; }
.hm-cbar { background: var(--hm-green); color: #fff !important; font-weight: 600; font-size: 17px !important; padding: 12px 18px; margin: 0 !important; }
.hm-side { background: #fff; border: 1px solid #ECE7DC; height: 100%; } .hm-side ul { list-style: none; margin: 0 !important; padding: 6px 18px; }
.hm-side li { margin: 0 !important; } .hm-side a { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 15.5px; color: var(--hm-ink) !important; } .hm-side img { width: 24px; height: 24px; }
.hm-hero { position: relative; height: 430px; background-size: cover; background-position: center; padding: 50px 44px; display: flex; flex-direction: column; justify-content: center; }
.hm-hero-title { color: var(--hm-green) !important; font-size: 52px !important; line-height: 1.15 !important; font-weight: 600 !important; margin: 0 0 12px !important; } .hm-hero-lead { font-size: 17px !important; color: #3F463F !important; margin: 0 0 22px !important; }
.hm-btn { display: inline-flex; gap: 10px; align-items: center; background: var(--hm-green); color: #fff !important; font-weight: 600; font-size: 15.5px; padding: 0 22px; min-height: 48px; border-radius: 4px; }
.hm-hero-note { position: absolute; left: 44px; bottom: 26px; color: #7D6552 !important; font-size: 24px !important; line-height: 1.05 !important; transform: rotate(-6deg); margin: 0 !important; }
.hm-offer { display: flex; flex-direction: column; height: 430px; background-size: cover; background-position: center bottom; padding: 26px 24px; text-decoration: none !important; }
.hm-offer span { font-size: 30px; color: var(--hm-ink); } .hm-offer b { font-family: "Playfair Display", serif; font-size: 90px; line-height: 1; color: #6B2C2C; } .hm-offer i { font-style: normal; font-size: 14.5px; color: var(--hm-muted); margin-top: 8px; }
.hm-offer em { margin-top: auto; align-self: flex-end; background: #fff; color: var(--hm-ink); font-style: normal; font-size: 14px; font-weight: 600; padding: 8px 18px; border-radius: 99px; }
.hm-ban { display: flex; flex-direction: column; justify-content: center; height: 150px; padding: 0 30px; background-size: cover; background-position: center; text-decoration: none !important; }
.hm-ban b { font-size: 28px; font-weight: 500; color: #C2325A; } .hm-ban span { font-size: 15px; color: var(--hm-muted); margin: 4px 0 14px; } .hm-ban-mint b { color: var(--hm-green); }
.hm-ban em { align-self: flex-start; background: var(--hm-green); color: #fff; font-style: normal; font-size: 14px; font-weight: 600; padding: 8px 18px; border-radius: 4px; }
.hm-ban-lg { height: 220px; padding: 0 40px; } .hm-ban-lg b { font-size: 34px; } .hm-ban-lg i { font-style: normal; font-size: 46px; color: #C2325A; line-height: 1.05; }
.hm-head { text-align: center; margin: 0 0 20px; } .hm-h2 { color: var(--hm-ink) !important; font-size: 34px !important; font-weight: 500 !important; margin: 0 !important; } .hm-sub { color: var(--hm-muted) !important; font-size: 15.5px !important; margin: 4px 0 0 !important; }
.hm-head-row { display: flex; justify-content: center; align-items: center; position: relative; margin-top: 16px; } .hm-head-row > a { position: absolute; right: 0; color: var(--hm-ink) !important; font-size: 15px; } .hm-head-row > p { margin: 0 !important; }
.hm-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hm-row { display: flex; background: #fff; border: 1px solid #ECE7DC; } .hm-row-img { width: 45%; background-size: cover; background-position: center; min-height: 160px; }
.hm-row-b { position: relative; flex: 1; padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; }
.hm-row-b em { position: absolute; right: 12px; top: 12px; background: var(--hm-red); color: #fff; font-style: normal; font-size: 12.5px; padding: 3px 10px; border-radius: 4px; }
.hm-row-n { font-size: 17px; font-weight: 600; color: var(--hm-ink) !important; } .hm-stars { color: #E8B04B; font-size: 14px; margin: 4px 0; letter-spacing: 2px; } .hm-row-p { color: var(--hm-red); font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.hm-row-btn { background: var(--hm-green); color: #fff !important; padding: 7px 18px; font-size: 14px; font-weight: 600; border-radius: 4px; }
.hm-brow { margin-bottom: 18px !important; } .hm-cblock { background: #fff; border: 1px solid #ECE7DC; height: 100%; display: flex; flex-direction: column; }
.hm-cgrid { display: grid; grid-template-columns: 1fr 1fr; } .hm-cgrid a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-right: 1px solid #F0ECE3; border-bottom: 1px solid #F0ECE3; font-size: 14.5px; color: var(--hm-ink) !important; } .hm-cgrid img { width: 34px; height: 34px; }
.hm-tall { flex: 1; min-height: 330px; background-size: cover; background-position: center bottom; padding: 22px 20px; display: flex; flex-direction: column; text-decoration: none !important; } .hm-tall b { font-size: 36px; color: #C2325A; line-height: 1.1; font-weight: 500; } .hm-tall span { margin-top: auto; font-size: 14px; color: var(--hm-muted); max-width: 170px; }
.hm-tabs { display: flex; gap: 6px; background: #fff; border: 1px solid #ECE7DC; margin: 0 0 12px !important; padding: 6px; } .hm-tabs span { padding: 8px 24px; font-size: 15px; color: var(--hm-muted); } .hm-tabs .on { background: #F1EEE6; color: var(--hm-ink); font-weight: 600; }
.hm-grid { display: grid; gap: 12px; } .hm-cols-4 { grid-template-columns: repeat(4, 1fr); } .hm-cols-6 { grid-template-columns: repeat(6, 1fr); }
.hm-card { background: #fff; border: 1px solid #ECE7DC; } .hm-img { display: block; aspect-ratio: 1 / .78; background-size: cover; background-position: center; position: relative; } .hm-heart, .hm-badge, .hm-old { display: none !important; }
.hm-body { padding: 10px 14px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; } .hm-name { grid-column: 1; font-size: 15px; color: var(--hm-ink) !important; }
.hm-price { grid-column: 1; color: var(--hm-red); font-weight: 700; font-size: 16px; } .hm-price::before { content: "★★★★★"; display: block; color: #E8B04B; font-size: 12px; letter-spacing: 2px; font-weight: 400; }
.hm-add { grid-column: 2; grid-row: 1 / 3; width: 36px; height: 36px; border: 1.5px solid var(--hm-green); border-radius: 4px; font-size: 0 !important; display: flex; align-items: center; justify-content: center; } .hm-add::before { content: ""; width: 20px; height: 20px; background: url(icons/cart.png) center/contain no-repeat; }
.hm-blog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .hm-blog a { background: #fff; border: 1px solid #ECE7DC; text-decoration: none !important; display: flex; flex-direction: column; }
.hm-blog span { height: 150px; background-size: cover; background-position: center; } .hm-blog b { font-size: 16.5px; color: var(--hm-ink); padding: 12px 16px 4px; } .hm-blog i { font-style: normal; font-size: 14px; color: var(--hm-muted); padding: 0 16px; } .hm-blog em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--hm-green); padding: 8px 16px 14px; }
.hm-usp { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 26px; border-top: 1px solid #ECE7DC; padding-top: 20px; } .hm-usp p { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 0 !important; border-right: 1px solid #ECE7DC; } .hm-usp p:last-child { border: 0; }
.hm-usp img { width: 54px; height: 54px; } .hm-usp span { display: flex; flex-direction: column; font-size: 14px; color: var(--hm-muted); } .hm-usp b { color: var(--hm-ink); font-size: 17px; }
.hm-nl { background-image: url(icons/deco-roses.png) !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; }
.hm-nl-t { color: var(--hm-green) !important; font-size: 32px !important; font-weight: 500 !important; margin: 0 !important; } .hm-nl-s { color: var(--hm-muted) !important; margin: 4px 0 0 !important; }
.hm-nl-f { display: flex; gap: 12px; margin: 0 !important; } .hm-nl-f input { height: 50px !important; margin: 0 !important; background: #fff !important; } .hm-nl-f button { background: var(--hm-green); color: #fff; border: 0; padding: 0 30px; font-weight: 600; margin: 0; text-transform: none; border-radius: 4px; }
.hm-footer p, .hm-footer li, .hm-footer a, .hm-footer span { color: rgba(255,255,255,.85) !important; font-size: 15px !important; }
.hm-footer p.hm-ft-logo { display: flex; gap: 12px; align-items: center; margin: 0 0 12px !important; } .hm-ft-logo img { width: 56px; height: 56px; }
.hm-footer p.hm-ft-logo span { font-size: 36px !important; color: #fff !important; line-height: 1; display: flex; flex-direction: column; } .hm-ft-logo small { font-family: "Be Vietnam Pro", sans-serif; font-size: 11px; letter-spacing: .1em; margin-top: 6px; }
.hm-footer h3.hm-ft-title { color: #fff !important; font-size: 18px !important; font-weight: 700 !important; margin: 0 0 14px !important; }
.hm-ft-ul, .hm-ft-list { list-style: none; margin: 0; padding: 0; } .hm-ft-ul li { margin: 0 0 9px !important; } .hm-ft-list li { display: flex; gap: 10px; margin: 0 0 10px !important; } .hm-ft-list img { width: 18px; height: 18px; margin-top: 3px; }
.hm-ft-bar { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.15); padding-top: 16px; margin-top: 8px; }
.absolute-footer { display: none !important; }
@media (max-width: 849px) {
  .hm-hero { height: 340px; padding: 30px 24px; } .hm-hero-title { font-size: 34px !important; } .hm-hero-note { display: none; } .hm-offer { height: 260px; }
  .hm-rows, .hm-blog, .hm-usp { grid-template-columns: 1fr; } .hm-cols-4, .hm-cols-6 { grid-template-columns: 1fr 1fr; } .hm-nl-f { margin-top: 12px !important; }
  .hm-head-row { flex-direction: column; } .hm-head-row > a { position: static; } .hm-usp p { border: 0; justify-content: flex-start; }
  #header #logo a::after { display: none; } #header #logo a { font-size: 28px; top: 0; } #header #logo a::before { width: 40px; height: 40px; flex-basis: 40px; margin-top: 0; }
}
/* r2 */
.hm-tall { background-size: cover !important; background-position: center 30% !important; min-height: 360px; }
.hm-nl-f button { white-space: nowrap; }
.hm-top .col:first-child .hm-side { min-height: 430px; }
/* r3 09-29 (so trang trong): header theo mockup — logo chữ thường, ô tìm kiếm không có chọn danh mục, "Tài khoản" có icon người */
#header #logo a, .hm-ft-logo span { text-transform: none !important; letter-spacing: 0 !important; }
#header .search_categories, #header .searchform .flex-col.search-form-categories { display: none !important; }
#header .account-item > a { font-size: 0 !important; display: inline-flex !important; align-items: center; gap: 8px; }
#header .account-item > a::before { content: ""; width: 26px; height: 26px; background: url(icons/user.png) center/contain no-repeat; }
#header .account-item > a::after { content: "Tài khoản"; font-size: 14.5px; color: var(--hm-ink); }
#header .account-item > a i, #header .account-item > a span { display: none !important; }
.hm-nl .col:first-child { padding-left: 90px !important; }
@media (max-width: 849px) { .hm-nl .col:first-child { padding-left: 15px !important; } }
/* ruler:manual 09-29 — đo trên 4 trang trong: logo header ~1,2x, logo + tiêu đề chân trang nhỏ hơn mockup */
@media (min-width: 850px) { #header #logo a { font-size: 46px !important; } .hm-footer p.hm-ft-logo span { font-size: 38px !important; } .hm-footer h3.hm-ft-title { font-size: 21px !important; } }
#header .account-item > a::before { content: none !important; display: none !important; }
#header .account-item > a { background: url(icons/user.png) left center / 26px no-repeat; padding-left: 34px !important; }
#header .account-item > a::after { position: static !important; left: auto !important; width: auto !important; height: auto !important; background: none !important; }

/* 2026-10-04 logo ẢNH theo mockup (thay logo chữ + ::after tuyệt đối từng đè lên chữ): tắt hiệu ứng logo chữ cũ */
#header #logo { width: 236px !important; }
#header #logo a { display: block !important; top: 0 !important; font-size: 0 !important; }
#header #logo a::before, #header #logo a::after { content: none !important; display: none !important; }
#header #logo img.header_logo, #header #logo img { max-height: 70px !important; width: auto !important; height: auto !important; }
.hm-footer p.hm-ft-logo-img img { width: 236px !important; height: auto !important; }
@media (min-width: 850px) and (max-width: 1199px) { #header #logo { width: 190px !important; } #header #logo img { max-height: 56px !important; } }
@media (max-width: 849px) { #header #logo { width: 170px !important; } #header #logo img { max-height: 50px !important; } .hm-footer p.hm-ft-logo-img img { width: 200px !important; } }
/* 2026-10-04: icon ☰ mobile trắng trên nền trắng (LESSONS 15); 850-1199: giỏ hàng rớt dòng, "Liên hệ" rớt hàng menu */
#header .mobile-nav .nav-icon i, #header .mobile-nav .nav-icon a { color: var(--hm-green) !important; }
@media (min-width: 850px) and (max-width: 1199px) {
  #header .header-main .account-item .header-account-title, #header .header-main .cart-item .header-cart-title { display: none !important; }
  #header .account-item > a::after { content: none !important; }
  #header .header-main .header-search-form { max-width: 330px; }
  #header .header-bottom ul.nav > li { margin: 0 12px !important; }
  #header .header-bottom ul.nav > li > a { font-size: 15px !important; padding-left: 0 !important; padding-right: 0 !important; }
}
/* 2026-10-04: lưới 6 SP tràn 41px ở 900px (1fr = minmax(auto,1fr) theo nội dung) */
.hm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hm-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hm-grid > * { min-width: 0; }
@media (min-width: 850px) and (max-width: 1099px) { .hm-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 849px) { .hm-cols-4, .hm-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 2026-10-04: ảnh SP vuông cover vào khung 1:0.78 -> mất ~10% bó hoa -> khung vuông; nhãn "Bán chạy" đè tên SP ở 390 */
.hm-img { aspect-ratio: 1 / 1 !important; }
@media (max-width: 549px) { .hm-row-b em { position: static; margin-bottom: 6px; } }
.hm-row-img { aspect-ratio: 1 / 1; min-height: 0 !important; align-self: center; } /* 2026-10-04: ảnh hàng SP 161x233 cắt 15% */
@media (max-width: 549px) { .hm-footer .row > .col { flex-basis: 100% !important; max-width: 100% !important; } } /* 2026-10-05: tiêu đề cột chân trang ép mỗi chữ một dòng ở 390 */