/*
Theme Name: hungphat
Theme URI: https://hungphat.novadigital.vn
Description: Child theme của Flatsome cho website Bốc Xếp Hưng Phát.
Author: Hưng Phát
Template: flatsome
Version: 1.0.38
Text Domain: hungphat
*/

/* CSS tùy chỉnh của hungphat viết bên dưới. */

/* =====================================================================
   HP-003 (HP-Dev2) 04/11/2026: CSS cho các khối nháp class hp-*.
   MÀU TẠM, chờ Giám Sát chốt bảng màu và logo: nền sáng, nhấn đỏ đậm
   (#c8102e, lấy theo tông đỏ-đen của logo HP) và đen (#1a1a1a).
   Chỉ chạm selector bắt đầu bằng .hp-. Không !important, không nhập font ngoài.
   Tương phản: chữ trắng trên #c8102e = 5,9:1; #c8102e trên #f5f5f5 = 5,3:1;
   #595959 trên trắng = 7:1; nút có viền trắng 2px trên nền tối để nền nút
   tách khỏi nền khối (>= 3:1).
   ===================================================================== */

.hp-sec,
.hp-hdr,
.hp-ftr {
  --hp-red: #c8102e;
  --hp-red-dark: #a00d25;
  --hp-ink: #1a1a1a;
  --hp-muted: #595959;
  --hp-light: #f5f5f5;
  --hp-line: #dcdcdc;
}

/* ---------- Chữ và tiêu đề ---------- */
.hp-sec h1 { font-size: 2.5rem; line-height: 1.2; margin: 0 0 .5em; }
.hp-sec h2 { font-size: 1.875rem; line-height: 1.25; margin: 0 0 .6em; }
.hp-sec h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 .5em; }
.hp-sec p,
.hp-sec li { font-size: 1.0625rem; line-height: 1.65; }
.hp-sec p { margin: 0 0 .9em; }
.hp-sec ul { margin: 0 0 1em 1.2em; }

/* Tiêu đề khối: căn giữa, gạch đỏ ngắn phía dưới */
.hp-sec-title h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 12px auto 0;
  background: var(--hp-red);
}
.hp-head { padding-bottom: 12px; }

/* ---------- Nút ---------- */
.hp-btn.button {
  min-height: 44px;
  margin: 0 12px 12px 0;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.hp-btn.button:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}
.hp-btn-call.button,
.hp-btn--call.button {
  background-color: var(--hp-red);
  border-color: var(--hp-red);
  color: #fff;
}
.hp-btn-call.button:hover,
.hp-btn--call.button:hover {
  background-color: var(--hp-red-dark);
  border-color: var(--hp-red-dark);
  color: #fff;
}
/* Nút đỏ trên nền tối: thêm vòng trắng để tách khỏi nền */
.hp-hero .hp-btn-call.button,
.hp-hero .hp-btn--call.button,
.hp-cta .hp-btn--call.button,
.hp-hdr .hp-btn-call.button {
  box-shadow: 0 0 0 2px #fff;
}
/* CTA trang chủ nằm trên nền đỏ: nút gọi đổi sang nền trắng chữ đỏ */
.hp-cta .hp-btn-call.button {
  background-color: #fff;
  border-color: #fff;
  color: var(--hp-red);
  box-shadow: none;
}
.hp-cta .hp-btn-call.button:hover { background-color: var(--hp-light); }
/* Nút email viền (trang Liên hệ, nền sáng) */
.hp-contact__info .hp-btn--mail.button {
  border-color: var(--hp-red);
  color: var(--hp-red);
}
.hp-contact__info .hp-btn--mail.button:hover {
  background-color: var(--hp-red);
  color: #fff;
}

