/* === 1. RESET & BIẾN (Variables) === */
input,
textarea,
select {
font-size: 16px; /* hoặc lớn hơn */
}
:root {
--hp-primary: #0d9488; /* Teal đậm */
--hp-primary-light: #f0fdfa; /* Teal rất nhạt (nền) */
--hp-secondary: #64748b; /* Xám xanh */
--hp-accent: #f59e0b; /* Cam (nhấn) */
--hp-success: #22c55e; /* Xanh lá (thành công) */
--hp-danger: #ef4444; /* Đỏ (cảnh báo lỗi) */
--hp-warning: #f97316; /* Cam đậm (cảnh báo nhẹ) */
--hp-text-main: #1e293b; /* Chữ chính (đen xám) */
--hp-text-light: #475569; /* Chữ phụ (xám) */
--hp-bg-main: #ffffff; /* Nền trắng */
--hp-bg-sub: #f8fafc; /* Nền xám rất nhạt */
--hp-border: #e2e8f0; /* Màu viền */
--hp-radius: 1rem; /* Bo góc chuẩn */
--hp-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* Đổ bóng nhẹ */
}
#hp-health-plugin-wrapper {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: var(--hp-text-main);
line-height: 1.6;
box-sizing: border-box;
max-width: 1280px;
margin: 2rem auto;
padding: 0 1rem;
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
}
#hp-health-plugin-wrapper *, #hp-health-plugin-wrapper *::before, #hp-health-plugin-wrapper *::after { box-sizing: inherit; }
.hp-hidden { display: none !important; }
/* === 2. LAYOUT CHÍNH (Sidebar & Content) === */
.hp-header-section { margin-bottom: 3rem; }
.hp-main-title { font-size: 2.5rem; font-weight: 800; color: var(--hp-primary); margin: 0 0 0.5rem; line-height: 1.2; }
.hp-main-subtitle { font-size: 1.125rem; color: var(--hp-text-light); margin: 0; }
.hp-dashboard-layout {
display: flex; gap: 2rem; align-items: stretch;
width: 100% !important; max-width: 100% !important;
overflow-x: hidden;
}
.hp-step-header-compact {
display: flex;
justify-content: space-between; /* hai đầu trái phải */
align-items: center; /* căn giữa dọc */
gap: 3rem; /* khoảng cách giữa các phần tử */
padding-bottom: 2rem;
}
.hp-step-header-compact .hp-step-back {
flex: 0 0 auto; /* nút back nhỏ, không giãn */
}
.hp-step-header-compact .hp-step-title {
flex: 1; /* phần tiêu đề chiếm hết phần còn lại */
text-align: left; /* hoặc center nếu bạn muốn */
margin: 0;
}
.hp-step-header-compact button,
.hp-step-header-compact h3 {
margin: 0;
line-height: 1.2;
}
/* --- SIDEBAR --- */
/* --- SIDEBAR --- */
.hp-sidebar-menu {
width: 280px; flex-shrink: 0;
position: sticky;
top: 200; /* [SỬA] THÊM SỐ NÀY (vd: 100px) để nó nằm DƯỚI menu to của web bạn */
background: var(--hp-bg-main);
border-radius: var(--hp-radius);
border: 1px solid var(--hp-border);
box-shadow: var(--hp-shadow);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.hp-nav-menu { display: flex; flex-direction: column; gap: 0.5rem; }
.hp-nav-item {
display: flex; align-items: center; padding: 0.875rem 1rem;
border-radius: 0.75rem; cursor: pointer; transition: all 0.2s ease;
color: var(--hp-text-light); font-weight: 500;
}
.hp-nav-item:hover { background-color: var(--hp-bg-sub); color: var(--hp-primary); }
.hp-nav-item.active {
background-color: var(--hp-primary); color: #fff !important;
box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}
.hp-nav-icon { width: 1.5rem; text-align: center; margin-right: 0.75rem; font-size: 1.1rem; }
.hp-nav-text { flex-grow: 1; }
.hp-nav-check { color: var(--hp-success); margin-left: 0.5rem; }
.hp-sidebar-footer { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--hp-border); }
.hp-sidebar-btn {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
padding: 0.75rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.9rem;
cursor: pointer; transition: all 0.2s; border: none;
}
.hp-btn-outline { background: transparent; border: 1px solid var(--hp-border); color: var(--hp-text-light); }
.hp-btn-outline:hover { border-color: var(--hp-primary); color: var(--hp-primary); background: var(--hp-primary-light); }
.hp-btn-danger { background: #fef2f2; color: var(--hp-danger); }
.hp-btn-danger:hover { background: var(--hp-danger); color: #fff; }
/* --- MAIN CONTENT AREA --- */
.hp-main-content-area {
flex-grow: 1; min-width: 0;
width: 100%; /* Thêm để fix layout mobile */
overflow-y: visible; /* Chỉ cho phép cuộn DỌC */
overflow-x: hidden; /* CẤM cuộn NGANG */
}
.hp-step-content { display: none; animation: hpSlideIn 0.3s ease-out; }
.hp-step-content.active {
display: flex; /* [SỬA] ĐỔI TỪ 'block' SANG 'flex' */
flex-direction: column; /* [THÊM] Bắt nó xếp dọc */
flex-grow: 1; /* [THÊM] Bắt nó lấp đầy không gian */
}
@keyframes hpSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* === [MỚI V5] Nền cho Step === */
.hp-step-background {
padding: 1.5rem;
border-radius: var(--hp-radius);
border: 1px solid var(--hp-border);
}
/* === 3. COMPONENT CHUNG === */
.hp-step-title { font-size: 1.75rem; font-weight: 700; color: var(--hp-text-main); margin: 0 0 1.5rem;}
.hp-group-title { font-size: 1.25rem; font-weight: 600; color: var(--hp-primary); margin: 1.5rem 0 1rem; border-bottom: 3px solid var(--hp-bg-sub); padding-bottom: 0.5rem; }
.hp-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 0.75rem 1.5rem; border-radius: 10px; font-weight: 600; font-size: 1rem;
cursor: pointer; transition: all 0.2s; border: none; gap: 0.5rem;
margin-top: 15px;
}
.hp-btn-primary, .hp-next-btn {
background: linear-gradient(to right, var(--hp-primary), #0f766e); color: #fff;
box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.3);
}
.hp-btn-primary:hover, .hp-next-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.4); }
.hp-btn-secondary, .hp-prev-btn { background: var(--hp-bg-sub); color: var(--hp-text-light); border: 1px solid var(--hp-border); }
.hp-btn-secondary:hover, .hp-prev-btn:hover { background: var(--hp-border); color: var(--hp-text-main); }
.hp-btn-full { width: 100%; }
/* === 4. BƯỚC 1: CHECKLIST (Đã fix) === */
.hp-goals-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Linh hoạt hơn */
gap: 0.75rem;
}
.hp-radio-label {
align-items: center;
border: 1px solid #e2e8f0;
border-radius: .5rem;
background-color: #ffffff;
padding: 0.75rem;
}
.hp-safety-check-item label {
font-weight: 600;
display: block;
margin-bottom: 1rem;
}
/* 4. CSS cho Tab */
.hp-ckr-dots-nav {
display: flex !important;
justify-content: space-around !important;
padding: 1rem 0 !important;
border-bottom: 1px solid var(--hp-border) !important;
margin-bottom: 1rem !important;
}
.hp-ckr-nav-dot {
width: 25px !important;
height: 25px !important;
border-radius: 50% !important;
cursor: pointer !important;
opacity: 0.5 !important;
transition: all 0.2s ease !important;
border: 3px solid #fff !important;
}
.hp-goal-card {
background: var(--hp-bg-main); border: 2px solid var(--hp-border); border-radius: 1rem;
padding: 1.5rem 1rem; text-align: center; cursor: pointer; transition: all 0.2s;
display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 140px;
}
.hp-goal-card:hover { border-color: var(--hp-primary); background: var(--hp-primary-light); transform: translateY(-4px); }
.hp-goal-card i { font-size: 2.5rem; color: var(--hp-primary); margin-bottom: 1rem; opacity: 0.8; }
.hp-goal-card span { font-weight: 600; color: var(--hp-text-main); line-height: 1.3; }
/* Safety Checklist */
.hp-safety-questions-container { display: flex; flex-direction: column; gap: 1.5rem; }
.hp-safety-check-item { background: var(--hp-bg-sub); margin-bottom: 10px;padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--hp-border); }
.hp-safety-check-item label { font-weight: 600; display: block; margin-bottom: 1rem; }
.hp-binary-options { display: flex; gap: 1rem; }
.hp-radio-label-binary {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
padding: 0.75rem; background: #fff; border: 2px solid var(--hp-border); border-radius: 0.5rem;
cursor: pointer; font-weight: 600; transition: all 0.2s;
}
.hp-radio-label-binary:has(input:checked) { border-color: var(--hp-primary); background: var(--hp-primary-light); color: var(--hp-primary); }
/* Plan Tabs */
#hp-plan-tabs-container {
position: sticky; top: 0; z-index: 10;
background: var(--hp-bg-sub); /* Match nền */
padding-top: 1rem; margin-bottom: 1.5rem;
border-bottom: 2px solid var(--hp-border);
}
.hp-tabs-nav {
display: flex; gap: 0.5rem; overflow-x: auto;
-webkit-overflow-scrolling: touch; scroll-behavior: smooth;
padding-bottom: 0.25rem; max-width: 100%;
}
.hp-tabs-nav::-webkit-scrollbar { display: none; }
.hp-tab-button {
padding: 0.75rem 1.25rem; border: none; background: transparent;
color: var(--hp-text-light); font-weight: 600; cursor: pointer;
white-space: nowrap; border-bottom: 3px solid transparent;
transition: all 0.2s ease; opacity: 0.7; flex-shrink: 0;
}
.hp-tab-button:hover { color: var(--hp-primary); background-color: var(--hp-bg-main); opacity: 1; border-radius: 0.5rem 0.5rem 0 0; }
.hp-tab-button.active { color: var(--hp-primary) !important; border-bottom-color: var(--hp-primary) !important; opacity: 1 !important; background-color: var(--hp-primary-light) !important; border-radius: 0.5rem 0.5rem 0 0; }
.hp-tab-content { display: none !important; animation: hpFadeIn 0.3s ease-in-out; }
.hp-tab-content.active { display: block !important; }
/* Plan Items */
.hp-checklist-item {
display: flex; align-items: flex-start; gap: 1rem;
padding: 1rem 1.25rem; background-color: #f8fafc;
border-radius: 0.8rem; margin-bottom: 0.8rem;
border: 1px solid var(--hp-border);
}
.hp-checklist-item i { font-size: 1.2rem; padding-top: 0.2rem; flex-shrink: 0; }
.hp-checklist-item.caution i { color: var(--hp-danger); }
.hp-checklist-item.recommend i { color: var(--hp-success); }
.hp-checklist-item.focus i { color: var(--hp-primary); }
.hp-reason-pt {
margin-top: 0.75rem; padding: 0.8rem 1rem;
background-color: #f1f5f9; border-left: 4px solid #94a3b8;
border-radius: 0.5rem; font-size: 0.9rem; color: #000000; line-height: 1.5;
}
#hp-personalized-advice-container {
background-color: #fffbeb !important; border-left: 5px solid #f59e0b !important;
padding: 1.25rem 1.5rem !important; border-radius: 0.5rem !important;
margin-bottom: 2rem !important; box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.1) !important;
}
#hp-personalized-advice-container h4 {
color: #92400e !important; font-size: 1.1rem !important; margin-top: 0 !important;
margin-bottom: 0.75rem !important; display: flex !important; align-items: center !important; gap: 0.5rem !important;
}
#hp-personalized-advice-container h4::before {
content: '\f0eb'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #f59e0b;
}
#hp-personalized-advice-container ul { margin: 0 !important; padding-left: 1.5rem !important; color: #b45309 !important; line-height: 1.6 !important; }
#hp-personalized-advice-container li { margin-bottom: 0.5rem !important; }
.hp-extra-buttons { display: flex; gap: 1rem; margin-top: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.hp-extra-btn {
flex: 1; min-width: 200px; padding: 0.8rem 1.5rem !important;
border-radius: 0.5rem !important; font-weight: 700 !important; color: #fff !important;
text-align: center; text-decoration: none !important; display: inline-flex;
align-items: center; justify-content: center; gap: 0.5rem;
transition: all 0.2s ease !important; border: none !important; cursor: pointer;
}
.hp-btn-teal { background-color: #0d9488 !important; }
.hp-btn-teal:hover { background-color: #0f766e !important; }
.hp-btn-gray { background-color: #4b5563 !important; }
.hp-btn-gray:hover { background-color: #374151 !important; }
.hp-btn-next-right { width: auto !important; display: inline-flex !important; padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
/* === 5. BƯỚC 2: BMI (Đã chốt V26) === */
.hp-bdt-v3-layout {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 30px !important;
align-items: flex-start !important;
}
.hp-bdt-v3-results { padding-left: 2rem !important; border-left: 1px solid var(--hp-border) !important; position: relative !important; z-index: 1 !important; }
.hp-bdt-v3-inputs { z-index: 2 !important; }
#hp-bdt-screen-input, #hp-bdt-screen-result { display: block !important; }
.hp-bdt-label {
font-weight: 600; color: var(--hp-text-main);
display: flex; justify-content: space-between;
align-items: center; margin-bottom: 1.5rem;
}
.hp-bdt-label span { font-weight: 700; color: var(--hp-primary); }
.hp-bdt-btn-group, .hp-bdt-activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hp-bdt-activity-grid { grid-template-columns: repeat(4, 1fr); }
.hp-bdt-slider-group { margin-top: 10px; }
.hp-bdt-gender-btn, .hp-bdt-activity-btn {
padding: 1rem; border: 2px solid var(--hp-border); border-radius: 0.75rem;
background: var(--hp-bg-main); color: var(--hp-text-light); font-weight: 600;
cursor: pointer; transition: all 0.2s;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.5rem; text-align: center;
}
.hp-bdt-activity-btn { padding: 1.25rem 0.5rem; }
.hp-bdt-gender-btn i, .hp-bdt-activity-btn i { font-size: 1.5rem; margin-bottom: 0.25rem; }
.hp-bdt-gender-btn:hover, .hp-bdt-activity-btn:hover { border-color: var(--hp-primary); color: var(--hp-primary); }
.hp-bdt-gender-btn.active, .hp-bdt-activity-btn.active {
border-color: var(--hp-primary); background: var(--hp-primary-light);
color: var(--hp-primary); box-shadow: 0 4px 10px rgba(13, 148, 136, 0.1);
}
input[type="range"] {
-webkit-appearance: none; appearance: none; width: 100%; height: 8px;
background: var(--hp-bg-sub); border-radius: 5px; outline: none; border: 1px solid var(--hp-border);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 24px; height: 24px;
background: var(--hp-primary); border-radius: 50%; cursor: pointer;
border: 4px solid #fff; box-shadow: var(--hp-shadow);
}
input[type="range"]::-moz-range-thumb {
width: 24px; height: 24px; background: var(--hp-primary); border-radius: 50%;
cursor: pointer; border: 4px solid #fff; box-shadow: var(--hp-shadow);
}
.hp-bdt-optional-inputs {
padding: 1.5rem; border-radius: 1rem;
background: var(--hp-bg-sub); border: 1px solid var(--hp-border);
margin-top: 1rem;
}
.hp-bdt-input-group {
display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;
}
.hp-bdt-input-group label { font-weight: 600; color: var(--hp-text-main); }
.hp-bdt-input-group input[type="number"] {
padding: 0.75rem 1rem; border: 2px solid var(--hp-border); border-radius: 0.75rem;
font-size: 1rem; transition: all 0.2s;
}
.hp-bdt-input-group input[type="number"]:focus { border-color: var(--hp-primary); outline: none; }
/* === BẢN VÁ BIỂU ĐỒ BMI (V4 - GAUGE SẠCH) === */
/* 1. Hộp chứa chính */
.hp-bdt-bmi-gauge-container {
text-align: center;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
}
/* 2. Biểu đồ (khung bán nguyệt) */
.hp-bdt-bmi-gauge {
width: 240px;
height: 120px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
/* 3. Thanh màu (conic-gradient) - Lớp nền CỐ ĐỊNH */
.hp-bdt-bmi-gauge::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: conic-gradient(
from 180deg,
#3b82f6 0deg 27deg, /* 15% của 180deg */
#22c55e 27deg 81deg, /* (45-15) = 30% */
#f59e0b 81deg 117deg, /* (65-45) = 20% */
#ef4444 117deg 180deg /* (100-65) = 35% */
);
border-radius: 120px 120px 0 0;
}
/* 4. Lớp che màu trắng (tạo rãnh) */
.hp-bdt-bmi-gauge::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 200px; /* Nhỏ hơn 240px */
height: 100px; /* Nhỏ hơn 120px */
background: var(--hp-bg-sub); /* DÙNG MÀU NỀN CỦA STEP */
border-radius: 100px 100px 0 0;
z-index: 1;
}
/* 5. Kim chỉ (element .hp-bdt-bmi-gauge-inner sẽ là KIm) */
/* JS đang xoay .hp-bdt-bmi-gauge-inner, chúng ta sẽ tận dụng */
.hp-bdt-bmi-gauge-inner {
position: absolute;
bottom: 0;
left: 50%;
width: 4px; /* Độ dày của kim */
height: 100px; /* Chiều dài của kim (120px - 20px rãnh) */
background: var(--hp-text-main); /* Màu kim mặc định */
border-radius: 4px 4px 0 0;
transform-origin: bottom center;
z-index: 2; /* Nằm trên rãnh, dưới núm */
/* Xoay dựa trên biến --bmi-percent từ JS */
--bmi-percent: 0;
transform: translateX(-50%) rotate(calc( (var(--bmi-percent) * 180deg) - 90deg ));
transition: transform 1s ease-out;
}
/* 6. Núm xoay (dùng ::after của kim) */
.hp-bdt-bmi-gauge-inner::after {
content: '';
position: absolute;
bottom: -9px; /* Dịch xuống 1 nửa */
left: 50%;
transform: translateX(-50%);
width: 18px; /* Núm xoay */
height: 18px;
background: var(--hp-text-main);
border: 4px solid var(--hp-bg-sub);
border-radius: 50%;
z-index: 3; /* Nằm trên cùng */
}
/* 7. Đổi màu kim theo trạng thái (JS thêm class này) */
.hp-bdt-bmi-gauge-inner.hp-bdt-status-underweight { background: #3b82f6; }
.hp-bdt-bmi-gauge-inner.hp-bdt-status-normal { background: #22c55e; }
.hp-bdt-bmi-gauge-inner.hp-bdt-status-overweight { background: #f59e0b; }
.hp-bdt-bmi-gauge-inner.hp-bdt-status-obese { background: #ef4444; }
/* 8. Giá trị BMI (căn lại) */
.hp-bdt-bmi-value {
font-size: 3rem; /* To hơn 1 chút */
font-weight: 700;
color: var(--hp-text-main);
line-height: 1.1;
margin-top: -30px; /* Kéo lên, đè lên biểu đồ 1 chút */
z-index: 10;
position: relative;
background: var(--hp-bg-sub); /* Nền để che kim nếu kim quét qua */
padding: 0 0.5rem;
}
/* === KẾT THÚC BẢN VÁ BMI === */
/* =========================================
PHẦN BỔ SUNG: BẢNG THAM CHIẾU BMI
========================================= */
.hp-bdt-info-footer {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px dashed #cbd5e1; /* Đường kẻ đứt nét nhẹ */
}
.hp-bdt-info-footer h4 {
font-size: 0.95rem;
color: #64748b; /* Màu xám dịu */
margin-bottom: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0;
}
.hp-bdt-info-footer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem; /* Khoảng cách giữa các dòng */
}
.hp-bdt-info-footer li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 0.75rem;
border-radius: 6px; /* Bo góc nhẹ */
font-size: 0.85rem;
font-weight: 500;
transition: transform 0.2s ease;
}
.hp-bdt-info-footer li:hover {
transform: translateX(2px); /* Hiệu ứng trượt nhẹ khi di chuột */
}
/* Màu sắc từng trạng thái (Nền nhạt + Chữ đậm) */
.hp-bmi-row-underweight {
background-color: #eff6ff; /* Xanh dương nhạt */
color: #3b82f6;
}
.hp-bmi-row-normal {
background-color: #f0fdf4; /* Xanh lá nhạt */
color: #16a34a;
}
.hp-bmi-row-overweight {
background-color: #fffbeb; /* Vàng cam nhạt */
color: #d97706;
}
.hp-bmi-row-obese {
background-color: #fef2f2; /* Đỏ nhạt */
color: #dc2626;
}
.hp-bmi-range {
color: #475569; /* Màu số đậm hơn chút */
font-weight: 400;
}
/* =========================================
PHẦN BỔ SUNG: YOGA TIPS & PERSPECTIVE
========================================= */
.hp-bdt-yoga-tips-section {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem; /* Khoảng cách giữa 2 khối */
}
/* Khối Mẹo đo lường */
.hp-tips-box {
border: 1px dashed #cbd5e1;
padding: 1.25rem;
border-radius: 8px;
background-color: #fcfcfc;
}
.hp-tips-box h5 {
font-size: 0.9rem;
color: #475569;
margin: 0 0 0.75rem 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hp-tips-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.hp-tips-box li {
font-size: 0.85rem;
color: #64748b;
margin-bottom: 0.5rem;
display: flex;
align-items: start;
gap: 0.5rem;
line-height: 1.4;
}
.hp-tips-box li i {
color: #22c55e; /* Màu xanh lá check */
margin-top: 3px;
}
/* Khối Góc nhìn Yoga */
.hp-yoga-perspective {
background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%); /* Gradient Teal nhẹ */
padding: 1.5rem;
border-radius: 12px;
border: 1px solid #99f6e4;
box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.1);
}
.hp-yoga-perspective h5 {
font-size: 1rem;
color: #0f766e;
margin: 0 0 1rem 0;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.hp-yoga-message p {
font-size: 0.9rem;
color: #134e4a;
font-style: italic;
margin-bottom: 1rem;
line-height: 1.5;
text-align: center;
}
.hp-suggestion-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.hp-sug-item {
background-color: rgba(255, 255, 255, 0.6);
padding: 0.75rem;
border-radius: 6px;
display: flex;
flex-direction: column;
}
.hp-sug-label {
font-size: 0.75rem;
font-weight: 700;
color: #0d9488;
text-transform: uppercase;
margin-bottom: 0.2rem;
}
.hp-sug-text {
font-size: 0.85rem;
color: #334155;
}
/* [MỚI V26] SVG Status */
#hp-bdt-status-visual-container {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
margin-top: 0.5rem; min-height: 80px;
}
.hp-bdt-status-visual-box {
display: none; /* Ẩn mặc định */
flex-direction: column; align-items: center;
animation: hpFadeIn 0.3s ease-out;
}
.hp-bdt-status-visual-box:not(.hp-hidden) { display: flex; } /* Hiện cái active */
.hp-bdt-status-visual-box svg { width: 48px; height: 48px; }
#hp-bdt-status-text-dynamic {
display: block;
font-weight: 600; margin-top: 0.75rem;
text-align: center; min-height: 3em;
line-height: 1.4; padding: 0 1rem;
transition: color 0.3s;
}
#hp-bdt-status-normal svg { color: #22c55e; }
#hp-bdt-status-overweight svg { color: #f59e0b; }
#hp-bdt-status-obese svg { color: #ef4444; }
#hp-bdt-status-underweight svg { color: #3b82f6; }
/* Widgets */
.hp-bdt-widget-grid-2 {
display: grid; grid-template-columns: 1fr 1fr;
gap: 1.5rem; margin-bottom: 1.5rem;
}
.hp-bdt-widget {
background-color: #ffffff; border: 1px solid var(--hp-border);
border-radius: 1rem; padding: 1.25rem; text-align: center;
}
.hp-bdt-widget-label {
font-weight: 600; color: var(--hp-text-light); font-size: 0.9rem;
margin-bottom: 0.25rem; display: flex; align-items: center;
justify-content: center; gap: 0.5rem;
}
.hp-bdt-widget-value {
font-size: 1.5rem; font-weight: 700;
color: var(--hp-text-main); line-height: 1.2;
}
.hp-bdt-widget.hp-widget-tdee .hp-bdt-widget-value { color: var(--hp-primary); } /* Đổi màu */
.hp-bdt-widget.hp-widget-BMR .hp-bdt-widget-value { color: #cb5600; } /* Đổi màu */
.hp-bdt-widget.hp-widget-water .hp-bdt-widget-value { color: #0093ff; } /* Đổi màu */
.hp-bdt-info-icon {
color: var(--hp-secondary); font-size: 0.9rem;
margin-left: 0.5rem; cursor: pointer; opacity: 0.6;
transition: opacity 0.2s;
}
.hp-bdt-info-icon:hover { opacity: 1; color: var(--hp-primary); }
/* [MỚI V26] Widget Tỷ lệ mỡ */
.hp-bdt-widget.hp-bdt-widget-full {
margin-top: 1.5rem; margin-bottom: 1.5rem;
text-align: center; background-color:#ffffff;
border: 1px solid var(--hp-border); border-radius: 1rem;
padding: 1.25rem;
}
.hp-bdt-widget.hp-widget-bf .hp-bdt-widget-value {
color: var(--hp-primary); font-size: 2rem; line-height: 1.2;
}
/* Lộ trình & Macro */
.hp-bdt-section-highlight {
background-color:#ffffff;
border-radius: 1rem;
}
.hp-bdt-h3 {
font-size: 1.1rem; font-weight: 700; color: var(--hp-text-main);
margin: 2rem 0 1rem; padding-bottom: 0.5rem;
border-bottom: 1px solid var(--hp-border);
}
.hp-bdt-section-highlight .hp-bdt-h3 {
margin-top: 0; border: none; padding-bottom: 0;
}
.hp-bdt-macro-section .hp-bdt-slider-group { margin-top: 1.5rem; }
.hp-bdt-macro-section .hp-bdt-label { margin-bottom: 0.75rem; }
.hp-bdt-goal-result-text {
padding: 1rem; background: #fff;
border-radius: 0.75rem; border: 1px solid var(--hp-border);
color: var(--hp-text-main); font-size: 0.95rem; line-height: 1.6;
}
#hp-bdtCalculateGoalBtn:hover { background-color: var(--hp-warning) !important; }
.hp-bdt-macro-total {
text-align: center; font-size: 2rem; font-weight: 700;
color: var(--hp-primary); margin-bottom: 1rem;
}
.hp-bdt-macro-split {
display: flex; justify-content: space-around; text-align: center;
background: #fff; padding: 1rem; border-radius: 0.75rem;
border: 1px solid var(--hp-border);
}
.hp-bdt-macro-split div {
font-size: 0.9rem; color: var(--hp-text-light); font-weight: 500;
}
.hp-bdt-macro-split span {
display: block; font-weight: 700;
font-size: 1.5rem; color: var(--hp-text-main);
}
.hp-bdt-video-embed {
position: relative; width: 100%; height: 0; padding-bottom: 56.25%;
border-radius: 1rem; overflow: hidden; border: 1px solid var(--hp-border);
}
.hp-bdt-video-embed iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
/* 1. Giao diện Hành trình (Quiz) */
#hp-ckr-journey-screen {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.hp-ckr-visual-journey {
display: flex !important;
flex-direction: column-reverse !important; /* Xếp C1 ở dưới cùng */
align-items: center !important;
gap: 1rem !important;
margin-bottom: 2rem !important;
}
.hp-ckr-dot {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
background-color: var(--hp-border) !important;
opacity: 0.3 !important;
transition: all 0.5s ease !important;
transform: scale(0.5);
}
.hp-ckr-dot.animate-in {
opacity: 1 !important;
transform: scale(1) !important;
box-shadow: 0 0 15px currentColor !important;
}
.hp-ckr-dot.active {
opacity: 1 !important;
transform: scale(1.5) !important;
box-shadow: 0 0 15px currentColor !important;
animation: hpPulse 1.5s infinite !important;
}
@keyframes hpPulse {
0% { box-shadow: 0 0 10px currentColor; }
50% { box-shadow: 0 0 25px 10px currentColor; }
100% { box-shadow: 0 0 10px currentColor; }
}
.hp-ckr-journey-content { width: 100% !important; }
#hp-ckr-journey-question {
font-size: 1.25rem !important;
font-weight: 600 !important;
min-height: 3em !important;
margin-bottom: 1.5rem !important;
transition: opacity 0.2s ease-out !important;
word-wrap: break-word !important;
}
#hp-ckr-journey-options {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
transition: opacity 0.2s ease-out !important;
}
.hp-ckr-answer-btn {
display: block !important;
width: 100% !important;
padding: 1rem 1.25rem !important;
border: 2px solid var(--hp-border) !important;
border-radius: 0.8rem !important;
cursor: pointer !important;
transition: all 0.2s ease-in-out !important;
background-color: #ffffff !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--hp-text-main) !important;
word-wrap: break-word !important;
white-space: normal !important;
line-height: 1.4 !important;
}
.hp-ckr-answer-btn:hover {
border-color: var(--hp-primary) !important;
background-color: var(--hp-primary-light) !important;
}
/* 2. Màn hình Chờ */
.hp-ckr-spinner {
font-size: 3rem;
color: var(--hp-primary);
opacity: 0.5;
}
/* 3. Giao diện Kết quả (Radar Chart) */
.hp-ckr-chart-container {
width: 100%;
max-width: 450px;
margin: 0 auto 1rem auto;
}
.hp-ckr-insight-box {
background-color: var(--hp-primary-light);
border-left: 5px solid var(--hp-primary);
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
border-radius: 0.5rem;
animation: hpFadeIn 0.5s ease-out;
}
.hp-ckr-insight-title {
color: var(--hp-primary);
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
#hp-ckr-insight-text {
color: var(--hp-text-main);
line-height: 1.6;
margin: 0;
}
.hp-ckr-header-stats {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 1rem !important;
padding: 1rem !important;
background-color: var(--hp-bg-sub) !important;
border-radius: 1rem !important;
text-align: center !important;
margin-top: 1.5rem !important;
}
.hp-ckr-stat-item span {
font-size: 0.8rem !important;
color: var(--hp-text-light) !important;
display: block !important;
}
.hp-ckr-stat-item strong {
font-size: 1.25rem !important;
color: var(--hp-text-main) !important;
}
.hp-ckr-explore-title {
font-size: 1rem;
font-weight: 600;
color: var(--hp-text-light);
text-align: center;
margin-top: 2rem;
margin-bottom: 0.5rem;
}
.hp-ckr-nav-dot:hover { opacity: 1 !important; transform: scale(1.1) !important; }
.hp-ckr-nav-dot.active { opacity: 1 !important; transform: scale(1.3) !important; box-shadow: 0 0 10px 2px currentColor !important; }
.hp-ckr-tabs-nav { display: flex !important; gap: 0.5rem !important; margin-bottom: 1rem !important; }
.hp-ckr-tab-btn { flex: 1 !important; padding: 0.75rem !important; border: none !important; background: var(--hp-bg-sub) !important; border-radius: 0.5rem !important; font-weight: 600 !important; color: var(--hp-text-light) !important; cursor: pointer !important; }
.hp-ckr-tab-btn.active { background: var(--hp-primary) !important; color: #fff !important; }
.hp-ckr-tab-content {
transition: opacity 0.2s ease-out, transform 0.2s ease-out !important;
min-height: 150px;
}
.hp-ckr-tab-content.fading {
opacity: 0 !important;
transform: translateY(10px) !important;
}
.hp-ckr-tab-pane { display: none; padding: 0.5rem; line-height: 1.6; animation: hpFadeIn 0.3s; }
.hp-ckr-tab-pane.active { display: block; }
#hp-ckr-result-title { font-size: 1.5rem !important; font-weight: 700 !important; margin-bottom: 1rem !important; }
#hp-ckr-tab-overview p { margin: 0; }
.hp-ckr-link-wrapper { margin-top: 1rem; }
.hp-ckr-link-wrapper a {
color: var(--hp-primary);
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid var(--hp-primary-light);
transition: all 0.2s;
}
.hp-ckr-link-wrapper a:hover {
border-bottom-color: var(--hp-primary);
}
/* === 6. RESPONSIVE (Đã fix) === */
@media (max-width: 1024px) {
.hp-dashboard-layout { flex-direction: column;!important; }
.hp-sidebar-menu {
width: 100% !important; flex-direction: row; align-items: center;
overflow-x: auto; padding: 0.75rem; gap: 1rem;
padding-left: 0 !important; padding-right: 0 !important;
position: sticky !important;
z-index: 998 !important;
}
.hp-nav-menu { flex-direction: row; gap: 0.5rem; flex-grow: 1; padding: 0 0.5rem; }
.hp-nav-item { min-width: auto; white-space: nowrap; padding: 0.6rem 1rem; flex-shrink: 0; }
.hp-nav-text { display: none; }
.hp-nav-item.active .hp-nav-text { display: inline-block; }
.hp-sidebar-footer { display: none; }
.hp-main-content-area { width: 100% !important; }
}
@media (max-width: 900px) { /* Mobile BMI */
.hp-bdt-v3-layout {
grid-template-columns: 1fr !important;
}
.hp-bdt-v3-results {
border-left: none !important;
padding-left: 0 !important;
}
.hp-bdt-v3-layout.hp-mobile-view #hp-bdt-screen-input.hp-hidden,
.hp-bdt-v3-layout.hp-mobile-view #hp-bdt-screen-result.hp-hidden {
display: none !important;
}
.hp-bdt-activity-grid {
grid-template-columns: 1fr 1fr;
}
.hp-ckr-header-stats {
grid-template-columns: 1fr !important; /* 1 cột trên mobile */
}
}
@media (min-width: 901px) {
/* Ẩn nút Tiếp/Lùi trên Desktop */
.hp-mobile-nav-only {
display: none !important;
}
}
/* === 7. MODAL & FOOTER (Đã fix) === */
.hp-modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000;
display: flex; align-items: center; justify-content: center; padding: 1rem;
animation: hpFadeIn 0.2s ease-out;
}
.hp-modal-box {
background: #fff; width: 100%; max-width: 600px; border-radius: 1rem;
overflow: hidden; animation: hpScaleUp 0.3s ease-out; max-height: 90vh; display: flex; flex-direction: column;
}
.hp-modal-header {
padding: 1.25rem; border-bottom: 1px solid var(--hp-border); display: flex;
justify-content: space-between; align-items: center; background: var(--hp-bg-sub);
}
.hp-modal-header h3 { margin: 0; font-size: 1.25rem; color: var(--hp-text-main); }
.hp-modal-close { background: none; border: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--hp-text-light); }
.hp-modal-body { padding: 1.5rem; overflow-y: auto; }
@keyframes hpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hpScaleUp { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Alert & Confirm */
.hp-safety-alert {
padding: 1rem 1.25rem !important; border-radius: 0.75rem !important; margin: 1.5rem 0 !important;
font-size: 0.95rem !important; line-height: 1.5 !important; align-items: center !important;
gap: 0.75rem !important; animation: hpFadeIn 0.3s ease-out !important;
}
.hp-safety-alert:not(.hp-hidden) { display: flex !important; }
.hp-safety-alert { background-color: #fffbeb !important; border: 1px solid #fcd34d !important; color: #92400e !important; }
.hp-safety-alert.fail { background-color: #fef2f2 !important; border-color: #fecaca !important; color: #b91c1c !important; }
#hp-custom-confirm-overlay .hp-modal-box {
max-width: 400px !important; text-align: center !important; padding: 2rem !important;
}
#hp-custom-confirm-title { font-size: 1.5rem !important; color: var(--hp-text-main) !important; margin-bottom: 1rem !important; }
#hp-custom-confirm-message { color: var(--hp-text-light) !important; margin-bottom: 2rem !important; }
.hp-confirm-actions { display: flex !important; gap: 1rem !important; justify-content: center !important; }
.hp-confirm-actions button { flex: 1 !important; padding: 0.75rem !important; font-size: 1rem !important; }
#hp-custom-confirm-cancel { background-color: var(--hp-bg-sub) !important; color: var(--hp-text-main) !important; border: 1px solid var(--hp-border) !important; }
#hp-custom-confirm-ok { background-color: var(--hp-danger) !important; color: #fff !important; border: none !important; }
#hp-custom-confirm-ok:hover { background-color: #dc2626 !important; }
#hp-custom-alert-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex; align-items: center; justify-content: center;
z-index: 99999; opacity: 0; pointer-events: none;
transition: opacity 0.3s ease;
}
#hp-custom-alert-overlay.show { opacity: 1; pointer-events: auto; }
.hp-alert-box {
background-color: #fff; border-radius: var(--hp-radius);
padding: 1.5rem; width: 90%; max-width: 350px;
box-shadow: var(--hp-shadow); transform: translateY(-20px);
transition: transform 0.3s ease, opacity 0.3s ease;
}
#hp-custom-alert-overlay.show .hp-alert-box { transform: translateY(0); }
.hp-alert-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.hp-alert-message { font-size: 1.1rem; font-weight: 500; margin-bottom: 1.5rem; }
.hp-alert-btn {
background-color: var(--hp-primary); color: #fff; font-weight: 700;
padding: 0.75rem; border: none; border-radius: 50px; width: 100%; cursor: pointer;
}
/* Tooltip & Nút Back */
.hp-tooltip { position: relative; display: inline-block; margin-left: 0.5rem; cursor: help; }
.hp-tooltip .fa-question-circle { color: var(--hp-secondary); font-size: 0.9rem; }
.hp-tooltip .hp-tooltip-content {
visibility: hidden; width: 250px; background-color: #333; color: #fff;
text-align: left; border-radius: 6px; padding: 0.75rem;
position: absolute; z-index: 10; bottom: 125%; left: 50%;
margin-left: -125px; opacity: 0; transition: opacity 0.3s;
font-size: 0.85rem; font-weight: 400;
}
.hp-tooltip:hover .hp-tooltip-content { visibility: visible; opacity: 1; }
.hp-inline-alert {
padding: 0.75rem 1rem; border-radius: 0.5rem; margin-top: 1rem;
font-size: 0.9rem; background-color: #fef2f2;
border: 1px solid #fecaca; color: #b91c1c;
display: flex; align-items: center; gap: 0.5rem;
}
button.hp-btn-back {
background-color: #ffffff !important; color: var(--hp-text-light) !important;
border: 1px solid var(--hp-border) !important; box-shadow: none !important;
font-weight: 600 !important; padding: 0.6rem 1.2rem !important;
border-radius: 2rem !important; display: inline-flex !important;
align-items: center !important; gap: 0.5rem !important;
transition: all 0.2s ease !important;
}
button.hp-btn-back:hover {
border-color: var(--hp-primary) !important; color: var(--hp-primary) !important;
background-color: var(--hp-primary-light) !important;
transform: translateX(-5px) !important;
}
.hp-legal-footer {
max-width: 900px; margin: 3rem auto 1rem; padding: 1.5rem 0;
text-align: center; border-top: 1px dashed var(--hp-border);
}
.hp-signature-text {
font-size: 0.85rem; color: var(--hp-primary); font-weight: 600;
align-items: center; justify-content: center;
gap: 0.5rem; margin-bottom: 0.75rem;
}
.hp-disclaimer-text {
font-size: 0.8rem; color: var(--hp-text-light);
line-height: 1.4; font-style: italic; padding: 0 1rem;
}
.hp-signature-text i { color: var(--hp-success); font-size: 1rem; }
/* === BẢN VÁ (V19 - CHUẨN) CHO BƯỚC 3 - LUÂN XA === */
/* 1. Màn hình (Rule quan trọng nhất) */
.hp-ckr-screen {
flex-grow: 1;
display: flex; /* Mặc định là 'flex' */
flex-direction: column;
animation: hpFadeIn 0.3s;
min-height: 570px;
}
/* (File .php và .js sẽ dùng class .hp-hidden để ẩn) */
/* 2. Nút bấm (Fix lỗi style) */
.hp-ckr-button {
display: inline-flex; align-items: center; justify-content: center;
padding: 0.75rem 1.5rem; border-radius: 50px; font-weight: 600; font-size: 1rem;
cursor: pointer; transition: all 0.2s; border: none; gap: 0.5rem;
background: linear-gradient(to right, var(--hp-primary), #0f766e); color: #fff;
box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.3);
}
.hp-ckr-button:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.4); }
.hp-ckr-button.hp-ckr-button-secondary {
background: var(--hp-bg-sub); color: var(--hp-text-light); border: 1px solid var(--hp-border); box-shadow: none;
}
.hp-ckr-button.hp-ckr-button-secondary:hover { background: var(--hp-border); color: var(--hp-text-main); transform: none; }
.hp-ckr-button:disabled { opacity: 0.5; cursor: not-allowed; }
/* 3. Lưới chọn (Quiz) */
.hp-ckr-options-grid { display: grid; gap: 0.8rem; }
@media (min-width: 640px) { .hp-ckr-options-grid { grid-template-columns: 1fr 1fr; } }
.hp-ckr-opt-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 0.8rem; padding: 1.2rem;
cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center;
text-align: center; min-height: 70px; font-weight: 500; color: #334155;
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.hp-ckr-opt-card:hover { border-color: #0d9488; background-color: #f0fdfa; transform: translateY(-2px); }
.hp-ckr-opt-card.selected { border-color: #0d9488; background-color: #f0fdfa; color: #0f766e; font-weight: 700; box-shadow: 0 0 0 2px #0d9488 inset; }
.hp-ckr-opt-card.disabled { opacity: 0.5; pointer-events: none; }
/* 4. Kết quả (Result) */
.hp-breadcrumb-compact { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.85rem; color: #64748b; margin-bottom: 2rem; flex-wrap: wrap; }
.hp-bc-item { display: flex; align-items: center; gap: 0.3rem; }
.hp-bc-sep { color: #cbd5e1; } .hp-bc-val { font-weight: 600; color: #334155; } .hp-bc-highlight { color: #e11d48; font-weight: 700; }
.hp-insight-box { background: #f0fdfa; border-left: 4px solid #0d9488; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; color: #334155; line-height: 1.6; font-size: 1rem; }
.hp-ckr-insight-title { color: var(--hp-primary); font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem 0; display: flex; align-items: center; gap: 0.5rem; }
.hp-stones-grid { display: flex; justify-content: center; gap: 0.8rem; margin: 1rem 0 2rem; flex-wrap: wrap; }
.hp-stone { width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #fff; font-weight: 700; cursor: pointer; transition: all 0.2s; opacity: 0.4; filter: grayscale(0.5); }
.hp-stone:hover { opacity: 1; filter: grayscale(0); transform: scale(1.1); }
.hp-stone.active { opacity: 1; filter: grayscale(0); transform: scale(1.2); box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor; }
.hp-ckr-rec-tabs {
display: flex;
justify-content: space-between; /* chia đều khoảng cách */
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
flex-wrap: nowrap; /* không xuống hàng */
}
.hp-ckr-rec-tab {
flex: 1; /* chia đều chiều ngang cho 3 nút */
text-align: center;
padding: 0.6rem 0.8rem;
border-radius: 2rem;
border: 1px solid #e2e8f0;
background: #fff;
color: #64748b;
font-weight: 600;
white-space: nowrap; /* tránh chữ bị xuống dòng */
box-sizing: border-box;
}
@media (max-width: 600px) {
.hp-ckr-rec-tabs {
justify-content: space-between;
flex-wrap: nowrap;
}
.hp-ckr-rec-tab {
flex: 1;
padding: 0.6rem 0.8rem;
white-space: nowrap;
}
}
cursor: pointer; transition: all 0.2s; }
.hp-ckr-rec-tab.active { background: #0d9488; color: #fff; border-color: #0d9488; }
.hp-ckr-rec-content { background: #ffffff; padding: 1.5rem; border-radius: 1rem; border: 1px solid #e2e8f0;overflow: auto;max-height: 400px;}
.hp-ckr-link-wrapper { margin-top: 1rem; }
.hp-ckr-link-wrapper a { color: var(--hp-primary); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--hp-primary-light); }
.hp-ckr-link-wrapper a:hover { border-bottom-color: var(--hp-primary); }
.hp-video-wrap { border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 20px -5px rgba(0,0,0,0.15); margin-top: auto; }
.hp-ckr-video-header { background: #179488; color: #fff; padding: 1rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
@keyframes hpPulse { 0% { transform: scale(0.9); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes hpFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* === KẾT THÚC BẢN VÁ === */
/* === BỔ SUNG TEXTAREA GHI CHÚ (GIỐNG CHECKLIST) === */
.hp-safety-check-item textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid var(--hp-border);
border-radius: 0.75rem;
font-size: 16px;
font-family: inherit; /* Kế thừa font chữ */
line-height: 1.6;
transition: all 0.2s;
margin-top: 0.5rem; /* Khoảng cách với label */
}
.hp-safety-check-item textarea:focus {
border-color: var(--hp-primary);
outline: none;
box-shadow: 0 0 0 3px var(--hp-primary-light);
}
/* === [THÊM MỚI V19] SỬA LỖI VÀ BỔ SUNG CHO RADAR CHART (STEP 3) === */
/* 1. Ẩn breadcrumb cũ đi */
#hp-ckr-breadcrumb {
display: none !important;
}
/* 2. Định dạng Hộp chứa Biểu đồ (SỬA LỖI "LỌT THỎM") */
.hp-ckr-chart-container {
position: relative;
width: 100%;
max-width: 450px; /* Giới hạn kích thước trên desktop */
margin: 0 auto 1.5rem auto;
/* [SỬA V19] Dùng aspect-ratio để giữ chart vuông vắn, không bị "lọt thỏm" */
aspect-ratio: 1 / 1;
max-height: 450px; /* Giới hạn chiều cao */
padding: 1rem;
background-color: #ffffff;
border-radius: var(--hp-radius);
border: 1px solid var(--hp-border);
}
/* 3. Định dạng lại Hộp Insight (Câu nói kết nối) */
#hp-ckr-insight-box-v15 {
background-color: var(--hp-primary-light); /* Màu nền teal nhạt */
border-left: 5px solid var(--hp-primary); /* Viền trái teal đậm */
padding: 1.25rem 1.5rem;
margin-bottom: 2rem;
border-radius: 0.5rem;
animation: hpFadeIn 0.5s ease-out;
color: var(--hp-text-main);
line-height: 1.6;
}
#hp-ckr-insight-box-v15 h4 {
color: var(--hp-primary);
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
#hp-ckr-insight-box-v15 p {
margin: 0;
}
#hp-ckr-insight-box-v15 p strong {
color: var(--hp-primary);
}
#hp-ckr-insight-box-v15 p br {
display: block;
content: "";
margin-top: 0.75rem;
}
/* 4. Sửa lỗi nút "Làm lại" trên Header (nếu nó bị ẩn) */
.hp-step-header-compact .hp-btn-back {
display: inline-flex !important; /* Luôn hiển thị nút */
}
/* === [THÊM MỚI V22] NÂNG CẤP CHÚ THÍCH (STONES) CHO STEP 3 === */
.hp-stones-grid {
display: flex;
justify-content: center;
gap: 0.8rem;
margin: 1rem 0 2rem;
flex-wrap: wrap;
}
.hp-stone {
width: 32px; /* Tăng kích thước */
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem; /* Tăng font */
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
opacity: 0.5; /* Mặc định mờ đi */
filter: grayscale(0.5);
color: #fff !important; /* Luôn hiện chữ C1, C2 (sửa lỗi V20) */
text-shadow: 0 0 3px rgba(0,0,0,0.5);
/* [SỬA V22] Thêm viền trắng để nổi bật */
border: 2px solid #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hp-stone:hover {
opacity: 1;
filter: grayscale(0);
transform: scale(1.15); /* Phóng to khi hover */
}
/* [SỬA V22] Làm cho chấm active NỔI BẬT HƠN */
.hp-stone.active {
opacity: 1;
filter: grayscale(0);
transform: scale(1.3); /* Phóng to hơn */
/* Tạo vầng hào quang bằng màu của chính nó */
box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor, 0 0 20px 5px currentColor;
}
/* === [THÊM MỚI V27] CSS CHO GỢI Ý THỰC ĐƠN (STEP 3) === */
.hp-ckr-meal-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--hp-text-main);
margin: 2rem 0 1rem 0;
padding-top: 1rem;
border-top: 1px dashed var(--hp-border);
}
.hp-ckr-meal-title .fas {
color: var(--hp-primary);
margin-right: 0.5rem;
}
.hp-ckr-meal-grid {
display: grid;
grid-template-columns: 1fr; /* 1 cột trên mobile */
gap: 1rem;
}
@media (min-width: 600px) {
.hp-ckr-meal-grid {
grid-template-columns: 1fr 1fr; /* 2 cột trên desktop */
}
}
.hp-ckr-meal-card {
background-color: #ffffff;
border: 1px solid var(--hp-border);
border-radius: 0.75rem;
padding: 1rem;
display: flex;
margin-bottom: 5px;
flex-direction: column;
text-align: center;
box-shadow: var(--hp-shadow);
}
.hp-ckr-meal-card span {
font-size: 0.85rem;
font-weight: 600;
color: var(--hp-primary);
margin-bottom: 0.25rem;
}
.hp-ckr-meal-card strong {
font-size: 1.1rem;
color: var(--hp-text-main);
flex-grow: 1; /* Đảm bảo các thẻ cao bằng nhau */
margin-bottom: 0.5rem;
}
.hp-ckr-meal-card small {
font-size: 0.9rem;
color: var(--hp-text-light);
}
/* === [THÊM MỚI V30] CSS CHO THỰC ĐƠN (ĐÃ CHUYỂN VÀO STEP 2) === */
.hp-mp-grid {
display: grid;
grid-template-columns: 1fr; /* 1 cột trên mobile */
gap: 1.5rem;
}
@media (min-width: 768px) {
.hp-mp-grid {
grid-template-columns: 1fr 1fr; /* 2 cột trên desktop */
}
}
.hp-mp-day-card {
background-color: var(--hp-bg-sub);
border: 1px solid var(--hp-border);
border-radius: 0.75rem;
overflow: hidden;
}
.hp-mp-day-card-header {
padding: 0.75rem 1rem;
background-color: #ffffff;
border-bottom: 1px solid var(--hp-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.hp-mp-day-card-header h3 {
margin: 0;
font-size: 1.1rem;
color: var(--hp-text-main);
}
.hp-mp-meal {
padding: 0.75rem 1rem;
font-size: 0.9rem;
color: var(--hp-text-light);
border-bottom: 1px dashed var(--hp-border);
}
.hp-mp-meal:last-child {
border-bottom: none;
}
.hp-mp-meal strong {
color: var(--hp-text-main);
font-weight: 600;
}
.hp-mp-summary {
margin-top: 1.5rem;
font-size: 0.9rem;
text-align: center;
color: var(--hp-text-light);
background-color: var(--hp-bg-sub);
padding: 0.75rem;
border-radius: 0.5rem;
}
.hp-mp-summary strong {
color: var(--hp-primary);
font-size: 1rem;
}
.hp-mp-card{
margin-top: 1.5rem;
background: #fff;
padding: 1.5rem;
border-radius: 1rem;
border: 1px solid var(--hp-border);
overflow: auto;
max-height: 400px;
}
/* === [CẬP NHẬT V43] CSS CHỐT SỔ CHO STEP 4 - DOSHA === */
/* 1. KHUNG CHUNG (ÉP CỨNG 600PX) */
#hp-dsh-app-root {
position: relative;
width: 100%;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
font-family: 'Inter', sans-serif;
}
/* 2. QUẢN LÝ MÀN HÌNH CHUNG */
.hp-dsh-screen-common {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
display: flex;
flex-direction: column;
padding: 1.5rem;
box-sizing: border-box;
animation: hpFadeIn 0.3s;
overflow: auto; /* Cho phép cuộn nếu nội dung dài */
}
.hp-dsh-screen-common.hp-hidden {
display: none !important;
}
/* 3. Màn hình Start/Loading (Giống Chakra) */
#hp-dsh-loading-screen,
#hp-dsh-start-screen {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: var(--hp-bg-sub) !important; /* Đồng bộ nền */
}
#hp-dsh-loading-screen {
z-index: 10;
}
#hp-dsh-start-screen .hp-ckr-button { /* Dùng style nút của Chakra */
max-width: 250px;
margin: 0 auto;
}
/* 4. MÀN HÌNH QUIZ (GẠT THẺ) */
#hp-dsh-quiz-screen {
background-color: var(--hp-bg-sub);
}
.hp-dsh-quiz-area {
width: 100%;
flex-grow: 1;
min-height: 250px;
max-width: 450px;
margin: 1rem auto 0 auto;
}
.hp-dsh-card-stack {
position: relative;
width: 100%;
height: 100%;
min-height: 250px;
perspective: 1000px;
}
/* [V43] Dùng CSS Thẻ bài "Xịn" của bạn */
.hp-dsh-card-item {
position: absolute;
inset: 0;
background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
border-radius: 20px;
border: 1px solid rgb(32 255 243 / 60%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1.6rem;
cursor: grab;
transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
transform-style: preserve-3d;
backdrop-filter: blur(10px);
}
.hp-dsh-card-item:active { cursor: grabbing; }
.hp-dsh-card-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.1),
0 0 25px rgba(90, 197, 255, 0.15);
background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
}
.hp-dsh-card-item p {
font-size: 1.15rem;
font-weight: 600;
color: #1b1b1b;
margin: 0;
line-height: 1.6;
}
/* Wrapper để icon ko bị co theo absolute của thẻ */
.hp-dsh-card-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Icon Dosha */
.hp-dsh-card-icon {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
font-size: 3rem;
color: #10b981;
pointer-events: none;
z-index: 5;
animation: dsh-icon-bounce 2.8s ease-in-out infinite;
}
@keyframes dsh-icon-bounce {
0% { transform: translateX(-50%) translateY(0) rotate(0deg); }
25% { transform: translateX(-50%) translateY(-4px) rotate(6deg); }
50% { transform: translateX(-50%) translateY(0) rotate(0deg); }
75% { transform: translateX(-50%) translateY(-4px) rotate(-6deg); }
100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
}
/* 5. Chữ "Like" / "Nope" (CSS Xịn của bạn) */
.hp-dsh-card-like,
.hp-dsh-card-nope {
position: absolute;
top: 20px;
font-size: 1.2rem;
font-weight: 700;
padding: 0.4rem 0.8rem;
border-radius: 0.5rem;
opacity: 0;
backdrop-filter: blur(6px);
transition: opacity 0.25s ease;
border-width: 2px;
border-style: solid;
}
.hp-dsh-card-like {
left: 16px;
color: #2ecc71;
border-color: #2ecc71;
background: rgba(46, 204, 113, 0.1);
transform: rotate(-10deg);
}
.hp-dsh-card-nope {
right: 16px;
color: #e74c3c;
border-color: #e74c3c;
background: rgba(231, 76, 60, 0.1);
transform: rotate(10deg);
}
.hp-dsh-card-item.swipe-right .hp-dsh-card-like { opacity: 1; }
.hp-dsh-card-item.swipe-left .hp-dsh-card-nope { opacity: 1; }
/* 6. MÀN HÌNH KẾT QUẢ (Radian Chart) */
#hp-dsh-results-screen {
z-index: 6;
padding: 0; /* Header sẽ tự căn */
height: 100%; /* [FIX V43] Đổi thành 100% để scroll */
position: relative;
display: flex; /* [FIX V43] Dùng flex-column */
flex-direction: column;
}
.hp-dsh-results-header {
display: flex;
align-items: center;
padding: 1.5rem 1rem;
border-bottom: 1px solid var(--hp-border);
flex-shrink: 0;
background-color: #fff; /* Nền trắng cho header */
}
.hp-dsh-results-header h2 {
flex-grow: 1;
text-align: center;
margin: 0;
font-size: 1.5rem;
}
.hp-dsh-results-header .hp-btn-back {
margin-top: 0;
}
.hp-dsh-chart-container {
width: 100%;
max-width: 300px;
margin: 1.5rem auto 1rem auto;
flex-shrink: 0;
background-color: #fff; /* Nền trắng cho chart */
border-radius: 1rem;
padding: 1rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
#hp-dosha-chart {
width: 100% !important;
height: auto !important;
}
/* 7. Chú thích % (Legend) Vata, Pitta, Kapha */
.hp-dsh-stacked-legend {
display: flex;
justify-content: center;
gap: 0.3rem;
font-size: 0.95rem;
flex-wrap: wrap;
margin: 1rem 0 1.5rem 0; /* [FIX V43] Sửa margin */
padding: 0 1.5rem;
flex-shrink: 0;
}
.hp-dsh-stacked-legend span {
font-weight: 600;
display: flex;
align-items: center;
}
.hp-dsh-stacked-legend span::before {
content: '•';
font-size: 2rem;
line-height: 0;
margin-right: 0.25rem;
}
.hp-dsh-stacked-legend span b {
margin-left: 0.25rem;
color: var(--hp-text-main);
}
/* 8. [FIX V43] Cấu trúc Tab (Giống Chakra) */
.hp-dsh-tabs-nav {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
justify-content: center;
flex-wrap: wrap;
padding: 0 1.5rem;
flex-shrink: 0;
}
.hp-dsh-tab-btn {
padding: 0.6rem 1.2rem;
border-radius: 2rem; /* Dạng viên thuốc */
border: 1px solid var(--hp-border);
background: #fff;
color: var(--hp-text-light);
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.hp-dsh-tab-btn:hover {
background: var(--hp-primary-light);
}
.hp-dsh-tab-btn.active {
background: var(--hp-primary);
color: #fff;
border-color: var(--hp-primary);
}
/* [FIX V43] Khung nội dung Tab (1 Khung) */
.hp-dsh-tab-content-area {
background: #fff; /* Nền trắng */
padding: 1.5rem;
border-radius: 1rem;
border: 1px solid var(--hp-border);
flex-grow: 1; /* [FIX V43] Tự co giãn */
overflow-y: auto; /* [FIX V43] CHO PHÉP CUỘN BÊN TRONG KHUNG NÀY */
min-height: 500px; /* Đảm bảo có chiều cao tối thiểu */
}
.hp-dsh-tab-pane {
display: none;
animation: hpFadeIn 0.3s;
text-align: left;
}
.hp-dsh-tab-pane.active {
display: block;
}
.hp-dsh-tab-pane h4 {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.75rem 0;
}
.hp-dsh-tab-pane p {
margin: 0 0 1rem 0;
line-height: 1.6;
color: var(--hp-text-main);
}
.hp-dsh-tab-pane ul {
margin-left: 1.5rem;
margin-bottom: 1rem;
padding-left: 0.5rem;
}
.hp-dsh-tab-pane li {
margin-bottom: 0.5rem;
}
/* 9. Nút Tiếp tục (Footer) */
.hp-step-nav-buttons {
padding: 1rem 1.5rem;
text-align: right;
border-top: 1px solid var(--hp-border);
background: #fff;
flex-shrink: 0;
margin-top: auto; /* Đẩy xuống đáy */
}
/* === [CẬP NHẬT V36] CSS CHO STEP 5 - STRESS (Holi Quiz) === */
/* 1. Màn hình Quiz (V36) */
#hp-sa-quiz-screen {
background-color: var(--hp-bg-sub);
padding: 0; /* Header tự căn */
display: flex; /* [FIX V36] */
flex-direction: column;
}
.hp-sa-canvas-container {
flex-shrink: 0; /* Không co lại */
}
.hp-sa-canvas {
position: relative;
width: 100%;
height: 250px; /* Chiều cao cố định */
background-color: #fff;
border: 1px dashed var(--hp-border);
border-radius: 1rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
#hp-sa-canvas-placeholder {
font-size: 1rem;
color: var(--hp-text-light);
font-style: italic;
padding: 1rem;
text-align: center;
}
/* 2. Vệt màu (Splatter) (Giống V34) */
.hp-splatter {
position: absolute;
width: 80px;
height: 80px;
background-color: var(--color);
border-radius: 50%;
opacity: 0.7;
filter: blur(5px);
animation: hpScaleUp 0.3s ease-out;
}
.hp-splatter::before,
.hp-splatter::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: var(--color);
border-radius: 50%;
opacity: 0.8;
}
.hp-splatter::before { top: -15px; left: 20px; transform: scale(0.6); filter: blur(10px); }
.hp-splatter::after { top: 15px; left: -20px; transform: scale(0.8); filter: blur(8px); }
/* 3. Vùng Quiz Content (Câu hỏi + Bảng màu) */
.hp-sa-quiz-content {
background-color: #fff;
padding: 1.5rem;
border-top: 1px solid var(--hp-border);
margin-top: 1.5rem;
border-radius: 0 0 1rem 1rem; /* Chỉ bo góc dưới */
flex-grow: 1; /* [FIX V36] Đẩy xuống đáy */
display: flex;
flex-direction: column;
}
.hp-sa-question {
font-size: 1.25rem;
font-weight: 600;
text-align: center;
color: var(--hp-text-main);
margin: 0 0 1.5rem 0;
min-height: 3em; /* Giữ chiều cao ổn định */
}
/* 4. Bảng màu (Chấm tròn V35 - Gọn gàng) */
.hp-sa-palette-v35 {
display: flex;
justify-content: center;
gap: 0.5rem; /* Gần nhau hơn */
flex-wrap: wrap;
margin-top: auto; /* Đẩy xuống đáy */
}
.hp-sa-color-dot {
--color: #ccc;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
border: none;
background-color: transparent;
color: var(--hp-text-light);
width: 70px; /* Gọn gàng */
border-radius: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
padding: 0.5rem 0;
}
.hp-sa-color-dot i {
font-size: 1.75rem;
color: var(--color);
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border: 2px solid var(--color);
transition: all 0.2s ease;
}
.hp-sa-color-dot span {
font-size: 0.8rem;
font-weight: 600;
}
.hp-sa-color-dot:hover i {
background-color: var(--color);
color: #fff;
transform: scale(1.1);
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* 5. Màn hình Kết quả (Dùng chung style Tab V44) */
#hp-sa-results-screen {
background-color: var(--hp-bg-sub);
height: 100%;
}
#hp-sa-result-canvas { /* Khung tranh ở màn kết quả */
height: 150px !important;
background-color: #fff;
border: 1px solid var(--hp-border);
box-shadow: var(--hp-shadow);
flex-shrink: 0;
}
/* =========================================
[V53] CSS VIẾT LẠI HOÀN TOÀN CHO STEP 6
========================================= */
/* 1. Lưới Chính (Grid) */
.hp-dash-grid-v6 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: stretch; /* [FIX] Bắt buộc các widget trên 1 hàng cao bằng nhau */
}
/* 2. Thẻ (Widget) Chung */
.hp-dash-widget {
background: #ffffff;
border: 1px solid var(--hp-border);
border-radius: var(--hp-radius);
padding: 1.5rem;
box-shadow: var(--hp-shadow);
overflow-x: hidden;
/* [FIX] Thiết lập flex để căn chỉnh nội dung */
display: flex;
flex-direction: column;
height: 100%; /* [FIX] Đảm bảo widget lấp đầy ô grid */
}
.hp-widget-full {
grid-column: 1 / -1;
}
/* 3. Tiêu đề Widget (Giống nhau cho tất cả) */
.hp-dash-widget-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--hp-text-main);
margin: 0 0 1rem 0; /* [SỬA] Giảm margin đáy */
text-align: center;
border-bottom: 1px dashed var(--hp-border);
padding-bottom: 0.75rem;
flex-shrink: 0; /* [FIX] Không cho tiêu đề bị co lại */
}
/* 4. Vùng Nội dung (Quan trọng nhất)
Tất cả các vùng nội dung (sau tiêu đề) sẽ được căn lề trên
và tự động căn giữa theo chiều ngang.
*/
.hp-dash-chart-container,
.hp-dash-tdee-container,
.hp-dash-bmi-gauge-container,
.hp-dash-stress-container {
flex-grow: 0; /* [FIX] CẤM nội dung tự co giãn */
justify-content: flex-start; /* [FIX] Căn lề trên (top) */
/* [FIX] Căn giữa theo chiều ngang (horizontal) */
margin-left: auto;
margin-right: auto;
margin-top: 1rem; /* [FIX] Tạo khoảng cách đồng đều với tiêu đề */
width: 100%;
}
/* 5. Tinh chỉnh từng Widget */
/* BMI, TDEE, Mục tiêu (chung style) */
.hp-dash-tdee-container,
.hp-dash-bmi-gauge-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* BMI */
.hp-dash-bmi-gauge-container {
width: 180px; /* Giữ kích thước cũ */
height: 90px;
overflow: hidden;
position: relative;
margin-bottom: 1rem; /* Thêm khoảng cách đáy */
}
/* (Tất cả code cho .hp-dash-bmi-gauge, .hp-dash-bmi-value... giữ nguyên y hệt) */
.hp-dash-bmi-gauge { width: 100%; height: 100%; position: relative; }
.hp-dash-bmi-gauge::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: conic-gradient( from 180deg, #3b82f6 0deg 27deg, #22c55e 27deg 81deg, #f59e0b 81deg 117deg, #ef4444 117deg 180deg ); border-radius: 90px 90px 0 0; }
.hp-dash-bmi-gauge::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 150px; height: 75px; background: #ffffff; border-radius: 75px 75px 0 0; z-index: 1; }
.hp-dash-bmi-gauge-inner { position: absolute; bottom: 0; left: 50%; width: 3px; height: 75px; background: var(--hp-text-main); border-radius: 3px 3px 0 0; transform-origin: bottom center; z-index: 2; --bmi-percent: 0; transform: translateX(-50%) rotate(calc( (var(--bmi-percent) * 180deg) - 90deg )); transition: transform 1s ease-out; }
.hp-dash-bmi-value { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-size: 2rem; font-weight: 800; z-index: 3; color: var(--hp-text-main); }
.hp-dash-bmi-text { font-size: 1.1rem; font-weight: 700; text-align: center; margin-top: 1rem; color: var(--hp-primary); }
/* TDEE */
.hp-dash-tdee-container .fas { font-size: 3rem; color: var(--hp-accent); margin-bottom: 1rem; }
.hp-dash-tdee-value { font-size: 2.5rem; font-weight: 800; color: var(--hp-text-main); line-height: 1.1; }
.hp-dash-tdee-label { font-size: 1rem; font-weight: 600; color: var(--hp-accent); }
#hp-dash-tdee-text { font-size: 0.9rem; color: var(--hp-text-light); margin: 0.5rem 0 0 0; }
/* Dosha, Chakra (Charts) */
.hp-dash-chart-container {
position: relative;
max-width: 350px; /* Giới hạn kích thước chart */
/* [FIX] Xóa flex-grow: 1; */
}
.hp-dash-chart-label {
text-align: center;
font-weight: 700;
font-size: 1.1rem;
color: var(--hp-primary);
margin-top: 1rem;
}
/* Stress */
.hp-dash-stress-container {
height: 20px;
background: var(--hp-bg-sub);
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--hp-border);
display: flex;
max-width: 300px; /* Giới hạn thanh stress */
}
.hp-dsh-stacked-bar-segment {
height: 100%;
transition: width 0.5s ease;
}
/* 6. Mục Lời khuyên (Advice) */
.hp-dash-advice-container {
margin-top: 3rem;
border-top: 1px solid var(--hp-border);
padding-top: 2rem;
}
.hp-dash-advice-card {
background: #ffffff;
border-left: 5px solid var(--hp-primary);
border-radius: 0 0.5rem 0.5rem 0;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
box-shadow: var(--hp-shadow);
}
.hp-dash-advice-card h3 { margin: 0 0 0.5rem 0; font-size: 1.1rem; font-weight: 700; }
.hp-dash-advice-card h3 .fas { margin-right: 0.5rem; }
/* Style màu cho từng card */
#hp-dash-advice-dosha { border-color: #0d9488; }
#hp-dash-advice-stress { border-color: #f59e0b; }
#hp-dash-advice-chakra { border-color: #7c3aed; }
#hp-dash-advice-chakra h3 { color: #7c3aed; }
/* Danh sách lời khuyên (Đã fix lỗi ) */
.hp-dash-advice-card p {
display: none; /* [GIỮ NGUYÊN] Vẫn ẩn thẻ
cũ */
}
.hp-dash-advice-list {
padding-left: 1.25rem;
margin: 0.5rem 0 0 0;
list-style-type: disc;
}
.hp-dash-advice-list li {
margin-bottom: 0.75rem;
line-height: 1.5;
color: var(--hp-text-main);
}
.hp-dash-advice-list li:last-child { margin-bottom: 0; }
.hp-dash-advice-list li strong { color: var(--hp-primary); }
.hp-dash-advice-list li i { color: var(--hp-text-light); }
/* 7. Responsive cho Grid */
@media (max-width: 768px) {
.hp-dash-grid-v6 {
grid-template-columns: 1fr; /* 1 cột trên mobile */
}
}
/* =========================================
[FIX V55] SỬA DỨT ĐIỂM SỐ BMI
========================================= */
/* 1. Xóa bỏ hoàn toàn cài đặt 'position: absolute' cũ */
.hp-dash-bmi-value {
position: static !important; /* Tắt absolute */
transform: none !important;
bottom: auto !important;
left: auto !important;
z-index: auto !important;
font-size: 1rem !important; /* Reset về bt */
}
/* 2. Style cho số BMI (giống hệt TDEE) */
.hp-dash-bmi-value-simple {
font-size: 2.5rem;
font-weight: 800;
color: var(--hp-text-main);
line-height: 1.1;
text-align: center;
margin-top: 0.5rem; /* Nằm ngay dưới đồng hồ */
}
/* 3. Style cho text BMI (giống hệt TDEE) */
.hp-dash-bmi-text-simple {
font-size: 1rem;
font-weight: 600;
color: var(--hp-primary); /* Đổi màu cho đồng bộ */
text-align: center;
}
/* 4. Sửa lại container của đồng hồ */
.hp-dash-bmi-gauge-container {
position: relative; /* Giữ nguyên cho kim */
margin: 1rem auto 0 auto; /* Căn giữa */
}
/* =========================================
[V56] CSS CHO STEP 7 - LỊCH TẬP THÔNG MINH
========================================= */
/* Lưới chung */
.hp-sgs-grid {
display: grid;
grid-template-columns: 1fr; /* 1 cột mobile */
gap: 1.5rem;
}
@media (min-width: 1024px) {
.hp-sgs-grid {
grid-template-columns: 1fr 1fr 1fr; /* 3 cột desktop */
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.hp-sgs-grid {
grid-template-columns: 1fr 1fr; /* 2 cột tablet */
}
}
/* Thẻ mỗi ngày */
.hp-sgs-day-card {
background: #fff;
border: 1px solid var(--hp-border);
border-radius: 1rem;
box-shadow: var(--hp-shadow);
display: flex;
flex-direction: column;
}
.hp-sgs-card-header {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--hp-border);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--hp-bg-sub);
}
.hp-sgs-card-header h3 {
margin: 0;
font-size: 1.1rem;
color: var(--hp-text-main);
}
.hp-sgs-card-header span {
font-size: 0.8rem;
font-weight: 600;
color: var(--hp-primary);
background: var(--hp-primary-light);
padding: 0.2rem 0.6rem;
border-radius: 1rem;
}
/* Danh sách tư thế */
.hp-sgs-pose-list {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex-grow: 1; /* Cho các thẻ cao bằng nhau */
}
.hp-sgs-pose-card {
border: 1px solid var(--hp-border);
border-radius: 0.75rem;
background: #fff;
transition: all 0.2s ease;
}
.hp-sgs-pose-card:hover {
border-color: var(--hp-primary);
box-shadow: 0 4px 10px rgba(13, 148, 136, 0.1);
}
.hp-sgs-pose-info {
padding: 0.75rem 1rem;
}
.hp-sgs-pose-info strong {
font-size: 1rem;
color: var(--hp-text-main);
display: block;
margin-bottom: 0.25rem;
}
.hp-sgs-pose-info small {
font-size: 0.85rem;
color: var(--hp-text-light);
line-height: 1.4;
}
.hp-sgs-pose-meta {
padding: 0.5rem 1rem;
border-top: 1px dashed var(--hp-border);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: var(--hp-text-light);
}
.hp-sgs-pose-meta span {
display: flex;
align-items: center;
gap: 0.3rem;
}
.hp-sgs-reason-tag {
font-weight: 600;
color: #f59e0b; /* Màu cam */
}
/* Thẻ Ngày nghỉ */
.hp-sgs-day-card.rest-day .hp-sgs-card-header span {
color: #64748b;
background: #f1f5f9;
}
.hp-sgs-rest-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem 1.5rem;
flex-grow: 1;
}
.hp-sgs-rest-content .fas {
font-size: 2.5rem;
color: var(--hp-primary);
opacity: 0.5;
margin-bottom: 1rem;
}
.hp-sgs-rest-content p {
font-size: 0.9rem;
color: var(--hp-text-light);
margin: 0;
line-height: 1.5;
}
/* =========================================
[V57] CSS CHO STEP 7 - NÚT CHỌN MỤC TIÊU
========================================= */
.hp-sgs-goal-selector {
background: var(--hp-bg-sub);
padding: 1rem;
border-radius: 0.75rem;
border: 1px solid var(--hp-border);
}
.hp-sgs-goal-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.75rem;
}
.hp-sgs-goal-btn {
padding: 0.75rem 0.5rem;
border: 2px solid var(--hp-border);
border-radius: 0.75rem;
background: var(--hp-bg-main);
color: var(--hp-text-light);
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.85rem;
}
.hp-sgs-goal-btn i {
font-size: 1.1rem;
}
.hp-sgs-goal-btn:hover {
border-color: var(--hp-primary);
color: var(--hp-primary);
}
.hp-sgs-goal-btn.active {
border-color: var(--hp-primary);
background: var(--hp-primary-light);
color: var(--hp-primary);
box-shadow: 0 4px 10px rgba(13, 148, 136, 0.1);
}
@media (max-width: 600px) {
.hp-sgs-goal-group {
grid-template-columns: 1fr; /* 1 cột trên mobile */
}
}
/* =========================================
[V58] CSS NÂNG CẤP CHO STEP 7
========================================= */
/* 1. Nút Refresh trong Header */
.hp-sgs-card-header {
justify-content: space-between;
align-items: center;
}
.hp-sgs-card-header div:first-child { /* Bọc tiêu đề lại */
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.hp-sgs-day-refresh {
background: #fff;
border: 1px solid var(--hp-border);
color: var(--hp-primary);
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.hp-sgs-day-refresh:hover {
background: var(--hp-primary-light);
transform: rotate(90deg);
}
/* 2. Thẻ Video (Màu Teal) */
.hp-sgs-video-card {
background-color: var(--hp-primary-light);
border-color: var(--hp-primary);
}
.hp-sgs-video-card:hover {
background-color: #fff;
box-shadow: 0 4px 10px rgba(13, 148, 136, 0.2);
}
.hp-sgs-video-link {
text-decoration: none;
display: block;
}
.hp-sgs-video-card strong {
color: var(--hp-primary) !important;
}
.hp-sgs-video-tag {
font-weight: 700;
color: var(--hp-primary);
}
.hp-sgs-video-tag .fas {
font-size: 0.8rem;
opacity: 0.7;
}
/* 3. Thẻ Cảnh báo (Màu Đỏ) */
.hp-sgs-pose-card.warning {
background-color: #fef2f2; /* Nền đỏ nhạt */
border-color: var(--hp-danger); /* Viền đỏ */
box-shadow: none;
}
.hp-sgs-pose-card.warning strong {
color: #b91c1c; /* Chữ đỏ đậm */
}
.hp-sgs-warning-reason {
font-size: 0.9rem;
padding: 0.75rem 1rem;
border-top: 1px dashed var(--hp-border);
color: #b91c1c;
line-height: 1.4;
}
.hp-sgs-warning-reason strong {
font-weight: 700;
}
/* =========================================
[V59] CSS HOÀN THIỆN STEP 7
========================================= */
/* 1. Cho thẻ Ngày nghỉ (Chủ Nhật) full-width */
.hp-sgs-day-card.rest-day {
grid-column: 1 / -1; /* Kéo dài toàn bộ các cột */
}
/* 2. Căn giữa nội dung thẻ ngày nghỉ cho đẹp */
.hp-sgs-rest-content {
padding: 2.5rem 1.5rem; /* Tăng padding */
}
.hp-sgs-rest-content .fas {
font-size: 3rem; /* Icon to hơn */
}
.hp-sgs-rest-content p {
font-size: 1rem; /* Chữ to hơn */
max-width: 450px;
margin-left: auto;
margin-right: auto;
}
/* =========================================
[V60] CSS CHO STEP 8 - THỰC ĐƠN
========================================= */
/* (Các class .hp-mp-grid, .hp-mp-day-card... đã có
từ Step 2, chúng ta chỉ cần style ô input) */
.hp-mp-input-area {
background: var(--hp-bg-sub);
padding: 1rem;
border-radius: 0.75rem;
border: 1px solid var(--hp-border);
}
.hp-mp-input-group {
display: flex;
gap: 0.75rem;
}
.hp-mp-input-group input[type="number"] {
flex-grow: 1;
padding: 0.75rem 1rem;
border: 2px solid var(--hp-border);
border-radius: 0.75rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--hp-primary);
-moz-appearance: textfield; /* Ẩn mũi tên tăng/giảm */
}
.hp-mp-input-group input::-webkit-outer-spin-button,
.hp-mp-input-group input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.hp-mp-sync-btn {
flex-shrink: 0;
width: 70px;
border: 1px solid var(--hp-border);
background: #fff;
color: var(--hp-primary);
font-size: 1.2rem;
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
}
.hp-mp-sync-btn:hover {
background: var(--hp-primary-light);
border-color: var(--hp-primary);
}
/* =========================================
[V60] CSS CHO STEP 8 - HOÀN THÀNH
========================================= */
.hp-final-advice-container {
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 1rem;
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.hp-final-advice-container h4 {
margin: 0 0 1rem 0;
font-size: 1.1rem;
color: #b45309;
}
.hp-final-advice-item {
display: flex;
gap: 0.5rem;
font-size: 0.9rem;
line-height: 1.5;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
border-bottom: 1px dashed #fcd34d;
}
.hp-final-advice-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.hp-final-advice-item strong {
flex-shrink: 0;
font-weight: 700;
}
.hp-final-advice-item .hp-final-advice-text {
font-style: italic;
color: var(--hp-text-light);
}
/* Hộp Chúc mừng */
.hp-final-congrats-box {
background: var(--hp-primary-light);
border: 1px solid var(--hp-border);
border-radius: 1rem;
padding: 2rem 1.5rem;
text-align: center;
margin-bottom: 1.5rem;
}
.hp-final-congrats-icon {
font-size: 3rem;
color: var(--hp-primary);
margin-bottom: 1rem;
/* Hiệu ứng */
animation: hp-congrats-pop 0.5s ease-out forwards;
}
@keyframes hp-congrats-pop {
0% { transform: scale(0.5); opacity: 0; }
80% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
.hp-final-congrats-box h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--hp-text-main);
margin: 0 0 0.5rem 0;
}
.hp-final-congrats-box p {
font-size: 0.95rem;
color: var(--hp-text-light);
margin: 0;
}
/* Nút hành động cuối */
.hp-final-actions {
display: grid;
}
/* =========================================
[V62] CSS CHO STEP 8 - HÀNG CUỐI
========================================= */
/* 1. Hàng cuối (Chủ Nhật + Lời Khuyên) */
.hp-mp-final-row-grid {
display: grid;
grid-template-columns: 1fr; /* 1 cột mobile */
gap: 1.5rem;
margin-top: 1.5rem;
}
@media (min-width: 900px) {
.hp-mp-final-row-grid {
grid-template-columns: 1fr 1fr; /* 2 cột desktop */
align-items: start; /* Căn lề trên */
}
/* Làm cho Lời khuyên (cột phải) có chiều cao tối thiểu bằng Chủ Nhật (cột trái) */
#hp-final-completion-container {
height: 100%;
display: flex;
flex-direction: column;
}
.hp-final-congrats-box {
margin-top: auto; /* Đẩy hộp Chúc mừng xuống đáy */
}
}
/* 2. Style cho Lời Khuyên (để nó giống 1 cái card) */
#hp-final-completion-container {
padding-top: 0 !important;
}
/* 3. Thêm Icon cho bữa ăn */
.hp-mp-meal strong {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
}
.hp-mp-meal strong i {
font-size: 1rem;
width: 20px;
text-align: center;
}
.hp-meal-s { color: #8d5b24 !important; } /* Nâu cafe */
.hp-meal-s i { color: #8d5b24 !important; }
.hp-meal-l { color: #f59e0b !important; } /* Cam mặt trời */
.hp-meal-l i { color: #f59e0b !important; }
.hp-meal-d { color: #4f46e5 !important; } /* Tím than mặt trăng */
.hp-meal-d i { color: #4f46e5 !important; }
/* =========================================
[V63] CSS CHO FILE PDF TỔNG HỢP
========================================= */
/* 1. Ẩn container render khỏi màn hình */
#hp-pdf-render-container {
position: absolute;
left: -9999px;
top: 0;
width: 210mm; /* Khổ A4 */
background: #ffffff;
color: #333;
font-family: 'Inter', sans-serif;
padding: 10mm;
}
/* 2. Style chung cho trang */
.hp-pdf-page {
width: 100%;
page-break-after: always; /* Ngắt trang */
margin-bottom: 10mm;
padding-bottom: 5mm;
border-bottom: 1px dashed #ccc;
}
.hp-pdf-page:last-of-type {
border-bottom: none;
}
.hp-pdf-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #0d9488;
padding-bottom: 5mm;
margin-bottom: 5mm;
}
.hp-pdf-header .hp-pdf-logo {
width: 50mm;
height: auto;
}
.hp-pdf-header h1 {
font-size: 18px;
color: #0d9488;
margin: 0;
text-align: right;
}
.hp-pdf-header p {
font-size: 12px;
color: #666;
margin: 0;
text-align: right;
}
.hp-pdf-footer {
text-align: center;
font-size: 9px;
color: #999;
border-top: 1px solid #eee;
padding-top: 5mm;
margin-top: 5mm;
page-break-before: always; /* Luôn ở trang cuối */
}
.hp-pdf-title {
font-size: 16px;
font-weight: 700;
color: #0f766e;
border-bottom: 1px solid #eee;
padding-bottom: 2mm;
margin-bottom: 5mm;
}
.hp-pdf-subtitle {
font-size: 14px;
font-weight: 700;
color: #333;
background: #f1f5f9;
padding: 2mm;
border-radius: 4px;
margin-top: 4mm;
}
.hp-pdf-empty {
font-style: italic;
color: #888;
}
/* 3. Style cho Dashboard (Phần 1) */
.hp-pdf-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4mm;
}
.hp-pdf-widget {
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 4mm;
text-align: center;
font-size: 12px;
}
.hp-pdf-widget h4 {
margin: 0 0 2mm 0;
font-size: 12px;
font-weight: 600;
color: #64748b;
}
.hp-pdf-widget .hp-pdf-bmi-value,
.hp-pdf-widget .hp-pdf-tdee-value,
.hp-pdf-widget .hp-pdf-main-value {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin-bottom: 1mm;
}
/* 4. Style cho Lời khuyên & Checklist */
.hp-pdf-page ul {
list-style: none;
padding-left: 0;
font-size: 11px;
line-height: 1.6;
}
.hp-pdf-page h4 {
font-size: 12px;
font-weight: 700;
color: #1e293b;
margin-top: 4mm;
margin-bottom: 2mm;
}
.hp-pdf-page .caution h4 { color: #ef4444; }
.hp-pdf-list-item {
display: flex;
align-items: flex-start;
gap: 2mm;
padding: 2mm;
border-radius: 4px;
margin-bottom: 2mm;
}
.hp-pdf-list-item i {
padding-top: 1mm;
}
.hp-pdf-list-item.caution { background: #fef2f2; color: #b91c1c; }
.hp-pdf-list-item.recommend { background: #f0fdf4; color: #15803d; }
.hp-pdf-list-item.focus { background: #f0fdfa; color: #0f766e; }
.hp-pdf-list-item.prepare { background: #f5f3ff; color: #5b21b6; }
.hp-pdf-reason {
margin-top: 2mm;
padding: 2mm;
background: #f1f5f9;
border-left: 3px solid #94a3b8;
color: #333;
font-size: 10px;
}
/* 5. Style cho Lịch tập & Thực đơn */
.hp-pdf-page .hp-sgs-grid,
.hp-pdf-page .hp-mp-grid {
grid-template-columns: 1fr 1fr !important;
}
.hp-pdf-page .hp-sgs-day-card,
.hp-pdf-page .hp-mp-day-card {
page-break-inside: avoid;
}
/* =========================================
[BẢN VÁ] CSS CHO MODAL LỊCH SỬ
========================================= */
.hp-history-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.hp-history-item {
background: var(--hp-bg-sub);
border: 1px solid var(--hp-border);
border-radius: 0.75rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
overflow: hidden;
}
.hp-history-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: #fff;
border-bottom: 1px solid var(--hp-border);
}
.hp-history-date {
font-size: 0.85rem;
font-weight: 600;
color: var(--hp-text-light);
}
.hp-history-goal {
font-size: 1rem;
font-weight: 700;
color: var(--hp-primary);
text-align: right;
}
.hp-history-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem 1rem;
padding: 1rem;
font-size: 0.9rem;
}
.hp-history-grid div strong {
color: var(--hp-text-main);
font-weight: 700;
}
.hp-history-notes {
padding: 0 1rem 1rem 1rem;
font-size: 0.9rem;
}
.hp-history-notes > strong {
display: block;
margin-bottom: 0.5rem;
color: var(--hp-text-main);
font-size: 0.95rem;
}
.hp-history-notes ul {
list-style-type: none;
padding: 0.75rem 1rem;
margin: 0;
background: #fff;
border-radius: 0.5rem;
border: 1px solid var(--hp-border);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.hp-history-notes li {
color: var(--hp-text-light);
line-height: 1.4;
font-style: italic;
}
.hp-history-notes li strong {
color: var(--hp-text-main);
display: inline;
font-style: normal;
}
.hp-history-empty {
text-align: center;
padding: 2rem;
color: var(--hp-text-light);
font-style: italic;
font-size: 0.95rem;
}
/* =========================================
[BẢN VÁ V65] SỬA DỨT ĐIỂM LỖI STICKY (LẦN CUỐI)
========================================= */
/* 1. Gỡ bỏ "overflow" khỏi TẤT CẢ các thẻ cha.
Đây là nguyên nhân chính giết chết "position: sticky". */
#hp-health-plugin-wrapper,
.hp-dashboard-layout {
overflow: visible !important;
}
/* 2. Gỡ bỏ thanh cuộn lồng (tắt max-height) */
.hp-main-content-area {
max-height: none !important;
overflow-y: visible !important;
}
/* 3. Áp dụng sticky CHỈ trên desktop (lớn hơn 1024px) */
@media (min-width: 1025px) {
.hp-sidebar-menu {
position: sticky !important;
/* Bạn hãy điều chỉnh 110px này cho vừa với menu chính của web */
top: 110px !important;
align-self: flex-start; /* Đảm bảo nó căn lề trên */
}
}
/* =========================================
[BẢN VÁ V78] SỬA LỖI HIỂN THỊ NÚT TRÊN MOBILE
========================================= */
/* 1. Mặc định (Desktop): Ẩn các nút ở cuối trang
(Vì chúng đã có trong sidebar) */
.hp-mobile-footer {
display: none !important;
}
* 2. Trên Mobile (khi sidebar gốc bị ẩn) */
@media (max-width: 1024px) {
/* 2a. TẮT quy tắc "display: none;" cũ của sidebar */
.hp-sidebar-footer {
display: flex !important;
flex-direction: row !important; /* Luôn xếp hàng ngang */
border-top: 1px solid var(--hp-border);
padding-top: 1rem;
}
/* 2b. HIỆN các nút ở cuối trang (bản mobile) */
.hp-mobile-footer {
display: flex !important;
gap: 1rem;
margin-top: 2rem; /* Cách nội dung 1 chút */
}
/* 2c. Style cho 2 cái nút (full chiều rộng) */
.hp-mobile-footer .hp-sidebar-btn {
flex: 1; /* Chia đôi màn hình */
padding: 1rem; /* Nút to, rõ ràng */
font-size: 1rem;
}
.hp-mobile-footer .hp-sidebar-btn i {
font-size: 1.1rem;
margin-right: 0.5rem;
}
}
/* =========================================
[BẢN VÁ V79] SỬA LỖI ẨN/HIỆN NÚT MOBILE/DESKTOP
========================================= */
/* 1. Mặc định (Desktop):
- HIỆN nút trong sidebar.
- ẨN nút ở cuối trang (bản mobile). */
.hp-sidebar-menu .hp-sidebar-footer {
display: flex !important; /* Đảm bảo bản desktop luôn hiện */
}
.hp-mobile-footer {
display: none !important; /* Ẩn bản mobile đi */
}
/* 2. Trên Mobile (khi màn hình <= 1024px) */
@media (max-width: 1024px) {
/* 2a. ẨN nút trong sidebar (bản desktop)
(Code này đã có, chỉ đảm bảo nó được giữ lại) */
.hp-sidebar-menu .hp-sidebar-footer {
display: none !important;
}
/* 2b. HIỆN nút ở cuối trang (bản mobile) */
.hp-mobile-footer {
display: flex !important;
flex-direction: row !important;
gap: 1rem;
margin-top: 2rem;
border-top: 1px solid var(--hp-border);
padding-top: 1rem;
}
/* 2c. Style cho 2 cái nút (full chiều rộng) */
.hp-mobile-footer .hp-sidebar-btn {
flex: 1; /* Chia đôi màn hình */
padding: 1rem;
font-size: 1rem;
}
.hp-mobile-footer .hp-sidebar-btn i {
font-size: 1.1rem;
margin-right: 0.5rem;
}
}
/* =========================================
[BẢN VÁ V84] CSS PDF (CHỐNG CẮT CHỮ)
========================================= */
/* 1. Style chung cho các trang PDF */
.hp-pdf-page .hp-pdf-subtitle {
font-size: 14px;
font-weight: 700;
color: #333;
background: #f1f5f9;
padding: 2mm;
border-radius: 4px;
margin-top: 5mm;
margin-bottom: 3mm;
page-break-after: avoid !important; /* KHÔNG ngắt sau Subtitle */
page-break-inside: avoid !important;
}
.hp-pdf-page .hp-pdf-advice-list {
list-style: disc;
padding-left: 5mm;
page-break-inside: avoid !important;
}
.hp-pdf-page .hp-pdf-advice-list li {
margin-bottom: 2mm;
page-break-inside: avoid !important;
}
.hp-pdf-page .hp-pdf-advice-list li strong {
color: #0d9488;
}
.hp-pdf-page .hp-pdf-advice-list li i {
color: #64748b;
}
/* 2. Ghi Chú Cá Nhân (Chống cắt) */
.hp-pdf-note-item {
font-size: 11px;
line-height: 1.6;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 3mm;
margin-bottom: 3mm;
background: #f8fafc;
page-break-inside: avoid !important; /* KHÔNG ngắt bên trong Ghi chú */
}
.hp-pdf-note-item strong {
font-size: 13px;
color: var(--hp-primary);
font-weight: 700;
display: block;
margin-bottom: 1mm;
}
.hp-pdf-note-item p {
margin: 0;
color: #334155;
font-style: italic;
}
/* 3. Lịch tập & Thực đơn (Chống cắt) */
.hp-pdf-page .hp-sgs-grid,
.hp-pdf-page .hp-mp-grid {
page-break-inside: avoid !important; /* Không ngắt giữa các lưới */
}
.hp-pdf-page .hp-sgs-day-card,
.hp-pdf-page .hp-mp-day-card {
page-break-inside: avoid !important; /* KHÔNG ngắt bên trong 1 ngày */
}
.hp-pdf-page .hp-sgs-pose-card {
page-break-inside: avoid !important; /* KHÔNG ngắt bên trong 1 tư thế */
}
/* 4. Checklist An toàn (Chống cắt) */
.hp-pdf-page .hp-pdf-list-item {
page-break-inside: avoid !important; /* KHÔNG ngắt bên trong 1 mục checklist */
}
.hp-pdf-page .hp-pdf-reason {
page-break-inside: avoid !important;
}
/* =========================================
[V84] CSS CHO MODAL THU THẬP LEAD (PDF)
========================================= */
.hp-lead-form {
display: flex;
flex-direction: column;
gap: 1rem; /* Giảm khoảng cách 1 chút */
margin-top: 1.5rem;
}
.hp-lead-input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.hp-lead-input-group label {
font-weight: 600;
color: var(--hp-text-main);
font-size: 0.95rem;
}
.hp-lead-input-group input[type="text"],
.hp-lead-input-group input[type="email"],
.hp-lead-input-group input[type="tel"] {
padding: 0.75rem 1rem;
border: 2px solid var(--hp-border);
border-radius: 0.75rem;
font-size: 16px; /* Chống zoom */
transition: all 0.2s;
font-family: inherit;
}
.hp-lead-input-group input:focus {
border-color: var(--hp-primary);
outline: none;
box-shadow: 0 0 0 3px var(--hp-primary-light);
}
/* =========================================
[V84] CSS CHO NÚT ĐIỀU HƯỚNG TAB (STEP 1)
========================================= */
.hp-tab-pane-nav {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px dashed var(--hp-border);
}
.hp-tab-pane-nav .hp-btn {
margin-top: 0; /* Ghi đè margin mặc định */
}
/* Nếu chỉ có 1 nút, đẩy nó về bên phải */
.hp-tab-pane-nav button:only-child {
margin-left: auto;
}
/* [FIX PDF MOBILE] Đảm bảo khung render không bị CSS mobile bóp méo */
#hp-pdf-render-container {
width: 1200px !important; /* Cố định chiều rộng lớn */
max-width: none !important;
min-width: 1200px !important;
left: -9999px !important;
top: 0 !important;
position: fixed !important; /* Dùng fixed thay vì absolute để ổn định hơn */
z-index: -9999;
background-color: #ffffff;
}
#hp-pdf-render-container * {
/* Đảm bảo text bên trong không bị scale theo mobile */
-webkit-text-size-adjust: 100% !important;
}
hr.hp-signature-divider {
margin-top: 15px;}
/* =========================================
[V95] TÙY BIẾN NÚT ĐIỀU HƯỚNG TAB (STEP 1)
========================================= */
/* 1. Style chung cho các nút Next/Prev trong Tab */
.hp-tab-nav-btn {
padding: 0.5rem 1rem !important; /* Nhỏ hơn nút chính */
font-size: 0.8rem !important; /* Chữ nhỏ hơn */
border-radius: 2rem !important; /* Bo tròn nhiều hơn (dạng viên thuốc) */
box-shadow: none !important; /* Bỏ bóng đổ đậm */
transition: all 0.2s ease !important;
font-weight: 600 !important;
}
/* 2. Nút "Tab tiếp theo" (đang màu xanh đậm) -> Chuyển thành dạng Outline hoặc Nhạt */
.hp-tab-nav-btn.hp-btn-primary {
background: #6cb3ff0d !important;
border: 1px solid var(--hp-primary) !important;
color: var(--hp-primary) !important;
}
.hp-tab-nav-btn.hp-btn-primary:hover {
background: var(--hp-primary-light) !important;
color: var(--hp-primary) !important;
transform: translateX(3px) !important; /* Hiệu ứng trượt nhẹ sang phải */
}
/* 3. Nút "Tab trước" (đang màu xám) -> Làm gọn lại */
.hp-tab-nav-btn.hp-btn-secondary {
background: transparent !important;
border: 1px solid #cbd5e1 !important; /* Viền xám nhạt */
color: #64748b !important;
}
.hp-tab-nav-btn.hp-btn-secondary:hover {
background: #f1f5f9 !important;
color: #334155 !important;
border-color: #94a3b8 !important;
}
/* 4. Icon mũi tên bên trong */
.hp-tab-nav-btn i {
font-size: 0.8rem !important; /* Icon nhỏ lại */
}
/* =========================================
[V103] HIỆU ỨNG MÀN HÌNH CHỜ
========================================= */
@keyframes hpPulseSlow {
0% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); opacity: 0.8; }
}
.hp-pulse-heart { animation: hpPulseSlow 2.5s infinite ease-in-out; }
@keyframes hpLoadingRun {
0% { width: 0%; }
100% { width: 100%; }
}
.hp-transition-bar.running { animation: hpLoadingRun 2s ease-in-out forwards; }
.hp-transition-content { animation: hpFadeIn 0.8s ease-out; }
/* --- [BỔ SUNG] NÚT REFRESH CHO STEP 8 (THỰC ĐƠN) --- */
.hp-mp-day-refresh {
background: #fff;
border: 1px solid var(--hp-border);
color: var(--hp-primary);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
margin-left: 0.5rem; /* Cách số calo ra một chút */
}
.hp-mp-day-refresh:hover {
background: var(--hp-primary-light);
transform: rotate(90deg);
color: var(--hp-accent);
border-color: var(--hp-accent);
}
.hp-mp-menu-list {
/* Wrapper bao quanh 3 bữa ăn để dễ thay thế nội dung khi refresh */
display: flex;
flex-direction: column;
}
hr.hp-divider-dashed{
margin-bottom: 15px;
}
/* === SMART QA PRO (V108 - Bullet Points & Icons) === */
.hp-smart-qa-container {
background: #fff;
border: 1px solid #e2e8f0;
border-left: 4px solid #8b5cf6; /* Tím (Chakra) */
border-radius: 0.75rem;
padding: 1.5rem;
margin-top: 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 8px 20px -4px rgba(139, 92, 246, 0.15);
animation: hpFadeIn 0.5s ease-out;
}
.hp-smart-header {
font-size: 1.1rem; font-weight: 700; color: #7c3aed;
margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;
}
.hp-smart-intro {
font-size: 0.95rem; color: #475569; margin-bottom: 1.25rem;
line-height: 1.6; background: #f5f3ff; padding: 0.85rem;
border-radius: 0.5rem; border: 1px dashed #ddd6fe;
}
.hp-smart-item {
margin-bottom: 0.75rem; border: 1px solid #e2e8f0;
border-radius: 0.6rem; overflow: hidden; transition: all 0.2s ease;
}
.hp-smart-item:hover { border-color: #a78bfa; }
.hp-smart-item[open] { border-color: #8b5cf6; box-shadow: 0 4px 6px rgba(0,0,0,0.03); }
.hp-smart-item summary {
cursor: pointer; font-weight: 600; color: #1e293b;
padding: 1rem; list-style: none; display: flex;
justify-content: space-between; align-items: center;
background-color: #fff; transition: background 0.2s;
}
.hp-smart-item summary::-webkit-details-marker { display: none; }
.hp-smart-item summary i { color: #94a3b8; transition: transform 0.2s; }
.hp-smart-item[open] summary { background-color: #fbfaff; color: #7c3aed; }
.hp-smart-item[open] summary i { transform: rotate(180deg); color: #7c3aed; }
/* --- PHẦN TRẢ LỜI (FORMAT LIST) --- */
.hp-smart-answer {
padding: 1rem 1.25rem;
font-size: 0.95rem; color: #334155; line-height: 1.7;
border-top: 1px solid #f1f5f9; background-color: #fff;
}
/* Tự động format số 1. 2. 3. thành list đẹp */
.hp-smart-answer br { content: ""; margin: 0.5em; display: block; }
/* === CONTEXTUAL CHATBOT (V109) === */
.hp-step-chat-container {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
margin-top: 1.5rem;
display: flex;
flex-direction: column;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.hp-chat-header {
background: #0d9488; /* Màu chủ đạo */
color: #fff;
padding: 0.75rem 1rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
}
.hp-chat-header .fa-robot { animation: hp-pulse-slow 2s infinite; }
.hp-chat-window {
height: 250px; /* Chiều cao cố định, có cuộn */
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
background-color: #f1f5f9;
scroll-behavior: smooth;
}
/* Bong bóng chat */
.hp-chat-msg {
max-width: 85%;
padding: 0.6rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
line-height: 1.5;
position: relative;
word-wrap: break-word;
animation: hpFadeIn 0.2s ease-out;
}
/* Bot nói (Bên trái) */
.hp-chat-msg.bot {
align-self: flex-start;
background: #fff;
color: #334155;
border: 1px solid #e2e8f0;
border-bottom-left-radius: 0.2rem;
}
/* Khách nói (Bên phải) */
.hp-chat-msg.user {
align-self: flex-end;
background: #0d9488;
color: #fff;
border-bottom-right-radius: 0.2rem;
}
/* Vùng nhập liệu */
.hp-chat-input-area {
display: flex;
padding: 0.5rem;
background: #fff;
border-top: 1px solid #e2e8f0;
}
.hp-chat-input {
flex-grow: 1;
border: none;
padding: 0.6rem 1rem;
font-size: 16px;
outline: none;
}
/* --- FIX NÚT GỬI CHAT --- */
.hp-chat-send-btn {
background: none;
border: none;
color: #0d9488; /* Màu xanh mặc định */
font-size: 1.3rem; /* To hơn xíu cho dễ bấm */
padding: 0 1rem;
cursor: pointer;
transition: transform 0.1s;
outline: none; /* Bỏ viền đen khi chọn */
-webkit-tap-highlight-color: transparent; /* Bỏ màu nền xám khi bấm trên iPhone */
}
/* Chỉ đổi màu khi Di chuột trên Máy tính (Mobile sẽ bỏ qua) */
@media (hover: hover) {
.hp-chat-send-btn:hover {
color: #0f766e;
transform: scale(1.1);
}
}
/* Hiệu ứng nhún nhẹ khi bấm thật */
.hp-chat-send-btn:active {
transform: scale(0.9);
color: #0d9488; /* Trả về màu gốc ngay khi bấm */
}
/* Typing indicator */
.hp-typing-dots { font-style: italic; color: #94a3b8; font-size: 0.8rem; margin-left: 1rem; display: none; }
/* === HIỆU ỨNG TYPING (ĐANG GÕ...) === */
.hp-chat-typing-bubble {
align-self: flex-start;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
border-bottom-left-radius: 0.2rem;
padding: 0.8rem 1rem;
margin-bottom: 0.5rem;
display: none; /* Mặc định ẩn */
align-items: center;
gap: 4px;
width: fit-content;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.hp-chat-typing-bubble.active {
display: flex;
animation: hpFadeIn 0.2s ease-out;
}
.hp-dot {
width: 6px;
height: 6px;
background-color: #94a3b8;
border-radius: 50%;
animation: hpBounce 1.4s infinite ease-in-out both;
}
.hp-dot:nth-child(1) { animation-delay: -0.32s; }
.hp-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes hpBounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
/* === [V117] CSS CHO LỊCH TẬP THÔNG MINH (STEP 7) === */
/* 1. Khu vực điều khiển (Control Panel) */
.hp-sgs-controls-container {
background: var(--hp-bg-sub);
padding: 1.25rem;
border-radius: 1rem;
border: 1px solid var(--hp-border);
margin-bottom: 2rem;
}
.hp-sgs-controls-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 cột trên desktop */
gap: 0.75rem 1rem;
align-items: center;
}
@media (max-width: 600px) {
.hp-sgs-controls-grid { grid-template-columns: 1fr; }
}
/* 2. Style cho Checkbox (Công tắc ưu tiên) */
.hp-control-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--hp-text-light);
cursor: pointer;
}
.hp-control-checkbox input[type="checkbox"] {
transform: scale(1.1); /* Checkbox to hơn chút */
accent-color: var(--hp-primary); /* Màu xanh teal */
}
.hp-control-select {
padding: 0.75rem;
border: 1px solid var(--hp-border);
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--hp-primary);
}
/* 3. Thẻ Tư thế (Pose Card) */
.hp-sgs-pose-meta {
flex-wrap: wrap;
gap: 0.5rem 1rem;
}
.hp-sgs-pose-meta span i {
font-size: 0.85rem;
}
.hp-sgs-level-tag {
font-weight: 700;
color: #4338ca; /* Màu tím */
background: #eef2ff;
padding: 0.2rem 0.6rem;
border-radius: 1rem;
font-size: 0.8rem !important;
}
/* 4. Link Video & Bài viết */
.hp-sgs-link-group {
display: flex;
gap: 0.75rem;
padding: 0.5rem 1rem;
border-top: 1px dashed var(--hp-border);
background: #fcfcfc;
border-radius: 0 0 0.75rem 0.75rem;
}
.hp-sgs-link-group a {
font-size: 0.8rem;
font-weight: 600;
color: #475569;
text-decoration: none;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.4rem;
}
.hp-sgs-link-group a:hover {
color: var(--hp-primary);
transform: translateY(-1px);
}
.hp-sgs-video-tag i { color: #ef4444; } /* Icon Youtube đỏ */
.hp-sgs-article-tag i { color: #0f766e; } /* Icon Sách xanh */
/* === [V151] VIDEO MODAL STYLE (CHUYÊN NGHIỆP) === */
.hp-video-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85); /* Nền tối hơn */
z-index: 99999; /* Đè lên tất cả */
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.hp-video-modal.show {
opacity: 1;
pointer-events: auto;
}
.hp-video-box {
width: 100%;
max-width: 900px;
background: #000;
border-radius: 12px;
overflow: hidden;
position: relative;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
aspect-ratio: 16/9; /* Giữ tỉ lệ khung hình chuẩn */
}
.hp-video-close {
position: absolute;
top: -40px;
right: 0;
background: transparent;
color: #fff;
border: none;
font-size: 2rem;
cursor: pointer;
padding: 0.5rem;
line-height: 1;
transition: transform 0.2s;
}
.hp-video-close:hover {
transform: scale(1.2);
color: #ef4444;
}
.hp-video-iframe-wrap {
width: 100%;
height: 100%;
}
.hp-video-iframe-wrap iframe {
width: 100%;
height: 100%;
border: none;
}
/* Nút xem video trong thẻ bài tập */
.hp-sgs-video-btn {
background: transparent;
border: 1px solid #ef4444;
color: #ef4444;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s;
width: 100%;
justify-content: center;
}
.hp-sgs-video-btn:hover {
background: #ef4444;
color: #fff;
}
/* =========================================
[V156] TÂN TRANG GIAO DIỆN BÊN TRONG (CHECKLIST)
========================================= */
/* 1. Giao diện Câu hỏi (Biến Radio thành Card) */
.hp-safety-questions-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
.hp-safety-check-item {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
transition: transform 0.2s;
}
.hp-safety-check-item:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}
.hp-safety-check-item label {
font-size: 1.1rem;
color: #1e293b;
margin-bottom: 1.25rem;
line-height: 1.5;
}
/* Danh sách đáp án */
.hp-radio-options-list {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 640px) {
.hp-radio-options-list { grid-template-columns: 1fr 1fr; } /* 2 cột trên desktop */
}
/* Thẻ đáp án (Thay cho dòng radio cũ) */
.hp-radio-label {
display: flex;
align-items: center;
padding: 1rem 1.25rem;
border: 2px solid #f1f5f9;
border-radius: 12px;
background-color: #f8fafc;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
color: #475569;
position: relative;
}
/* Hiệu ứng khi rê chuột */
.hp-radio-label:hover {
border-color: #cbd5e1;
background-color: #fff;
}
/* Hiệu ứng khi ĐƯỢC CHỌN */
.hp-radio-label:has(input:checked) {
border-color: var(--hp-primary);
background-color: var(--hp-primary-light);
color: var(--hp-primary);
font-weight: 700;
box-shadow: 0 4px 12px rgba(13, 148, 136, 0.15);
}
/* Input radio custom */
.hp-radio-label input[type="radio"] {
margin-right: 12px;
width: 1.2em;
height: 1.2em;
accent-color: var(--hp-primary);
}
/* Binary (Có/Không) */
.hp-binary-options {
display: flex;
gap: 1rem;
}
.hp-radio-label-binary {
flex: 1;
text-align: center;
justify-content: center;
padding: 1rem;
border: 2px solid #f1f5f9;
border-radius: 12px;
background: #f8fafc;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
.hp-radio-label-binary:hover { border-color: #cbd5e1; }
.hp-radio-label-binary:has(input:checked) {
background-color: var(--hp-primary);
color: #fff;
border-color: var(--hp-primary);
box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3);
}
/* 2. Giao diện Kết quả / Lời khuyên (Plan Tab) */
.hp-tab-content {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px; /* Bo tròn to hơn */
padding: 1.5rem;
box-shadow: var(--hp-shadow);
margin-top: 1.5rem;
}
.hp-tab-content h4 {
font-size: 1.1rem;
font-weight: 700;
margin: 1.5rem 0 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #f1f5f9;
}
/* Các mục li trong list */
.hp-checklist-item {
background: #fff;
border: 1px solid #e2e8f0;
border-left-width: 5px; /* Viền trái dày */
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
gap: 1rem;
transition: transform 0.2s;
}
.hp-checklist-item:hover {
transform: translateX(5px);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* Icon trong list */
.hp-checklist-item i {
background: #f1f5f9;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
margin-top: -2px;
}
/* Màu sắc theo loại */
/* Cảnh báo (Đỏ) */
.hp-checklist-item.caution {
border-left-color: #ef4444;
background-color: #fef2f2;
}
.hp-checklist-item.caution i {
color: #ef4444;
}
/* Khuyên dùng (Xanh lá) */
.hp-checklist-item.recommend {
border-left-color: #22c55e;
}
.hp-checklist-item.recommend i {
color: #22c55e;
background-color: #dcfce7;
}
/* Bài tập (Teal) */
.hp-checklist-item.focus {
border-left-color: #0d9488;
background-color: #f0fdfa;
}
.hp-checklist-item.focus i {
color: #0d9488;
background-color: #ccfbf1;
}
/* Khác (Xanh dương) */
.hp-checklist-item.prepare {
border-left-color: #3b82f6;
background-color: #eff6ff;
}
.hp-checklist-item.prepare i {
color: #3b82f6;
background-color: #dbeafe;
}
/* Lý do PT (Text nhỏ bên dưới) */
.hp-reason-pt {
margin-top: 0.5rem;
padding: 0.5rem 0.75rem;
background: rgba(255,255,255,0.6);
border-radius: 6px;
font-size: 0.85rem;
color: #64748b;
font-style: italic;
border: 1px dashed #cbd5e1;
}
/* 3. Tab Nav (Thanh chuyển tab) */
.hp-tabs-nav {
background: #f8fafc;
padding: 0.5rem;
border-radius: 50px; /* Viên thuốc dài */
border: 1px solid #e2e8f0;
display: inline-flex; /* Co lại theo nội dung hoặc full */
width: 100%;
gap: 0;
}
.hp-tab-button {
flex: 1;
border-radius: 50px !important;
text-align: center;
padding: 0.75rem 1rem;
border: none !important;
background: transparent !important;
color: #64748b !important;
transition: all 0.3s ease;
}
.hp-tab-button.active {
background: #fff !important;
color: var(--hp-primary) !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
font-weight: 700 !important;
}
/* =========================================
[V157] GIAO DIỆN GOM NHÓM (CONSOLIDATED CARDS)
========================================= */
/* 1. Khung thẻ chung */
.hp-group-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
margin-bottom: 1.5rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
transition: transform 0.2s;
}
.hp-group-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}
/* 2. Header của thẻ */
.hp-group-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid #f1f5f9;
background-color: #fff;
}
.hp-group-icon-box {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.hp-group-heading {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: #1e293b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* 3. Body (Danh sách ý) */
.hp-group-body {
padding: 1rem 1.25rem;
background-color: #fff;
}
.hp-group-row {
display: flex;
gap: 0.75rem;
margin-bottom: 1rem;
}
.hp-group-row:last-child { margin-bottom: 0; }
/* Dấu chấm tròn đầu dòng */
.hp-group-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 8px; /* Căn chỉnh với dòng đầu tiên */
flex-shrink: 0;
background-color: #cbd5e1; /* Màu mặc định */
}
.hp-group-content {
flex: 1;
}
.hp-group-text {
font-size: 0.95rem;
color: #334155;
line-height: 1.6;
}
/* Lý do PT (nhỏ bên dưới) */
.hp-group-reason {
margin-top: 0.4rem;
font-size: 0.85rem;
color: #64748b;
font-style: italic;
background: #f8fafc;
padding: 0.4rem 0.6rem;
border-radius: 6px;
display: inline-block;
}
/* 4. THEME MÀU SẮC CHO TỪNG LOẠI */
/* Cảnh báo (Đỏ) */
.hp-group-card.type-danger { border-left: 4px solid #ef4444; }
.hp-group-card.type-danger .hp-group-icon-box { background: #fef2f2; color: #ef4444; }
.hp-group-card.type-danger .hp-group-heading { color: #b91c1c; }
.hp-group-card.type-danger .hp-group-bullet { background: #fca5a5; }
/* Cẩn trọng (Cam) */
.hp-group-card.type-warning { border-left: 4px solid #f59e0b; }
.hp-group-card.type-warning .hp-group-icon-box { background: #fffbeb; color: #f59e0b; }
.hp-group-card.type-warning .hp-group-heading { color: #b45309; }
.hp-group-card.type-warning .hp-group-bullet { background: #fcd34d; }
/* Nên làm (Xanh lá) */
.hp-group-card.type-success { border-left: 4px solid #22c55e; }
.hp-group-card.type-success .hp-group-icon-box { background: #f0fdf4; color: #22c55e; }
.hp-group-card.type-success .hp-group-heading { color: #15803d; }
.hp-group-card.type-success .hp-group-bullet { background: #86efac; }
/* Bài tập (Teal) */
.hp-group-card.type-primary { border-left: 4px solid #0d9488; }
.hp-group-card.type-primary .hp-group-icon-box { background: #f0fdfa; color: #0d9488; }
.hp-group-card.type-primary .hp-group-heading { color: #0f766e; }
.hp-group-card.type-primary .hp-group-bullet { background: #5eead4; }
/* Thông tin khác (Xanh dương) */
.hp-group-card.type-info { border-left: 4px solid #3b82f6; }
.hp-group-card.type-info .hp-group-icon-box { background: #eff6ff; color: #3b82f6; }
.hp-group-card.type-info .hp-group-heading { color: #1d4ed8; }
.hp-group-card.type-info .hp-group-bullet { background: #93c5fd; }
/* =========================================
[V158] FLATTEN DESIGN (XÓA BỎ HỘP LỒNG HỘP)
========================================= */
/* 1. Biến khung chứa Tab thành trong suốt (Xóa lớp vỏ ngoài cùng) */
.hp-tab-content {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important; /* Quan trọng: Xóa khoảng trắng thừa */
margin-top: 1rem !important;
}
/* 2. Tinh chỉnh Thẻ Gom Nhóm (Card con) để đứng độc lập đẹp hơn */
.hp-group-card {
background: #ffffff;
border: 1px solid #e2e8f0;
/* Viền trái màu đậm (giữ nguyên logic JS thêm class type-...) */
border-left-width: 4px !important;
border-radius: 12px;
margin-bottom: 1rem; /* Khoảng cách giữa các thẻ */
box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* Bóng nhẹ hơn */
}
/* Header của thẻ: Giảm padding để gọn hơn */
.hp-group-header {
padding: 0.8rem 1rem;
border-bottom: 1px dashed #f1f5f9;
background-color: #fff; /* Nền trắng sạch */
}
/* Body của thẻ: Giảm padding */
.hp-group-body {
padding: 1rem;
}
/* Dòng nội dung: Tăng không gian cho chữ */
.hp-group-row {
gap: 0.8rem;
margin-bottom: 0.8rem;
}
/* Lý do PT: Làm gọn lại */
.hp-group-reason {
margin-top: 0.3rem;
padding: 0.5rem 0.8rem;
font-size: 0.85rem;
background-color: #f8fafc;
border-radius: 6px;
border: none; /* Bỏ viền cho thoáng */
color: #64748b;
}
/* Responsive Mobile: Cho thẻ tràn viền nếu màn hình nhỏ */
@media (max-width: 480px) {
.hp-group-card {
border-radius: 8px; /* Bo góc ít hơn trên mobile */
}
.hp-group-body {
padding: 0.8rem; /* Tiết kiệm không gian */
}
}