/* ==========================================================================
HHA DIGITAL — Hệ thống NÚT BẤM + POPUP (lightbox Flatsome)
Nạp sau hha.css và hha-effects.css nên được quyền đè.
========================================================================== */
:root{
--hha-orange:#F97316; --hha-orange-600:#EA6A0A; --hha-gold:#F4B93E;
--hha-navy:#123A6B; --hha-blue:#1B63A6; --hha-teal:#16A6B6;
--hha-ink:#0F172A; --hha-body:#475569; --hha-line:#E8EDF3;
}
/* ==========================================================================
1. NÚT BẤM
Nền chung cho mọi .button của Flatsome (bo tròn, không viết hoa cưỡng bức)
========================================================================== */
.button,
.wpcf7-form input[type=submit]{
font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
text-transform:none;
letter-spacing:0;
border-radius:999px;
}
/* --- Nút HHA: dùng class hha-btn + 1 biến thể màu --------------------------- */
.hha-btn,
a.hha-btn,
.button.hha-btn{
display:inline-flex !important;
align-items:center;
justify-content:center;
gap:10px;
font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif !important;
font-weight:700 !important;
font-size:16px !important;
line-height:1.15 !important;
text-transform:none !important;
letter-spacing:0 !important;
text-shadow:none !important;
min-height:54px;
padding:15px 30px !important;
margin:0 12px 12px 0;
border:2px solid transparent !important;
border-radius:999px !important;
cursor:pointer;
transition:transform .24s cubic-bezier(.2,.7,.2,1),
box-shadow .24s cubic-bezier(.2,.7,.2,1),
background .24s, color .24s, border-color .24s;
}
.hha-btn:last-child{margin-right:0}
.hha-btn:focus-visible{outline:3px solid rgba(249,115,22,.5);outline-offset:3px}
.hha-btn:active{transform:translateY(0) scale(.99)}
/* Cam — hành động chính */
.hha-btn--primary,.button.hha-btn--primary{
background:linear-gradient(135deg,#F97316 0%,#FB8B3D 100%) !important;
color:#fff !important;
box-shadow:0 12px 28px rgba(249,115,22,.34);
}
.hha-btn--primary:hover,.button.hha-btn--primary:hover{
background:linear-gradient(135deg,#EA6A0A 0%,#F97316 100%) !important;
color:#fff !important;transform:translateY(-2px);
box-shadow:0 18px 38px rgba(249,115,22,.44);
}
/* Navy — hành động chính trên nền sáng, khi cần tiết chế hơn màu cam */
.hha-btn--navy,.button.hha-btn--navy{
background:var(--hha-navy) !important;color:#fff !important;
box-shadow:0 12px 28px rgba(18,58,107,.26);
}
.hha-btn--navy:hover,.button.hha-btn--navy:hover{
background:#0E2E56 !important;color:#fff !important;
transform:translateY(-2px);box-shadow:0 18px 38px rgba(18,58,107,.34);
}
/* Viền — hành động phụ trên nền sáng */
.hha-btn--outline,.button.hha-btn--outline{
background:transparent !important;color:var(--hha-navy) !important;
border-color:#D9E2EC !important;box-shadow:none !important;
}
.hha-btn--outline:hover,.button.hha-btn--outline:hover{
background:#FFF7F0 !important;color:var(--hha-orange) !important;
border-color:var(--hha-orange) !important;transform:translateY(-2px);
}
/* Trắng — hành động chính trên nền tối/cam */
.hha-btn--white,.button.hha-btn--white{
background:#fff !important;color:var(--hha-navy) !important;
box-shadow:0 12px 28px rgba(2,32,71,.18);
}
.hha-btn--white:hover,.button.hha-btn--white:hover{
background:#fff !important;color:var(--hha-orange-600) !important;
transform:translateY(-2px);box-shadow:0 18px 38px rgba(2,32,71,.26);
}
/* Sáng mờ — hành động phụ trên nền tối */
.hha-btn--light,.button.hha-btn--light{
background:rgba(255,255,255,.10) !important;color:#fff !important;
border-color:rgba(255,255,255,.38) !important;box-shadow:none !important;
}
.hha-btn--light:hover,.button.hha-btn--light:hover{
background:#fff !important;color:var(--hha-navy) !important;
border-color:#fff !important;transform:translateY(-2px);
}
/* Chữ trơn — hành động thứ ba */
.hha-btn--ghost,.button.hha-btn--ghost{
background:transparent !important;color:var(--hha-orange) !important;
box-shadow:none !important;min-height:auto;padding:8px 6px !important;
}
.hha-btn--ghost:hover,.button.hha-btn--ghost:hover{
color:var(--hha-orange-600) !important;background:transparent !important;
}
/* Cỡ */
.hha-btn--lg,.button.hha-btn--lg{font-size:17px !important;min-height:60px;padding:18px 36px !important}
.hha-btn--sm,.button.hha-btn--sm{font-size:14.5px !important;min-height:44px;padding:11px 22px !important}
.hha-btn--block,.button.hha-btn--block{display:flex !important;width:100%;margin-right:0}
/* Điện thoại: nút chiếm trọn bề ngang cho dễ bấm */
@media(max-width:480px){
.hha-btn,a.hha-btn,.button.hha-btn{display:flex !important;width:100%;margin-right:0}
.hha-btn--ghost,.button.hha-btn--ghost{width:auto;display:inline-flex !important}
}
/* ==========================================================================
2. POPUP (lightbox Flatsome — mở bằng link #popup-xxx)
========================================================================== */
.hha-popup{
border-radius:22px !important;
overflow:hidden;
background:#fff !important;
box-shadow:0 40px 90px rgba(2,32,71,.38);
font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
color:var(--hha-body);
text-align:left;
}
.hha-popup *{box-sizing:border-box}
/* Đầu popup */
.hha-popup__head{
position:relative;overflow:hidden;
padding:30px 34px 26px;
background:linear-gradient(135deg,#123A6B 0%,#1B63A6 58%,#16A6B6 100%);
color:#fff;
}
.hha-popup--warm .hha-popup__head{
background:linear-gradient(135deg,#EA6A0A 0%,#F97316 55%,#F4B93E 100%);
}
.hha-popup__head::after{
content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;
border-radius:50%;background:rgba(255,255,255,.09);pointer-events:none;
}
.hha-popup__eyebrow{
position:relative;z-index:1;
display:inline-flex;align-items:center;gap:8px;
font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
padding:6px 14px;border-radius:999px;color:#fff;
}
.hha-popup__title{
position:relative;z-index:1;
font-size:26px;font-weight:800;line-height:1.22;letter-spacing:-.01em;
margin:14px 0 9px;color:#fff;
}
.hha-popup__desc{
position:relative;z-index:1;
font-size:15.5px;line-height:1.65;margin:0;color:rgba(255,255,255,.9);
}
/* Thân popup */
.hha-popup__body{padding:26px 34px 28px}
.hha-popup__points{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px}
.hha-popup__points li{
position:relative;padding-left:31px;
font-size:15px;line-height:1.55;color:#334155;
}
.hha-popup__points li::before{
content:"";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
background:#FFF1E4 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F97316' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center/12px no-repeat;
}
/* Chân popup — thông tin liên hệ nhanh */
.hha-popup__foot{
border-top:1px solid var(--hha-line);background:#F8FAFC;
padding:15px 34px;
display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;
font-size:14.5px;color:#64748B;
}
.hha-popup__foot a{color:var(--hha-navy);font-weight:700;text-decoration:none}
.hha-popup__foot a:hover{color:var(--hha-orange)}
.hha-popup__foot svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px;
stroke:var(--hha-orange);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Form CF7 bên trong popup */
.hha-popup .wpcf7{margin:0}
.hha-popup .wpcf7-form p{margin:0}
.hha-popup .wpcf7-form label{margin-bottom:13px}
.hha-popup .wpcf7-form .hha-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hha-popup .wpcf7-form input:not([type=submit]),
.hha-popup .wpcf7-form select,
.hha-popup .wpcf7-form textarea{height:46px;border-radius:11px;background:#fff}
.hha-popup .wpcf7-form input[type=submit]{
width:100%;min-height:54px;margin-top:4px;
background:linear-gradient(135deg,#F97316 0%,#FB8B3D 100%);
box-shadow:0 12px 28px rgba(249,115,22,.34);
}
.hha-popup .wpcf7-form input[type=submit]:hover{
background:linear-gradient(135deg,#EA6A0A 0%,#F97316 100%);
}
.hha-popup .wpcf7-response-output{margin:14px 0 0 !important;font-size:14px}
.hha-popup .wpcf7-not-valid-tip{font-size:12.5px;color:#EA4E2C}
/* Nút đóng của Magnific Popup */
.hha-popup .mfp-close{color:#fff !important;opacity:.95;z-index:3;font-size:30px}
.hha-popup .mfp-close:hover{opacity:1;transform:scale(1.06)}
/* Link mở popup tự động (ẩn hoàn toàn) */
a.hha-popup-auto{position:absolute !important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:600px){
.hha-popup{border-radius:18px !important}
.hha-popup__head{padding:24px 20px 22px}
.hha-popup__title{font-size:21px}
.hha-popup__desc{font-size:14.5px}
.hha-popup__body{padding:20px 20px 22px}
.hha-popup__foot{padding:14px 20px;gap:6px 16px;font-size:13.5px}
.hha-popup .wpcf7-form .hha-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
.hha-btn{transition:none !important}
.hha-btn:hover{transform:none !important}
}
/* ==========================================================================
3. NÚT LIÊN HỆ TRÊN THANH ĐIỀU HƯỚNG (Flatsome > Header > Button 1)
========================================================================== */
.header-button-1 .button{
display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
margin:0 !important;
min-height:44px; padding:11px 26px !important;
font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif !important;
font-weight:700 !important; font-size:15px !important; line-height:1.15 !important;
text-transform:none !important; letter-spacing:0 !important; text-shadow:none !important;
white-space:nowrap;
border:0 !important; border-radius:999px !important;
background:linear-gradient(135deg,#F97316 0%,#FB8B3D 100%) !important; color:#fff !important;
box-shadow:0 8px 20px rgba(249,115,22,.32);
transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, background .22s;
}
.header-button-1 .button:hover{
background:linear-gradient(135deg,#EA6A0A 0%,#F97316 100%) !important; color:#fff !important;
transform:translateY(-1px); box-shadow:0 12px 26px rgba(249,115,22,.42);
}
.header-button-1 .button:focus-visible{outline:3px solid rgba(249,115,22,.5);outline-offset:3px}
.header-button-1 .button::after{display:none !important} /* chặn lớp phủ ::after của Flatsome */
.header-button-1{margin-left:8px}
@media(max-width:849px){
.header-button-1{margin-left:4px}
.header-button-1 .button{min-height:38px; padding:9px 18px !important; font-size:13.5px !important;
box-shadow:0 6px 14px rgba(249,115,22,.30)}
}
@media(max-width:420px){
.header-button-1 .button{min-height:36px; padding:8px 14px !important; font-size:13px !important}
}
/* ==========================================================================
4. THANH TRÊN CÙNG (top bar) — nút ngôn ngữ + liên hệ nhanh
Flatsome > Header > Top Bar:
trái = HTML 1 (topbar_left) -> [gtranslate]
phải = HTML 2 (topbar_right) -> …
Cố ý KHÔNG đặt trong header chính để không chen vào menu.
========================================================================== */
.header-top{
background:var(--hha-navy) !important;
border-bottom:0;
}
.header-top .flex-row{min-height:42px}
.header-top,
.header-top a{color:#C7D6E8}
/* --- Nút chuyển ngôn ngữ: rãnh mờ, ngôn ngữ đang dùng là chip trắng --------- */
.hha-lang{display:inline-flex;align-items:center}
.hha-lang .gtranslate_wrapper{
display:inline-flex;align-items:center;gap:2px;
padding:3px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
line-height:0;
}
.hha-lang a.glink{
display:inline-flex !important;align-items:center;gap:6px;
padding:5px 11px;
border-radius:999px;
font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:12.5px;font-weight:700;line-height:1;letter-spacing:.04em;
color:rgba(255,255,255,.75);
text-decoration:none !important;white-space:nowrap;
transition:background .22s,color .22s;
}
.hha-lang a.glink img{
width:16px !important;height:16px !important;
border-radius:50%;object-fit:cover;display:block;flex:none;
box-shadow:0 0 0 1px rgba(255,255,255,.25);
}
.hha-lang a.glink:hover{color:#fff;background:rgba(255,255,255,.12)}
.hha-lang a.glink.gt-current-lang{
background:#fff;color:var(--hha-orange);cursor:default;
box-shadow:0 1px 3px rgba(2,32,71,.25);
}
.hha-lang a.glink:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
/* --- Liên hệ nhanh bên phải thanh ------------------------------------------ */
.hha-topbar-info{display:inline-flex;align-items:center;gap:24px}
.hha-topbar-info a{
display:inline-flex;align-items:center;gap:7px;
font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:13.5px;font-weight:600;line-height:1;
color:#C7D6E8;text-decoration:none !important;
transition:color .22s;
}
.hha-topbar-info a:hover{color:#fff}
.hha-topbar-info svg{
width:15px;height:15px;flex:none;
fill:none;stroke:var(--hha-gold);stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
}
/* Máy nhỏ: thanh chỉ giữ nút ngôn ngữ (phần liên hệ đã ẩn sẵn ở cấu hình) */
@media(max-width:849px){
.header-top .flex-row{min-height:38px}
.hha-lang a.glink{padding:4px 9px;font-size:12px;gap:5px}
.hha-lang a.glink img{width:14px !important;height:14px !important}
.hha-topbar-info{gap:14px}
.hha-topbar-info a{font-size:12.5px}
}
/* Dọn giao diện mặc định mà Google Translate chèn vào trang */
.goog-te-banner-frame,.skiptranslate{display:none !important}
body{top:0 !important}
#goog-gt-tt,.goog-te-balloon-frame{display:none !important}
font font{background:none !important;box-shadow:none !important}