/* ---------- Hero ---------- */
.hp-hero-col,
.hp-hero__text { padding-top: 12px; padding-bottom: 12px; }
.hp-hero-txt h1,
.hp-hero__title h1 { color: #fff; font-size: 2.75rem; }
.hp-hero-txt p,
.hp-hero__title p { color: #fff; font-size: 1.1875rem; }
.hp-hero-ph .col-inner,
.hp-hero__img .col-inner { border-radius: 8px; }

/* ---------- Khối giữ chỗ ("[cập nhật sau]" nhạt hơn) ---------- */
.hp-placeholder,
.hp-ph-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  padding: 20px;
  text-align: center;
  border: 2px dashed rgba(255, 255, 255, .6);
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
}
.hp-placeholder p,
.hp-ph-txt p { margin: 0; color: #e8e8e8; font-size: 1rem; font-style: italic; }
.hp-placeholder--dark {
  border-color: #9aa0a8;
  background: #eceef1;
}
.hp-placeholder--dark p,
.hp-placeholder--dark h3 { color: var(--hp-muted); }
.hp-placeholder--dark h3 { font-style: normal; }
.hp-contact__form .hp-placeholder { min-height: 240px; }
.hp-map .hp-placeholder { min-height: 280px; }
/* Ô ảnh trong thẻ dịch vụ (khoảng trống nền xám, viền đứt) */
.hp-ph {
  margin-bottom: 16px;
  border: 2px dashed #9aa0a8;
  border-radius: 6px;
  background: #e4e6e9;
}

/* ---------- Thẻ (dịch vụ, lĩnh vực, giá trị) ---------- */
.hp-card .col-inner {
  height: 100%;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.hp-card h3 { color: var(--hp-ink); }
.hp-card p { color: var(--hp-muted); }
.hp-card a {
  color: var(--hp-red);
  font-weight: 700;
  text-decoration: underline;
}
.hp-card a:hover { color: var(--hp-red-dark); }
.hp-card-txt,
.hp-card__body { text-align: left; }
.hp-services__intro { max-width: 760px; }

/* Thông tin chi tiết trang dịch vụ */
.hp-fact .col-inner {
  height: 100%;
  padding: 20px 20px 8px;
  border-left: 4px solid var(--hp-red);
  border-radius: 4px;
  background: #fff;
}
.hp-fact h3 { color: var(--hp-ink); }
.hp-fact p { color: var(--hp-muted); }

/* ---------- Về Hưng Phát, quy trình, vì sao chọn ---------- */
.hp-about-txt { max-width: 760px; margin-left: auto; margin-right: auto; }
.hp-about-txt h2 { color: var(--hp-ink); }
.hp-about-txt a { color: var(--hp-red); font-weight: 700; text-decoration: underline; }
.hp-step .col-inner {
  height: 100%;
  padding: 24px;
  border-top: 4px solid var(--hp-red);
  border-radius: 4px;
  background: var(--hp-light);
}
.hp-step-txt h3 { color: var(--hp-ink); }
.hp-step-txt p { color: var(--hp-muted); }
.hp-sec-title h2 { color: var(--hp-ink); }
.hp-why-sec .hp-sec-title h2 { color: #fff; }
.hp-why .col-inner { height: 100%; border-radius: 8px; }
.hp-why-txt h3 { margin: 0; color: #fff; }
.hp-news p { color: var(--hp-muted); text-align: center; }
.hp-blog__empty p { color: var(--hp-muted); text-align: center; }
.hp-intro__body h2,
.hp-fields__title h2,
.hp-values__title h2 { color: var(--hp-ink); }
.hp-legal__body li,
.hp-contact__body li { color: var(--hp-ink); }

/* ---------- Khối kêu gọi (CTA) ---------- */
.hp-cta-col,
.hp-cta__col { text-align: center; }
.hp-cta-txt h2,
.hp-cta__body h2 { color: #fff; }
.hp-cta-txt p,
.hp-cta__body p { color: #fff; }

/* ---------- Header và footer nháp ---------- */
.hp-hdr-name p { margin: 0; color: #fff; font-size: 1.0625rem; }
.hp-hdr-cta { text-align: right; }
.hp-hdr .hp-btn.button { margin-bottom: 0; }
.hp-ftr-txt h4 { margin: 0 0 .6em; color: #fff; font-size: 1.0625rem; }
.hp-ftr-txt p { margin: 0 0 .4em; color: #e8e8e8; font-size: 1rem; line-height: 1.6; }
.hp-ftr-txt a { color: #fff; text-decoration: underline; }
.hp-ftr-txt a:hover { color: #ffd6dc; }

/* ---------- Máy tính bảng (<= 768px) ---------- */
@media (max-width: 768px) {
  .hp-sec h1,
  .hp-hero-txt h1,
  .hp-hero__title h1 { font-size: 2rem; }
  .hp-sec h2 { font-size: 1.625rem; }
  .hp-hero-txt p,
  .hp-hero__title p { font-size: 1.0625rem; }
  .hp-placeholder,
  .hp-ph-txt { min-height: 160px; }
  .hp-hdr-cta { text-align: left; padding-top: 8px; }
}

/* ---------- Điện thoại (<= 549px, kiểm theo 390px) ---------- */
@media (max-width: 549px) {
  .hp-sec h1,
  .hp-hero-txt h1,
  .hp-hero__title h1 { font-size: 1.75rem; }
  .hp-sec h2 { font-size: 1.5rem; }
  .hp-sec p,
  .hp-sec li { font-size: 1rem; }
  .hp-btn.button {
    display: block;
    width: 100%;
    margin-right: 0;
    text-align: center;
  }
  .hp-hdr-cta { text-align: center; }
  .hp-card .col-inner { height: auto; }
}

/* ---------- Bổ sung sau kiểm xem trước ---------- */
.hp-hero-ph .hp-ph {
  margin: 0;
  border: 0;
  background: transparent;
}
.hp-hero .hp-btn-quote.button,
.hp-hero .hp-btn--mail.button,
.hp-cta .hp-btn-quote.button,
.hp-cta .hp-btn--mail.button {
  border-color: #fff;
  color: #fff;
}
.hp-hero .hp-btn-quote.button:hover,
.hp-hero .hp-btn--mail.button:hover,
.hp-cta .hp-btn-quote.button:hover,
.hp-cta .hp-btn--mail.button:hover {
  background-color: #fff;
  color: var(--hp-ink);
}
.hp-hero .hp-btn.button.is-outline,
.hp-cta .hp-btn.button.is-outline {
  border-color: #fff;
  color: #fff;
}
.hp-hero .hp-btn.button.is-outline:hover,
.hp-cta .hp-btn.button.is-outline:hover {
  background-color: #fff;
  color: var(--hp-ink);
}
/* Flatsome đặt nút viền trắng là color:currentColor!important, nên màu chữ nút lấy từ khung chứa */
.hp-hero-col,
.hp-hero__text,
.hp-cta-col,
.hp-cta__col { color: #fff; }
.hp-sec .hp-placeholder p { color: #e8e8e8; }
.hp-sec .hp-placeholder--dark p,
.hp-sec .hp-placeholder--dark h3 { color: var(--hp-muted); }
/* Khung giữ chỗ không có thẻ p bên trong (WordPress bỏ thẻ p): đặt màu và kiểu chữ ngay trên khung */
.hp-sec .hp-placeholder {
  color: #e8e8e8;
  font-size: 1rem;
  font-style: italic;
}
.hp-sec .hp-placeholder--dark { color: var(--hp-muted); }

/* Trang chủ nháp (QC lần 2): dải menu dịch vụ cao đúng 43px, bỏ khoảng đệm cột thừa */
.hp-svcmenu .col { padding-bottom: 0; }
.hp-svcmenu .row { margin: 0 auto; }

/* Chân trang (Q-046): cột widget cao hơn, theo mẫu */
.footer-1 { padding-top: 30px; padding-bottom: 30px; min-height: 675.4px; box-sizing: border-box; }
.footer-1 h4, .footer-1 p, .footer-1 a { color: #f1f1f1; }
.footer-1 .row { max-width: 1180px; }
.footer-1 { background-color: #6b6b6b; background-blend-mode: multiply; background-size: cover; }

/* Chrome (header, chân trang) theo mẫu: menu 14,4px, logo thẳng hàng nội dung, thanh chân 94px */
.header-main .nav > li > a { padding-top: 10px; padding-bottom: 10px; font-size: 15px; line-height: 16px; }
.header-main #logo { margin-left: 0; }

.header-main .header-inner.container { max-width: 1180px; }

@media (max-width: 849px) { .footer-1 { min-height: 0; padding-top: 40px; padding-bottom: 40px; } }
.header-main .header-nav-main.nav-right > li { margin-left: 13px; margin-right: 13px; }

/* Chân trang theo mẫu: tiêu đề cột 27,2px trắng, danh sách, thanh bản quyền căn giữa */
.footer-1 .hp-ft-h { margin: 0 0 30px; color: #fff; font-size: 27.2px; font-weight: 700; line-height: 35.36px; }
.footer-1 .hp-ft-l { margin: 0; list-style: none; }
.footer-1 .hp-ft-l li { margin: 0 0 9.6px; color: #f1f1f1; font-size: 16px; line-height: 25.6px; }
.footer-1 .hp-ft-c { text-align: left; }
.absolute-footer .footer-primary { float: none; text-align: center; }
.absolute-footer .copyright-footer { color: rgba(255, 255, 255, .5); font-size: 14.4px; line-height: 23.04px; }
.absolute-footer .container { max-width: 1180px; }
.footer-1 .hp-ft-l li.hp-ft-i { display: flex; align-items: flex-start; gap: 8px; }
.footer-1 .hp-ft-i .hp-ico { flex: none; margin-top: 3.8px; color: #f1f1f1; }
.footer-1 .hp-ft-i a { color: #f1f1f1; }
.footer-1 .hp-ft-i span { min-width: 0; overflow-wrap: anywhere; }

/* Dải menu dịch vụ nằm trong header (hàng dưới), nền nâu, chữ trắng 14px đậm như mẫu */
.header-bottom.nav-dark .nav > li > a { padding-right: 0; padding-left: 0; color: #fff; font-size: 15px; font-weight: 600; }
.header-bottom .nav > li { margin-right: 26px; margin-left: 0; }
.header-bottom .flex-right { display: none; }
.header-bottom .flex-left { flex: 1 1 auto; margin-right: 0; }
.header-bottom .nav-left { flex-wrap: nowrap; }
@media (max-width: 549px) { .footer-1 .hp-ft-h { font-size: 20px; line-height: 28px; } }

/* Nút lên đầu trang như mẫu: viền đen, rê chuột nền nâu */
#top-link.button { border-color: #000; color: #000; transition: all .3s; }
#top-link.button:hover { border-color: #884204; background-color: #884204; color: #fff; }

/* ===== Nút Zalo và gọi nổi: cùng cụm như plugin của mẫu (trái-dưới, Zalo trên, gọi dưới, hiệu ứng rung) ===== */
#hp-vr { position: fixed; bottom: 0; left: 0; z-index: 99999; }
#hp-vr .hp-vr-b { position: relative; width: 90px; height: 90px; }
#hp-vr .hp-vr-fill { position: absolute; top: 12px; left: 12px; width: 65px; height: 65px; border: 2px solid transparent; border-radius: 50%; animation: hp-vr-shake 2.3s infinite ease-in-out; }
#hp-vr .hp-vr-circle { position: absolute; top: 25px; left: 25px; display: flex; justify-content: center; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; }
#hp-vr .hp-vr-circle a { display: block; width: 100%; height: 100%; }
#hp-vr .hp-vr-circle img { position: absolute; top: 50%; left: 50%; max-width: 27px; max-height: 25px; transform: translate(-50%, -50%); }
#hp-vr .hp-vr-zalo .hp-vr-fill { background-color: rgba(33, 150, 243, .7); }
#hp-vr .hp-vr-zalo .hp-vr-circle { background-color: #2196f3; }
#hp-vr .hp-vr-phone .hp-vr-fill { background-color: rgba(230, 8, 8, .7); }
#hp-vr .hp-vr-phone .hp-vr-circle { background-color: #e60808; }
@keyframes hp-vr-shake { 0%, 50%, 100% { transform: rotate(0) scale(1); } 10%, 30% { transform: rotate(-25deg) scale(1); } 20%, 40% { transform: rotate(25deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { #hp-vr .hp-vr-fill { animation: none; } }
@media (max-width: 849px) { .header-main #logo { position: relative; left: 20px; } }
.header-bottom .nav-left { margin-left: -15px; }

/* Hover và focus bàn phím của menu cấp 1 (Q-092): chỉ đổi màu chữ, không đổi bố cục. */
.header .header-main .nav > li > a.nav-top-link,
.header .header-bottom .nav > li > a.nav-top-link { transition: color .2s; }
.header .header-main .nav > li > a.nav-top-link:hover,
.header .header-main .nav > li > a.nav-top-link:focus-visible { color: #884204; }
.header .header-bottom .nav > li > a.nav-top-link:hover,
.header .header-bottom .nav > li > a.nav-top-link:focus-visible { color: #f3d9b8; }
@media (prefers-reduced-motion: reduce) {
	.header .header-main .nav > li > a.nav-top-link,
	.header .header-bottom .nav > li > a.nav-top-link { transition: none; }
}

/* Q-094: danh sách liên hệ ở chân trang: đường kẻ mảnh giữa các dòng, tổng chiều cao dòng giữ nguyên (viền 1px thay một phần khoảng cách). */
.footer-1 .hp-ft-l li.hp-ft-i { margin-bottom: 8.6px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.footer-1 .hp-ft-l li.hp-ft-i:last-child { border-bottom: 0; }

/* Footer dùng chung: nội dung căn đều trên dưới trong khung; tiêu đề công ty một dòng */
.footer-1 { display: flex; flex-direction: column; justify-content: center; }
.footer-1 .hp-ft-h { white-space: nowrap; font-size: 20px; line-height: 28px; }


/* Footer: rê chuột vào liên kết không đổi sang màu đen, giữ màu chữ như lúc thường */
.footer-wrapper .footer-1 a:hover { color: #f1f1f1; }

/* Icon mạng xã hội header: viền và màu #595959 (tương phản 7:1), thay #999 (2,85:1) */
.header .icon.plain { color: #595959; border-color: #595959; }

/* Footer: lớp phủ đậm hơn để chữ #F1F1F1 đạt tương phản; thắng style nội tuyến của Flatsome */
.footer-wrapper .footer-1 { background-color: #3f3f3f; }

/* Trang Dịch vụ (ID 19): tiêu đề đen như trang chủ. Dùng class body của WordPress, không cần sửa functions.php */
body.page-id-19 h1, body.page-id-19 h2, body.page-id-19 h3 { color: #000; }

/* Q-121: chữ copyright chân trang đậm hơn để đạt tương phản 4,5:1 (trước 50%: 4,11:1) */
.absolute-footer .copyright-footer { color: rgba(255, 255, 255, .6); }

/* Q-129: link chân trang đổi #F3D9B8 khi rê chuột / focus bàn phím (màu hover dải menu dịch vụ), transition .2s */
.footer-wrapper .footer-1 a, .footer-wrapper .absolute-footer a { transition: color .2s, background-color .2s, box-shadow .2s; }
.footer-wrapper .footer-1 a:hover, .footer-wrapper .absolute-footer a:hover { color: #F3D9B8; }
.footer-wrapper .footer-1 a:focus-visible, .footer-wrapper .absolute-footer a:focus-visible { color: #F3D9B8; }
@media (prefers-reduced-motion: reduce) { .footer-wrapper .footer-1 a, .footer-wrapper .absolute-footer a { transition: none; } }

/* Q-129: bỏ đường kẻ ngang giữa các mục liên hệ chân trang; margin 8,6 + viền 1 = 9,6 nên tổng cao mỗi mục không đổi */
.footer-1 .hp-ft-l li.hp-ft-i { margin-bottom: 9.6px; border-bottom: 0; }
.footer-1 .hp-ft-l li.hp-ft-i:last-child { margin-bottom: 8.6px; }

/* Q-129: chân trang chính cao tối thiểu 475,4px (Giám Sát yêu cầu); nội dung vẫn căn giữa dọc, ảnh nền cover */
.footer-widgets.footer.footer-1 { min-height: 475.4px; }

/* Q-136: làm tối thêm lớp phủ nền chân trang chính (lớp rgba đen 10% phủ lên ảnh nền đã nhân #6b6b6b) để link hover #F3D9B8 đạt >= 4,5:1 ở mọi điểm ảnh dưới link; vẽ bằng bóng trong nên không đổi kích thước, bố cục, ảnh nền */
.footer-widgets.footer.footer-1 { box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .1); }

/* Q-150: nền chân trang chính đổi sang ảnh kệ hàng + xe nâng tay (hp-footer-bg-v1.webp, 1536x1024, không chữ). Giữ cover, min-height 475,4px, nền #6b6b6b nhân (multiply) và lớp phủ tối 10% của Q-129/Q-136 để chữ #F1F1F1 và hover #F3D9B8 đạt >= 4,5:1; chỉ đặt lại ảnh và vị trí để công nhân nằm trong khung. */
.footer-wrapper .footer-1 { background-image: url("https://hungphat.novadigital.vn/wp-content/uploads/2026/11/hp-footer-bg-v1.webp"); background-position: 50% 64%; }

/* Q-156: logo cách đều trên và dưới, không chạm mép trang và dải menu nâu. Desktop: logo giữ 91px, vùng trắng cao 107px (8px mỗi bên), dải menu tụt 16px. Mobile (<=849): vùng trắng cao 84px, logo giữ 70px (7px mỗi bên). Thanh dính (stuck, cao 70px): logo 54px (desktop) / 56px (mobile) để không sát mép. Selector có thêm .header-wrapper để thắng CSS chiều cao do Customizer của Flatsome in ra. */
.header-wrapper .header-main { height: 107px; }
.header-wrapper .header-main #logo img { max-height: 91px; }
.header-wrapper.stuck #logo img { max-height: 54px !important; }
@media (max-width: 849px) {
	.header-wrapper .header-main { height: 84px; }
	.header-wrapper .header-main #logo img { max-height: 70px; }
	.header-wrapper.stuck #logo img { max-height: 56px !important; }
}

/* Q-178: dải menu nâu dịch vụ (#wide-nav.header-bottom) padding 10px trên và dưới (Giám Sát chọn; ban đầu 15px). Selector có .header-wrapper để thắng CSS của Flatsome; chỉ hiện từ 850px trở lên. */
.header-wrapper .header-bottom.wide-nav { padding: 10px 0; }

/* Q-181: dải copyright đặt lại padding 15px trên và dưới (chữ cách đều trên dưới), không min-height; thay mặc định Flatsome 10px 0 15px sau Q-168. */
.footer-wrapper .absolute-footer { padding: 15px 0; box-sizing: border-box; background-color: #181412; }