/* Astra — spa10 trang chủ dựng Y HỆT mockup (2026-09-27). Dùng chung token/nút/tiêu đề của pricing-m.css (pm-*). */
.hm-hero .hm-hero-title { font-family: "Lora", Georgia, serif !important; font-weight: 600 !important; color: #6E3F1C !important; text-transform: uppercase; line-height: .98 !important; margin: 4px 0 14px !important; font-size: 50px !important; letter-spacing: -.01em; }
.hm-hero .hm-hero-title span { display: block; }
.hm-hero .hm-hero-title .l1, .hm-hero .hm-hero-title .l3 { padding-right: 60px; }
.hm-hero .hm-hero-title .l2, .hm-hero .hm-hero-title .l4 { padding-left: 70px; }
.hm-hero .hm-hero-title .l1::first-letter, .hm-hero .hm-hero-title .l3::first-letter { font-size: 1.45em; }
.hm-hero .hm-hero-title .l4 { font-size: 1em; }
.hm-hero .hm-hero-sub { color: #4E4540 !important; font-size: 16px !important; line-height: 1.5 !important; text-align: left; margin: 0 0 18px !important; }
.hm-hero .hm-hero-box .button { margin: 0 6px; }
.hm-btn-outline.button { background: rgba(255,255,255,.4) !important; border: 1.5px solid #8A5A34 !important; color: #5B3A20 !important; }
.hm-hero-quote p { color: #6E3F1C !important; font-size: 30px !important; }
/* câu chuyện */
.hm-story .pm-expert-title { font-size: 38px !important; line-height: 1.2 !important; }
.hm-story-body p { font-size: 14.5px; }
.hm-mini .img-inner { border-radius: 8px; }
.hm-story .pm-small { margin-bottom: 8px; }
/* dịch vụ */
.hm-svc .hm-svc-img .img-inner { border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px #E2C58A; }
.hm-svc .hm-svc-img { margin: 0 auto 14px; }
.hm-svc-title { font-family: "Lora", Georgia, serif !important; font-size: 19px !important; line-height: 1.3 !important; text-transform: uppercase; color: #7A3A20 !important; font-weight: 600 !important; margin: 0 0 8px !important; min-height: 50px; }
.hm-svc-desc { color: #6d625b !important; font-size: 14.5px !important; line-height: 1.6 !important; max-width: 300px; margin: 0 auto !important; }
.hm-services .col { padding-bottom: 14px !important; }
/* trải nghiệm */
.hm-tabs .nav { margin-bottom: 18px !important; gap: 10px; }
.hm-tabs .nav > li > a { background: #F1EBE0 !important; color: #4E4540 !important; border-radius: 99px !important; padding: 8px 26px !important; font-family: "Be Vietnam Pro", Arial, sans-serif; font-size: 14.5px; text-transform: none; }
.hm-tabs .nav > li.active > a { background: linear-gradient(180deg,#C99A45,#A7722F) !important; color: #fff !important; }
.hm-ba { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.hm-ba .hm-card { border: 1px solid #EAD9B8; border-radius: 6px; background: #FFF9EE; padding: 8px 10px 10px; text-align: center; }
.hm-ba .hm-card img { width: 100%; height: auto; display: block; border-radius: 4px; }
.hm-ba .hm-card .k1 { font-family: "Be Vietnam Pro", Arial, sans-serif; color: #7A4A26; font-size: 12px; text-transform: uppercase; margin: 2px 0 0; }
.hm-ba .hm-card .k2 { font-family: "Be Vietnam Pro", Arial, sans-serif; color: #6E3F1C; font-size: 19px; font-weight: 700; text-transform: uppercase; margin: 0 0 6px; }
.hm-ba .hm-pics { position: relative; }
.hm-ba .hm-lbl { position: absolute; bottom: -6px; width: 27%; background: linear-gradient(180deg,#F6DE9F,#E0B55F); color: #5B3A20; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 0; font-family: "Be Vietnam Pro", Arial, sans-serif; }
.hm-ba .hm-lbl.t { left: 11%; } .hm-ba .hm-lbl.s { right: 11%; }
/* banner slider */
.hm-td-script { font-family: "Dancing Script", cursive !important; color: #fff !important; font-size: 36px !important; margin: 0 !important; line-height: 1 !important; }
.hm-td-title { font-family: "Be Vietnam Pro", Arial, sans-serif !important; color: #F2CF86 !important; font-size: 30px !important; font-weight: 600 !important; text-transform: uppercase; line-height: 1.25 !important; margin: 4px 0 12px !important; }
.hm-td-caps { color: #fff !important; font-size: 13px !important; text-transform: uppercase; border-left: 2px solid #F2CF86; padding-left: 12px; line-height: 1.5 !important; margin: 0 !important; }
.hm-td-note p { font-family: "Dancing Script", cursive !important; color: #fff !important; font-size: 34px !important; line-height: 1.2 !important; transform: rotate(-6deg); }
.hm-slider .flickity-prev-next-button { background: #fff !important; border-radius: 50%; width: 38px; height: 38px; opacity: 1 !important; }
.hm-slider .flickity-prev-next-button svg { fill: #5B3A20; }
/* tin tức */
.hm-news-title { font-family: "Lora", Georgia, serif !important; font-size: 30px !important; color: #3E2413 !important; font-weight: 500 !important; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #E8DCC8; padding-bottom: 6px; margin-bottom: 14px !important; }
.hm-news-title a { font-family: "Be Vietnam Pro", Arial, sans-serif; font-size: 13px; color: #6d625b !important; }
.hm-news-col + .hm-news-col { border-left: 1px solid #EFE6D6; }
.hm-news-list .col { padding-bottom: 10px !important; }
.hm-news-list .box-vertical { display: flex !important; align-items: flex-start; }
.hm-news-list .box-image { border-radius: 4px; overflow: hidden; }
.hm-news-list .box-text { padding: 0 0 0 20px !important; text-align: left !important; }
.hm-news-list .post-title { font-family: "Be Vietnam Pro", Arial, sans-serif; font-size: 15.5px; font-weight: 600; color: #2E2420; line-height: 1.35; }
.hm-news-list .post-meta { color: #8a7d72; font-size: 12.5px; }
.hm-news-list .from_the_blog_excerpt { color: #7b706a; font-size: 13.5px; }
.hm-news-list .is-divider, .hm-news-list .badge { display: none; }
/* liên hệ */
.hm-contact .pm-expert-title { font-size: 36px !important; }
.hm-contact-info p { color: #5d534d; font-size: 14.5px; line-height: 1.6; }
.hm-contact-list { list-style: none; margin: 10px 0 12px !important; }
.hm-contact-list li { list-style: none; position: relative; padding-left: 30px; margin: 0 0 8px !important; color: #5d534d; font-size: 14.5px; }
.hm-contact-list li::before { position: absolute; left: 0; top: 0; color: #C99A45; font-size: 16px; }
.hm-contact-list li::before { content: none !important; } .hm-contact-list li img { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; }
.hm-contact-list a { color: #5d534d !important; }
.hm-contact-form > .col-inner { background: #fff; border-radius: 10px; padding: 26px 30px 16px; box-shadow: 0 12px 34px rgba(122,74,38,.10); }
.hm-contact-form h3 { font-family: "Lora", Georgia, serif !important; color: #6E3F1C !important; font-size: 24px !important; font-weight: 500 !important; margin-bottom: 14px !important; }
.hm-contact-form input[type=text], .hm-contact-form input[type=tel], .hm-contact-form textarea { background: #FFF8E8 !important; border: 1px solid #F3E6C8 !important; border-radius: 6px !important; box-shadow: none !important; height: 44px; margin-bottom: 12px !important; }
.hm-contact-form textarea { height: 96px; }
.hm-contact-form input[type=submit] { background: linear-gradient(180deg,#8A4E24,#5E3217) !important; border: 0 !important; border-radius: 6px !important; color: #fff !important; font-size: 15px; text-transform: none; padding: 0 28px; }
/* footer trang chủ: mockup chỉ có dải cuối */
.home .pm-footer > .row:first-child { display: none !important; }
.home .pm-footer .pm-foot-bottom { border-top: 0 !important; margin-top: 0 !important; padding-top: 4px; }
@media (max-width: 849px) {
  .hm-hero .hm-hero-title { font-size: 34px !important; } .hm-hero .hm-hero-title .l2, .hm-hero .hm-hero-title .l4 { padding-left: 30px; } .hm-hero .hm-hero-title .l1, .hm-hero .hm-hero-title .l3 { padding-right: 20px; }
  .hm-story .pm-expert-title, .hm-contact .pm-expert-title { font-size: 28px !important; }
  .hm-svc-title { font-size: 16px !important; min-height: 0; }
  .hm-ba { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hm-tabs .nav > li > a { padding: 6px 14px !important; font-size: 13px; }
  .hm-td-title { font-size: 22px !important; }
  .hm-news-col + .hm-news-col { border-left: 0; }
  .hm-news-title { font-size: 24px !important; }
}
/* m2 theo mockup_diff */
.home .pm-footer .section-content > .row:first-child { display: none !important; }
.home .pm-footer { padding-top: 10px !important; padding-bottom: 6px !important; }
.home .pm-footer .pm-foot-bottom .col { padding-bottom: 0 !important; }
.hm-story .pm-expert-body { padding-top: 0 !important; }
.hm-services { padding-top: 22px !important; padding-bottom: 14px !important; }
.hm-services .pm-subtitle { margin-bottom: 12px !important; }
.hm-svc .hm-svc-img { margin-bottom: 10px; }
.hm-svc-title { font-size: 17px !important; min-height: 0; margin-bottom: 6px !important; }
.hm-svc-desc { font-size: 13.5px !important; line-height: 1.55 !important; }
.hm-services .col { padding-bottom: 8px !important; }
.hm-exp { padding-top: 22px !important; padding-bottom: 20px !important; }
.hm-exp .pm-subtitle { margin-bottom: 10px !important; }
.hm-tabs .nav { margin-bottom: 12px !important; }
.hm-ba { gap: 14px 20px; }
.hm-ba .hm-card { padding: 6px 12px 8px; }
.hm-ba .hm-card .img, .hm-ba .hm-card .img-inner { margin: 0 !important; }
.hm-ba .hm-card img { aspect-ratio: 1.75 / 1; object-fit: cover; object-position: 50% 100%; }
.hm-ba .hm-card .k1 { font-size: 11px; margin: 0; line-height: 1.3; }
.hm-ba .hm-card .k2 { font-size: 18px; margin: 0 0 4px; line-height: 1.2; }
.hm-news { padding-top: 22px !important; padding-bottom: 10px !important; }
.hm-news-list .col { padding-bottom: 6px !important; }
.hm-news-list .post-title { font-size: 14.5px; }
.hm-contact-form > .col-inner { padding: 20px 26px 8px; }
.hm-contact-form input[type=text], .hm-contact-form input[type=tel] { height: 40px; margin-bottom: 10px !important; }
.hm-contact-form textarea { height: 78px; min-height: 78px; margin-bottom: 10px !important; }
.hm-contact-form h3 { margin-bottom: 10px !important; font-size: 22px !important; }
.hm-contact .col { padding-bottom: 6px !important; }
.hm-contact-info p { margin-bottom: 8px; }
/* m3 */
.hm-ba .hm-card img { aspect-ratio: 1.9 / 1; object-position: 50% 84%; }
.hm-ba .hm-card { padding: 4px 10px 6px; }
.hm-ba { gap: 12px 18px; }
.hm-story .pm-script { font-size: 19px !important; }
.hm-story .pm-expert-body p { margin-bottom: 8px; }
.hm-contact-form textarea { height: 64px; min-height: 64px; }
.hm-contact-form > .col-inner { padding: 16px 24px 4px; }
.hm-contact .pm-expert-title { font-size: 32px !important; margin-bottom: 4px !important; }
/* m4 */
.hm-story-body p { font-size: 13.5px !important; line-height: 1.6 !important; margin-bottom: 6px !important; }
.hm-story .pm-expert-title { font-size: 34px !important; margin-bottom: 8px !important; }
.hm-story .col { padding-bottom: 0 !important; }
.hm-story .pm-eyebrow { margin-bottom: 4px !important; }
.hm-ba .hm-card img { aspect-ratio: 2.15 / 1; object-position: 50% 88%; }
.hm-ba .hm-card .k2 { font-size: 16px; }
.hm-exp .pm-title { font-size: 36px !important; }
.hm-tabs .nav { margin-bottom: 8px !important; }
.hm-tabs .nav > li > a { padding: 6px 22px !important; }
/* m5 */
.hm-story .hm-story-body { background: none !important; }
.hm-story::after { content: ""; position: absolute; right: -10px; bottom: -10px; width: 150px; height: 230px; background: url(../../../uploads/2026/09/pr-leaves2-v1.png) right bottom/contain no-repeat; pointer-events: none; }
.hm-story .row { position: relative; z-index: 1; }
.hm-hero .hm-hero-logo { width: 130px !important; max-width: 130px !important; }
.hm-hero .hm-hero-logo img { filter: brightness(.7) sepia(.5) saturate(1.4); }
/* m6: mobile theo mockup mobile */
@media (max-width: 849px) {
  .hm-hero .banner-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,250,242,.94) 0%, rgba(255,250,242,.9) 55%, rgba(255,250,242,.15) 78%, rgba(255,250,242,0) 100%); }
  .hm-hero .hm-hero-title { font-size: 36px !important; }
  .hm-hero .hm-hero-sub { font-size: 14px !important; text-align: center; }
  .hm-hero .hm-hero-box .button { margin: 4px; }
  .hm-story::after { display: none; }
  .hm-td .banner-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(58,34,18,.88) 0%, rgba(58,34,18,.55) 60%, rgba(58,34,18,.1) 100%); }
  .hm-tabs .nav { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; padding-bottom: 6px; }
  .hm-tabs .nav > li { flex: 0 0 auto; }
  .hm-svc { flex-basis: 100% !important; max-width: 100% !important; }
  .hm-svc > .col-inner { display: grid; grid-template-columns: 110px 1fr; gap: 0 14px; text-align: left; align-items: start; }
  .hm-svc .hm-svc-img { width: 110px !important; margin: 0 !important; grid-row: span 2; }
  .hm-svc-title { font-size: 15px !important; margin: 4px 0 4px !important; }
  .hm-svc-desc { margin: 0 !important; max-width: none; }
}
.hm-social { display: flex; gap: 12px; margin-top: 12px !important; } .hm-social img { width: 44px; height: 44px; display: block; }