@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600&display=swap");
/* Hạt Lành (thucpham10) — trang trong theo mockup Astra 09-29 (cửa hàng, sản phẩm, bài viết, tin tức). Biến/lớp hl-* từ hl-home.css. */
.hli-page { background: var(--hl-cream); }
.hli-wrap { max-width: 1320px; margin: 0 auto; padding: 0 15px; }
.hli-h2, .hli-h3, .hli-ptitle, .hli-atitle, .hli-hero-title, .hli-nhero-title, .hli-ncard h2, .hli-content h2, .hli-promo b, .hli-rcard h3, .hli-cta b { font-family: "Playfair Display", serif !important; }
.hli-script { font-family: "Dancing Script", cursive !important; }
.hli-crumb { font-size: 13.5px !important; color: var(--hl-muted) !important; margin: 16px 0 14px !important; } .hli-crumb a { color: inherit !important; } .hli-crumb span { margin: 0 7px; opacity: .6; }
.hli-eyebrow { color: var(--hl-gold) !important; font-size: 14px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px !important; }
.hli-h2 { font-size: 34px !important; color: var(--hl-dark) !important; font-weight: 600 !important; margin: 0 0 12px !important; }
.hli-h3 { font-size: 26px !important; color: var(--hl-dark) !important; font-weight: 600 !important; margin: 24px 0 10px !important; }
.hli-c { text-align: center; }
.hli-box { background: #fff; border-radius: 10px; padding: 18px; margin-bottom: 18px; box-shadow: 0 4px 14px rgba(31,77,44,.05); }
.hli-bh { font-size: 18px !important; color: var(--hl-ink) !important; font-weight: 700 !important; margin: 0 0 12px !important; padding-bottom: 10px; border-bottom: 1px solid #ECE7DA; }
/* hero cửa hàng */
.hli-hero { position: relative; height: 240px; border-radius: 12px; background-size: cover; background-position: 70% center; display: flex; align-items: center; padding: 0 48px; overflow: hidden; margin-bottom: 22px; }
.hli-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(248,246,239,.95) 0%, rgba(248,246,239,.7) 45%, rgba(248,246,239,0) 70%); }
.hli-hero > div { position: relative; }
.hli-hero-title { font-size: 54px !important; color: var(--hl-dark) !important; font-weight: 600 !important; margin: 0 0 8px !important; line-height: 1.1 !important; }
.hli-hero p { font-size: 19px !important; color: var(--hl-ink) !important; margin: 0 !important; }
.hli-hero-note { position: absolute; right: 36px; top: 30px; font-size: 30px; color: var(--hl-muted); transform: rotate(-8deg); line-height: 1.1; }
/* cửa hàng */
.hli-shop { display: grid; grid-template-columns: 270px 1fr; gap: 24px; padding-bottom: 40px; }
.hli-cats { list-style: none; margin: 0 !important; }
.hli-cats li { margin: 0 0 2px !important; } .hli-cats a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; color: var(--hl-ink) !important; font-size: 15px; }
.hli-cats img { width: 24px; height: 24px; } .hli-cats li.on a { background: #EAF2E6; color: var(--hl-green) !important; font-weight: 600; }
.hli-price { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hli-price input { margin: 0 !important; height: 38px; font-size: 13.5px; border-radius: 6px !important; }
.hli-range { grid-column: 1 / -1; height: 4px; background: #E4DCC9; margin: 12px 6px; position: relative; } .hli-range span { position: absolute; inset: 0; background: var(--hl-gold); }
.hli-range::before, .hli-range::after { content: ""; position: absolute; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--hl-gold); z-index: 1; } .hli-range::before { left: -8px; } .hli-range::after { right: -8px; }
.hli-price button { grid-column: 1 / -1; margin: 0; background: var(--hl-gold); color: #fff; border-radius: 6px; min-height: 42px; text-transform: none; font-size: 15px; letter-spacing: 0; }
.hli-minis a { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; color: var(--hl-ink) !important; }
.hli-minis span { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 6px; background-size: cover; background-position: center; }
.hli-minis b { display: flex; flex-direction: column; font-size: 14px; font-weight: 500; line-height: 1.35; } .hli-minis em { font-style: normal; color: var(--hl-green); font-weight: 700; font-size: 15.5px; margin-top: 4px; }
.hli-promo { display: flex; flex-direction: column; justify-content: flex-end; height: 300px; border-radius: 10px; padding: 22px; background-size: cover; background-position: center; position: relative; overflow: hidden; color: var(--hl-ink) !important; }
.hli-promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(248,246,239,.95) 20%, rgba(248,246,239,0) 70%); }
.hli-promo > * { position: relative; } .hli-promo b { font-size: 32px; font-weight: 600; line-height: 1.1; color: var(--hl-dark); } .hli-promo small { font-size: 13.5px; margin-top: 6px; }
.hli-promo-g { height: 380px; justify-content: flex-start; } .hli-promo-g::before { background: linear-gradient(180deg, rgba(248,246,239,.95) 25%, rgba(248,246,239,0) 65%); }
.hli-promo-g i { font-style: normal; background: var(--hl-green); color: #fff; padding: 9px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; margin-top: 14px; align-self: flex-start; }
.hli-head { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 10px; padding: 10px 16px; margin-bottom: 16px; }
.hli-head p { margin: 0 !important; font-size: 14px; color: var(--hl-muted); } .hli-sort { display: flex; align-items: center; gap: 10px; font-size: 14px; } .hli-sort form { margin: 0; } .hli-sort select { margin: 0 !important; height: 36px; min-width: 170px; font-size: 14px; border-radius: 6px; }
.hli-grid { gap: 16px; }
.hli-card .hl-img { aspect-ratio: 1 / .92; }
.hli-ccat { font-size: 11.5px; color: var(--hl-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.hli-card .hl-name { font-size: 15px; font-weight: 600; min-height: 40px; }
.hli-pr { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .hli-pr del { color: #9A9A92; font-size: 13.5px; } .hli-pr .hl-price { margin: 0; }
.hli-card .hl-add { width: 100%; text-align: center; }
.hli-pages { text-align: center; margin-top: 28px; }
.hli-pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #DDD6C6; border-radius: 6px; margin: 0 3px; color: var(--hl-ink); font-size: 14px; background: #fff; }
.hli-pages .page-numbers.current { background: var(--hl-green); color: #fff; border-color: var(--hl-green); }
.hli-pages p { font-size: 13.5px; color: var(--hl-muted); margin: 10px 0 0 !important; }
/* sản phẩm */
.hli-ptop { display: grid; grid-template-columns: 46% 1fr; gap: 40px; padding-bottom: 30px; }
.hli-pmain { display: block; position: relative; aspect-ratio: 1 / .92; border-radius: 12px; background-size: cover; background-position: center; }
.hli-pmain .hl-badge { font-size: 15px; padding: 5px 12px; }
.hli-pthumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.hli-pthumbs span { aspect-ratio: 1 / .9; border-radius: 8px; background-size: cover; background-position: center; border: 2px solid transparent; cursor: pointer; } .hli-pthumbs span.on { border-color: var(--hl-green); }
.hli-ptitle { font-size: 46px !important; color: var(--hl-dark) !important; font-weight: 600 !important; line-height: 1.15 !important; margin: 0 0 8px !important; }
.hli-stock { display: flex; align-items: center; gap: 8px; font-size: 14.5px !important; color: var(--hl-green) !important; margin: 0 0 10px !important; }
.hli-pprice { display: flex; align-items: center; gap: 16px; font-size: 38px !important; font-weight: 700; color: var(--hl-green) !important; margin: 0 0 14px !important; }
.hli-pprice del { font-size: 18px; font-weight: 400; color: #9A9A92; } .hli-pprice span { background: var(--hl-gold); color: #fff; font-size: 13.5px; font-weight: 600; padding: 5px 12px; border-radius: 4px; }
.hli-pshort p { font-size: 15.5px !important; color: var(--hl-ink) !important; line-height: 1.65 !important; }
.hli-attrs { margin: 0 0 20px; } .hli-attrs div { display: grid; grid-template-columns: 140px 1fr; font-size: 15px; margin-bottom: 6px; } .hli-attrs dt, .hli-attrs dd { text-transform: none !important; letter-spacing: 0 !important; margin: 0; color: var(--hl-ink); } .hli-attrs dt { color: var(--hl-muted); font-weight: 400; }
.hli-cart { display: flex; gap: 12px; margin: 0 0 14px; }
.hli-qty { display: inline-flex; border: 1px solid #D6CFC0; border-radius: 6px; height: 50px; background: #fff; }
.hli-qty button { margin: 0; width: 40px; min-height: 0; padding: 0; background: none; font-size: 18px; color: var(--hl-ink); }
.hli-qty input { width: 50px !important; margin: 0 !important; border: 0 !important; text-align: center; height: 48px; box-shadow: none !important; background: none; }
.hli-add { flex: 1.3; margin: 0; background: var(--hl-dark); color: #fff; border-radius: 6px; min-height: 50px; font-size: 15.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.hli-add img { filter: brightness(0) invert(1); }
.hli-buy { flex: 1; display: inline-flex; align-items: center; justify-content: center; background: var(--hl-gold); color: #fff !important; border-radius: 6px; font-size: 15.5px; font-weight: 700; text-transform: uppercase; }
.hli-call { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; border: 1.5px solid var(--hl-green); border-radius: 6px; color: var(--hl-green) !important; font-size: 15.5px; font-weight: 600; margin-bottom: 18px; }
.hli-pbadges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hli-pbadges p { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 12.5px !important; color: var(--hl-muted) !important; line-height: 1.35 !important; }
.hli-pbadges span { display: flex; flex-direction: column; } .hli-pbadges b { color: var(--hl-ink); font-size: 13px; }
.hli-tabs { display: flex; gap: 40px; border-bottom: 1px solid #E4DCC9; margin: 10px 0 24px !important; }
.hli-tabs a { padding: 12px 14px; font-size: 15.5px; color: var(--hl-ink) !important; } .hli-tabs a.is-active { color: var(--hl-green) !important; box-shadow: inset 0 -2px 0 var(--hl-green); font-weight: 600; }
.hli-desc { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; margin-bottom: 36px; align-items: start; }
.hli-desc-text p { font-size: 15.5px !important; color: var(--hl-ink) !important; line-height: 1.7 !important; }
.hli-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0 6px; }
.hli-feats p { display: flex; align-items: center; gap: 12px; font-size: 13.5px !important; line-height: 1.4 !important; margin: 0 !important; }
.hli-warn { display: flex; align-items: flex-start; gap: 12px; background: #FBF1DF; border-radius: 8px; padding: 12px 16px; font-size: 14px !important; color: var(--hl-ink) !important; }
.hli-desc-img { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; background-size: cover; background-position: center; }
.hli-desc-img .hli-script { position: absolute; left: 22px; bottom: 22px; font-size: 34px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.35); line-height: 1.1; }
.hli-rel { padding-bottom: 36px; } .hli-rhead { display: flex; justify-content: center; position: relative; margin-bottom: 18px; } .hli-rhead a { position: absolute; right: 0; bottom: 14px; color: var(--hl-green) !important; font-size: 14.5px; font-weight: 600; }
/* tin tức */
.hli-nhero { position: relative; height: 330px; background-size: cover; background-position: center right; display: flex; align-items: center; margin-bottom: 26px; }
.hli-nhero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(248,246,239,.96) 0%, rgba(248,246,239,.75) 40%, rgba(248,246,239,0) 65%); }
.hli-nhero .hli-wrap { position: relative; width: 100%; }
.hli-nhero-title { font-size: 60px !important; color: var(--hl-dark) !important; font-weight: 600 !important; line-height: 1.08 !important; margin: 0 0 14px !important; }
.hli-nhero p:not(.hli-eyebrow) { font-size: 17px !important; color: var(--hl-ink) !important; margin: 0 !important; }
.hli-nhero-note { position: absolute; right: 8%; top: 22%; font-size: 30px; color: var(--hl-muted); transform: rotate(-8deg); line-height: 1.15; }
.hli-ngrid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; padding-bottom: 36px; align-items: start; }
.hli-nhead .hli-h2 { font-size: 34px !important; }
.hli-ntabs { display: flex; gap: 10px; margin: 6px 0 20px !important; flex-wrap: wrap; }
.hli-ntabs a { padding: 8px 20px; border-radius: 6px; background: #EFEBDF; color: var(--hl-ink) !important; font-size: 14.5px; } .hli-ntabs a.on { background: var(--hl-green); color: #fff !important; }
.hli-ncard { display: grid; grid-template-columns: 44% 1fr; gap: 24px; background: #fff; border-radius: 10px; padding: 14px; margin-bottom: 18px; box-shadow: 0 4px 14px rgba(31,77,44,.05); }
.hli-nimg { min-height: 230px; border-radius: 8px; background-size: cover; background-position: center; }
.hli-nmeta { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 8px !important; font-size: 13px !important; }
.hli-nmeta span { color: var(--hl-gold); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .hli-nmeta em { font-style: normal; color: var(--hl-muted); display: flex; align-items: center; gap: 6px; }
.hli-ncard h2 { font-size: 26px !important; font-weight: 600 !important; margin: 0 0 10px !important; line-height: 1.25 !important; } .hli-ncard h2 a { color: var(--hl-ink) !important; }
.hli-ncard p:not(.hli-nmeta) { font-size: 14.5px !important; color: var(--hl-muted) !important; margin: 0 0 12px !important; }
.hli-more { color: var(--hl-green) !important; font-weight: 700; font-size: 14.5px; }
.hli-sp { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; color: var(--hl-ink) !important; }
.hli-sp span { width: 78px; height: 58px; flex: 0 0 78px; border-radius: 6px; background-size: cover; background-position: center; }
.hli-sp b { display: flex; flex-direction: column; font-size: 14px; font-weight: 500; line-height: 1.35; } .hli-sp small { color: var(--hl-muted); font-weight: 400; font-size: 12.5px; margin-top: 4px; }
.hli-help { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 10px; padding: 18px; margin-top: 18px; color: var(--hl-ink) !important; }
.hli-help span { display: flex; flex-direction: column; font-size: 13px; color: var(--hl-muted); } .hli-help b { color: var(--hl-ink); font-size: 15px; } .hli-help em { font-style: normal; color: var(--hl-green); font-weight: 700; font-size: 18px; margin-top: 4px; }
/* bài viết */
.hli-article { background: #fff; border-radius: 10px; padding: 26px 30px; }
.hli-atitle { font-size: 46px !important; color: var(--hl-dark) !important; font-weight: 600 !important; line-height: 1.15 !important; margin: 0 0 10px !important; }
.hli-asub { font-size: 17px !important; color: var(--hl-ink) !important; margin: 0 0 10px !important; }
.hli-ameta { display: flex; gap: 18px; font-size: 13.5px !important; color: var(--hl-muted) !important; margin: 0 0 18px !important; } .hli-ameta span { display: flex; align-items: center; gap: 6px; }
.hli-content p, .hli-content li { font-size: 15.5px !important; color: var(--hl-ink) !important; line-height: 1.7 !important; }
.hli-content h2 { font-size: 28px !important; color: var(--hl-dark) !important; font-weight: 600 !important; margin: 26px 0 12px !important; }
.hli-fig { margin: 0 0 18px; } .hli-fig img { width: 100%; height: 400px; object-fit: cover; border-radius: 10px; display: block; } .hli-fig figcaption { font-size: 13px; color: var(--hl-muted); margin-top: 8px; }
.hli-note { display: flex; gap: 16px; align-items: flex-start; background: #EEF3E7; border-radius: 10px; padding: 16px 20px; margin: 16px 0; }
.hli-note p { margin: 0 !important; font-size: 14.5px !important; } .hli-note b { display: block; color: var(--hl-dark); font-size: 16.5px; margin-bottom: 4px; }
.hli-nuts p { display: flex; gap: 18px; align-items: center; margin: 0 0 14px !important; padding-bottom: 14px; border-bottom: 1px solid #EFEBDF; }
.hli-nuts img { width: 110px; height: 72px; object-fit: cover; border-radius: 8px; flex: 0 0 110px; }
.hli-nuts span { display: flex; flex-direction: column; font-size: 14.5px; color: var(--hl-muted); } .hli-nuts b { font-family: "Playfair Display", serif; font-size: 20px; color: var(--hl-dark); }
.hli-checks { list-style: none; margin: 0 0 10px !important; } .hli-checks li { position: relative; padding-left: 32px; margin: 0 0 8px !important; }
.hli-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: url(icons/check-c.png) center/contain no-repeat; }
.hli-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; background: linear-gradient(90deg, #EEF3E7, #F6F1E3); border-radius: 10px; padding: 22px; margin: 22px 0; text-align: center; }
.hli-cta b { font-size: 26px; color: var(--hl-dark); font-weight: 600; } .hli-cta a { background: var(--hl-green); color: #fff !important; padding: 10px 22px; border-radius: 6px; font-weight: 600; font-size: 14.5px; }
.hli-share, .hli-tags { display: flex; align-items: center; gap: 10px; font-size: 14px !important; color: var(--hl-ink) !important; margin: 0 0 10px !important; }
.hli-tags a { background: #EFEBDF; color: var(--hl-ink) !important; padding: 4px 14px; border-radius: 99px; font-size: 13px; }
.hli-relp { padding: 10px 0 20px; } .hli-rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 16px; }
.hli-rcard { background: #fff; border-radius: 10px; overflow: hidden; } .hli-rcard > div { padding: 14px 16px 18px; }
.hli-rimg { display: block; height: 200px; background-size: cover; background-position: center; }
.hli-rlab { font-size: 12px !important; color: var(--hl-gold) !important; text-transform: uppercase; font-weight: 600; margin: 0 0 4px !important; }
.hli-rcard h3 { font-size: 19px !important; font-weight: 600 !important; margin: 0 0 8px !important; } .hli-rcard h3 a { color: var(--hl-ink) !important; }
.hli-rcard p:not(.hli-rlab) { font-size: 13.5px !important; color: var(--hl-muted) !important; margin: 0 0 8px !important; }
.hli-comments { background: #fff; border-radius: 10px; padding: 20px 26px; margin-bottom: 30px; } .hli-comments:empty { display: none; }
@media (max-width: 849px) {
  .hli-shop, .hli-ptop, .hli-desc, .hli-ngrid { grid-template-columns: 1fr; } .hli-side { order: 2; }
  .hli-hero { padding: 0 20px; height: 200px; } .hli-hero-title { font-size: 32px !important; } .hli-hero-note, .hli-nhero-note { display: none; }
  .hli-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hli-ptitle, .hli-atitle { font-size: 30px !important; } .hli-pprice { font-size: 30px !important; flex-wrap: wrap; }
  .hli-cart { flex-wrap: wrap; } .hli-add, .hli-buy { flex: 1 1 100%; min-height: 48px; } .hli-pbadges, .hli-feats { grid-template-columns: 1fr; }
  .hli-tabs { gap: 0; overflow-x: auto; } .hli-tabs a { white-space: nowrap; }
  .hli-nhero { height: 280px; } .hli-nhero-title { font-size: 36px !important; }
  .hli-ncard { grid-template-columns: 1fr; } .hli-nimg { min-height: 200px; }
  .hli-article { padding: 18px 16px; } .hli-fig img { height: 240px; } .hli-rgrid { grid-template-columns: 1fr; } .hli-rhead a { position: static; margin-left: 12px; }
}
/* r2 */
.woocommerce-page .shop-page-title, .woocommerce-page .product-page-title, .single-product .page-title, .tax-product_cat .page-title, .post-type-archive-product .page-title { display: none !important; }
body:not(.home) #main, body:not(.home) #wrapper { background: var(--hl-cream) !important; }
.hli-price button { background: var(--hl-gold) !important; }
body:not(.home) { background: var(--hl-cream) !important; }
.hli-share a { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .hli-share .fb { background: #1877F2; } .hli-share .zl { background: #0068FF; } .hli-share img { width: 16px; height: 16px; }
.hli-page, html { background: var(--hl-cream) !important; }
.hli-cart .hli-add { background: var(--hl-dark) !important; color: #fff !important; }
/* ruler:auto BEGIN — tools/astra-bridge/lab/ruler_fix.py, đừng sửa tay */
@media (min-width: 850px) {
  body:not(.home) .hli-box h3.hli-bh { font-size: 25.5px !important; }
  body:not(.home) .hli-nmeta img[src*="/icons/cal.png"] { width: 24px !important; height: 24px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
}
@media (max-width: 849px) {
  body:not(.home) .hli-nmeta img[src*="/icons/cal.png"] { width: 16px !important; height: 16px !important; }
}
/* ruler:auto END */
/* ruler:manual — nhóm icon cùng cỡ (auto chỉ bắt 1 icon), tiêu đề thẻ tin 2 dòng như mockup */
@media (min-width: 850px) { body:not(.home) .hli-feats img, body:not(.home) .hli-pbadges img { width: 44px !important; height: 44px !important; } body:not(.home) .hli-ncard h2 { font-size: 30px !important; } }

/* 2026-10-04 cột phải trang SP: thẻ ảnh vuông + thông tin nhanh, dính khi cuộn */
.hli-desc-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; }
.hli-desc-text img { max-width: 100%; height: auto; }
.hli-side-info { border: 1px solid #e6e2d6; border-radius: 12px; padding: 20px 22px; background: #fbfaf5; }
.hli-side-info .hli-side-h { font-size: 18px !important; font-weight: 700; color: var(--hl-ink) !important; margin: 0 0 10px !important; }
.hli-side-info dl { margin: 0 0 14px; }
.hli-side-info dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #e0dbcc; font-size: 14.5px; }
.hli-side-info dt { color: #6b6b6b; font-weight: 400; text-transform: none; }
.hli-side-info dd { margin: 0; color: var(--hl-ink); font-weight: 600; text-align: right; text-transform: none; }
.hli-side-call { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: 8px; background: var(--hl-dark); color: #fff !important; font-weight: 600; font-size: 15px; }
.hli-side-call img { filter: brightness(0) invert(1); }
@media (max-width: 849px) { .hli-desc-side { position: static; } .hli-desc-img { display: none; } }

/* 2026-10-04 Giới thiệu + Liên hệ (dựng theo khối có sẵn của site) */
.hla-page { padding-bottom: 40px; }
.hla-hero { height: 300px; }
.hla-story { display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 700fr); gap: 56px; align-items: center; margin: 56px 0 64px; }
.hla-story-img { position: relative; aspect-ratio: 520 / 420; border-radius: 14px; background-size: cover; background-position: center; }
.hla-story-img .hli-script { position: absolute; left: 22px; bottom: 20px; font-size: 30px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.35); line-height: 1.1; }
.hla-story-txt p:not([class]) { font-size: 16px !important; line-height: 1.75 !important; color: var(--hl-ink) !important; margin: 0 0 14px !important; }
.hla-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hla-pills span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #e6e2d6; font-size: 14.5px; color: var(--hl-ink); }
.hla-sec { margin: 0 0 64px; }
.hla-head { text-align: center; margin-bottom: 28px; }
.hla-vals, .hla-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.hla-val { background: #fff; border: 1px solid #ebe6d8; border-radius: 14px; padding: 28px 24px; text-align: center; }
.hla-val img { width: 56px; height: 56px; margin: 0 auto 14px; display: block; }
.hla-val h3, .hla-step h3 { font-family: "Playfair Display", serif !important; font-size: 21px !important; color: var(--hl-dark) !important; margin: 0 0 8px !important; }
.hla-val p, .hla-step p { font-size: 14.5px !important; color: var(--hl-muted) !important; line-height: 1.6 !important; margin: 0 !important; }
.hla-step { position: relative; padding: 26px 22px 24px; border-top: 3px solid var(--hl-gold); background: #fff; border-radius: 0 0 14px 14px; }
.hla-step b { position: absolute; right: 18px; top: 14px; font-size: 30px; color: #e9e1cc; font-family: "Playfair Display", serif; }
.hla-step img { width: 44px; height: 44px; display: block; margin-bottom: 14px; }
.hla-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 42px 48px; border-radius: 16px; background-color: var(--hl-dark); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.hla-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,77,44,.95) 0%, rgba(31,77,44,.85) 55%, rgba(31,77,44,.55) 100%); }
.hla-cta > div { position: relative; min-width: 0; }
.hla-cta h2 { font-family: "Playfair Display", serif !important; color: #fff !important; font-size: 32px !important; margin: 0 0 6px !important; }
.hla-cta p { color: #e9efe6 !important; margin: 0 !important; font-size: 16px !important; }
.hla-cta-btns { display: flex; gap: 12px; flex: 0 0 auto; }
.hla-btn { display: inline-block; padding: 13px 24px; border-radius: 8px; background: var(--hl-gold); color: #fff !important; font-weight: 600; white-space: nowrap; }
.hla-btn-o { background: transparent; border: 1.5px solid #fff; }
.hlc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; margin: 48px 0 40px; }
.hlc-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid #ebe6d8; border-radius: 12px; margin-bottom: 14px; color: var(--hl-ink) !important; }
.hlc-card b { display: block; font-size: 15px; color: var(--hl-dark); margin-bottom: 2px; }
.hlc-card > span:last-child { font-size: 15px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.hlc-ic { flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--hl-dark); display: flex; align-items: center; justify-content: center; }
.hlc-ic img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.hlc-form { background: #fff; border: 1px solid #ebe6d8; border-radius: 14px; padding: 30px 32px; }
.hlc-sub { color: var(--hl-muted) !important; font-size: 15px !important; margin: 0 0 18px !important; }
.hlc-form .wpcf7-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.hlc-form .hlc-full { grid-column: 1 / -1; }
.hlc-form label { font-size: 14px; color: var(--hl-ink); font-weight: 500; display: block; margin-bottom: 12px; }
.hlc-form input:not([type=submit]), .hlc-form textarea { width: 100%; border: 1px solid #ddd6c6 !important; border-radius: 8px !important; box-shadow: none !important; background: #fbfaf5 !important; margin-top: 6px; }
.hlc-form textarea { height: 130px; }
.hlc-form input[type=submit] { background: var(--hl-dark) !important; color: #fff !important; border-radius: 8px !important; padding: 0 30px !important; margin: 4px 0 0; text-transform: none; font-size: 15px; }
.hlc-form .wpcf7-spinner { position: absolute; }
.hlc-map { border-radius: 14px; overflow: hidden; border: 1px solid #ebe6d8; }
.hlc-map iframe { display: block; }
@media (min-width: 850px) and (max-width: 1199px) { .hla-vals, .hla-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hla-story { gap: 32px; } }
@media (max-width: 849px) {
  .hla-hero { height: auto; min-height: 220px; padding: 28px 22px; }
  .hla-story, .hlc-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 32px 0; }
  .hla-vals, .hla-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hla-val { padding: 20px 14px; } .hla-cta { flex-direction: column; align-items: flex-start; padding: 30px 22px; } .hla-cta h2 { font-size: 25px !important; }
  .hla-cta-btns { flex-wrap: wrap; } .hlc-form { padding: 22px 18px; } .hlc-form .wpcf7-form { grid-template-columns: minmax(0, 1fr); }
}
/* 2026-10-04 hero trang trong mobile: ảnh trên (dải ~180px), chữ dưới trên nền kem — không để chữ đè ảnh (LESSONS 112).
   Ảnh là background inline của DIV -> giữ cover cả khối, phần chữ có nền kem riêng che nửa dưới ảnh. */
@media (max-width: 849px) {
  div.hli-hero, div.hli-nhero { display: block; height: auto; min-height: 0; padding: 180px 0 0; background-size: cover; background-position: 75% 20%; border-radius: 12px; overflow: hidden; }
  div.hli-hero { background-size: auto 180px; background-position: 88% top; background-repeat: no-repeat; }
  div.hli-hero::before, div.hli-nhero::before { display: none; }
  div.hli-hero > div, div.hli-nhero > .hli-wrap { background: var(--hl-cream); padding: 18px 4px 6px; }
}
/* 2026-10-04 form bình luận trang bài: nút xanh lá mặc định Flatsome -> màu thương hiệu */
.hli-comments .form-submit input[type=submit], .hli-page #respond input[type=submit] { background: var(--hl-dark) !important; border-radius: 8px !important; text-transform: none !important; }
.hli-page #respond textarea, .hli-page #respond input[type=text], .hli-page #respond input[type=email], .hli-page #respond input[type=url] { border-radius: 8px !important; box-shadow: none !important; }
/* 2026-10-04: dải CTA Giới thiệu bỏ ảnh dọc 700x1300 phóng 1.8x (mờ) -> nền xanh trơn có hoạ tiết gradient */
.hla-cta { background-image: none !important; background: linear-gradient(120deg, #1F4D2C 0%, #2F6B3A 100%) !important; }
.hla-cta::before { display: none; }
.hlc-faq { margin-top: 10px; } .hlc-faq details { background: #fff; border: 1px solid #ebe6d8; border-radius: 10px; margin: 0 auto 12px; max-width: 900px; } .hlc-faq summary { cursor: pointer; padding: 16px 22px; font-weight: 600; color: var(--hl-ink); } .hlc-faq details p { padding: 0 22px 16px; margin: 0 !important; color: var(--hl-muted) !important; line-height: 1.7 !important; }
.hli-nhero-note { display: none !important; } /* 2026-10-04: ảnh nền mới (bát hạt bên phải) -> chữ viết tay đè lên ảnh */