/* ================================================================ BỆNH VIỆN 199 — SHARED BASE STYLESHEET Tối ưu SEO, UX, Accessibility, Performance ================================================================ */ /* ── Google Fonts loaded in HTML via preconnect ── */ :root { --primary: #06bcb0; --primary-dark: #059A91; --primary-light: #08D4C6; --secondary: #67c63f; --secondary-dark:#5AB038; --bg-alt: #F8FCFC; --bg-page: #f0f2f5; --text-main: #1F2937; --text-secondary:#4B5563; --text-light: #9CA3AF; --border: #E5E7EB; --shadow-sm: 0 1px 3px rgba(6,188,176,.08); --shadow-md: 0 4px 6px rgba(6,188,176,.10); --shadow-lg: 0 10px 15px rgba(6,188,176,.15); --shadow-xl: 0 20px 25px rgba(6,188,176,.15),0 10px 10px rgba(6,188,176,.04); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --transition: all 0.3s ease; } /* ── Reset ── */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { overflow-x:hidden; scroll-behavior:smooth; } body { font-family:'Inter',sans-serif; color:var(--text-main); line-height:1.6; background:var(--bg-page); overflow-x:hidden; width:100%; } h1,h2,h3,h4,h5,h6 { font-family:'Inter',sans-serif; font-weight:700; line-height:1.3; } img { max-width:100%; height:auto; display:block; } a { text-decoration:none; color:inherit; } ul,ol { list-style:none; } button,input,select,textarea { font-family:inherit; } /* ── Skip link (accessibility) ── */ .skip-link { position:absolute; top:-100px; left:20px; background:var(--primary); color:white; padding:8px 16px; border-radius:var(--radius-sm); font-weight:700; font-size:14px; z-index:99999; transition:top 0.3s; } .skip-link:focus { top:20px; } /* ── Page wrapper ── */ .page-wrapper { max-width:1600px; margin:0 auto; background:white; box-shadow:0 0 40px rgba(0,0,0,.08); position:relative; } /* ── Container ── */ .container,.section-content,.news-content,.health-news-content { max-width:1400px; margin:0 auto; padding:0 40px; } /* ══════════════════════════════════════════════════ TOP BAR ══════════════════════════════════════════════════ */ .top-bar { background:var(--primary); color:white; height: 38px; padding: 0; font-size:13px; position: fixed; top: 0; left: 0; right: 0; z-index: 1001; display:flex; align-items:center; } .top-bar-inner { max-width:1600px; margin:0 auto; padding:0 40px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap: nowrap; width: 100%; } .top-bar a { color:white; transition:opacity .2s; } .top-bar a:hover { opacity:.8; } .top-bar-left { display:flex; align-items:center; gap:20px; flex: 1 1 auto; justify-content:flex-start; } .top-bar-right { display:flex; align-items:center; gap:12px; flex: 0 0 auto; margin-left: auto; justify-content:flex-end; } .top-bar-left,.top-bar-right{min-width:0;flex-wrap:nowrap} .lang-btn { cursor:pointer; font-size:18px; line-height:1; transition:transform .2s; border:none; background:none; padding:0; } .lang-btn:hover { transform:scale(1.2); } /* ── Profile Dropdown ── */ .nav-item.has-dropdown { position: relative; } /* Không nền cho trigger profile (chữ trắng trên top-bar teal) */ .top-bar .nav-item.has-dropdown.profile-dropdown, .top-bar .profile-dropdown, .top-bar .profile-link, .top-bar .profile-info, .top-bar .profile-name, .top-bar .profile-hint { background: transparent !important; } .nav-item.has-dropdown .dropdown { position: absolute; /* Dán sát trigger để không có khoảng trống gây mất hover */ top: 100%; right: 0; background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); min-width: 200px; padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; border: 1px solid var(--border); margin-top: 0; } .nav-item.has-dropdown:hover .dropdown, .nav-item.has-dropdown:focus-within .dropdown, .nav-item.has-dropdown.active .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { position: relative; } .dropdown-item a, .dropdown-item button { display: flex; align-items: center; width: 100%; padding: 8px 20px; color: var(--text-main); font-weight: 500; font-size: 14px; transition: all 0.2s ease; border: none; background: none; text-align: left; cursor: pointer; gap: 8px; border-radius: 0; } .dropdown-item a:hover, .dropdown-item button:hover { background: transparent; color: var(--primary); } /* Logout button in dropdown */ .dropdown-item .logout-btn:hover { background: transparent !important; color: #DC2626 !important; } .dropdown-divider { height: 1px; background: var(--border); margin: 8px 16px; } .profile-link .arrow { transition: transform 0.3s ease; font-size: 12px; opacity: 0.9; color: white; } .profile-dropdown:hover .arrow, .profile-dropdown.active .arrow { transform: rotate(180deg); opacity: 1; } /* Enhanced dropdown animations */ .nav-item.has-dropdown .dropdown::before { content: ''; position: absolute; top: -8px; right: 40px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid white; filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1)); z-index: 1; } /* Staggered animation for dropdown items */ .nav-item.has-dropdown:hover .dropdown-item, .nav-item.has-dropdown.active .dropdown-item { animation: slideInFromTop 0.3s ease forwards; } .nav-item.has-dropdown:hover .dropdown-item:nth-child(1), .nav-item.has-dropdown.active .dropdown-item:nth-child(1) { animation-delay: 0.05s; } .nav-item.has-dropdown:hover .dropdown-item:nth-child(2), .nav-item.has-dropdown.active .dropdown-item:nth-child(2) { animation-delay: 0.1s; } .nav-item.has-dropdown:hover .dropdown-item:nth-child(3), .nav-item.has-dropdown.active .dropdown-item:nth-child(3) { animation-delay: 0.15s; } .nav-item.has-dropdown:hover .dropdown-item:nth-child(4), .nav-item.has-dropdown.active .dropdown-item:nth-child(4) { animation-delay: 0.2s; } .nav-item.has-dropdown:hover .dropdown-item:nth-child(5), .nav-item.has-dropdown.active .dropdown-item:nth-child(5) { animation-delay: 0.25s; } .nav-item.has-dropdown:hover .dropdown-item:nth-child(6), .nav-item.has-dropdown.active .dropdown-item:nth-child(6) { animation-delay: 0.3s; } @keyframes slideInFromTop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Profile Avatar & Name Styles */ .profile-dropdown { display: inline-flex; align-items: center; position: relative; } /* Trigger profile dropdown: không nền để chữ trắng rõ trên top-bar teal */ .profile-link { color: white !important; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-sm); transition: opacity 0.2s ease; text-decoration: none; cursor: pointer; background: transparent !important; border: none; box-shadow: none; min-width: 0; max-width: 320px; } .profile-link:hover, .profile-link:focus, .profile-link:focus-visible, .profile-dropdown:hover .profile-link, .profile-dropdown.active .profile-link { background: transparent !important; opacity: 0.95; outline: none; box-shadow: none; } .profile-avatar { position: relative; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.6); transition: border-color 0.2s ease; } .profile-link:hover .profile-avatar { border-color: rgba(255, 255, 255, 0.85); } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); font-size: 12px; font-weight: 700; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .profile-info { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; max-width: 220px; } .profile-name { font-weight: 700; font-size: 12px; color: white !important; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-hint { font-size: 11px; color: rgba(255, 255, 255, 0.9) !important; font-weight: 400; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-bar .profile-hint::before{ content:"·"; margin-right:6px; opacity:.75; } /* Language Section Styling */ #google_translate_element { display: none !important; } .lang-section { display: flex; align-items: center; gap: 8px; position: relative; } .lang-section.active .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-menu { position: absolute; top: 100%; right: 0; background: white; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1001; margin-top: 4px; min-width: 150px; } .lang-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text-main); cursor: pointer; border-radius: var(--radius-sm); transition: all 0.2s ease; font-size: 14px; font-weight: 500; } .lang-option:hover { background: var(--bg-alt); } .lang-option.active { background: var(--primary); color: white; } /* ── Auth Links: text menu, no border, bg on hover, small font ── */ .auth-links { display: inline-flex; align-items: center; gap: 1px; } .auth-link { display: inline-flex; align-items: center; gap: 4px; color: white !important; text-decoration: none; padding: 4px 8px; border-radius: var(--radius-sm); transition: background 0.2s ease; font-weight: 400; font-size: 12px; border: none; background: transparent; } .auth-link:hover, .auth-link:focus { background: rgba(255, 255, 255, 0.18); outline: none; } .auth-link:active { background: rgba(255, 255, 255, 0.12); } .auth-icon { font-size: 12px; } .auth-separator { color: rgba(255, 255, 255, 0.5); font-weight: 300; font-size: 11px; user-select: none; } .top-bar .auth-link { color: white !important; text-decoration: none !important; } .top-bar .auth-link:visited { color: white !important; } /* Responsive for dropdown */ @media (max-width: 768px) { .nav-item.has-dropdown .dropdown { right: -20px; left: auto; min-width: 180px; margin-top: 4px; } .top-bar-left { flex-wrap: nowrap; gap: 10px; } .auth-links { gap: 6px; white-space: nowrap; } .auth-link { font-size: 11px; padding: 2px 6px; } .auth-separator { font-size: 11px; } .top-bar-right { gap: 6px; } .lang-btn { font-size: 16px; } .profile-link { padding: 4px 8px; } .profile-avatar { width: 26px; height: 26px; } .profile-name { font-size: 13px; } .profile-hint { display: none; /* Hide hint on mobile to save space */ } } @media (max-width: 480px) { .top-bar { font-size: 11px; padding: 5px 0; } .top-bar-inner { padding: 0 10px; flex-direction: row; gap: 4px; align-items: center; flex-wrap: nowrap; } .top-bar-left > span:first-child { display: none; } /* ẩn số ĐT ở mobile để tiết kiệm chỗ */ .auth-links { margin-left: 0; flex-direction: row; gap: 4px; align-items: center; white-space: nowrap; } .auth-separator { display: inline; font-size: 10px; } .auth-link { font-size: 10px; padding: 2px 4px; } .top-bar-right { align-self: center; margin-left: auto; gap: 4px; } /* Ẩn cụm chọn ngôn ngữ để dành chỗ cho auth links trên mobile nhỏ */ .lang-section { display: none; } .nav-item.has-dropdown .dropdown { right: 0; min-width: 160px; z-index: 9999; /* Ensure it's on top on mobile */ } .profile-info { display: none; /* Hide name on very small screens, show only avatar */ } .profile-avatar { width: 24px; height: 24px; } .auth-icon { font-size: 11px; } } /* ══════════════════════════════════════════════════ HEADER ══════════════════════════════════════════════════ */ .header { background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-md); position: fixed; top: 38px; left: 0; right: 0; z-index: 1000; transition: background .3s, box-shadow .3s, top .3s; } .header.scrolled { background: rgba(255,255,255,.95); box-shadow: var(--shadow-lg); top: 38px; } .header-spacer { height: 118px; /* top-bar ~38px + header ~80px */ } @media (max-width: 768px) { .top-bar{height:34px} .header { top: 34px; } .header.scrolled { top: 34px; } .header-spacer { height: 100px; } /* top-bar ~34px + header ~66px */ } @media (max-width: 480px) { .top-bar{height:30px} .header { top: 30px; } .header.scrolled { top: 30px; } .header-spacer { height: 90px; } } .header-inner { max-width:1400px; margin:0 auto; padding:16px 40px; display:flex; justify-content:space-between; align-items:center; gap:24px; } @media (max-width: 768px) { .header-inner { padding:10px 16px; gap:12px; } .btn-search-header{ width:38px;height:38px; margin-left:auto; /* đẩy cụm tìm kiếm + menu về bên phải */ } } @media (max-width: 480px) { .header-inner { padding:8px 12px; gap:8px; } .logo-img { height:40px; } .btn-search-header{ width:34px;height:34px; } } /* Logo — chỉ ảnh logo, không text tên/slogan */ .logo { display:flex; align-items:center; flex-shrink:0; } .logo-img { display:block; height:48px; width:auto; max-width:180px; object-fit:contain; } /* ══════════════════════════════════════════════════ NAV — DESKTOP ══════════════════════════════════════════════════ */ .nav { display:flex; gap:4px; align-items:stretch; flex-wrap:nowrap; margin-left:auto; } .nav-item { position:relative; flex-shrink:0; display:flex; align-items:center; } /* Branding block bên trong drawer mobile (không hiển thị trên desktop) */ .nav-brand { display:none; } @media (max-width: 900px) { .nav-brand { display:flex; align-items:center; gap:10px; padding:8px 4px 14px; border-bottom:1px solid var(--border); margin-bottom:8px; } .nav-brand-ico { width:32px; height:32px; border-radius:9px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; box-shadow:var(--shadow-sm); flex-shrink:0; } .nav-brand-name { font-weight:800; font-size:13px; color:var(--text-main); } .nav-brand-sub { font-size:11px; color:var(--text-secondary); } } /* L1 link */ .nav-item > a { color:var(--text-main); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.3px; display:inline-flex; align-items:center; gap:5px; padding:10px 12px; white-space:nowrap; border-radius:9px; transition:background .15s, color .15s; position:relative; } .nav-item > a:hover, .nav-item > a[aria-current="page"] { color:var(--primary); background:#E6F7F6; } /* ── Mega dropdown (2-level nav) ─────────────────────────────────── */ .nav-item.has-mega{ position: relative; } .nav-arrow { transition: transform .2s; flex-shrink: 0; opacity: .6; } .nav-item.has-mega > a { position: relative; } .nav-item.has-mega:hover > a .nav-arrow, .nav-item.has-mega:focus-within > a .nav-arrow { transform: rotate(180deg); opacity: 1; } /* Indicator triangle */ .nav-item.has-mega:hover > a::after, .nav-item.has-mega:focus-within > a::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: white; z-index: 1001; filter: drop-shadow(0 -2px 1px rgba(0,0,0,.06)); } .nav-item.has-mega:hover > a, .nav-item.has-mega:focus-within > a { color: var(--primary); background: #E6F7F6; } /* Mega panel */ .nav-mega { position: absolute; top: calc(100% + 4px); left: 0; transform: translateY(-6px); background: white; border-radius: 14px; box-shadow: 0 12px 48px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); padding: 10px; min-width: 260px; opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 1000; border-top: 3px solid var(--primary); } .nav-item.has-mega:hover .nav-mega, .nav-item.has-mega:focus-within .nav-mega { opacity: 1; visibility: visible; transform: translateY(0); } /* Grid inside mega */ .nav-mega-grid { display: grid; grid-template-columns: 1fr; gap: 2px; } .nav-mega-2col .nav-mega-grid { grid-template-columns: 1fr 1fr; min-width: 520px; } /* Mega item */ .nav-mega-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--text-main); transition: background .15s; white-space: nowrap; } .nav-mega-link:hover { background: #f0fdf9; color: var(--primary); } .nav-mega-link:hover .nav-mega-name { color: var(--primary); } .nav-mega-ico { font-size: 22px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f0fdf9; border-radius: 8px; overflow: hidden; } .nav-mega-ico img { width: 100%; height: 100%; object-fit: contain; display: block; } .nav-mega-text { display: flex; flex-direction: column; gap: 2px; } .nav-mega-name { font-size: 13px; font-weight: 700; color: var(--text-main); line-height: 1.3; transition: color .15s; } .nav-mega-sub { font-size: 11px; color: var(--text-secondary); line-height: 1.3; } /* Mobile: collapse mega into accordion under parent (tap to open) */ @media (max-width: 900px) { .nav-item.has-mega { flex-direction: column; align-items: stretch; } .nav-item.has-mega > a { justify-content: space-between; } .nav-mega { position: static; transform: none; /* On mobile this becomes part of normal flow. Use display none/block to avoid "blank box" spacing when closed. */ display: none; opacity: 1; visibility: visible; box-shadow: none; border-radius: 0; border-top: none; border-left: 3px solid var(--primary); margin: 4px 0 4px 12px; padding: 4px 0; min-width: 0; } .nav-item.has-mega.open-sub .nav-mega { display: block; } .nav-mega-2col .nav-mega-grid { grid-template-columns: 1fr; min-width: 0; } .nav-mega-link { padding: 7px 10px; white-space: normal; } .nav-mega-ico { width: 28px; height: 28px; font-size: 16px; } .nav-mega-name { font-size: 12px; } .nav-mega-sub { font-size: 10px; } .nav-item.has-mega > a::after { display: none; } } /* CTA buttons in header */ .btn-book-header { background:var(--secondary); color:white; padding:10px 22px; border-radius:50px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.3px; transition:var(--transition); flex-shrink:0; white-space:nowrap; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .btn-book-header:hover { background:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-md); } /* Header search icon */ .btn-search-header{ width:44px;height:44px;border-radius:999px; border:2px solid var(--border); background:white; color:var(--text-main); display:inline-flex;align-items:center;justify-content:center; cursor:pointer; transition:.2s; box-shadow:var(--shadow-sm); } .btn-search-header:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)} /* Search overlay (template-like) */ .search-overlay{ position:fixed;inset:0;z-index:1200; background:rgba(15,23,42,.55); backdrop-filter: blur(4px); display:flex;align-items:center;justify-content:center; padding:18px; } .search-close{ position:fixed;top:14px;right:14px; width:44px;height:44px;border-radius:999px; border:2px solid rgba(255,255,255,.25); background:rgba(15,23,42,.35); color:white; font-size:18px; cursor:pointer; } .search-inner{ width:100%; max-width:720px; background:white; border-radius:18px; border:2px solid var(--border); box-shadow:0 24px 90px rgba(0,0,0,.30); padding:18px 18px 16px; } .search-title{margin:0 0 10px;font-size:14px;font-weight:900;color:var(--text-main);letter-spacing:.3px} .search-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap} .search-tab{ border:2px solid var(--border); background:white; color:var(--text-secondary); font-weight:900; font-size:12px; padding:8px 12px; border-radius:999px; cursor:pointer; transition:.2s; } .search-tab.active{border-color:var(--primary);background:#E6F7F6;color:var(--primary)} .search-box{display:flex;gap:10px;align-items:center} .search-box input{ flex:1; border:2px solid var(--border); border-radius:12px; padding:12px 14px; font-size:14px; } .search-box input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(6,188,176,.12)} .search-box button{ width:48px;height:48px;border-radius:14px; border:none; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; font-weight:900; cursor:pointer; box-shadow:0 10px 22px rgba(6,188,176,.22); } .search-hint{margin-top:10px;font-size:12px;color:var(--text-secondary);line-height:1.6} /* Footer: compact channel block */ .footer-channel-compact .footer-counter-row{gap:10px} .footer-channel-compact .footer-counter-box{min-width:0;padding:10px 10px} .footer-channel-compact .footer-counter-value{font-size:16px} /* ══════════════════════════════════════════════════ ĐẶT LỊCH KHÁM (wizard) — bk-*, wizard-* ══════════════════════════════════════════════════ */ .bk-page{background:var(--bg-alt);padding:44px 0 80px} .bk-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start} .wizard{background:white;border-radius:20px;border:2px solid var(--border);overflow:hidden;box-shadow:0 2px 16px rgba(6,188,176,.08)} .wizard-steps{display:flex;padding:20px 22px 0;position:relative;background:white} .wizard-steps::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--border)} .wstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding-bottom:16px;position:relative} .wstep::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;border-radius:2px;transition:.3s;background:transparent} .wstep.active::after,.wstep.done::after{background:var(--primary)} .wstep:not(:first-child)::before{content:'';position:absolute;top:17px;right:50%;width:100%;height:2px;background:var(--border);z-index:0} .wstep.done:not(:first-child)::before{background:var(--secondary)} .wstep-num{width:34px;height:34px;border-radius:50%;border:2px solid var(--border);background:white;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--text-light);z-index:1;position:relative;transition:.3s} .wstep.active .wstep-num{border-color:var(--primary);color:var(--primary);background:#E6F7F6} .wstep.done .wstep-num{border-color:var(--secondary);background:var(--secondary);color:white} .wstep-label{font-size:10.5px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.4px;text-align:center;line-height:1.3} .wstep.active .wstep-label{color:var(--primary)} .wstep.done .wstep-label{color:var(--secondary)} .wpanel{display:none;padding:22px 24px} .wpanel.active{display:block;animation:bkSlideIn .22s ease} @keyframes bkSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .wp-title{font-size:18px;font-weight:900;margin-bottom:4px} .wp-sub{font-size:12.5px;color:var(--text-secondary);margin-bottom:14px;line-height:1.6} /* Compact form controls inside booking wizard (scope only) */ .bk-page .dv-fld{gap:5px;font-size:11.5px} .bk-page .dv-inp{padding:9px 12px;font-size:13px;border-radius:10px} .bk-page select.dv-inp{padding-right:34px} .bk-page .dv-ta{ width:100%; border:2px solid var(--border); border-radius:10px; padding:9px 12px; font-size:13px; font-family:inherit; outline:none; background:white; min-height:92px; resize:vertical; } .bk-page .dv-ta:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(6,188,176,.10)} .bk-page .dv-form-grid2{gap:12px} .spec-search-wrap{position:relative;margin-bottom:12px} .spec-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none} .spec-search{width:100%;padding:10px 12px 10px 34px;border:2px solid var(--border);border-radius:10px;font-size:13px;transition:.2s} .spec-search:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(6,188,176,.1)} /* Default/quick pick specialty (Chưa xác định) */ .spec-skip{ width:100%; border:2px solid var(--border); border-radius:12px; padding:12px 14px; cursor:pointer; transition:.18s; display:flex; gap:12px; align-items:center; background:white; text-align:left; user-select:none; margin-bottom:12px; position:relative; } .spec-skip:hover{border-color:var(--primary);background:#E6F7F6} .spec-skip.sel{border-color:var(--primary);background:#E6F7F6;box-shadow:0 0 0 3px rgba(6,188,176,.15)} .spec-skip-ico{ width:46px;height:46px;border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); display:flex;align-items:center;justify-content:center; font-size:20px;flex-shrink:0;color:white } .spec-skip-badge{ font-size:11px; font-weight:900; background:var(--secondary); color:white; padding:4px 10px; border-radius:999px; flex-shrink:0; } .spec-skip.sel::after{ content:"✓"; position:absolute; right:12px; top:12px; width:22px;height:22px; border-radius:999px; background:var(--primary); color:white; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:12px; } .spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px} .spec-card{border:2px solid var(--border);border-radius:12px;padding:13px 7px;text-align:center;cursor:pointer;transition:.18s;background:white;user-select:none} .spec-card:hover{border-color:var(--primary);background:#E6F7F6} .spec-card.sel{border-color:var(--primary);background:#E6F7F6;box-shadow:0 0 0 3px rgba(6,188,176,.15)} .spec-icon{font-size:25px;margin-bottom:5px} .spec-name{font-size:11px;font-weight:700;color:var(--text-main);line-height:1.3} .spec-card.sel .spec-name{color:var(--primary)} .doc-any{border:2px dashed var(--border);border-radius:12px;padding:13px 16px;cursor:pointer;transition:.2s;display:flex;gap:12px;align-items:center;background:white;margin-bottom:12px} .doc-any:hover,.doc-any.sel{border-color:var(--primary);background:#E6F7F6;border-style:solid} .doc-any-ico{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;color:white} .doc-sep{display:flex;align-items:center;gap:10px;margin:12px 0 10px;color:var(--text-light);font-size:11.5px} .doc-sep-line{flex:1;height:1px;background:var(--border)} .doc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .doc-pick{border:2px solid var(--border);border-radius:12px;padding:13px;cursor:pointer;transition:.18s;display:flex;gap:10px;align-items:flex-start;background:white;text-align:left} .doc-pick:hover{border-color:var(--primary)} .doc-pick.sel{border-color:var(--primary);background:#E6F7F6;box-shadow:0 0 0 3px rgba(6,188,176,.15)} .doc-pick-av{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0} .doc-pick-name{font-size:12.5px;font-weight:800;margin-bottom:2px;line-height:1.3} .doc-pick.sel .doc-pick-name{color:var(--primary)} .doc-pick-sub{font-size:11px;color:var(--text-secondary);margin-bottom:3px;line-height:1.4} .doc-pick-avail{font-size:11px;color:var(--secondary);font-weight:700} .cal-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} .slots-wrap{display:flex;flex-direction:column;gap:10px} .slot-lbl{font-size:10px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px;display:flex;align-items:center;gap:6px} .slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .slot{padding:8px 10px;border-radius:10px;border:1.5px solid var(--border);background:white;font-size:12px;font-weight:900;cursor:pointer;text-align:center;transition:.15s;line-height:1.15} .slot:hover{border-color:var(--primary);color:var(--primary);background:#E6F7F6} .slot.selslot{background:var(--primary);color:white;border-color:var(--primary)} .slot:disabled{opacity:.55;cursor:not-allowed} .slot:disabled:hover{border-color:var(--border);color:inherit;background:white} .info-note{background:#EFF9FF;padding:12px 16px;border-radius:10px;border-left:4px solid #3B82F6;margin-bottom:16px;font-size:12.5px;color:#1E40AF;line-height:1.7} .sum-section{background:var(--bg-alt);border-radius:14px;padding:18px 20px;margin-bottom:16px;border:1.5px solid var(--border)} .sum-section-hd{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--text-light);margin-bottom:12px;display:flex;align-items:center;gap:7px} .sum-row{display:flex;justify-content:space-between;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;gap:10px} .sum-row:last-child{border:none;padding-bottom:0} .sum-lbl{color:var(--text-secondary);display:flex;align-items:center;gap:7px;flex-shrink:0;min-width:110px} .sum-ico{font-size:15px;width:20px;text-align:center} .sum-val{font-weight:700;text-align:right;color:var(--text-main)} .sum-val.accent{color:var(--primary)} .agree-box{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:#E6F7F6;border-radius:12px;border:1.5px solid rgba(6,188,176,.3);margin-bottom:18px} .agree-box input{margin-top:3px;accent-color:var(--primary);width:16px;height:16px;flex-shrink:0;cursor:pointer} .agree-box label{font-size:13px;color:var(--text-secondary);cursor:pointer;line-height:1.6} .btn-wsubmit{background:linear-gradient(135deg,var(--secondary),var(--secondary-dark));color:white;border:none;padding:14px 0;border-radius:12px;font-weight:800;cursor:pointer;font-size:15px;width:100%;margin-bottom:12px;transition:.2s;letter-spacing:.3px} .btn-wsubmit:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(103,198,63,.4)} .wiz-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 30px;background:var(--bg-alt);border-top:2px solid var(--border)} .btn-wprev{background:white;color:var(--text-main);border:2px solid var(--border);padding:10px 22px;border-radius:10px;font-weight:800;cursor:pointer;font-size:13.5px;transition:.2s} .btn-wprev:hover{border-color:var(--primary);color:var(--primary)} .btn-wnext{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border:none;padding:10px 26px;border-radius:10px;font-weight:900;cursor:pointer;font-size:13.5px;display:flex;align-items:center;gap:7px;transition:.2s} .btn-wnext:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(6,188,176,.35)} .sb-card{background:white;border-radius:14px;padding:20px;border:2px solid var(--border);margin-bottom:14px;box-shadow:0 1px 6px rgba(6,188,176,.06)} .sb-hd{font-size:13px;font-weight:900;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--border);display:flex;align-items:center;gap:8px} .sb-row{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--border);font-size:12.5px} .sb-row:last-child{border:none} .sb-ico{font-size:14px;flex-shrink:0;margin-top:1px;width:18px;text-align:center} .sb-lbl{font-size:10px;color:var(--text-light);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px} .sb-val{font-weight:800;color:var(--text-main);line-height:1.4} @media(max-width:1024px){.bk-layout{grid-template-columns:1fr}} @media(max-width:768px){ .spec-grid{grid-template-columns:repeat(3,1fr)} .doc-grid{grid-template-columns:1fr} .cal-wrap{grid-template-columns:1fr} .wpanel{padding:18px 18px} .wiz-nav{padding:13px 18px} } @media(max-width:480px){.spec-grid{grid-template-columns:repeat(2,1fr)}} /* Mobile toggle */ .mobile-toggle { display:none; width:40px; height:40px; background:var(--primary); border-radius:var(--radius-sm); align-items:center; justify-content:center; cursor:pointer; flex-direction:column; gap:5px; border:none; } .mobile-toggle span { width:22px; height:2.5px; background:white; border-radius:2px; transition:var(--transition); display:block; } /* ══════════════════════════════════════════════════ ADMIN LAYOUT ══════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════ ADMIN LAYOUT — adm-* namespace ══════════════════════════════════════════════════ */ :root { --adm-sidebar-w: 240px; --adm-sidebar-w-collapsed: 60px; --adm-sidebar-bg: #0f172a; --adm-sidebar-hover: rgba(148,163,184,.12); --adm-sidebar-active: rgba(6,188,176,.18); --adm-sidebar-active-border: var(--primary); --adm-topbar-h: 56px; } .adm-shell { min-height: 100vh; background: #f1f5f9; } /* ── Sidebar ── */ .adm-sidebar { background: var(--adm-sidebar-bg); color: rgba(255,255,255,.85); display: flex; flex-direction: column; height: 100vh; position: fixed; top: 0; left: 0; overflow: hidden; overflow: hidden; transition: width .25s ease; width: var(--adm-sidebar-w); z-index: 100; } .sidebar-collapsed .adm-sidebar { width: var(--adm-sidebar-w-collapsed); } /* Brand */ .adm-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 14px 14px 10px; border-bottom: 1px solid rgba(255,255,255,.07); cursor: pointer; flex-shrink: 0; overflow: hidden; min-height: var(--adm-topbar-h); } .adm-brand:hover { background: var(--adm-sidebar-hover); } /* Collapsed state: small icon */ .sidebar-collapsed .adm-brand { align-items: center; justify-content: center; padding: 14px 8px; } .adm-logo { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } /* Expanded: full-width logo image */ .adm-brand-logo-full { width: 100%; display: block; } .adm-brand-logo-full img { width: 150px; height: auto; object-fit: contain; display: block; opacity: .9; border-radius: 12px; background: rgba(255, 255, 255, .1); padding: 10px; } .adm-brand-logo-fallback { display: none; font-size: 15px; font-weight: 800; color: white; } .adm-brand-sub { font-size: 10px; opacity: .45; line-height: 1.3; color: rgba(255,255,255,.6); margin-top: 3px; } .adm-brand-text { display: flex; flex-direction: column; gap: 1px; overflow: hidden; } .adm-brand-name { font-size: 13px; font-weight: 800; color: white; line-height: 1.2; } /* Nav container */ .adm-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; } .adm-nav::-webkit-scrollbar { width: 4px; } .adm-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; } /* Direct links */ .adm-link { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; color: rgba(255,255,255,.65); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; transition: background .15s, color .15s; border-left: 2px solid transparent; } .adm-link:hover { background: var(--adm-sidebar-hover); color: white; } .adm-link.active { background: var(--adm-sidebar-active); color: var(--primary-light); border-left-color: var(--adm-sidebar-active-border); font-weight: 700; } .adm-link-ico { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .adm-link-txt { flex: 1; } /* Group */ .adm-group { display: flex; flex-direction: column; gap: 1px; } .adm-group-toggle { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; color: rgba(255,255,255,.65); background: none; border: none; border-left: 2px solid transparent; font-size: 13px; font-weight: 500; cursor: pointer; width: 100%; text-align: left; white-space: nowrap; overflow: hidden; transition: background .15s, color .15s; } .adm-group-toggle:hover { background: var(--adm-sidebar-hover); color: white; } .adm-group-toggle.open { color: white; } .adm-chevron { margin-left: auto; flex-shrink: 0; transition: transform .2s; } .adm-group-toggle.open .adm-chevron { transform: rotate(180deg); } .adm-group-body { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 26px; } .adm-sublink { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 7px; color: rgba(255,255,255,.5); text-decoration: none; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; transition: background .15s, color .15s; border-left: 2px solid transparent; } .adm-sublink:hover { background: var(--adm-sidebar-hover); color: rgba(255,255,255,.85); } .adm-sublink.active { background: var(--adm-sidebar-active); color: var(--primary-light); border-left-color: var(--adm-sidebar-active-border); font-weight: 700; } .adm-sublink-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.3); flex-shrink: 0; } .adm-sublink.active .adm-sublink-dot { background: var(--primary-light); } /* Sidebar footer */ .adm-sidebar-footer { padding: 8px; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; } .adm-footer-link { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; color: rgba(255,255,255,.45); text-decoration: none; font-size: 12px; font-weight: 500; background: none; border: none; cursor: pointer; width: 100%; text-align: left; white-space: nowrap; overflow: hidden; transition: background .15s, color .15s; } .adm-footer-link:hover { background: var(--adm-sidebar-hover); color: rgba(255,255,255,.85); } .adm-logout-btn:hover { background: rgba(239,68,68,.15); color: #fca5a5; } /* ── Main area ── */ .adm-main { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; margin-left: var(--adm-sidebar-w); transition: margin-left .25s ease; } .sidebar-collapsed .adm-main { margin-left: var(--adm-sidebar-w-collapsed); } /* Topbar */ .adm-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: var(--adm-topbar-h); background: white; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; gap: 12px; flex-shrink: 0; } .adm-topbar-left { display: flex; align-items: center; gap: 12px; } .adm-topbar-right { display: flex; align-items: center; gap: 10px; position: relative; } .adm-toggle-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: background .15s, color .15s; flex-shrink: 0; } .adm-toggle-btn:hover { background: var(--bg-alt); color: var(--text-main); } /* Breadcrumb */ .adm-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; } .adm-bc-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; } .adm-bc-link:hover { color: var(--primary); } .adm-bc-sep { color: var(--border); } .adm-bc-current { color: var(--text-main); font-weight: 700; } /* User pill */ .adm-user-pill { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); transition: border-color .15s, box-shadow .15s; user-select: none; } .adm-user-pill:hover { border-color: rgba(6,188,176,.35); box-shadow: 0 0 0 3px rgba(6,188,176,.07); } .adm-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; } .adm-user-meta { display: flex; flex-direction: column; } .adm-user-name { font-size: 12px; font-weight: 700; line-height: 1.25; white-space: nowrap; } .adm-user-role { font-size: 10px; color: var(--primary); font-weight: 600; } /* User dropdown */ .adm-user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 220px; background: white; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); z-index: 200; overflow: hidden; animation: admDropIn .15s ease; } @keyframes admDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .adm-ud-header { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; } .adm-ud-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; } .adm-ud-name { font-size: 13px; font-weight: 700; line-height: 1.25; } .adm-ud-role { font-size: 11px; color: var(--primary); font-weight: 600; } .adm-ud-divider { height: 1px; background: var(--border); } .adm-ud-item { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--text-secondary); text-decoration: none; background: none; border: none; cursor: pointer; width: 100%; text-align: left; transition: background .12s, color .12s; } .adm-ud-item:hover { background: var(--bg-alt); color: var(--text-main); } .adm-ud-logout:hover { background: #fef2f2; color: #dc2626; } /* Content area */ .adm-content { padding: 24px 28px 40px; flex: 1; } /* Page header */ .adm-page { max-width: 1200px; margin: 0 auto; } .adm-page-hd { margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .adm-page-title { font-size: 22px; font-weight: 900; color: var(--text-main); margin: 0 0 4px; } .adm-page-sub { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5; } /* Dashboard stat cards */ .adm-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 28px; } .adm-stat { background: white; border-radius: 14px; padding: 18px 20px; border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 6px; } .adm-stat-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 4px; } .adm-stat-ico.teal { background: #E6F7F6; } .adm-stat-ico.green { background: #F0F9E8; } .adm-stat-ico.amber { background: #FFFBEB; } .adm-stat-ico.blue { background: #EFF6FF; } .adm-stat-num { font-size: 26px; font-weight: 900; color: var(--text-main); line-height: 1; } .adm-stat-lbl { font-size: 12px; color: var(--text-secondary); font-weight: 600; } .adm-stat-trend { font-size: 11px; color: var(--secondary); font-weight: 700; } /* Dashboard module grid */ .adm-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .adm-module { background: white; border-radius: 14px; padding: 18px 18px 20px; border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: box-shadow .18s, border-color .18s, transform .18s; cursor: pointer; } .adm-module:hover { box-shadow: var(--shadow-md); border-color: rgba(6,188,176,.4); transform: translateY(-2px); } .adm-module-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .adm-module-ico.teal { background: linear-gradient(135deg, #E6F7F6, #ccf5f2); } .adm-module-ico.green { background: linear-gradient(135deg, #F0F9E8, #ddf5cc); } .adm-module-ico.amber { background: linear-gradient(135deg, #FFFBEB, #fef3c7); } .adm-module-ico.blue { background: linear-gradient(135deg, #EFF6FF, #dbeafe); } .adm-module-ico.purple { background: linear-gradient(135deg, #F5F3FF, #ede9fe); } .adm-module-ico.rose { background: linear-gradient(135deg, #FFF1F2, #ffe4e6); } .adm-module-name { font-size: 14px; font-weight: 800; color: var(--text-main); line-height: 1.3; } .adm-module-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .adm-module-arrow { margin-top: auto; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--primary); opacity: 0; transition: opacity .15s; } .adm-module:hover .adm-module-arrow { opacity: 1; } /* Table card */ .adm-table-card { background: white; border-radius: 14px; border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; } .adm-table-hd { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .adm-table-hd h3 { font-size: 15px; font-weight: 800; margin: 0; } .adm-table { width: 100%; border-collapse: collapse; font-size: 13px; } .adm-table th { text-align: left; padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); background: var(--bg-alt); border-bottom: 1px solid var(--border); } .adm-table td { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; } .adm-table tr:last-child td { border-bottom: none; } .adm-table tr:hover td { background: #f8fafc; } /* Badges */ .adm-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; } .adm-badge-green { background: #F0F9E8; color: #16a34a; } .adm-badge-teal { background: #E6F7F6; color: var(--primary-dark); } .adm-badge-amber { background: #FFFBEB; color: #d97706; } .adm-badge-red { background: #FEF2F2; color: #dc2626; } .adm-badge-gray { background: #F3F4F6; color: #6B7280; } .adm-badge-blue { background: #EFF6FF; color: #2563EB; } .adm-badge-yellow { background: #FEFCE8; color: #CA8A04; } /* Buttons */ .adm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; text-decoration: none; transition: .15s; } .adm-btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; box-shadow: 0 3px 10px rgba(6,188,176,.28); } .adm-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(6,188,176,.38); color: white; } .adm-btn-outline { background: white; color: var(--primary); border: 1.5px solid var(--primary); } .adm-btn-outline:hover { background: #E6F7F6; } .adm-btn-ghost { background: var(--bg-alt); color: var(--text-secondary); border: 1.5px solid var(--border); } .adm-btn-ghost:hover { background: #e5e7eb; color: var(--text-main); } .adm-btn-danger { background: #FEF2F2; color: #dc2626; border: 1.5px solid #fecaca; } .adm-btn-danger:hover { background: #fca5a5; color: white; } .adm-btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 7px; } .adm-btn-icon { padding: 6px 10px; } .adm-btn-icon svg { width: 14px; height: 14px; flex-shrink: 0; } /* Delete confirm modal */ .adm-confirm-modal { max-width: 400px; } .adm-confirm-modal .adm-modal-body { padding: 20px; } .adm-confirm-icon { width: 48px; height: 48px; border-radius: 50%; background: #FEF2F2; color: #dc2626; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .adm-confirm-icon svg { width: 24px; height: 24px; } .adm-confirm-title { font-size: 16px; font-weight: 800; color: var(--text-main); margin-bottom: 6px; text-align: center; } .adm-confirm-msg { font-size: 13px; color: var(--text-secondary); text-align: center; margin-bottom: 20px; line-height: 1.5; } .adm-confirm-ft { display: flex; justify-content: center; gap: 10px; padding-top: 8px; } /* Table action cell: Sửa/Xóa một dòng */ .adm-action-cell { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; } /* Modal form 2 cột */ .adm-form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* Trang chi tiết bài viết: cột trái 2/3, cột phải 1/3 */ .adm-post-detail-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; } @media (max-width: 900px) { .adm-post-detail-cols { grid-template-columns: 1fr; } } .adm-form-col { display: flex; flex-direction: column; gap: 0; } .adm-form-col .adm-form-row { margin-bottom: 16px; } .adm-form-col .adm-form-row:last-child { margin-bottom: 0; } /* Tiêu đề khối trong form (Thông tin cơ bản / SEO) */ .adm-form-section-title { font-size: 12px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--primary); display: flex; align-items: center; gap: 8px; } .adm-form-section-title svg { width: 16px; height: 16px; color: var(--primary); } .adm-form-section { margin-bottom: 20px; } .adm-form-section:last-child { margin-bottom: 0; } .adm-back-link { display: inline-block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; text-decoration: none; font-weight: 600; } .adm-back-link:hover { color: var(--primary); } /* Filter bar (danh sách bài viết) */ .adm-filter-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding: 16px; } .adm-filter-bar .adm-form-group { margin-bottom: 0; } .adm-filter-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Ảnh thumbnail: hai nút Nhập URL / Tải từ máy */ .adm-thumb-actions { display: flex; gap: 8px; margin-bottom: 10px; } .adm-thumb-actions .adm-btn { flex: 1; justify-content: center; } .adm-thumb-actions .adm-btn.active { background: #E6F7F6; border-color: var(--primary); color: var(--primary); } .adm-input-readonly { background: var(--bg-alt); color: var(--text-secondary); cursor: default; } .adm-content-wide .adm-form-group { min-width: 100%; } .adm-field-hint { display: block; font-size: 11px; color: var(--text-light); margin-top: 4px; } .adm-form-section-tight .adm-form-row { margin-bottom: 12px; } .adm-form-section-tight .adm-form-row:last-child { margin-bottom: 0; } /* Hàng tùy chọn: Trạng thái + Nổi bật + Hiển thị + Sắp xếp — lưới 2 hàng, 4 cột */ .adm-options-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto 88px; grid-template-rows: auto auto; gap: 6px 20px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .adm-options-row .adm-options-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); } .adm-options-row .adm-options-control select, .adm-options-row .adm-options-control input[type="number"] { padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 13px; color: var(--text-main); background: white; width: 100%; min-width: 0; } .adm-options-row .adm-options-control select:focus, .adm-options-row .adm-options-control input[type="number"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(6,188,176,.12); } .adm-options-control-sort input { width: 72px; text-align: left; } .adm-options-control-check { display: flex; align-items: center; } .adm-options-control-check .adm-checkbox-wrap { margin: 0; } @media (max-width: 560px) { .adm-options-row { grid-template-columns: 1fr 1fr; } } /* Image upload (menu form) */ .adm-upload-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 16px; text-align: center; background: var(--bg-alt); cursor: pointer; transition: border-color .2s, background .2s; } .adm-upload-zone:hover { border-color: var(--primary); background: #E6F7F6; } .adm-upload-zone.has-image { padding: 8px; } .adm-upload-preview { max-width: 100%; max-height: 160px; object-fit: contain; border-radius: 8px; display: block; margin: 0 auto 8px; } .adm-upload-actions { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; } /* Upload zone gọn dùng trong form 2 cột (chuyên mục) */ .adm-upload-zone-compact { min-height: 100px; } .adm-upload-zone-compact.has-image .adm-upload-preview { max-height: 120px; } .adm-form-group .adm-input-inline { padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 13px; width: 100%; color: var(--text-main); background: white; } .adm-form-group .adm-input-inline:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(6,188,176,.12); } /* Form elements */ .adm-form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .adm-form-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; } .adm-form-group label { font-size: 12px; font-weight: 700; color: var(--text-secondary); } .adm-form-group input, .adm-form-group select, .adm-form-group textarea { padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 13px; color: var(--text-main); background: white; transition: border-color .15s, box-shadow .15s; width: 100%; } .adm-form-group input:focus, .adm-form-group select:focus, .adm-form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(6,188,176,.12); } /* Nhóm Sắp xếp: căn trái, ô số có bề rộng cố định */ .adm-form-group-sort { flex: 0 0 auto; min-width: 0; width: 88px; } .adm-form-group-sort label { text-align: left; } .adm-form-group-sort input { width: 72px; text-align: left; } /* TinyMCE editor */ .adm-tinymce-wrap { margin-bottom: 16px; min-height: 300px; } .adm-tinymce-textarea { min-height: 200px; width: 100%; padding: 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 13px; } .adm-tinymce-wrap .tox-tinymce { border-radius: 10px; border-color: var(--border); min-height: 300px; } .adm-tinymce-wrap .tox .tox-edit-area__iframe { min-height: 300px; } /* Pagination */ .adm-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border); } .adm-pagination-info { font-size: 13px; color: var(--text-secondary); } .adm-pagination-controls { display: flex; align-items: center; gap: 8px; } .adm-pagination-page { font-size: 13px; color: var(--text-secondary); min-width: 80px; text-align: center; } .adm-pagination-size { display: flex; align-items: center; gap: 6px; font-size: 13px; } .adm-pagination-size select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); } .adm-pg-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--border); background: white; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-secondary); transition: .15s; } .adm-pg-btn:hover { border-color: var(--primary); color: var(--primary); } .adm-pg-btn.active { background: var(--primary); border-color: var(--primary); color: white; } /* Empty state */ .adm-empty { text-align: center; padding: 48px 24px; color: var(--text-secondary); } .adm-empty-ico { font-size: 44px; margin-bottom: 12px; opacity: .5; } .adm-empty-title { font-size: 16px; font-weight: 800; margin-bottom: 6px; color: var(--text-main); } .adm-empty-sub { font-size: 13px; line-height: 1.6; } /* Modal (popup) */ .adm-modal-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(15,23,42,.4); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; } .adm-modal { background: white; border-radius: 14px; box-shadow: var(--shadow-xl); width: 100%; max-width: 560px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; } .adm-modal-wide { max-width: 720px; } .adm-modal-hd { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .adm-modal-hd h3 { font-size: 17px; font-weight: 800; margin: 0; color: var(--text-main); } .adm-modal-close { width: 32px; height: 32px; border: none; border-radius: 8px; background: var(--bg-alt); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; transition: .15s; } .adm-modal-close:hover { background: #e5e7eb; color: var(--text-main); } .adm-modal-body { padding: 20px; overflow-y: auto; flex: 1; } .adm-modal-ft { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; } /* Modal helper classes */ .adm-modal-ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); } .adm-modal-title { font-size: 16px; font-weight: 800; color: var(--text-main); margin: 0 0 2px; } .adm-modal-sub { font-size: 12px; color: var(--text-secondary); margin: 0; } .adm-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; } .adm-large-modal { max-width: 680px; } /* Pagination helper classes */ .adm-page-info { font-size: 13px; color: var(--text-secondary); } .adm-page-size { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); font-size: 13px; } /* ── SearchableSelect component ──────────────────────────────────────────── */ .ss-wrapper { position: relative; width: 100%; } .ss-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: white; cursor: pointer; font-size: 13px; text-align: left; transition: border-color .15s, box-shadow .15s; min-height: 38px; } .ss-trigger:hover { border-color: var(--primary); } .ss-trigger-open { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(6,188,176,.12); } .ss-ph { color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-sel { color: var(--text-main); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .ss-chevron { flex-shrink: 0; color: var(--text-secondary); transition: transform .2s; } .ss-chevron-up { transform: rotate(180deg); } .ss-backdrop { position: fixed; inset: 0; z-index: 999; background: transparent; } .ss-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000; background: white; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); overflow: hidden; min-width: 220px; } .ss-search-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg-alt); } .ss-search-input { flex: 1; border: none; background: transparent; outline: none; font-size: 13px; color: var(--text-main); padding: 0; } .ss-clear-search { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; background: #e5e7eb; border-radius: 50%; cursor: pointer; color: #6b7280; flex-shrink: 0; padding: 0; } .ss-clear-search:hover { background: #d1d5db; } .ss-list { max-height: 240px; overflow-y: auto; padding: 4px; } .ss-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text-main); transition: background .1s; } .ss-item:hover { background: var(--bg-alt); } .ss-item-active { background: rgba(6,188,176,.1); color: var(--primary-dark); font-weight: 600; } .ss-item-ico { font-size: 12px; color: var(--text-secondary); min-width: 16px; text-align: center; } .ss-item-ico-empty { color: var(--text-secondary); } .ss-no-result { padding: 12px 10px; font-size: 12px; color: var(--text-secondary); text-align: center; } .adm-tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .adm-tab { padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; gap: 8px; } .adm-tab svg { width: 16px; height: 16px; flex-shrink: 0; } .adm-tab-icon { font-size: 1em; flex-shrink: 0; margin-right: 4px; } .adm-tab:hover { color: var(--text-main); } .adm-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .adm-input-narrow { max-width: 72px; } .adm-expert-row-compact .adm-form-group { min-width: 0; } /* Ô URL ảnh đại diện (trong cột trái) — tránh lỗi hiển thị */ .adm-expert-url-wrap { width: 100%; max-width: 100%; } .adm-expert-url-wrap input { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; } /* Chuyên khoa & Mô tả lịch khám — cùng độ rộng, rộng hơn để cân đối với các ô số */ .adm-expert-specialty-width { flex: 1 1 180px; min-width: 0; max-width: 280px; } @media (min-width: 900px) { .adm-expert-specialty-width { flex: 1 1 220px; max-width: 320px; } } /* Giới thiệu: full width trong cột phải */ .adm-expert-intro-full { flex: 1 1 100%; min-width: 0; width: 100%; } .adm-expert-intro-textarea { width: 100%; min-height: 80px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; resize: vertical; box-sizing: border-box; } /* Checkbox inline: tránh bể, căn giữa với label */ .adm-checkbox-wrap { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; white-space: nowrap; } .adm-checkbox-wrap input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin: 0; cursor: pointer; accent-color: var(--primary); } .adm-checkbox-wrap span { font-size: 13px; font-weight: 600; color: var(--text-main); } /* Responsive */ /* Admin layout: chờ xác thực */ .adm-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f1f5f9; } .adm-gate-inner { text-align: center; color: var(--text-secondary); font-size: 14px; font-weight: 600; } .adm-gate-spinner { display: block; width: 36px; height: 36px; margin: 0 auto 16px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .75s linear infinite; } @media (max-width: 768px) { .adm-sidebar { transform: translateX(-100%); transition: transform .25s ease; } .adm-shell.sidebar-open .adm-sidebar { transform: translateX(0); width: var(--adm-sidebar-w); } .adm-main { margin-left: 0 !important; } .adm-content { padding: 16px 16px 32px; } .adm-stat-row { grid-template-columns: repeat(2, 1fr); } } /* Legacy aliases — keep for backward compat */ .admin-shell { display: none; } .admin-page { max-width: 1200px; margin: 0 auto; } .admin-page-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; } .admin-page-sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 20px; } .admin-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .admin-card-link { text-decoration: none; } .admin-card { background: white; border-radius: 14px; padding: 16px 16px 18px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 6px; transition: .18s ease; } .admin-card:hover { box-shadow: var(--shadow-md); border-color: rgba(15,118,110,.45); transform: translateY(-1px); } .admin-card-ico { font-size: 22px; } .admin-card-title { font-size: 14px; font-weight: 800; color: var(--text-main); } .admin-card-desc { font-size: 12px; color: var(--text-secondary); } /* ══════════════════════════════════════════════════ ADMIN LOGIN PAGE — adl-* namespace ══════════════════════════════════════════════════ */ .adm-login-body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #0f172a; min-height: 100vh; } .adm-login-wrap { min-height: 100vh; display: flex; align-items: stretch; } .adm-login-shell { display: flex; width: 100%; min-height: 100vh; } /* ── Left panel ── */ .adm-login-left { width: 420px; flex-shrink: 0; background: linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #0f2a2a 100%); color: white; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 40px 36px; } .adm-login-left-inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; gap: 32px; } /* Brand */ .adl-brand { display: flex; align-items: center; gap: 12px; } .adl-logo-wrap { display: flex; align-items: center; text-decoration: none; } .adl-logo-img { width: 200px; border-radius: 12px; object-fit: contain; background: rgba(255,255,255,.1); padding: 10px; } .adl-logo-fallback { display: none; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); align-items: center; justify-content: center; font-weight: 900; font-size: 18px; color: white; } .adl-brand-text { display: flex; flex-direction: column; gap: 1px; } .adl-brand-name { font-size: 15px; font-weight: 800; color: white; line-height: 1.2; } .adl-brand-sub { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.3; } /* Headline */ .adl-headline { display: flex; flex-direction: column; gap: 14px; } .adl-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(6,188,176,.2); border: 1px solid rgba(6,188,176,.35); color: var(--primary-light); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; width: fit-content; text-transform: uppercase; letter-spacing: .5px; } .adl-title { font-size: 36px; font-weight: 900; line-height: 1.1; color: white; margin: 0; background: linear-gradient(135deg, white 40%, rgba(6,188,176,.85)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .adl-sub { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.7; margin: 0; } /* Features */ .adl-features { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; } .adl-feature-item { display: flex; align-items: center; gap: 13px; padding: 12px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; transition: background .15s; } .adl-feature-item:hover { background: rgba(255,255,255,.07); } .adl-feature-ico { font-size: 20px; flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.07); border-radius: 10px; } .adl-feature-name { font-size: 13px; font-weight: 700; color: white; line-height: 1.25; } .adl-feature-desc { font-size: 11.5px; color: rgba(255,255,255,.45); margin-top: 2px; } /* Back link */ .adl-back-link a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.4); text-decoration: none; font-size: 12px; font-weight: 600; transition: color .15s; } .adl-back-link a:hover { color: rgba(255,255,255,.75); } /* Decorative blobs */ .adl-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; filter: blur(50px); } .adl-blob-1 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(6,188,176,.18) 0%, transparent 70%); top: -80px; right: -80px; } .adl-blob-2 { width: 250px; height: 250px; background: radial-gradient(circle, rgba(103,198,63,.10) 0%, transparent 70%); bottom: 60px; left: -60px; } .adl-blob-3 { width: 180px; height: 180px; background: radial-gradient(circle, rgba(6,188,176,.08) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); } /* ── Right panel ── */ .adm-login-right { flex: 1; background: #f8fafc; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; position: relative; } .adm-login-right::before { content: ""; position: absolute; inset: 0; background-image: url("https://axis.benhvien199.vn/assets/326e68a6-3267-4ff0-bf85-54b6fc61df57"); background-size: cover; background-position: center; opacity: .6; pointer-events: none; z-index: 0; } .adl-form-wrap { width: 100%; max-width: 420px; background: white; border-radius: 20px; border: 1.5px solid var(--border); box-shadow: 0 8px 32px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04); padding: 32px 32px 28px; animation: cardIn .4s cubic-bezier(.22,1,.36,1) both; } /* Form header */ .adl-form-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .adl-form-ico { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(6,188,176,.3); } .adl-form-title { font-size: 20px; font-weight: 900; color: var(--text-main); margin: 0 0 2px; } .adl-form-sub { font-size: 12.5px; color: var(--text-secondary); margin: 0; } /* Alert */ .adl-alert { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: 11px; font-size: 13px; line-height: 1.55; margin-bottom: 18px; border: 1.5px solid; } .adl-alert-error { background: #FEF2F2; border-color: #FECACA; color: #991B1B; } .adl-alert-error strong { display: block; font-size: 13px; margin-bottom: 2px; } .adl-alert-warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; } .adl-alert-ico { flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; } /* Fields */ .adl-fld { margin-bottom: 16px; } .adl-fld-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; } .adl-inp-wrap { position: relative; } .adl-inp { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 13.5px; color: var(--text-main); font-family: 'Inter', sans-serif; background: white; outline: none; transition: border-color .15s, box-shadow .15s; } .adl-inp::placeholder { color: var(--text-light); } .adl-inp:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(6,188,176,.12); } .adl-inp.has-error { border-color: #EF4444; } .adl-inp.has-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.10); } .adl-inp-pw { padding-right: 44px; } .adl-eye-btn { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--text-light); transition: color .15s; } .adl-eye-btn:hover { color: var(--primary); } .adl-fld-err { font-size: 11.5px; color: #EF4444; margin-top: 4px; display: block; } /* Submit button */ .adl-submit-btn { width: 100%; padding: 13px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; border: none; border-radius: 11px; font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 800; cursor: pointer; transition: all .18s; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 16px rgba(6,188,176,.32); margin-top: 4px; } .adl-submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6,188,176,.42); } .adl-submit-btn:active:not(:disabled) { transform: translateY(0); } .adl-submit-btn:disabled { opacity: .6; cursor: not-allowed; } .adl-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; display: block; } /* Security note */ .adl-security-note { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: var(--text-light); margin-top: 14px; line-height: 1.6; } .adl-security-note svg { flex-shrink: 0; margin-top: 1px; color: var(--secondary); } .adl-security-note strong { color: var(--text-secondary); font-weight: 700; } /* Divider + links */ .adl-divider { height: 1px; background: var(--border); margin: 20px 0 16px; } .adl-links-row { display: flex; align-items: center; justify-content: space-between; } .adl-text-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: color .15s; } .adl-text-link:hover { color: var(--primary); } /* Right footer */ .adl-right-footer { position: absolute; bottom: 20px; font-size: 11px; color: #94a3b8; text-align: center; } /* Responsive */ @media (max-width: 900px) { .adm-login-left { width: 340px; } .adl-title { font-size: 28px; } } @media (max-width: 680px) { .adm-login-shell { flex-direction: column; } .adm-login-left { width: 100%; padding: 28px 24px 24px; min-height: unset; } .adm-login-left-inner { gap: 20px; } .adl-features { display: none; } .adl-title { font-size: 24px; } .adl-sub { display: none; } .adm-login-right { padding: 28px 16px 60px; justify-content: flex-start; } .adl-form-wrap { padding: 24px 20px 22px; } .adl-right-footer { position: static; margin-top: 24px; } } /* ══════════════════════════════════════════════════ HERO BANNER SLIDER (Trang chủ) ══════════════════════════════════════════════════ */ .hero-slider { position: relative; width: 100%; height: 560px; overflow: hidden; background: #0a2540; } /* Skeleton loading */ .hero-skeleton { width: 100%; height: 560px; background: linear-gradient(90deg, #0d2d4e 25%, #0f3660 50%, #0d2d4e 75%); background-size: 200% 100%; animation: hero-shimmer 1.5s infinite; } @keyframes hero-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* Fallback (no banners) */ .hero-fallback { width: 100%; height: 560px; background: linear-gradient(135deg, #0a3d62 0%, #1a6e45 60%, #0d9488 100%); display: flex; align-items: center; } .hero-fallback-inner { max-width: 1300px; margin: 0 auto; padding: 0 60px; } /* Slide */ .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; } .hero-slide.active { opacity: 1; pointer-events: auto; z-index: 2; } .hero-slide.prev { opacity: 0; z-index: 1; } /* Image */ .hero-slide picture, .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* Gradient overlay for text readability */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to left, rgba(5, 30, 52, .78) 0%, rgba(5, 30, 52, .45) 55%, rgba(5, 30, 52, .05) 100% ); z-index: 1; } /* Inner container — mirrors header max-width/padding */ .hero-inner { position: absolute; inset: 0; z-index: 3; max-width: 1400px; width: 100%; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: flex-end; left: 50%; transform: translateX(-50%); } /* Text content */ .hero-content { max-width: 600px; width: 100%; text-align: left; opacity: 0; transform: translateY(16px); transition: opacity .5s ease .3s, transform .5s ease .3s; } .hero-content.animate-in { opacity: 1; transform: translateY(0); } /* Badge (unused now, kept for fallback) */ .hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(13,148,136,.25); border: 1px solid rgba(13,148,136,.5); color: #5eead4; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 50px; margin-bottom: 14px; letter-spacing: .4px; text-transform: uppercase; backdrop-filter: blur(4px); } .hero-badge-light { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); } /* Title — green teal text với bg mờ */ .hero-title { display: inline-block; font-size: clamp(24px, 3vw, 26px); font-weight: 700; color: #5eead4; line-height: 1.2; margin-bottom: 14px; background: rgba(5, 30, 52, .45); padding: 10px 18px; border-radius: 10px; backdrop-filter: blur(6px); text-align: left; } /* SortTitle — white subtitle below H1 */ .hero-sort-title { font-size: clamp(13px, 1.4vw, 17px); color: rgba(255,255,255,.88); line-height: 1.65; margin: 0 0 24px; font-weight: 500; } /* Sub text (legacy) */ .hero-sub { font-size: 16px; color: rgba(255,255,255,.8); margin-bottom: 28px; line-height: 1.6; } /* CTA button */ .hero-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--secondary, #16a34a); color: white; padding: 14px 32px; border-radius: 40px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; box-shadow: 0 4px 20px rgba(22,163,74,.4); float:right; } .hero-btn:hover { background: var(--primary, #0d9488); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(13,148,136,.45); color: white; } /* Arrow controls */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: background .2s, transform .2s; backdrop-filter: blur(4px); } .hero-arrow:hover { background: rgba(255,255,255,.3); transform: translateY(-50%) scale(1.08); } .hero-prev { left: 20px; } .hero-next { right: 20px; } /* Dot indicators */ .hero-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; transition: all .25s; padding: 0; } .hero-dot.active { width: 28px; border-radius: 4px; background: white; } /* Progress bar */ .hero-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.15); z-index: 10; } .hero-progress-bar { height: 100%; background: var(--primary, #0d9488); width: 0; } .hero-progress-bar.running { animation: hero-progress 5s linear forwards; } @keyframes hero-progress { from { width: 0 } to { width: 100% } } /* ── Mobile ────────────────────────────────────── */ @media (max-width: 768px) { .hero-slider, .hero-skeleton, .hero-fallback { height: 320px; } .hero-inner { padding: 0 20px; align-items: flex-end; padding-bottom: 56px; } .hero-content { max-width: none; text-align: left; } .hero-title { font-size: 20px; margin-bottom: 10px; padding: 8px 12px; text-align: left; border-left-width: 3px; } .hero-sort-title { font-size: 13px; margin-bottom: 16px; } .hero-badge { font-size: 10px; padding: 4px 10px; margin-bottom: 10px; } .hero-btn { padding: 11px 22px; font-size: 13px; } .hero-arrow { width: 36px; height: 36px; } .hero-arrow svg { width: 16px; height: 16px; } .hero-prev { left: 10px; } .hero-next { right: 10px; } .hero-overlay { background: linear-gradient(to bottom, rgba(5,30,52,.1) 0%, rgba(5,30,52,.65) 100%); } } /* ══════════════════════════════════════════════════ CONTACT STRIP (Trang chủ) ══════════════════════════════════════════════════ */ .contact-strip { position: relative; background-image: url('/images/banner_contacttime.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } .contact-strip-overlay { position: absolute; inset: 0; background: rgba(6, 188, 176, 0.82); z-index: 0; } .contact-strip-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 40px; display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; } /* Each info item */ .cstrip-item { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 200px; padding: 26px 28px; text-decoration: none; color: white; border-right: 1px solid rgba(255,255,255,.18); transition: background .18s; } .cstrip-item:last-of-type { border-right: none; } a.cstrip-item:hover { background: rgba(255,255,255,.12); } .cstrip-ico { flex-shrink: 0; width: 52px; height: 52px; background: rgba(255,255,255,.2); border-radius: 14px; display: flex; align-items: center; justify-content: center; } .cstrip-emergency .cstrip-ico { background: rgba(239,68,68,.3); } .cstrip-body { display: flex; flex-direction: column; gap: 3px; } .cstrip-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #fff; opacity: 1; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.25); } .cstrip-value { font-size: 16px; font-weight: 700; line-height: 1.3; color: white; text-decoration: none; } a.cstrip-value:hover { opacity: .85; } /* Nhóm hotline + cấp cứu */ .cstrip-phones .cstrip-body { display: flex; flex-direction: column; gap: 6px; } .cstrip-phone-row { display: flex; flex-direction: column; gap: 1px; } .cstrip-phone-emergency .cstrip-label { color: #fca5a5; opacity: 1; } .cstrip-phone-emergency .cstrip-value { font-size: 15px; } /* CTA button */ .cstrip-cta { display: flex; align-items: center; gap: 8px; align-self: center; flex-shrink: 0; margin: 20px 0 20px 20px; padding: 16px 32px; background: white; color: #0a6e68; border-radius: 50px; font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 16px rgba(0,0,0,.15); } .cstrip-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); color: #0a6e68; } @media (max-width: 900px) { .contact-strip-inner { padding: 0 16px; flex-direction: column; } .cstrip-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.15); padding: 14px 8px; flex: none; } .cstrip-item:last-of-type { border-bottom: none; } .cstrip-cta { margin: 12px 0 16px; align-self: flex-start; } } /* ══════════════════════════════════════════════════ SECTION HEADING (dùng chung cho các section công khai) ══════════════════════════════════════════════════ */ .section-heading { text-align: center; margin-bottom: 40px; } .section-tag { display: inline-block; background: rgba(6,188,176,.12); color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 14px; border-radius: 20px; margin-bottom: 10px; } /* Khi dùng trong .bv-slider-hd thì không cần margin-bottom */ .section-title-inline { margin-bottom: 0; } .section-title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: #0f172a; line-height: 1.25; margin: 0 0 10px; } .section-sub { font-size: 15px; color: #64748b; max-width: 560px; margin: 0 auto; line-height: 1.6; } /* ══════════════════════════════════════════════════ BV SLIDER (Card carousel — Chuyên gia & Dịch vụ) ══════════════════════════════════════════════════ */ /* Header row: heading left + nav right */ .bv-slider-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .bv-slider-hd .section-tag { margin-bottom: 6px; display: block; } .bv-slider-nav-row { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Arrow buttons */ .bv-slider-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #e2e8f0; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #334155; transition: background .2s, border-color .2s, color .2s; flex-shrink: 0; } .bv-slider-btn:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #fff; } .bv-slider-btn:disabled { opacity: .35; cursor: default; } /* "Xem tất cả" small */ .btn-sm { padding: 8px 16px; font-size: 13px; } /* Track wrapper */ .bv-slider { overflow: hidden; } .bv-slider-track { display: flex; gap: 24px; overflow-x: scroll; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; /* prevents card shadow clipping */ } .bv-slider-track::-webkit-scrollbar { display: none; } /* Card widths — 4 per view on desktop */ .bv-slider-track > .expert-card, .bv-slider-track > .fsvc-card { flex: 0 0 calc((100% - 72px) / 4); /* (100% - 3*24px) / 4 */ min-width: 0; } @media (max-width: 1100px) { .bv-slider-track > .expert-card, .bv-slider-track > .fsvc-card { flex: 0 0 calc((100% - 48px) / 3); /* 3 visible */ } } @media (max-width: 768px) { .bv-slider-track { gap: 14px; } .bv-slider-track > .expert-card, .bv-slider-track > .fsvc-card { flex: 0 0 calc((100% - 14px) / 2); /* 2 visible */ } } @media (max-width: 480px) { .bv-slider-track > .expert-card, .bv-slider-track > .fsvc-card { flex: 0 0 calc(100% - 40px); /* 1 + peek next */ } } /* ══════════════════════════════════════════════════ TEMPLATE HOME SLIDERS (Featured + Doctors) ══════════════════════════════════════════════════ */ /* Section header (template) */ .section-header { text-align: center; margin-bottom: 44px; } .section-eyebrow { display: inline-block; color: var(--primary); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; background: rgba(6,188,176,.12); padding: 4px 14px; border-radius: 999px; margin-bottom: 10px; } .section-desc { font-size: 15px; color: #64748b; max-width: 760px; margin: 0 auto; line-height: 1.7; } /* Slider wrapper */ .slider-wrap { position: relative; overflow: hidden; } .slider-track { display: flex; transition: transform .45s ease; will-change: transform; } .slider-track > * { min-width: 100%; } /* Nav arrows */ .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.95); box-shadow: 0 6px 18px rgba(0,0,0,.14); color: var(--primary); font-size: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s, background .2s, opacity .2s; z-index: 2; } .slider-nav:hover:not(:disabled) { background: #fff; transform: translateY(-50%) scale(1.06); } .slider-nav:disabled { opacity: .35; cursor: default; } .slider-nav.prev { left: 10px; } .slider-nav.next { right: 10px; } /* Dots */ .slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; } .slider-dots .dot { width: 10px; height: 10px; border-radius: 999px; border: none; background: rgba(6,188,176,.25); cursor: pointer; transition: width .25s, background .25s; } .slider-dots .dot.active { width: 26px; background: var(--primary); } /* CTA under sliders */ .slider-cta { text-align: center; margin-top: 40px; } .btn-all { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary); color: #fff; padding: 14px 36px; border-radius: 50px; font-weight: 800; text-transform: uppercase; font-size: 14px; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; } .btn-all:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(6,188,176,.25); } /* Featured services (template) */ .featured-services { padding: 40px 0; background: #f8fafc; } .feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; min-width: 100%; padding:5px } .feat-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); transition: transform .35s, box-shadow .35s; display: flex; flex-direction: column; } .feat-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); } .feat-img { height: 200px; background: var(--primary); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 90px; text-decoration: none; color: #fff; } .feat-img img { width: 100%; height: 100%; object-fit: cover; } .feat-badge { position: absolute; top: 14px; left: 14px; background: var(--secondary); color: #fff; padding: 5px 14px; border-radius: 20px; font-size: 10px; font-weight: 900; text-transform: uppercase; } .feat-body { padding: 28px; flex: 1; display: flex; flex-direction: column; } .feat-body h3 { font-size: 19px; font-weight: 600; margin-bottom: 12px; line-height: 1.4; color: #0f172a; } .feat-body p { font-size: 14px; color: #64748b; line-height: 1.7; flex: 1; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .feat-price { color: var(--primary); font-weight: 700; font-size: 18px; margin-bottom: 5px; } .feat-link { color: var(--primary); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: gap .2s; } .feat-link:hover { gap: 10px; } /* Doctors (template) */ .doctors { padding: 60px 0; background: #fff; } .doctors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; min-width: 100%; padding:5px } .doctor-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); display: flex; flex-direction: column; } .doctor-avatar { height: 320px; background: #e2e8f0; overflow: hidden; display: block; position: relative; } .doctor-avatar img { width: 100%; height: 100%; object-fit: cover; } .doctor-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; text-align: center; } .doctor-title { font-size: 12px; font-weight: 900; color: var(--primary-dark); text-transform: uppercase; letter-spacing: .06em; } .doctor-name { font-size: 16px; font-weight: 900; margin: 0; color: #0f172a; } .doctor-spec { font-size: 13px; font-weight: 800; color: var(--primary); margin: 0; } .doctor-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; } .doctor-tag { font-size: 11px; font-weight: 800; background: #E6F7F6; color: var(--primary); padding: 4px 10px; border-radius: 999px; } .btn-book-doctor { margin-top: auto; background: var(--primary); color: #fff; padding: 12px 16px; border-radius: 12px; font-weight: 900; text-align: center; text-decoration: none; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; transition: background .2s, transform .2s; display: inline-block; } .btn-book-doctor:hover { background: var(--primary-dark); transform: translateY(-2px); } .doctor-schedule-line { font-size: 13px; color: var(--text-secondary); margin: 4px 0 10px; } /* ══════════════════════════════════════════════════ EXPERTS (CHUYÊN GIA) — List + Detail (UI mẫu) ══════════════════════════════════════════════════ */ /* List */ .cg-page { background:var(--bg-alt); padding:40px 0 80px; } .cg-layout { display:grid; grid-template-columns:252px 1fr; gap:24px; align-items:start; } .cg-doctors-grid { grid-template-columns: repeat(4, 1fr); } .spec-sidebar { background:white; border-radius:16px; border:2px solid var(--border); overflow:hidden; position:sticky; top:90px; box-shadow:var(--shadow-sm); } .spec-sidebar-hd { padding:14px 18px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; font-weight:800; font-size:13px; display:flex; align-items:center; gap:8px; } .spec-btn { display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:.15s; border:none; background:none; text-align:left; width:100%; border-bottom:1px solid var(--border); } .spec-btn:last-child { border:none; } .spec-btn:hover { background:#E6F7F6; color:var(--primary); } .spec-btn.active { background:linear-gradient(135deg,#E6F7F6,#F0FFF4); color:var(--primary); font-weight:700; border-left:3px solid var(--primary); padding-left:13px; } .spec-btn-ico { font-size:18px; flex-shrink:0; width:24px; text-align:center; } .spec-btn-lbl { flex:1; line-height:1.3; } .spec-btn-count { font-size:11px; font-weight:800; padding:2px 7px; border-radius:10px; background:var(--bg-alt); color:var(--text-light); flex-shrink:0; min-width:26px; text-align:center; } .spec-btn.active .spec-btn-count { background:var(--primary); color:white; } .cg-topbar { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; align-items:center; } .cg-search-wrap { flex:1; min-width:220px; position:relative; } .cg-search-wrap .search-ico { position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:15px; pointer-events:none; } .cg-search { width:100%; padding:10px 14px 10px 36px; border:2px solid var(--border); border-radius:10px; font-size:13px; transition:.2s; } .cg-search:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(6,188,176,.1); } .cg-selects { display:flex; gap:8px; flex-wrap:wrap; } .cg-selects select { padding:9px 12px; border:2px solid var(--border); border-radius:10px; font-size:12px; font-weight:700; background:white; cursor:pointer; transition:.2s; color:var(--text-secondary); min-width:130px; } .cg-selects select:focus { outline:none; border-color:var(--primary); } .view-btns { display:flex; gap:3px; background:var(--bg-alt); border-radius:9px; padding:3px; } .vbtn { width:34px; height:34px; border:none; cursor:pointer; border-radius:7px; font-size:17px; display:flex; align-items:center; justify-content:center; background:none; color:var(--text-light); transition:.15s; } .vbtn.active { background:var(--primary); color:white; box-shadow:0 2px 8px rgba(6,188,176,.3); } .spec-info { background:white; border-radius:14px; border:2px solid var(--border); padding:18px 22px; margin-bottom:18px; display:flex; align-items:center; gap:16px; box-shadow:var(--shadow-sm); } .spec-info-ico { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,#E6F7F6,#F0FFF4); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; border:1.5px solid var(--border); } .spec-info h2 { font-size:18px; font-weight:900; margin-bottom:4px; } .spec-info p { font-size:12.5px; color:var(--text-secondary); line-height:1.6; margin-bottom:8px; } .spec-pills { display:flex; gap:6px; flex-wrap:wrap; } .spec-pill { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; background:#E6F7F6; color:var(--primary); border:1px solid rgba(6,188,176,.2); } .result-meta { font-size:12.5px; color:var(--text-secondary); margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; } .result-meta strong { color:var(--primary); } .doc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .doc-grid.list-view { grid-template-columns:1fr; } .doc-card { background:white; border-radius:16px; border:2px solid var(--border); overflow:hidden; transition:.22s; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); } .doc-card:hover { border-color:var(--primary); box-shadow:var(--shadow-lg); transform:translateY(-4px); } .doc-card-img { height:196px; overflow:hidden; position:relative; background:linear-gradient(135deg,#E6F7F6,#F0FFF4); } .doc-card-img img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .4s; } .doc-card:hover .doc-card-img img { transform:scale(1.05); } .doc-badge { position:absolute; top:10px; right:10px; font-size:11px; font-weight:800; padding:3px 9px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.15); } .doc-badge.gs { background:linear-gradient(135deg,#f59e0b,#d97706); color:white; } .doc-badge.pgs { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; } .doc-badge.ck2 { background:linear-gradient(135deg,var(--secondary),var(--secondary-dark)); color:white; } .doc-avail-dot { position:absolute; bottom:10px; left:10px; display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.92); padding:4px 9px; border-radius:20px; font-size:11px; font-weight:700; color:var(--secondary); backdrop-filter:blur(4px); } .avail-pulse { width:7px; height:7px; border-radius:50%; background:var(--secondary); flex-shrink:0; animation:pulse 2s infinite; } .doc-card-body { padding:16px; flex:1; display:flex; flex-direction:column; } .doc-name { font-size:14px; font-weight:900; line-height:1.3; margin-bottom:3px; } .doc-spec { font-size:12px; color:var(--primary); font-weight:700; margin-bottom:8px; } .doc-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; } .doc-tag { font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:6px; background:var(--bg-alt); color:var(--text-secondary); border:1px solid var(--border); } .doc-avail-txt { font-size:11.5px; color:var(--text-secondary); margin-bottom:13px; flex:1; } .doc-card-ftr { display:flex; gap:7px; } .btn-profile { flex:1; padding:9px 8px; border-radius:9px; border:1.5px solid var(--primary); color:var(--primary); font-weight:700; font-size:12px; cursor:pointer; background:white; transition:.2s; text-align:center; text-decoration:none; } .btn-profile:hover { background:#E6F7F6; } .btn-book { flex:1; padding:9px 8px; border-radius:9px; background:var(--primary); color:white; font-weight:700; font-size:12px; cursor:pointer; border:none; transition:.2s; text-align:center; text-decoration:none; } .btn-book:hover { background:var(--primary-dark); } .doc-card.list-card { flex-direction:row; min-height:unset; } .doc-card.list-card .doc-card-img { width:120px; height:auto; flex-shrink:0; min-height:140px; border-radius:0; } .doc-card.list-card .doc-card-body { padding:14px 18px; } .doc-card.list-card .doc-card-ftr { max-width:240px; } .spec-pills-mobile { display:none; overflow-x:auto; gap:8px; padding:0 0 10px; scrollbar-width:none; margin-bottom:16px; } .spec-pills-mobile::-webkit-scrollbar { display:none; } .sp-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; border:1.5px solid var(--border); background:white; font-size:12px; font-weight:700; cursor:pointer; transition:.15s; white-space:nowrap; flex-shrink:0; } .sp-pill.active { background:var(--primary); color:white; border-color:var(--primary); } .no-result { text-align:center; padding:56px 24px; background:white; border-radius:16px; border:2px solid var(--border); grid-column:1/-1; } .no-result-ico { font-size:52px; margin-bottom:14px; } .pager { display:flex; gap:6px; justify-content:center; margin-top:28px; flex-wrap:wrap; } .pgbtn { min-width:38px; height:38px; border-radius:9px; border:1.5px solid var(--border); background:white; font-weight:700; font-size:13px; cursor:pointer; transition:.15s; display:flex; align-items:center; justify-content:center; padding:0 8px; } .pgbtn:hover { border-color:var(--primary); color:var(--primary); } .pgbtn.active { background:var(--primary); color:white; border-color:var(--primary); } .pgbtn:disabled { opacity:.35; cursor:not-allowed; } @media(max-width:1024px){ .cg-layout { grid-template-columns:1fr; } .spec-sidebar { display:none; } .spec-pills-mobile { display:flex; } .cg-doctors-grid { grid-template-columns:repeat(2,1fr); } } @media(max-width:600px){ .cg-doctors-grid { grid-template-columns:1fr; } } /* Detail */ .doctor-detail{padding:60px 0;background:white} .doctor-detail-grid{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start} .doctor-profile-card{background:var(--bg-alt);border-radius:20px;overflow:hidden;border:2px solid var(--border);position:sticky;top:100px} /* Avatar riêng cho trang chi tiết chuyên gia */ .doctor-profile-avatar{ width:100%; height:320px; background:#e2e8f0; overflow:hidden; display:block; position:relative; } .doctor-profile-avatar img{ width:100%; height:100%; object-fit:cover; } .doctor-profile-avatar::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,40,.55) 0%, transparent 55%); pointer-events:none; } .doctor-info{padding:24px} .doctor-rank{ font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--secondary); margin-bottom:6px; text-align:center; } .doctor-info-name{font-size:22px;font-weight:900;margin-bottom:6px} .doctor-info-title{font-size:22px;font-weight:900;margin-bottom:6px; text-align:center} .doctor-info-spec{color:var(--primary);font-weight:700;font-size:15px;margin-bottom:16px} .doctor-info-stat{display:flex;gap:0;margin-bottom:20px} .pstat{flex:1;text-align:center;padding:16px 8px;border-right:1px solid var(--border)} .pstat:last-child{border-right:none} .pstat-num{font-size:22px;font-weight:900;color:var(--primary)} .pstat-star{margin-left:6px;color:#fbbf24;font-size:18px;line-height:1} .pstat-lbl{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px} .btn-book-big{display:block;background:linear-gradient(135deg,var(--secondary),var(--secondary-dark));color:white;padding:15px;border-radius:12px;font-weight:800;text-align:center;font-size:16px;margin-bottom:12px;transition:all .3s;text-decoration:none; border-color:#606060; cursor:pointer; width:100%;} .btn-book-big:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(103,198,63,.4)} .btn-call{ display:flex; align-items:center; justify-content:center; gap:8px; background:white; color:var(--primary); border:2px solid var(--primary); padding:13px; border-radius:12px; font-weight:700; transition:all .3s; text-decoration:none; width:100%; box-sizing:border-box; } .btn-call:hover{background:var(--primary);color:white} .profile-schedule{margin-top:20px;padding-top:20px;border-top:1px solid var(--border)} .profile-schedule-hd{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);margin-bottom:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px} .profile-schedule-line{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--text-main);margin:0 0 8px} .profile-schedule-line .cg-ico{margin-top:2px;color:var(--primary)} .content-tabs{ display:flex; gap:0; background:white; border-radius:14px; padding:6px; border:2px solid var(--border); margin-bottom:22px; flex-wrap:wrap; } .ctab{ flex:1; min-width:140px; padding:10px 16px; border-radius:10px; font-weight:800; font-size:13px; text-align:center; cursor:pointer; transition:.2s; color:var(--text-secondary); border:none; background:none; text-transform:none; letter-spacing:normal; } .ctab:hover{color:var(--primary);background:#E6F7F6} .ctab.active{background:var(--primary);color:white;box-shadow:0 3px 10px rgba(6,188,176,.3)} .cg-tab-content{padding-bottom:14px} .cg-h2{font-size:24px;font-weight:800;margin:0 0 16px} .cg-h3{font-size:18px;font-weight:800;margin:24px 0 12px} .cg-p{font-size:15px;color:var(--text-secondary);line-height:1.8;margin:0 0 20px} .cg-ul{margin:0;padding-left:20px;color:var(--text-secondary);line-height:1.9} .cg-intro-block{margin-bottom:32px} /* Expert detail: make sections feel "carded" */ .cg-intro-block .dv-box{background:white;border:2px solid var(--border);box-shadow:var(--shadow-sm)} .cg-intro-block .cg-h2{font-size:22px} .cg-intro-block .cg-h3{margin:0 0 12px} .cg-intro-block .dv-box + .dv-box{margin-top:16px} .cg-secbar{ margin:-28px -28px 16px; padding:14px 18px; border-radius:16px 16px 14px 14px; background:linear-gradient(135deg,var(--primary),#059A91); color:white; font-weight:900; font-size:16px; letter-spacing:.2px; box-shadow:0 10px 22px rgba(6,188,176,.22); } .cg-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px} .cg-svc-card{background:white;border-radius:14px;border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-height:0} .cg-svc-img{height:120px;background:#e2e8f0;overflow:hidden} .cg-svc-img img{width:100%;height:100%;object-fit:cover} .cg-svc-body{padding:12px 14px;display:flex;flex-direction:column;gap:4px} .cg-svc-name{font-size:13px;font-weight:800;color:#0f172a;margin:0} .cg-svc-name a{color:inherit;text-decoration:none} .cg-svc-name a:hover{color:var(--primary);text-decoration:underline} .cg-svc-price{font-size:13px;font-weight:700;color:var(--primary);margin:0} @media (max-width: 900px) { .cg-svc-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width: 600px) { .cg-svc-grid{grid-template-columns:1fr} } .cg-review-form{border:1px solid var(--border);border-radius:14px;padding:18px 20px;background:white;max-width:640px} .cg-form-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px} .cg-form-row label{flex:1;font-size:13px;color:var(--text-secondary);display:flex;flex-direction:column;gap:6px} .cg-review-form input, .cg-review-form select, .cg-review-form textarea{ border:2px solid var(--border); border-radius:10px; padding:9px 11px; font-size:13px; font-family:inherit; resize:vertical; } .cg-review-form input:focus, .cg-review-form select:focus, .cg-review-form textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(6,188,176,.12); } .cg-review-list{display:grid;gap:12px;max-width:100%} .cg-review-item{border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,#fff,#fbfdff);padding:14px 16px;box-shadow:var(--shadow-sm)} .cg-review-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px} .cg-review-ident{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0} .cg-review-author{display:flex;align-items:center;gap:8px} .cg-review-phone{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:13px;white-space:nowrap} .cg-ico{display:inline-flex;align-items:center;justify-content:center;color:var(--text-light)} .cg-review-rating{font-weight:900;color:var(--primary);background:#E6F7F6;border:1px solid rgba(6,188,176,.25);padding:4px 10px;border-radius:999px} .cg-review-comment{display:flex;align-items:flex-start;gap:8px;color:var(--text-secondary);font-size:14px;line-height:1.7} .cg-review-pagination{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px} .cg-form-error{margin-top:10px; margin-bottom:10px;padding:10px 12px;border-radius:12px;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.18);color:#b91c1c;font-weight:700;font-size:13px} .cg-form-ok{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(6,188,176,.10);border:1px solid rgba(6,188,176,.20);color:var(--primary);font-weight:800;font-size:13px} .cg-modal-backdrop{ position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:1100; } .cg-modal{ background:white;border-radius:20px;max-width:620px;width:100%;margin:16px;padding:22px 22px 20px;position:relative;box-shadow:0 24px 80px rgba(15,23,42,.35); } .cg-modal-close{ position:absolute;top:10px;right:10px;border:none;background:transparent;font-size:18px;cursor:pointer;color:var(--text-light); } .timeline{position:relative;padding-left:32px} .timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--border)} .tl-item{position:relative;margin-bottom:18px;background:var(--bg-alt);border:1px solid var(--border);border-radius:14px;padding:14px 14px 12px} .tl-dot{position:absolute;left:-28px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--primary);border:3px solid white;box-shadow:0 0 0 2px var(--primary)} .tl-year{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px} .tl-title{font-size:14px;font-weight:900;color:var(--text-main);margin-bottom:2px} .tl-sub{font-size:13px;color:var(--text-secondary)} .faq-list{display:block} details.faq-item{border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden;background:white} details.faq-item summary{list-style:none} details.faq-item summary::-webkit-details-marker{display:none} .faq-q{padding:16px 18px;font-weight:800;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center} .faq-q:hover{background:var(--bg-alt)} .faq-a{padding:0 18px 16px;font-size:14px;color:var(--text-secondary);line-height:1.75} .cg-related{background:var(--bg-alt);padding:72px 0} .cg-related-hd{margin-bottom:44px} .cg-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .cg-related-cta{text-align:center;margin-top:40px} .cg-outline-link{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:700;font-size:15px;border:2px solid var(--primary);padding:12px 30px;border-radius:50px;transition:all .3s;text-decoration:none} .cg-outline-link:hover{background:var(--primary);color:white} @media(max-width:1024px){ .doctor-detail-grid{grid-template-columns:1fr} .doctor-profile-card{position:static} .cg-related-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:600px){ .cg-related-grid{grid-template-columns:1fr} } /* Avatar overlay chips (meta on image) */ .doctor-avatar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,20,40,.55) 0%, transparent 55%); pointer-events: none; } .doctor-avatar-meta { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; } .doctor-chip-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .doctor-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); } .doctor-chip-spec { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doctor-chip-rating { background: rgba(245,158,11,.20); border-color: rgba(245,158,11,.35); } .doctor-chip-stars { color: #fbbf24; letter-spacing: 1px; font-size: 11px; line-height: 1; } @media (max-width: 1024px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } .doctors-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .featured-services, .doctors { padding: 56px 0; } .feat-grid, .doctors-grid { grid-template-columns: 1fr; } .slider-nav { width: 42px; height: 42px; font-size: 24px; } } /* ══════════════════════════════════════════════════ SERVICE GROUPS (Chuyên khoa & Dịch vụ) ══════════════════════════════════════════════════ */ .svc-groups { padding: 64px 0 60px; background: #fff; } .svc-groups-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .svc-groups-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 16px; } @media (max-width: 1100px) { .svc-groups-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .svc-groups { padding: 40px 0 44px; } .svc-groups-inner { padding: 0 16px; } .svc-groups-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } } @media (max-width: 480px) { .svc-groups-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* Card */ .svcg-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px 12px 22px; background: #fff; border: 1px solid #e8f0fe; border-radius: 14px; text-decoration: none; color: #1e293b; transition: border-color .22s, box-shadow .22s, transform .22s; cursor: pointer; } .svcg-card:hover { border-color: var(--primary); box-shadow: 0 6px 24px rgba(6,188,176,.15); transform: translateY(-4px); } /* Icon container */ .svcg-ico { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f0fdfb; overflow: hidden; transition: background .22s; } .svcg-card:hover .svcg-ico { background: rgba(6,188,176,.12); } .svcg-ico img { width: 56px; height: 56px; object-fit: contain; } .svcg-ico svg { color: var(--primary); opacity: .7; } .svcg-emoji { font-size: 44px; line-height: 1; } /* Name */ .svcg-name { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #1e293b; text-align: center; line-height: 1.35; } .svcg-card:hover .svcg-name { color: var(--primary-dark); } /* Skeleton */ .svcg-skeleton { pointer-events: none; } .svcg-skeleton .svcg-ico { background: #e2e8f0; animation: skeletonPulse 1.4s ease-in-out infinite; } /* ══════════════════════════════════════════════════ FEATURED EXPERTS (Đội ngũ chuyên gia) ══════════════════════════════════════════════════ */ .feat-experts { padding: 64px 0 72px; background: linear-gradient(180deg, #f0fdfb 0%, #fff 100%); } .feat-experts-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .expert-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1100px) { .expert-cards-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .feat-experts { padding: 40px 0 48px; } .feat-experts-inner { padding: 0 16px; } .expert-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 480px) { .expert-cards-grid { grid-template-columns: 1fr; } } /* Card */ .expert-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.07); text-decoration: none; color: inherit; transition: transform .22s, box-shadow .22s; } .expert-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(6,188,176,.18); } /* Avatar */ .expert-avatar-wrap { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(160deg, #e0f7f6 0%, #b2ede9 100%); } .expert-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .3s; } .expert-card:hover .expert-avatar-wrap img { transform: scale(1.04); } .expert-avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--primary); opacity: .4; } /* Rating badge */ .expert-rating-badge { position: absolute; bottom: 10px; right: 10px; background: rgba(255,200,0,.92); color: #5a3e00; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 20px; display: flex; align-items: center; gap: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.15); } /* Body */ .expert-card-body { padding: 16px 18px 10px; flex: 1; } .expert-title-tag { font-size: 11px; font-weight: 700; color: var(--primary-dark); background: rgba(6,188,176,.1); display: inline-block; padding: 3px 10px; border-radius: 20px; margin-bottom: 7px; letter-spacing: .02em; } .expert-name { font-size: 16px; font-weight: 800; color: #0f172a; line-height: 1.3; margin: 0 0 8px; } .expert-schedule { font-size: 12px; color: #64748b; display: flex; align-items: flex-start; gap: 5px; line-height: 1.5; margin: 0 0 10px; } .expert-schedule svg { flex-shrink: 0; margin-top: 2px; } .expert-stats { display: flex; gap: 14px; flex-wrap: wrap; } .expert-stat { font-size: 12px; color: #64748b; } .expert-stat strong { color: var(--primary-dark); font-weight: 800; } /* Footer CTA */ .expert-card-footer { padding: 10px 18px 14px; border-top: 1px solid #f1f5f9; } .expert-book-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; background: var(--primary); padding: 7px 16px; border-radius: 8px; transition: background .2s; } .expert-card:hover .expert-book-btn { background: var(--primary-dark); } /* Skeleton */ .expert-card-skeleton { pointer-events: none; } .expert-card-skeleton .expert-avatar-wrap { background: #e2e8f0; animation: skeletonPulse 1.4s ease-in-out infinite; } /* ══════════════════════════════════════════════════ VR360 BANNER ══════════════════════════════════════════════════ */ .vr360-banner { padding: 40px 40px; max-width: 1400px; margin: 0 auto 0; line-height: 0; } .vr360-banner a { display: block; overflow: hidden; border-radius: 14px; } .vr360-banner img { width: 100%; height: auto; display: block; transition: opacity .3s; } .vr360-banner a:hover img { opacity: .88; } @media (max-width: 768px) { .vr360-banner { padding: 0 16px; } } /* ══════════════════════════════════════════════════ FEATURED SERVICES ══════════════════════════════════════════════════ */ .feat-services { padding: 64px 0 72px; background: #f8fafc; } .feat-services-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .feat-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1100px) { .feat-services-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .feat-services { padding: 40px 0 48px; } .feat-services-inner { padding: 0 16px; } .feat-services-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 480px) { .feat-services-grid { grid-template-columns: 1fr; } } /* Card */ .fsvc-card { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.07); text-decoration: none; color: inherit; transition: transform .22s ease, box-shadow .22s ease; } .fsvc-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(6,188,176,.18); } .fsvc-img-wrap { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, #e0f7f6, #b2ede9); display: flex; align-items: center; justify-content: center; } .fsvc-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .fsvc-card:hover .fsvc-img-wrap img { transform: scale(1.05); } .fsvc-icon-default { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--primary); opacity: .6; } .fsvc-body { padding: 16px 18px 8px; flex: 1; } .fsvc-name { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.35; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fsvc-summary { font-size: 13px; color: #64748b; line-height: 1.55; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fsvc-price { display: inline-block; font-size: 13px; font-weight: 700; color: var(--primary); background: rgba(6,188,176,.1); border-radius: 6px; padding: 3px 10px; } .fsvc-footer { padding: 10px 18px 14px; border-top: 1px solid #f1f5f9; margin-top: auto; } .fsvc-link { font-size: 13px; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 4px; } .fsvc-card:hover .fsvc-link { color: var(--primary-dark); } /* Skeleton */ .fsvc-skeleton .fsvc-img-wrap { background: #e2e8f0; } .skeleton-box { animation: skeletonPulse 1.4s ease-in-out infinite; } .skeleton-line { background: #e2e8f0; border-radius: 4px; animation: skeletonPulse 1.4s ease-in-out infinite; } @keyframes skeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* ── Skeleton variants per component ── */ /* Service groups */ .svcg-skl-name { width: 60%; height: 13px; margin: 10px auto 0; } /* Experts */ .expert-skl-title { width: 50%; height: 12px; margin-bottom: 8px; } .expert-skl-name { width: 80%; height: 17px; margin-bottom: 6px; } .expert-skl-schedule { width: 65%; height: 12px; } /* Doctors (template) */ .doctor-skl-tag { width: 90px; height: 22px; display: inline-block; } .doctor-skl-btn { width: 140px; height: 40px; display: inline-block; border-radius: 12px; } /* Featured services */ .fsvc-skl-code { width: 60%; height: 14px; margin-bottom: 8px; } .fsvc-skl-name { width: 90%; height: 16px; margin-bottom: 6px; } .fsvc-skl-price { width: 75%; height: 13px; } /* News */ .news-skl-thumb { width: 80px; height: 60px; border-radius: 8px; flex-shrink: 0; } .news-skl-body { flex: 1; } .news-skl-title { width: 90%; height: 13px; margin-bottom: 6px; } .news-skl-date { width: 60%; height: 11px; } /* CTA "Xem tất cả" */ .feat-services-cta { text-align: center; margin-top: 40px; } .feat-services-empty { text-align: center; color: #94a3b8; padding: 40px 0; } .btn-outline-primary { display: inline-flex; align-items: center; gap: 6px; padding: 12px 28px; border: 2px solid var(--primary); border-radius: 40px; color: var(--primary); font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s, color .2s, transform .2s; } .btn-outline-primary:hover { background: var(--primary); color: #fff; transform: translateY(-2px); } /* ══════════════════════════════════════════════════ NEWS SECTION (Tin tức — 3 tab) ══════════════════════════════════════════════════ */ .news-section { padding: 50px 0 72px; background: rgb(247, 249, 251); background-image: url('/images/bg_news_left.png'), url('/images/bg_news_right.png'); background-repeat: no-repeat, no-repeat; background-position: left center, right center; /* background-size: 420px auto, 420px auto; */} .news-section-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } @media (max-width: 768px) { .news-section { padding: 40px 0 48px; } .news-section-inner { padding: 0 16px; } .news-section { background-size: 240px auto, 240px auto; background-position: left 20%, right 20%; } } /* ══════════════════════════════════════════════════ NEWS LIST PAGE (Tin tức) ═══════════════════════════════════════════════════ */ .news-page { padding: 64px 0; background: var(--bg-alt); } .news-page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: flex-start; } .news-featured-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 320px; text-decoration: none; color: inherit; } .nfc-img { background: url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=800&h=480&fit=crop&auto=format') center/cover; } .nfc-body { padding: 32px 34px; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .nfc-cat { display: inline-block; background: var(--primary); color: #fff; padding: 5px 14px; border-radius: 14px; font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 4px; } .nfc-body h2 { font-size: 22px; font-weight: 900; margin: 0 0 8px; line-height: 1.4; color: var(--text-main); } .nfc-body p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nfc-meta { font-size: 13px; color: var(--text-light); display: flex; gap: 16px; } .news-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; } .news-card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 12px rgba(15,23,42,.06); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; } .news-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(15,23,42,.15); } .news-card-img { position: relative; } .news-card-img img { width: 100%; height: 210px; object-fit: cover; } .news-card-cat { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(15,118,110,.94); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; } .news-card-body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; } .news-card-body h3 { font-size: 15px; font-weight: 800; margin: 0; color: #0f172a; line-height: 1.5; } .news-card-excerpt { font-size: 13px; color: #64748b; margin: 0; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-card-foot { margin-top: 4px; font-size: 12px; color: #94a3b8; display: flex; justify-content: space-between; } @media (max-width: 768px) { .news-card-body h3 { font-size: 14px; } .news-card-excerpt { font-size: 12px; -webkit-line-clamp: 2; } .news-card-foot { font-size: 11px; } } .pagination { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; } .page-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; font-size: 13px; font-weight: 700; color: var(--text-main); text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, color .15s; line-height: 1; padding: 0; flex-shrink: 0; } .page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } .page-btn:hover:not(.active) { border-color: var(--primary); color: var(--primary); } .sidebar-box { background: #fff; border-radius: 16px; padding: 22px 22px 20px; border: 1px solid var(--border); margin-bottom: 20px; } .sidebar-box h3 { font-size: 16px; font-weight: 800; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--border); } .sidebar-news-item { display: flex; gap: 12px; margin-bottom: 14px; cursor: pointer; } .sidebar-news-img { width: 76px; height: 60px; border-radius: 8px; object-fit: cover; background: var(--bg-alt); flex-shrink: 0; } .sidebar-news-item h4 { font-size: 13px; font-weight: 700; line-height: 1.4; margin: 0 0 4px; color: var(--text-main); } .sidebar-news-item span { font-size: 12px; color: var(--text-light); } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag { background: var(--bg-alt); color: var(--text-secondary); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); transition: background .2s ease, color .2s ease, border-color .2s ease; } a.tag { text-decoration: none; display: inline-block; } .tag:hover, a.tag:hover { background: var(--primary); color: #fff; border-color: transparent; } /* Sidebar CTA: Đặt lịch khám ngay (trang tin tức) */ .sidebar-booking-cta { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); padding: 28px 24px; border-radius: 16px; text-align: center; color: #fff; margin-top: 20px; } .sidebar-booking-cta-icon { font-size: 40px; line-height: 1; margin-bottom: 12px; } .sidebar-booking-cta-title { font-size: 18px; font-weight: 800; margin: 0 0 10px; color: #fff; } .sidebar-booking-cta-sub { font-size: 14px; margin: 0 0 20px; opacity: .95; color: rgba(255,255,255,.9); } .sidebar-booking-cta-btn { display: block; background: #fff; color: var(--secondary); padding: 13px 20px; border-radius: 10px; font-weight: 800; font-size: 15px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .sidebar-booking-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); color: var(--secondary-dark); } @media (max-width: 1024px) { .news-page-layout { grid-template-columns: minmax(0,1fr); } .news-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 768px) { .news-featured-card { grid-template-columns: minmax(0,1fr); } .nfc-img { min-height: 220px; } .news-grid-3 { grid-template-columns: minmax(0,1fr); } } /* ══════════════════════════════════════════════════ NEWS DETAIL PAGE ═══════════════════════════════════════════════════ */ .article-shell { padding: 40px 0 72px; background: #fff; } .article-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); gap: 40px; align-items: flex-start; } .main-article { background: transparent; } .article-cat { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); background: rgba(6,188,176,.08); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; } .article-title { font-size: 26px; font-weight: 900; margin: 0 0 12px; line-height: 1.35; color: var(--text-main); } .article-meta { display: flex; flex-wrap: wrap; gap: 12px 18px; font-size: 13px; color: var(--text-light); margin-bottom: 16px; } .article-hero { width: 100%; max-height: 460px; border-radius: 18px; object-fit: cover; margin-bottom: 18px; } .article-body { font-size: 15px; line-height: 1.8; color: var(--text-secondary); display: flex; flex-direction: column; gap: 10px; } .article-lead { font-size: 18px; font-weight: 600; color: var(--text-main); } .article-body h2 { font-size: 20px; font-weight: 800; margin: 18px 0 8px; color: var(--text-main); } .article-body ul { padding-left: 20px; margin: 0 0 8px; } .article-body li { margin-bottom: 4px; } .article-quote { border-left: 4px solid var(--primary); background: #f1f5f9; padding: 12px 16px; border-radius: 10px; margin: 10px 0; font-style: italic; } .article-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: #64748b; } .article-tags { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; } .article-tags-label { font-weight: 700; color: var(--text-main); margin-right: 4px; } .article-tags .tag { text-decoration: none; display: inline-block; } .share-bar { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; } .share-btn { border-radius: 999px; border: 1px solid #cbd5f5; background: #fff; padding: 6px 14px; font-size: 13px; cursor: pointer; } .share-fb { color: #1d4ed8; } .share-zalo { color: #0ea5e9; } .share-copy { color: #0f172a; } .related-section { margin-top: 32px; } .related-section h2 { font-size: 20px; font-weight: 800; margin: 0 0 16px; } .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; } .related-card { text-decoration: none; color: inherit; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(15,23,42,.06); } .related-card img { width: 100%; height: 150px; object-fit: cover; } .related-card h4 { font-size: 14px; font-weight: 700; margin: 8px 10px 2px; color: #0f172a; } .related-date { font-size: 12px; color: var(--text-light); margin: 0 10px 10px; display: block; } .article-author { display: flex; align-items: center; gap: 12px; } .article-author-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; flex-shrink: 0; } .article-author-name { font-weight: 700; color: var(--text-main); } .article-author-role { font-size: 13px; color: var(--text-secondary); } @media (max-width: 1024px) { .article-layout { grid-template-columns: minmax(0,1fr); } .related-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 768px) { .article-shell { padding: 40px 0 56px; } .related-grid { grid-template-columns: minmax(0,1fr); } } /* Tab header (professional, like template) */ .news-tabs-header { display:flex; gap:0; background:white; border-radius:14px; padding:6px; border:2px solid var(--border); margin: 0 auto 22px; flex-wrap:wrap; } .news-tab-btn { flex:1; min-width:140px; position: relative; padding:10px 16px; border-radius:10px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:800; text-transform:none; letter-spacing:normal; color:var(--text-secondary); transition:.2s; white-space:nowrap; } .news-tab-btn:hover { color: var(--primary); background:#E6F7F6; } .news-tab-btn.active { color: white; background: var(--primary); box-shadow: 0 3px 10px rgba(6,188,176,.3); } .news-tab-btn.active::after { content:none; } /* Tab content layout */ .news-layout { display: grid; grid-template-columns: 1.3fr 1.1fr; /* tăng không gian cho 3 tin bên phải */ gap: 26px; align-items: start; } @media (max-width: 1100px) { .news-layout { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .news-layout { grid-template-columns: 1fr; } } /* Featured card */ .news-feat-card { display: block; text-decoration: none; color: inherit; border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 4px 18px rgba(0,0,0,.1); transition: box-shadow .22s, transform .22s; } .news-feat-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.16); transform: translateY(-3px); } .news-feat-img { position: relative; width: 100%; aspect-ratio: 16/9; /* chuẩn banner, tránh méo hình */ overflow: hidden; background: #e0f7f6; } .news-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .news-feat-card:hover .news-feat-img img { transform: scale(1.04); } .news-feat-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--primary); opacity: .4; } .news-feat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,20,40,.75) 0%, transparent 55%); } .news-feat-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 20px 18px; background: linear-gradient(to top, rgb(33 45 74 / 92%), rgb(134 144 167 / 75%)); backdrop-filter: blur(4px); display: flex; flex-direction: column; gap: 8px; } .news-cat-badge { display: inline-flex; align-items: center; align-self: flex-start; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; letter-spacing: .04em; } .news-feat-title { font-size: 18px; font-weight: 800; color: #e5f3ff; line-height: 1.35; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-feat-summary { font-size: 13px; color: rgba(226,232,240,.9); line-height: 1.5; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-feat-date { font-size: 12px; } .news-feat-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 12px; color: rgba(226,232,240,.8); } .news-meta-item { display: inline-flex; align-items: center; gap: 4px; } /* Small list */ .news-small-list { display: flex; flex-direction: column; gap: 18px; } .news-feat-card { height: 100%; } .news-small-item { display: flex; gap: 14px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; border-radius: 16px; } .news-small-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(6,188,176,.28); } .news-small-item:hover .news-small-title { color: var(--primary); } .news-small-img { width: 160px; height: 96px; padding: 1px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: #e0f7f6; } .news-small-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; } .news-small-item:hover .news-small-img img { transform: scale(1.06); } .news-small-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--primary); opacity: .4; } .news-small-body { flex: 1; min-width: 0; } .news-small-title { font-size: 14px; font-weight: 800; color: #1e293b; line-height: 1.4; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; } .news-small-date { display: none; } .news-small-summary { font-size: 12px; color: #64748b; margin: 0 0 4px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-small-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 11px; color: #94a3b8; } /* Skeleton */ .news-skeleton { display: grid; grid-template-columns: 1fr 380px; gap: 24px; } .news-feat-skeleton { aspect-ratio: 16/9; border-radius: 14px; animation: skeletonPulse 1.4s ease-in-out infinite; } .news-list-skeleton { display: flex; flex-direction: column; gap: 16px; } .news-item-skeleton { display: flex; gap: 14px; align-items: flex-start; } .news-empty { text-align: center; color: #94a3b8; padding: 40px 0; } @media (max-width: 768px) { .news-skeleton { grid-template-columns: 1fr; } .news-list-skeleton { display: none; } } /* ══════════════════════════════════════════════════ HEALTH BULLETIN (Bản tin sức khỏe) ══════════════════════════════════════════════════ */ .health-bulletin { padding: 64px 0 72px; background: radial-gradient(900px 340px at 12% 0%, rgba(6,188,176,.10), transparent 60%), radial-gradient(840px 320px at 85% 10%, rgba(37,99,235,.10), transparent 60%), #f9fafb; } .hb-layout { display: grid; /* minmax(0, …) giúp tránh “bể” do nội dung dài gây overflow trong grid */ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr); gap: 28px; align-items: stretch; } .hb-main-card { position: relative; display: block; background: #0b1220; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); text-decoration: none; color: inherit; /* No fixed min-height — grid align-items:stretch makes it match the rail column */ min-height: 220px; transform: translateZ(0); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .hb-main-card, .hb-grid{ /* Cho phép nội dung co lại trong grid (fix overflow chữ/ảnh) */ min-width: 0; } .hb-main-card:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(2,6,23,.16); } .hb-main-card:focus-visible{ outline: 3px solid rgba(6,188,176,.45); outline-offset: 3px; } .hb-main-media{ position: absolute; inset: 0; z-index: 0; } .hb-main-media img{ width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform .35s ease, filter .35s ease; } .hb-main-card:hover .hb-main-media img{ transform: scale(1.04); filter: saturate(1.02) contrast(1.02); } .hb-main-media-placeholder{ width: 100%; height: 100%; background: radial-gradient(540px 260px at 20% 25%, rgba(6,188,176,.22), transparent 60%), radial-gradient(620px 300px at 80% 10%, rgba(37,99,235,.22), transparent 60%), linear-gradient(135deg, rgba(15,23,42,.92), rgba(2,6,23,.92)); } .hb-main-overlay{ position:absolute; inset:0; z-index: 1; pointer-events: none; /* Giữ ảnh nhìn rõ: chỉ làm tối nhẹ toàn ảnh + nhấn mạnh phần đáy cho chữ */ background: linear-gradient(180deg, rgba(2,6,23,.10) 0%, rgba(2,6,23,.20) 52%, rgba(2,6,23,.62) 100%); } .hb-main-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; } .hb-main-body-overlay{ position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 2; max-width: 720px; padding: 18px 22px 18px; /* Chỉ “ăn” khoảng 1/3 chiều cao ảnh */ min-height: clamp(140px, 33%, 190px); /* Panel gradient giúp chữ nổi bật nhưng không che ảnh quá nhiều */ background: linear-gradient(180deg, rgba(2,6,23,0) 0%, rgba(2,6,23,.42) 22%, rgba(2,6,23,.86) 100%); backdrop-filter: blur(2px); } /* General category badge — hero + rail items */ .hb-cat { display: inline-flex; align-items: center; width: fit-content; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #052e2b; background: rgba(240,253,250,.92); border: 1px solid rgba(6,188,176,.16); padding: 4px 10px; border-radius: 999px; } .hb-cat-sm { font-size: 10.5px; padding: 3px 9px; } .hb-main-title { font-size: 20px; font-weight: 800; color: #fff; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .hb-main-summary { font-size: 14px; color: rgba(226,232,240,.92); line-height: 1.7; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hb-meta-row { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: rgba(226,232,240,.82); } .hb-grid { display: grid; /* In the 2-column layout (desktop), this grid lives in the right column. Use a vertical list to avoid cramped 3-up cards. */ grid-template-columns: 1fr; gap: 14px; } .hb-card { text-decoration: none; color: inherit; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: row; align-items: stretch; min-height: 104px; border: 1px solid rgba(15,23,42,.06); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .hb-card:hover{ transform: translateY(-1px); border-color: rgba(6,188,176,.22); box-shadow: 0 14px 30px rgba(2,6,23,.10); } .hb-card:focus-visible{ outline: 3px solid rgba(6,188,176,.35); outline-offset: 3px; } .hb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; } .hb-card:hover .hb-card-img img { transform: scale(1.06); } .hb-card-img { width: 150px; flex: 0 0 150px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hb-card-body { padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; } .hb-card-cat { font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .02em; } .hb-card-title { font-size: 14px; font-weight: 700; color: #0f172a; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .hb-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11px; color: #94a3b8; } /* ── Rail (right column — vertical scan list) ── */ .hb-rail { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .hb-list { display: flex; flex-direction: column; gap: 10px; } .hb-item { display: flex; gap: 12px; align-items: stretch; padding: 10px; background: #fff; border: 1px solid rgba(15,23,42,.06); border-radius: 14px; box-shadow: 0 8px 22px rgba(2,6,23,.06); text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; min-height: 92px; } .hb-item:hover { transform: translateY(-1px); border-color: rgba(6,188,176,.22); box-shadow: 0 14px 30px rgba(2,6,23,.10); } .hb-item:focus-visible { outline: 3px solid rgba(6,188,176,.35); outline-offset: 3px; } .hb-thumb { width: 112px; flex: 0 0 112px; border-radius: 12px; overflow: hidden; background: #eef2f7; border: 1px solid rgba(15,23,42,.06); } .hb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .28s ease; } .hb-item:hover .hb-thumb img { transform: scale(1.06); } .hb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .hb-item-title { margin: 0; font-size: 13.5px; font-weight: 800; line-height: 1.28; color: #0b1220; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .hb-item-meta { display: flex; gap: 4px 10px; flex-wrap: wrap; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; align-items: center; } .hb-item-meta span { display: inline-flex; align-items: center; gap: 5px; } /* ── Health bulletin skeleton ── */ .hb-sk-hero { min-height: 360px; border-radius: 18px; background: #e2e8f0; } .hb-sk-thumb { min-height: 92px; border-radius: 12px; background: #e2e8f0; } .hb-sk-line { height: 12px; border-radius: 8px; background: #e2e8f0; } @media (max-width: 1024px) { .hb-layout { grid-template-columns: 1fr; } /* When layout stacks, show rail items in a 2-column grid */ .hb-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); } /* Legacy grid cards */ .hb-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } .hb-card { flex-direction: column; min-height: 0; } .hb-card-img { width: auto; flex: 0 0 auto; aspect-ratio: 16 / 9; } .hb-card-img img { height: 100%; } .hb-sk-hero { min-height: 300px; } } @media (max-width: 768px) { .health-bulletin { padding: 44px 0 54px; } .hb-main-body-overlay{ max-width: 100%; padding: 16px 16px 16px; min-height: clamp(128px, 36%, 176px); } .hb-grid { grid-template-columns: 1fr; } .hb-main-title { font-size: 18px; } .hb-main-summary { font-size: 13px; -webkit-line-clamp: 4; } .hb-thumb { width: 100px; flex: 0 0 100px; } .hb-item-title { font-size: 13px; } } @media (max-width: 640px) { .hb-list { grid-template-columns: 1fr; } } @media (max-width: 540px) { .hb-sk-hero { min-height: 200px; } } /* ══════════════════════════════════════════════════ CTA BAND + MAIN FOOTER (Trang chủ) ═══════════════════════════════════════════════════ */ .cta-band { /* Nền dùng ảnh experience_mobile.png + phủ màu xanh hiện tại để hài hòa */ background: linear-gradient(135deg, rgba(0, 164, 156, .12), rgba(0, 124, 117, .12)), url("/images/experience_mobile.png") left/cover no-repeat; padding: 64px 0 56px; } .cta-inner { max-width: 640px; /* Căn trái theo lề container (max-width:1400px, padding: 0 40px) */ margin: 0 0 0 max(40px, calc((100% - 1400px) / 2 + 40px)); padding: 0; text-align: left; } .cta-inner h2 { font-size: 24px; font-weight: 800; color: #fff; line-height: 1.3; letter-spacing: .02em; margin-bottom: 10px; } .cta-inner p { font-size: 16px; color: rgba(255,255,255,.9); margin-bottom: 24px; max-width: 520px; } .cta-qr-row { display: flex; align-items: center; gap: 26px; margin-top: 8px; flex-wrap: wrap; } .cta-btns { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; } .cta-btn-w, .cta-btn-t { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 700; border: 1px solid transparent; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } .cta-btn-w { background: #fff; color: var(--secondary); box-shadow: 0 12px 25px rgba(0,0,0,.15); } .cta-btn-t { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); } .cta-btn-w:hover, .cta-btn-t:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(0,0,0,.16); } .cta-app-qr { flex-shrink: 0; } .cta-app-qr img { width: min(260px, 32vw); height: auto; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(0,0,0,.22)); } .cta-actions { flex: 1; min-width: 220px; } .cta-actions-text { font-size: 14px; color: rgba(255,255,255,.9); margin: 0 0 14px; max-width: 420px; } .cta-btns-vertical { flex-direction: column; align-items: flex-start; } .cta-btns-vertical .cta-btn-w, .cta-btns-vertical .cta-btn-t { min-width: 230px; } @media (max-width: 768px) { .cta-band { padding: 40px 0 44px; } .cta-inner { margin: 0; max-width: 520px; padding: 0 20px; } .cta-inner h2 { font-size: 24px; } .cta-inner p { font-size: 14px; } .cta-qr-row { flex-direction: column; align-items: flex-start; gap: 18px; } .cta-btns { justify-content: flex-start; flex-wrap: wrap; } .cta-app-qr img { width: min(240px, 70vw); } } .footer { background-color: var(--primary); background-image: url('/images/footer-bg.png'); background-repeat: no-repeat; background-size: cover; background-position: center; color: rgba(15,23,42,.9); padding: 38px 0 20px; } .footer-grid { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr); gap: 32px; align-items: flex-start; } .footer-brand h3 { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0f172a; margin: 0 0 8px; } .footer-brand p { font-size: 14px; line-height: 1.7; margin: 0 0 10px; color: #0f172a; } .footer-address { font-style: normal; margin: 0 0 16px; } .footer-contact-item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin-bottom: 6px; } .footer-contact-icon { font-size: 16px; } .footer-contact-item a { color: var(--secondary); text-decoration: none; font-weight:bold; } .footer-contact-item a:hover { text-decoration: underline; } .social-links { display: flex; gap: 10px; margin-top: 8px; } .social-btn { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--secondary); color: white; font-size: 14px; text-decoration: none; transition: background .15s ease, transform .15s ease; } .social-btn:hover { background: var(--primary); transform: translateY(-1px); } .footer-section h4 { font-size: 14px; font-weight: 700; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .08em; color: #0f172a; } .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .footer-links a { font-size: 14px; color: #1f2933; text-decoration: none; } .footer-links a:hover { color: var(--primary-dark); } .footer-bottom { max-width: 1400px; margin: 26px auto 0; padding: 10px; background: rgba(255,255,255,.2); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; font-size: 13px; color: #475569; border-radius:10px; } .footer-bottom-links { display: flex; flex-wrap: wrap; gap: 16px; } .footer-bottom-links a { color: #0f766e; text-decoration: none; font-size: 13px; } .footer-bottom-links a:hover { color: #075985; } /* Footer stats & channels */ .footer-channel { display: flex; flex-direction: column; gap: 10px; } .footer-channel-icons { display: flex; gap: 10px; margin-bottom: 4px; } .footer-counter-row { display: flex; flex-wrap: wrap; } .footer-counter-box { min-width: 120px; padding: 6px 10px; border: 1px solid rgba(15,118,110,.3); background: rgba(15,118,110,.06); display: flex; flex-direction: column; align-items: center; justify-content: center; } .footer-counter-online { background: var(--secondary); border-color: var(--secondary); } .footer-counter-online .footer-counter-label, .footer-counter-online .footer-counter-value { color: #fff; } .footer-counter-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #e5f3f3; } .footer-counter-value { font-size: 16px; font-weight: 800; color: #0f172a; } .footer-counter-total { background: rgba(255,255,255,.9); } .footer-counter-total .footer-counter-label { color: #0f766e; } .footer-counter-total .footer-counter-value { color: #0f172a; } .footer-dmca { margin-top: 6px; } .footer-dmca img { max-width: 120px; height: auto; display: block; } @media (max-width: 900px) { .footer-grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); } } @media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; padding: 0 20px; } .footer-bottom { padding: 14px 20px 0; flex-direction: column; align-items: flex-start; } } /* ══════════════════════════════════════════════════ PAGE BANNER (Hồ sơ, lịch sử, lịch hẹn) ══════════════════════════════════════════════════ */ .page-banner { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; padding: 32px 24px; margin-bottom: 0; text-align: center; } .page-banner > .section-content, .page-banner-inner { max-width: 720px; margin: 0 auto; text-align: center; } .page-banner-label { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .95; } .page-banner h1, .page-banner-h1 { font-size: 26px; font-weight: 900; margin: 8px 0 4px; } .page-banner p { margin: 0; opacity: .9; font-size: 14px; } /* Breadcrumb (trang tin tức, dịch vụ...) */ .breadcrumb-wrap { max-width: 1400px; margin: 0 auto; padding: 12px 40px 8px; display: flex; justify-content: left; } /* ══════════════════════════════════════════════════ DỊCH VỤ (LIST + DETAIL) — UI template ══════════════════════════════════════════════════ */ .services-list{padding:64px 0;background:var(--bg-alt)} .services-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .services-empty{display:flex;justify-content:center;padding:22px 0} .services-empty-card{ max-width:720px;width:100%; background:linear-gradient(180deg,#fff,#fbfdff); border:2px solid var(--border); border-radius:20px; box-shadow:var(--shadow-sm); padding:22px 22px 18px; text-align:center; } .services-empty-ico{ width:54px;height:54px;margin:0 auto 10px; display:flex;align-items:center;justify-content:center; border-radius:16px; background:#E6F7F6; border:1px solid rgba(6,188,176,.22); font-size:26px; } .services-empty-title{font-size:18px;font-weight:900;color:var(--text-main);margin-bottom:6px} .services-empty-sub{font-size:14px;line-height:1.7;color:var(--text-secondary);margin-bottom:14px} .services-empty-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .services-empty-btn{ border:2px solid var(--border); background:white; color:var(--text-main); font-weight:800; font-size:13px; padding:10px 14px; border-radius:999px; cursor:pointer; transition:.2s; } .services-empty-btn:hover{border-color:var(--primary);color:var(--primary)} .services-empty-btn-primary{ background:var(--primary); border-color:var(--primary); color:white; } .services-empty-btn-primary:hover{filter:brightness(.98);box-shadow:0 8px 22px rgba(6,188,176,.25)} .svc-card{background:white;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);border:2px solid var(--border);transition:all .3s;display:flex;flex-direction:column} .svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--primary)} .svc-card-img{height:200px;background:var(--primary);position:relative;overflow:hidden} .svc-card-img img{width:100%;height:100%;object-fit:cover} .svc-card-badges{position:absolute;top:12px;left:12px;display:flex;gap:8px;align-items:center} .svc-card-cat{background:var(--secondary);color:white;padding:4px 12px;border-radius:14px;font-size:10px;font-weight:700;text-transform:uppercase} .svc-card-gender{background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.6);color:#0f172a;padding:4px 10px;border-radius:14px;font-size:12px;font-weight:700;display:inline-flex;gap:6px;align-items:center} .svc-g-ico{font-size:13px;line-height:1} .svc-card-body{padding:22px;flex:1;display:flex;flex-direction:column} .svc-card-body h2{font-size:17px;font-weight:800;margin:0 0 10px;color:var(--text-main);line-height:1.4} .svc-card-body h2 a{color:inherit;text-decoration:none} .svc-card-body h2 a:hover{color:var(--primary);text-decoration:underline} .svc-card-body p{font-size:14px;color:var(--text-secondary);line-height:1.6;flex:1;margin:0 0 14px} .svc-card-body p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; max-height:calc(1.6em * 2); } .svc-card-img a{display:block} /* Fallback: show explicit ellipsis when line-clamp unsupported */ @supports not (-webkit-line-clamp: 2) { .svc-card-body p{ display:block; position:relative; max-height:calc(1.6em * 2); overflow:hidden; padding-right:14px; } .svc-card-body p::after{ content:"…"; position:absolute; right:0; bottom:0; color:var(--text-secondary); background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 55%); padding-left:14px; } } .svc-card-foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border)} .svc-price{font-size:18px;font-weight:900;color:var(--secondary)} .svc-link{color:var(--primary);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:5px;transition:gap .2s;text-decoration:none} .svc-link:hover{gap:8px} .dv-detail{padding:56px 0;background:white} .dv-detail-grid{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start} .dv-detail, .dv-detail .section-content, .dv-detail-grid{overflow:visible} .dv-main-img{width:100%;height:440px;border-radius:20px;object-fit:cover;background:var(--bg-alt);margin-bottom:28px;box-shadow:var(--shadow-lg)} .dv-title{font-size:28px;font-weight:900;margin:0 0 16px;line-height:1.25} .dv-price-bar{padding:18px 0;border-top:2px solid var(--border);border-bottom:2px solid var(--border);margin-bottom:24px} .dv-price-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap} .dv-price-left{min-width:240px} .dv-gender-inline{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .dv-price-bottom{margin-top:12px;display:flex;flex-direction:column;gap:6px} .dv-price-label{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:4px} .dv-price{font-size:28px;font-weight:900;color:var(--secondary);font-family:'Montserrat',sans-serif} .dv-price-sep{width:1px;height:40px;background:var(--border)} .dv-reg{font-size:14px;color:var(--text-secondary)} .dv-meta-hd{display:block;font-size:11px;color:var(--text-secondary);font-weight:900; width:100%} .dv-gender-pills{display:flex;gap:10px;flex-wrap:wrap} .dv-gpill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;border:1.5px solid var(--border);background:white;font-weight:800;color:var(--text-main);min-width:96px;justify-content:center;font-size:13px} .dv-gpill.active{border-color:var(--primary);background:#E6F7F6;color:var(--primary)} .dv-tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .dv-tag{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1.5px solid var(--border);background:white;font-weight:800;color:var(--text-main);font-size:13px} .dv-tag-ico{display:inline-flex;align-items:center;justify-content:center;font-size:14px} .dv-tabs{display:flex;gap:0;background:white;border-radius:14px;padding:6px;border:2px solid var(--border);margin-bottom:22px;flex-wrap:wrap} .dv-tab{flex:1;min-width:140px;padding:10px 16px;border-radius:10px;font-weight:800;font-size:13px;text-align:center;cursor:pointer;transition:.2s;color:var(--text-secondary);border:none;background:none} .dv-tab:hover{color:var(--primary);background:#E6F7F6} .dv-tab.active{background:var(--primary);color:white;box-shadow:0 3px 10px rgba(6,188,176,.3)} .dv-tab-panel{display:none} .dv-tab-panel.active{display:block;animation:dvFade .2s ease} @keyframes dvFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} .dv-box{background:var(--bg-alt);padding:28px;border-radius:16px;margin-bottom:22px;border:1px solid var(--border)} .dv-h2{font-size:18px;font-weight:900;margin:0 0 14px} .dv-p{font-size:15px;color:var(--text-secondary);line-height:1.85;margin:0 0 14px} .dv-acc{margin-bottom:16px;border:2px solid var(--border);border-radius:14px;overflow:hidden} .dv-acc-head{padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px;transition:background .2s;background:linear-gradient(135deg,var(--primary),#059A91);color:white} .dv-acc-head-secondary{background:linear-gradient(135deg,var(--secondary),#5AB038)} .dv-acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease;background:white} .dv-acc-body.open{max-height:900px} .dv-check{list-style:none;margin:0;padding:14px 22px} .dv-check li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--text-main)} .dv-check li:last-child{border-bottom:none} .dv-check li::before{content:"✓";color:var(--primary);font-weight:900;font-size:17px;flex-shrink:0;margin-top:1px} .dv-steps{display:flex;flex-direction:column;gap:0} .dv-step{display:flex;gap:16px;align-items:flex-start;position:relative;padding-bottom:24px} .dv-step:last-child{padding-bottom:0} .dv-step:not(:last-child)::before{content:'';position:absolute;left:20px;top:44px;bottom:0;width:2px;background:linear-gradient(var(--primary),var(--secondary))} .dv-step-num{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(6,188,176,.3)} .dv-step-body{flex:1;padding-top:6px} .dv-step-title{font-size:15px;font-weight:900;margin-bottom:5px} .dv-step-desc{font-size:13px;color:var(--text-secondary);line-height:1.7} .dv-step-time{font-size:12px;font-weight:800;color:var(--primary);background:#E6F7F6;padding:3px 10px;border-radius:20px;display:inline-block;margin-top:6px} .dv-faq{display:grid;gap:10px} .dv-faq-item{border:1.5px solid var(--border);border-radius:14px;overflow:hidden;background:white} .dv-faq-q{padding:14px 16px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-weight:800} .dv-faq-a{padding:0 16px 14px;font-size:14px;color:var(--text-secondary);line-height:1.75} .dv-sidebar{position:static;align-self:start} /* booking sidebar (fresh classes — avoid collisions) */ .dv-bk-sticky{ position:sticky; top:100px; align-self:start; height:fit-content; } .dv-bk-card{ background:white; border:2px solid var(--border); border-radius:20px; padding:24px; box-shadow:var(--shadow-md); } .dv-bk-hd{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:2px solid var(--border)} .dv-bk-ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0} .dv-bk-title{font-size:16px;font-weight:900} .dv-bk-svc{margin-top:2px;font-size:12.5px;font-weight:800;color:var(--text-main);line-height:1.35} .dv-bk-sub{font-size:12px;color:var(--text-secondary)} .dv-bk-price{background:linear-gradient(135deg,#E6F7F6,#F0FFF4);border-radius:12px;padding:12px 16px;margin:14px 0 16px;border:1.5px solid rgba(6,188,176,.2)} .dv-bk-price-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .dv-bk-price-top .dv-bk-svc{margin:0;max-width:65%} .dv-bk-price-lbl{font-size:12px;color:var(--text-secondary);font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;margin-top:2px} .dv-bk-price-val{font-size:26px;font-weight:900;color:var(--secondary);text-align:right;line-height:1;margin-top:8px} .dv-bk-form{display:flex;flex-direction:column;gap:12px} .dv-bk-submit{background:var(--primary);color:white;border:none;border-radius:12px;padding:13px 14px;font-weight:900;font-size:14px;cursor:pointer} .dv-bk-submit:disabled{opacity:.55;cursor:not-allowed} .dv-form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .dv-fld{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-secondary);font-weight:700} .dv-fld-lbl{display:inline-flex;align-items:flex-start;gap:6px;flex-wrap:nowrap} .dv-fld .req{color:#EF4444;display:inline;line-height:1} .dv-fld-hd{font-size:12px;color:var(--text-secondary);font-weight:800} .dv-inp{width:100%;border:2px solid var(--border);border-radius:10px;padding:11px 14px;font-size:14px;font-family:inherit;outline:none;background:white} .dv-inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(6,188,176,.10)} .dv-sess{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} .dv-sess-opt{border:2px solid var(--border);border-radius:10px;padding:9px 12px;cursor:pointer;text-align:center;font-size:13px;font-weight:800;transition:.2s;color:var(--text-main);background:white} .dv-sess-opt input{display:none} .dv-sess-opt .dv-sess-sub{display:block;font-size:11px;font-weight:500;color:var(--text-secondary);margin-top:2px} .dv-sess-opt.active{border-color:var(--primary);background:#E6F7F6;color:var(--primary)} .dv-submit{background:var(--primary);color:white;border:none;border-radius:12px;padding:13px 14px;font-weight:900;font-size:14px;cursor:pointer} .dv-submit:disabled{opacity:.55;cursor:not-allowed} .dv-form-error{padding:10px 12px;border-radius:12px;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.18);color:#b91c1c;font-weight:800;font-size:13px} .dv-form-ok{padding:10px 12px;border-radius:12px;background:rgba(6,188,176,.10);border:1px solid rgba(6,188,176,.20);color:var(--primary);font-weight:900;font-size:13px} .dv-form-foot{text-align:center;font-size:11.5px;color:var(--text-light);margin:2px 0 0} .dv-form-foot a{color:var(--primary);text-decoration:none;font-weight:800} @media(max-width:420px){ .dv-form-grid2{grid-template-columns:1fr} .dv-sess{grid-template-columns:1fr} } .dv-contact{background:var(--bg-alt);padding:20px;border-radius:14px;margin-top:18px;border:2px solid var(--border)} .dv-contact-h4{font-size:14px;font-weight:900;margin:0 0 14px} .dv-contact-row{display:flex;align-items:center;gap:10px;margin-bottom:12px} .dv-contact-ico{width:38px;height:38px;background:var(--primary);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:white} .dv-contact-ico-z{background:#0068FF} .dv-contact-lbl{font-size:11px;color:var(--text-secondary)} .dv-contact-val{font-size:16px;font-weight:900;color:var(--primary);text-decoration:none} .dv-hours{background:white;border-radius:10px;padding:12px;border:1px solid var(--border);text-align:center} .dv-hours-lbl{font-size:11px;color:var(--text-secondary);margin-bottom:4px} .dv-hours-val{font-size:13px;font-weight:800} .dv-hours-em{font-size:12px;color:var(--secondary);font-weight:800;margin-top:3px} .dv-related{background:var(--bg-alt);padding:64px 0} .dv-related-title{font-size:28px;font-weight:900;text-align:center;margin:0 0 40px;text-transform:uppercase} .dv-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .dv-rel-card{background:white;border-radius:16px;overflow:hidden;border:2px solid var(--border);transition:all .3s;cursor:pointer;text-decoration:none;color:inherit} .dv-rel-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow-md)} .dv-rel-img{height:175px;object-fit:cover;width:100%;display:block;background:var(--bg-alt)} .dv-rel-body{padding:18px} .dv-rel-body h3{font-size:15px;font-weight:800;margin:0 0 8px;color:var(--text-main)} .dv-rel-price{font-size:18px;font-weight:900;color:var(--secondary)} @media(max-width:1024px){ .services-list-grid{grid-template-columns:repeat(2,1fr)} .dv-detail-grid{grid-template-columns:1fr} .dv-sidebar{position:static} .dv-related-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:768px){ .services-list{padding:40px 0} .services-list-grid{grid-template-columns:1fr;gap:20px} .svc-card-body{padding:18px} .svc-card-body h2{font-size:15px} .svc-card-body p{font-size:13px} .svc-price{font-size:16px} .dv-title{font-size:22px} .dv-main-img{height:280px} .dv-related-grid{grid-template-columns:1fr} } .breadcrumb { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: #64748b; } .breadcrumb a { color: #475569; text-decoration: none; } .breadcrumb a:hover { color: var(--primary); } .breadcrumb-sep { color: #cbd5e1; user-select: none; } .breadcrumb [aria-current="page"] { color: #0f172a; font-weight: 600; } /* Filter bar (tin tức theo chuyên mục) */ .filter-bar { max-width: 1400px; margin: 0 auto; padding: 8px 40px 20px; display: flex; justify-content: center; } .filter-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .dv-srch-wrap{display:flex;flex-direction:column;gap:12px;align-items:center} .dv-srch-bar{ width:min(1180px,100%); display:flex; gap:10px; align-items:center; justify-content:flex-start; flex-wrap:nowrap; } .dv-srch-gender{ display:flex; gap:10px; flex-wrap:nowrap; align-items:center; } .dv-srch-input{ position:relative; flex:1; min-width:360px; height:42px; } .dv-srch-input input{ width:100%; height:42px; border-radius:999px; border:1.5px solid #e2e8f0; padding:0 16px 0 40px; font-size:14px; outline:none; background:white; } .dv-srch-input input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(6,188,176,.10)} .dv-srch-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-light);pointer-events:none} .dv-srch-btn{height:42px;border-radius:999px;border:1.5px solid var(--primary);background:var(--primary);color:white;font-weight:800;padding:0 18px;cursor:pointer;flex:0 0 auto} .dv-srch-btn:hover{filter:brightness(.98)} .dv-srch-more{height:42px;border-radius:999px;border:1.5px solid var(--border);background:white;color:var(--text-main);font-weight:900;padding:0 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto} .dv-srch-more:hover{border-color:var(--primary);color:var(--primary)} .dv-srch-adv{width:min(1180px,100%);background:rgba(6,188,176,.08);border:1.5px solid rgba(6,188,176,.25);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;align-items:flex-start} .dv-srch-adv .dv-filter-row{width:100%;align-items:flex-start} .dv-srch-adv .dv-filter-pills{justify-content:flex-start} .dv-filter-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .dv-filter-row{width:min(1180px,100%);display:flex;flex-direction:column;gap:12px;align-items:center} .dv-filter-block{width:100%;display:flex;flex-direction:column;gap:6px} .dv-tag.active,.dv-gpill.active{border-color:var(--primary);background:#E6F7F6;color:var(--primary)} @media(max-width:1100px){ .dv-srch-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px} .dv-srch-bar::-webkit-scrollbar{height:6px} .dv-srch-bar::-webkit-scrollbar-thumb{background:rgba(148,163,184,.6);border-radius:999px} } .filter-btn { padding: 8px 18px; border-radius: 999px; border: 1.5px solid #e2e8f0; background: #fff; font-size: 14px; font-weight: 600; color: #475569; cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .filter-btn:hover { border-color: var(--primary); color: var(--primary); } .filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* ══════════════════════════════════════════════════ AUTH PAGE (đăng nhập/đăng ký) ══════════════════════════════════════════════════ */ .auth-page { min-height: calc(100vh - 100px); background: var(--bg-alt); display: flex; align-items: center; justify-content: center; padding: 40px 20px; position: relative; overflow: hidden; } .auth-page::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 400px at 20% 30%, rgba(6,188,176,.07) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 80% 70%, rgba(103,198,63,.06) 0%, transparent 70%); pointer-events: none; } .auth-card { width: 100%; max-width: 420px; background: white; border-radius: 20px; border: 1.5px solid var(--border); box-shadow: 0 12px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04); position: relative; z-index: 1; animation: cardIn .4s cubic-bezier(.22,1,.36,1) both; } @keyframes cardIn { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } } .auth-card-hd { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 18px 18px 0 0; padding: 22px 28px 20px; display: flex; align-items: center; gap: 13px; } .auth-card-hd-ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .auth-card-hd-txt strong { display:block; color:white; font-family:'Inter',sans-serif; font-size:15px; font-weight:900; } .auth-card-hd-txt span { font-size:12px; color:rgba(255,255,255,.78); } .auth-card-body { padding: 26px 28px 28px; } .auth-title-block{margin-bottom:20px} .auth-title{font-size:17px;font-weight:900;color:var(--text-main);margin-bottom:3px} .auth-subtitle{font-size:13px;color:var(--text-secondary)} .fld { margin-bottom:14px; } .fld-lbl { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; color:var(--text-main); margin-bottom:5px; } .fld-inp { width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:10px; font-size:13.5px; color:var(--text-main); font-family:'Inter',sans-serif; background:white; outline:none; transition:all .15s; } .fld-inp::placeholder { color:var(--text-light); } .fld-inp:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(6,188,176,.10); } .fld-err { font-size:11px; color:#EF4444; margin-top:3px; } .a-btn { width:100%; padding:12px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; border:none; border-radius:11px; font-family:'Inter',sans-serif; font-size:14px; font-weight:800; cursor:pointer; transition:all .18s; box-shadow:0 4px 14px rgba(6,188,176,.26); display:flex; align-items:center; justify-content:center; gap:8px; } .a-btn:hover { transform:translateY(-2px); box-shadow:0 7px 20px rgba(6,188,176,.36); } .a-btn:active { transform:translateY(0); } .a-btn:disabled { opacity:.6; cursor:not-allowed; transform:none !important; box-shadow:none; } .a-btn .spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,.35); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; display:none; } @keyframes spin { to{transform:rotate(360deg)} } .auth-foot { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); text-align:center; font-size:12.5px; color:var(--text-secondary); } .auth-foot a { color:var(--primary); font-weight:700; text-decoration:none; } .auth-foot a:hover { text-decoration:underline; } /* ── Note / Alert variants ── */ .note { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:10px; border:1px solid var(--border); background:var(--bg-alt); color:var(--text-secondary); margin-bottom:16px; font-size:14px; line-height:1.5; } .note-icon { font-size:16px; flex-shrink:0; margin-top:1px; } .note-error { color:#B91C1C; background:#FEF2F2; border-color:#FECACA; } .note-success { color:#166534; background:#DCFCE7; border-color:#BBF7D0; } .note-warning { color:#92400E; background:#FFFBEB; border-color:#FDE68A; } .note-info { color:#0C4A6E; background:#E0F2FE; border-color:#7DD3FC; } .note-info a { color:var(--primary); font-weight:700; } /* Toast */ .toast-wrap { position:fixed; top:18px; right:18px; display:flex; flex-direction:column; gap:8px; z-index:9999; pointer-events:none; } .toast-item { padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; color: #166534; background: #DCFCE7; border: 1px solid #BBF7D0; box-shadow: 0 4px 12px rgba(0,0,0,.1); transition: opacity 0.3s ease, transform 0.3s ease; } .toast-item.toast-out { opacity: 0; transform: translateX(8px); } .toast-item.toast-error { color: #B91C1C; background: #FEF2F2; border-color: #FECACA; } /* Utilities */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @media(max-width:480px) { .auth-page{padding:22px 12px;align-items:flex-start} .auth-title{font-size:16px} .auth-subtitle{font-size:12.5px} .auth-card-body { padding:20px 18px 22px; } .auth-card-hd { padding:18px 20px 16px; } } @media (max-width: 768px) { .auth-page{padding:28px 16px} .auth-card{max-width:460px} } /* ═══════════════════════════════════════════════════════════════════ CONTACT PAGE — ct-* namespace ═══════════════════════════════════════════════════════════════════ */ .ct-page{padding:60px 0;background:var(--bg-alt)} .ct-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start} .ct-form-card{background:white;border-radius:20px;padding:40px;border:2px solid var(--border);box-shadow:var(--shadow-sm)} .ct-h2{font-size:24px;font-weight:900;margin:0 0 8px} .ct-sub{font-size:15px;color:var(--text-secondary);margin:0 0 28px} .ct-form{display:flex;flex-direction:column;gap:14px} .ct-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ct-fld{display:flex;flex-direction:column;gap:8px} .ct-lbl{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)} .ct-inp,.ct-sel,.ct-ta{border:2px solid var(--border);border-radius:12px;padding:12px 14px;font-size:14px;background:white;outline:none;transition:border-color .15s, box-shadow .15s} .ct-ta{min-height:240px;resize:vertical} .ct-inp:focus,.ct-sel:focus,.ct-ta:focus{border-color:rgba(6,188,176,.55);box-shadow:0 0 0 4px rgba(6,188,176,.12)} .ct-btn{background:var(--primary);color:white;border:none;border-radius:12px;padding:13px 16px;font-weight:900;font-size:14px;cursor:pointer} .ct-btn:disabled{opacity:.6;cursor:not-allowed} .ct-err{padding:10px 12px;border-radius:12px;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.18);color:#b91c1c;font-weight:800;font-size:13px} .ct-ok{padding:10px 12px;border-radius:12px;background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.20);color:#166534;font-weight:800;font-size:13px} .ct-info-card{background:white;border-radius:20px;padding:36px;border:2px solid var(--border);box-shadow:var(--shadow-sm)} .ct-info-h2{font-size:20px;font-weight:900;margin:0 0 24px;padding-bottom:16px;border-bottom:2px solid var(--border)} .ct-item{display:flex;gap:16px;margin-bottom:22px;align-items:flex-start} .ct-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0} .ct-ico-a{background:#E6F7F6} .ct-ico-b{background:#F0F9E8} .ct-k{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-weight:800} .ct-v{font-size:16px;font-weight:800;color:var(--text-main);line-height:1.5} .ct-v a{color:var(--primary);text-decoration:none} .ct-v a:hover{text-decoration:underline} .ct-v-em{color:#ef4444} .ct-map{width:100%;height:300px;border-radius:16px;overflow:hidden;margin-top:20px;border:2px solid var(--border);background:var(--bg-alt)} .ct-map iframe{width:100%;height:100%;display:block} @media(max-width:1024px){.ct-grid{grid-template-columns:1fr}.ct-form-card{padding:28px}.ct-info-card{padding:28px}} @media(max-width:640px){.ct-row2{grid-template-columns:1fr}} /* ═══════════════════════════════════════════════════════════════════ SERVICE BOOKING TICKET MODAL — dv-tk-* namespace ═══════════════════════════════════════════════════════════════════ */ .dv-tk-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:1200;padding:16px} .dv-tk-modal{background:white;border-radius:20px;max-width:720px;width:100%;position:relative;box-shadow:0 28px 100px rgba(15,23,42,.38);border:2px solid rgba(226,232,240,.9);overflow:hidden} .dv-tk-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:none;border-radius:10px;background:#f1f5f9;color:#0f172a;font-weight:900;cursor:pointer} .dv-tk-close:hover{background:#e2e8f0} .dv-tk-hd{display:flex;gap:12px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(14,165,233,.08))} .dv-tk-ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#0ea5e9,#2563eb);display:flex;align-items:center;justify-content:center;color:white;font-size:20px;flex-shrink:0} .dv-tk-title{font-size:16px;font-weight:900;color:var(--text-main);line-height:1.2} .dv-tk-sub{font-size:12px;color:var(--text-secondary);margin-top:2px} .dv-tk-body{padding:18px 20px} .dv-tk-top{display:flex;gap:18px;align-items:flex-start;margin-bottom:14px} .dv-tk-qr{flex-shrink:0;text-align:center} .dv-tk-qr img{display:block;border:1px solid var(--border);border-radius:10px;background:white} .dv-tk-qr-lbl{font-size:11px;color:var(--text-secondary);margin-top:6px} .dv-tk-no-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);font-weight:800;margin-bottom:2px} .dv-tk-no{font-size:22px;font-weight:900;color:#2563eb;letter-spacing:1px;word-break:break-all} .dv-tk-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#fef9c3;color:#854d0e;font-size:12px;font-weight:900;margin:8px 0 10px} .dv-tk-name{font-size:16px;font-weight:900;color:var(--text-main);margin-bottom:4px} .dv-tk-line{font-size:13px;color:#374151} .dv-tk-sect{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);padding:10px 0 6px;border-bottom:2px solid var(--border);margin:10px 0 8px} .dv-tk-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid #f3f4f6;font-size:13px} .dv-tk-row:last-child{border-bottom:none} .dv-tk-k{color:var(--text-secondary);font-weight:800} .dv-tk-v{color:var(--text-main);font-weight:700;text-align:right} .dv-tk-v-strong{color:#2563eb} .dv-tk-note{margin-top:12px;background:#f8fafc;border-left:3px solid #0ea5e9;padding:10px 12px;border-radius:0 10px 10px 0;font-size:12.5px;color:#374151} .dv-tk-ft{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--border);background:#f8fafc} .dv-tk-btn{border-radius:12px;padding:10px 14px;font-weight:900;border:2px solid transparent;cursor:pointer} .dv-tk-btn-ghost{background:white;border-color:var(--border);color:var(--text-main)} .dv-tk-btn-ghost:hover{border-color:var(--primary);color:var(--primary)} .dv-tk-btn-primary{background:#2563eb;color:white} .dv-tk-btn-primary:hover{filter:brightness(.98)} @media(max-width:640px){ .dv-tk-top{flex-direction:column;align-items:stretch} .dv-tk-qr{align-self:center} } /* ══════════════════════════════════════════════════ REG PAGE (đăng ký – template dang-ky) ══════════════════════════════════════════════════ */ .reg-page { min-height: calc(100vh - 100px); background: var(--bg-alt); padding: 44px 20px 60px; } .reg-wrap { max-width: 680px; margin: 0 auto; } .reg-note{margin:20px 36px 0} .reg-skip-link{margin-top:14px;text-align:center;font-size:13px;color:var(--text-secondary)} .otp-change-phone{background:none;border:none;color:var(--primary);font-weight:700;cursor:pointer;font-size:12px;padding:0} .otp-change-phone:hover{text-decoration:underline} .stepper { display: flex; align-items: center; background: white; border-radius: 18px; border: 1.5px solid var(--border); padding: 22px 28px; margin-bottom: 28px; box-shadow: var(--shadow-sm); gap: 0; } .step-item { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; text-align: center; } .step-item:not(:last-child)::after { content: ''; position: absolute; top: 19px; left: 60%; width: 80%; height: 2px; background: var(--border); transition: background .4s; } .step-item.done:not(:last-child)::after, .step-item.active:not(:last-child)::after { background: var(--primary); } .step-circle { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; font-family: 'Inter', sans-serif; transition: all .3s; border: 2.5px solid var(--border); background: white; color: var(--text-light); margin-bottom: 7px; position: relative; z-index: 1; } .step-item.active .step-circle { background: var(--primary); border-color: var(--primary); color: white; box-shadow: 0 4px 14px rgba(6,188,176,.3); } .step-item.done .step-circle { background: var(--secondary); border-color: var(--secondary); color: white; } .step-lbl { font-size: 11.5px; font-weight: 700; color: var(--text-light); white-space: nowrap; } .step-sub { font-size: 10.5px; color: var(--text-light); margin-top: 1px; } .step-item.active .step-lbl { color: var(--primary); } .step-item.done .step-lbl { color: var(--secondary); } .reg-card { background: white; border-radius: 22px; border: 1.5px solid var(--border); box-shadow: 0 8px 32px rgba(0,0,0,.06); overflow: hidden; } .reg-card-hd { padding: 28px 36px 0; border-bottom: 1px solid var(--border); padding-bottom: 22px; margin-bottom: 28px; } .reg-card-hd h1 { font-size: 22px; font-weight: 900; color: var(--text-main); margin-bottom: 5px; } .reg-card-hd p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; } .reg-card-body { padding: 0 36px 32px; } /* Step 3 đăng ký: thanh hành động cố định dưới màn hình, không cần scroll */ .reg-step3-body { padding: 0 36px 160px; display: flex; flex-direction: column; } .reg-step3-scroll { flex: 1; overflow-y: auto; padding-bottom: 24px; min-height: 0; } .reg-step3-actions { position: fixed; bottom: 0; left: 0; right: 0; background: white; box-shadow: 0 -4px 20px rgba(0,0,0,.08); z-index: 1000; padding: 14px 20px; padding-bottom: max(14px, env(safe-area-inset-bottom)); } .reg-step3-actions-inner { max-width: 680px; margin: 0 auto; } .reg-step3-actions-inner .btn-row { margin-bottom: 10px; } .reg-step3-skip { width: 100%; padding: 12px; background: none; border: 2px solid var(--border); border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: all 0.18s; } .reg-step3-skip:hover { border-color: var(--primary); color: var(--primary); } @media (max-width: 680px) { .reg-step3-scroll { padding-left: 22px; padding-right: 30px; } .reg-step3-actions { padding-left: 16px; padding-right: 16px; } } /* Trang Chính sách bảo mật / Điều khoản (template) */ .legal-body { padding-top: 8px; } .legal-updated { font-size: 13px; color: var(--text-light); margin-bottom: 24px; padding: 10px 12px; background: var(--bg-alt); border-radius: var(--radius-sm); border-left: 3px solid var(--primary); } .legal-section { margin-bottom: 24px; } .legal-section h2 { font-size: 1rem; font-weight: 700; color: var(--text-main); margin-bottom: 8px; } .legal-section p { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin: 0; } .legal-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); } .legal-footer a { color: var(--primary); font-weight: 600; } .legal-footer a:hover { text-decoration: underline; } .sp { display: none; } .sp.on { display: block; animation: spIn .3s cubic-bezier(.22,1,.36,1) both; } @keyframes spIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } .social-row { display: flex; gap: 9px; margin-bottom: 18px; } .s-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 6px; border: 1.5px solid var(--border); border-radius: 11px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .18s; background: white; color: var(--text-main); white-space: nowrap; } .s-btn:hover { border-color: var(--primary); background: #E6F7F6; color: var(--primary); transform: translateY(-1px); } .a-divider { display: flex; align-items: center; gap: 11px; color: var(--text-light); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 16px 0; } .a-divider::before, .a-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .fld-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fld-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .fld-lbl .req { color: #EF4444; } .fld-select { width: 100%; padding: 12px 15px; border: 1.5px solid var(--border); border-radius: 11px; font-size: 14px; color: var(--text-main); font-family: 'Inter', sans-serif; background: white; outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239CA3AF' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .fld-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(6,188,176,.10); } .fld-textarea { width: 100%; padding: 12px 15px; border: 1.5px solid var(--border); border-radius: 11px; font-size: 14px; color: var(--text-main); font-family: 'Inter', sans-serif; background: white; outline: none; resize: vertical; min-height: 80px; } .fld-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(6,188,176,.10); } .pw-wrap { position: relative; } .pw-wrap .fld-inp { padding-right: 44px; } .pw-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-light); font-size: 17px; line-height: 1; padding: 4px; } .pw-eye:hover { color: var(--primary); } .pw-reqs { list-style: none; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .pw-req { font-size: 11.5px; color: var(--text-light); display: flex; align-items: center; gap: 5px; } .pw-req.ok { color: #22c55e; } .pw-req::before { content: '○'; font-size: 12px; } .pw-req.ok::before { content: '✓'; color: #22c55e; font-weight: 800; } .str-track { height: 4px; background: var(--border); border-radius: 50px; margin-top: 7px; overflow: hidden; display: none; } .str-track.show { display: block; } .str-fill { height: 100%; border-radius: 50px; transition: width .4s, background .4s; } .str-lbl { font-size: 11px; font-weight: 700; margin-top: 4px; display: none; } .str-lbl.show { display: block; } .consent-box { background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 22px; } .consent-chk { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-secondary); cursor: pointer; line-height: 1.6; } .consent-chk input { accent-color: var(--primary); width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer; } .consent-chk a { color: var(--primary); font-weight: 700; } .btn-row { display: flex; gap: 11px; margin-top: 8px; } .a-btn.secondary { background: white; color: var(--text-main); border: 2px solid var(--border); box-shadow: none; flex: 0 0 auto; padding: 13px 22px; } .a-btn.secondary:hover { border-color: var(--primary); color: var(--primary); box-shadow: none; transform: none; } .a-btn .a-spinner { width: 17px; height: 17px; border: 2.5px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; display: none; } .reg-page .a-btn { flex: 1; padding: 13px; font-size: 14.5px; } .skip-link-reg { display: block; text-align: center; margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); } .skip-link-reg a { color: var(--primary); font-weight: 700; } .otp-phone-display { background: linear-gradient(135deg, #E6F7F6, #F0FFF4); border: 1.5px solid rgba(6,188,176,.25); border-radius: 12px; padding: 14px 20px; text-align: center; margin-bottom: 22px; } .otp-phone-display strong { display: block; font-size: 18px; color: var(--primary); font-family: 'Inter', sans-serif; } .otp-phone-display span { font-size: 12px; color: var(--text-secondary); } .otp-row { display: flex; gap: 10px; justify-content: center; margin: 20px 0; } .otp-box { width: 54px; height: 62px; border: 2px solid var(--border); border-radius: 12px; font-size: 24px; font-weight: 900; text-align: center; color: var(--text-main); outline: none; font-family: 'Inter', sans-serif; transition: all .18s; } .otp-box:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(6,188,176,.12); background: #E6F7F6; } .otp-resend { text-align: center; font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; } .otp-resend button { background: none; border: none; color: var(--primary); font-weight: 700; cursor: pointer; font-size: 13px; } .otp-resend button:disabled { color: var(--text-light); cursor: default; } .otp-note { display: flex; gap: 10px; align-items: flex-start; background: #FEF9C3; border: 1.5px solid rgba(234,179,8,.25); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: #78350F; margin-bottom: 20px; } .health-section { margin-bottom: 24px; } .health-section-ttl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-light); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1.5px solid var(--border); } .tag-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .tag-chk { display: none; } .tag-lbl { padding: 7px 14px; border: 1.5px solid var(--border); border-radius: 50px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .18s; user-select: none; } .tag-chk:checked + .tag-lbl { border-color: var(--primary); background: #E6F7F6; color: var(--primary); } .radio-row { display: flex; gap: 10px; margin-top: 4px; } .radio-opt { flex: 1; } .radio-inp { display: none; } .radio-lbl { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 1.5px solid var(--border); border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .18s; } .gender-icon { font-size: 1.35em; font-weight: 700; line-height: 1; } .gender-icon-male { color: #2563eb; } .gender-icon-female { color: #db2777; } .gender-icon-other { color: var(--text-secondary); } .radio-row-gender .radio-inp:checked + .radio-lbl .gender-icon-male { color: #1d4ed8; } .radio-row-gender .radio-inp:checked + .radio-lbl .gender-icon-female { color: #be185d; } .radio-row-gender .radio-inp:checked + .radio-lbl .gender-icon-other { color: var(--primary); } .radio-inp:checked + .radio-lbl { border-color: var(--primary); background: #E6F7F6; color: var(--primary); box-shadow: 0 3px 10px rgba(6,188,176,.15); } .benefit-list { list-style: none; margin: 16px 0; } .benefit-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--text-secondary); } .benefit-list li:last-child { border: none; } .benefit-list li::before { content: '✓'; color: var(--secondary); font-weight: 800; font-size: 14px; flex-shrink: 0; } .success-screen { text-align: center; padding: 40px 20px; } .success-ico { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, #E6F7F6, #F0FFF4); border: 3px solid rgba(34,197,94,.3); display: flex; align-items: center; justify-content: center; font-size: 46px; margin: 0 auto 22px; animation: successPop .5s cubic-bezier(.22,1,.36,1) both; } @keyframes successPop { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} } .success-screen h2 { font-size: 24px; font-weight: 900; color: var(--text-main); margin-bottom: 10px; } .success-screen p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 26px; max-width: 380px; margin-left: auto; margin-right: auto; } .success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .reg-aside { margin-top: 24px; background: white; border-radius: 18px; border: 1.5px solid var(--border); padding: 24px 28px; box-shadow: var(--shadow-sm); } .reg-aside h3 { font-size: 14px; font-weight: 800; color: var(--text-main); margin-bottom: 16px; } .aside-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .aside-stat { text-align: center; } .aside-stat strong { display: block; font-size: 22px; font-weight: 900; color: var(--primary); font-family: 'Inter', sans-serif; } .aside-stat span { font-size: 12px; color: var(--text-secondary); } @media (max-width: 680px) { .reg-card-hd, .reg-card-body { padding-left: 22px; padding-right: 22px; } .reg-card-hd.profile-card-hd { padding-left: 22px; padding-right: 22px; } .profile-card-hd-inner { gap: 14px; } .profile-avatar-lg { width: 56px; height: 56px; font-size: 20px; } .profile-card-hd-title { font-size: 1.1rem; } .profile-card-hd-name { font-size: 12px; } .fld-grid2 { grid-template-columns: 1fr; } .fld-grid3 { grid-template-columns: 1fr; } .otp-box { width: 44px; height: 52px; font-size: 20px; } .otp-row { gap: 7px; } .step-sub { display: none; } .social-row { flex-direction: column; } .pw-reqs { grid-template-columns: 1fr; } .aside-stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .reg-page { padding: 24px 12px 44px; } .stepper { padding: 14px 14px; margin-bottom: 16px; border-radius: 16px; } .step-circle { width: 34px; height: 34px; font-size: 13px; margin-bottom: 6px; } .step-lbl { font-size: 11px; } .reg-card { border-radius: 18px; } .reg-card-hd { padding-top: 20px; padding-bottom: 16px; margin-bottom: 18px; } .reg-card-hd p { font-size: 13px; } .reg-card-body { padding-bottom: 22px; } .reg-note { margin: 14px 22px 0; } .reg-skip-link { font-size: 12.5px; } .otp-box { width: 40px; height: 48px; font-size: 18px; } .otp-row { gap: 6px; } } /* ══════════════════════════════════════════════════ PROFILE PAGE HEADER — Phần hình + thông tin, căn lề với nội dung ══════════════════════════════════════════════════ */ .reg-card-hd.profile-card-hd { padding: 24px 36px 16px; margin-bottom: 0; border-bottom: 1px solid var(--border); } .profile-card-hd-inner { display: flex; align-items: center; gap: 20px; max-width: 100%; } .profile-avatar-lg { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; font-family: 'Inter', sans-serif; color: white; flex-shrink: 0; box-shadow: 0 4px 14px rgba(6,188,176,.25); letter-spacing: -0.5px; user-select: none; } .profile-card-hd-txt { min-width: 0; } .profile-card-hd-title { font-size: 1.25rem; font-weight: 700; color: var(--text-main); margin: 0 0 4px; line-height: 1.3; } .profile-card-hd-name { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.4; } .profile-card-body { padding-top: 24px; } .profile-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 36px; margin: 0; min-height: 48px; align-items: stretch; } .profile-tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; font-size: 14px; font-weight: 500; color: var(--text-secondary); background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .profile-tab .profile-tab-icon { font-size: 1.1em; line-height: 1; } .profile-tab .profile-tab-text { white-space: nowrap; } .profile-tab:hover { color: var(--text-main); } .profile-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } @media (max-width: 480px) { .profile-tabs { padding: 0 22px; } .profile-tab { padding: 0 14px; font-size: 13px; } } .profile-health-intro { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); } .bmi-result { margin-top: 12px; padding: 10px 14px; background: var(--bg-alt); border-radius: var(--radius-sm); border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; flex-wrap: nowrap; width:100%; } .bmi-label { font-weight: 600; color: var(--text-secondary); flex-shrink: 0; } .bmi-value { font-weight: 700; color: var(--text-main); flex-shrink: 0; } .bmi-category { font-weight: 600; padding: 2px 8px; border-radius: 6px; font-size: 12px; flex-shrink: 0; } .bmi-category.bmi-thieu { background: #dbeafe; color: #1d4ed8; } .bmi-category.bmi-binh-thuong { background: #dcfce7; color: #15803d; } .bmi-category.bmi-thua-can { background: #fef3c7; color: #b45309; } .bmi-category.bmi-beo-phi { background: #fee2e2; color: #b91c1c; } .profile-health-empty, .profile-health-filled { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-alt); font-size: 13px; line-height: 1.5; color: var(--text-secondary); } .profile-health-empty p, .profile-health-filled p { margin: 0; } /* ══════════════════════════════════════════════════ SKELETON LOADING ══════════════════════════════════════════════════ */ .profile-loading { display:flex; flex-direction:column; gap:1rem; padding:.5rem 0; } .profile-loading-row { height:44px; background:linear-gradient(90deg,#f0f2f5 25%,#e5e7eb 50%,#f0f2f5 75%); background-size:200% 100%; border-radius:var(--radius-sm); animation:skeleton-shimmer 1.5s infinite; } .profile-loading-row.short { height:20px; width:55%; } @keyframes skeleton-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } } /* ══════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════ */ .site-footer { background:var(--primary); padding:18px 0; } .site-footer-inner { max-width:1400px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; } .site-footer-copy { color:rgba(255,255,255,.85); font-size:12.5px; } .site-footer-links { display:flex; align-items:center; gap:24px; } .site-footer-tel { color:#ef4444; font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:5px; } .site-footer-tel:hover { opacity:.85; } .footer-hotline { color:#ef4444; font-weight:700; } .footer-hotline:hover { text-decoration: underline; } .site-footer-stats { display:flex; flex-direction:column; gap:2px; font-size:12px; color:rgba(255,255,255,.8); } .site-footer-stats strong { font-weight:800; color:#fff; } /* ── Logout button ── */ .logout-btn { background:none; border:none; width:100%; text-align:left; padding:0; cursor:pointer; color:#EF4444; font-family:inherit; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; } .logout-btn:hover { color:#DC2626; } /* ══════════════════════════════════════════════════ MOBILE NAV — Overlay + Drawer (reworked) ══════════════════════════════════════════════════ */ .nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:111; backdrop-filter:blur(2px); } .nav-overlay.show { display:block; } .nav-close { display:none; } @media (max-width: 900px) { .mobile-toggle { display:flex; } .nav { position:fixed; inset:0 auto 0 0; /* bám theo viewport, không phụ thuộc header */ height:100vh; width:min(320px,85vw); background:#ffffff; box-shadow:4px 0 24px rgba(0,0,0,.18); flex-direction:column; align-items:stretch; padding:22px 20px 32px; gap:4px; overflow-y:auto; z-index:1300; transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); } .nav.open { transform:translateX(0); } .nav-close { display:flex; align-items:center; justify-content:center; position:absolute; top:14px; right:14px; width:34px; height:34px; background:var(--bg-page); border:none; border-radius:50%; font-size:16px; cursor:pointer; color:var(--text-main); transition:background .15s; } .nav-close:hover { background:var(--border); } .nav-item > a { padding:13px 10px; font-size:14px; border-radius:var(--radius-sm); } .btn-book-header { display:none; } .header-inner { padding:14px 20px; } .logo-img { height:40px; max-width:140px; } } @media (max-width: 480px) { .site-footer-inner { padding:0 20px; flex-direction:column; align-items:flex-start; gap:6px; } .site-footer-links { flex-direction:column; align-items:flex-start; gap:4px; } } /* ══════════════════════════════════════════════════ ERROR PAGES (403, 404, 500) — Template HTML_Template ══════════════════════════════════════════════════ */ .err-wrap { min-height: 50vh; display: flex; flex-direction: column; } .err-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 20px; background: var(--bg-alt); position: relative; overflow: hidden; } .err-blob { position: absolute; border-radius: 50%; pointer-events: none; } .err-card { background: white; border-radius: 24px; border: 1.5px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.04); padding: 48px 52px 44px; max-width: 640px; width: 100%; text-align: center; position: relative; z-index: 1; animation: errIn .45s cubic-bezier(.22,1,.36,1) both; } @keyframes errIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .err-icon-circle { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; margin: 0 auto 18px; animation: errFloat 4s ease-in-out infinite; } @keyframes errFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .err-code-row { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 14px; } .err-code-digit { font-family: 'Inter', sans-serif; font-size: 96px; font-weight: 900; line-height: 1; letter-spacing: -3px; } .err-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; padding: 5px 15px; border-radius: 50px; margin-bottom: 18px; } .err-badge-dot { width: 7px; height: 7px; border-radius: 50%; animation: errBlink 1.3s ease-in-out infinite; flex-shrink: 0; } @keyframes errBlink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } } h1.err-h1 { font-size: 24px; font-weight: 900; color: var(--text-main); margin: 0 0 10px; line-height: 1.3; } .err-body { font-size: 15px; color: var(--text-secondary); line-height: 1.75; margin: 0 0 26px; max-width: 440px; margin-left: auto; margin-right: auto; } .err-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 26px; } .err-grid-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--text-main); background: var(--bg-alt); transition: all .18s; text-align: left; text-decoration: none; } .err-grid-item:hover { border-color: var(--primary); color: var(--primary); background: #E6F7F6; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(6,188,176,.13); } .err-grid-ico { width: 34px; height: 34px; border-radius: 8px; background: white; font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.07); flex-shrink: 0; } .err-grid-sub { font-size: 11px; color: var(--text-light); display: block; } .err-btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; } .err-btn-main { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white !important; padding: 12px 28px; border-radius: 12px; font-weight: 800; font-size: 14px; border: none; cursor: pointer; transition: all .18s; box-shadow: 0 5px 18px rgba(6,188,176,.28); text-decoration: none; } .err-btn-main:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(6,188,176,.38); } .err-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: white; color: var(--text-main); padding: 12px 22px; border-radius: 12px; font-weight: 700; font-size: 14px; border: 2px solid var(--border); cursor: pointer; transition: all .18s; text-decoration: none; } .err-btn-ghost:hover { border-color: var(--primary); color: var(--primary); } .err-hr { height: 1px; background: var(--border); margin: 20px 0; } .err-hotline { display: inline-flex; align-items: center; gap: 9px; background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: 50px; padding: 9px 22px; font-size: 13px; color: var(--text-secondary); } .err-hotline a { font-weight: 800; color: var(--secondary); } .err-hotline-sep { color: var(--border); } .err-info-box { border-radius: 12px; padding: 14px 18px; margin-bottom: 22px; text-align: left; display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.65; } .err-url-path { background: var(--bg-alt); border: 1.5px dashed var(--border); border-radius: 9px; padding: 9px 14px; font-size: 12px; font-family: monospace; color: var(--text-light); margin-bottom: 22px; word-break: break-all; text-align: left; } .err-countdown-box { background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: 13px; padding: 18px 24px; margin-bottom: 24px; } .err-countdown-num { font-family: 'Inter', sans-serif; font-size: 44px; font-weight: 900; line-height: 1; color: var(--primary); display: block; } .err-countdown-lbl { font-size: 12px; color: var(--text-light); margin-top: 4px; display: block; } @media (max-width: 680px) { .err-card { padding: 36px 22px 30px; border-radius: 18px; } .err-code-digit { font-size: 72px; } h1.err-h1 { font-size: 20px; } .err-grid { grid-template-columns: 1fr; } .err-btn-row { flex-direction: column; align-items: stretch; } .err-btn-main, .err-btn-ghost { justify-content: center; } } /* 403 */ .err-blob-403-a { width: 480px; height: 480px; top: -130px; right: -130px; background: radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 65%); } .err-blob-403-b { width: 360px; height: 360px; bottom: -80px; left: -60px; background: radial-gradient(circle, rgba(239,68,68,.06) 0%, transparent 65%); } .err-icon-403 { background: linear-gradient(135deg, #FEF3C7, #FFFBEB); border: 2.5px solid rgba(245,158,11,.28); box-shadow: 0 8px 24px rgba(245,158,11,.12); } .err-c4a { color: #F59E0B; } .err-c0a { color: #EF4444; } .err-c3a { color: #B45309; } /* 404 */ .err-blob-404-a { width: 480px; height: 480px; top: -130px; left: -130px; background: radial-gradient(circle, rgba(6,188,176,.09) 0%, transparent 65%); } .err-blob-404-b { width: 360px; height: 360px; bottom: -80px; right: -60px; background: radial-gradient(circle, rgba(103,198,63,.07) 0%, transparent 65%); } .err-icon-404 { background: linear-gradient(135deg, #E6F7F6, #F0FFF4); border: 2.5px solid rgba(6,188,176,.25); box-shadow: 0 8px 24px rgba(6,188,176,.14); } .err-c0 { color: var(--primary); } .err-c4 { color: var(--primary); } .err-c4-2 { color: var(--secondary); } /* 500 */ .err-blob-500-a { width: 520px; height: 520px; top: -150px; right: -120px; background: radial-gradient(circle, rgba(239,68,68,.07) 0%, transparent 65%); } .err-blob-500-b { width: 380px; height: 380px; bottom: -80px; left: -70px; background: radial-gradient(circle, rgba(249,115,22,.06) 0%, transparent 65%); } .err-icon-500 { background: linear-gradient(135deg, #FEF2F2, #FFF7ED); border: 2.5px solid rgba(239,68,68,.25); box-shadow: 0 8px 24px rgba(239,68,68,.11); } .err-c5r { color: #EF4444; } .err-c0r { color: #F97316; } .err-c0b { color: #FBBF24; } /* ══════════════════════════════════════════════════ TRA CỨU / LỊCH SỬ KHÁM / LỊCH HẸN — Template tra-cuu ══════════════════════════════════════════════════ */ .tc-page { background: var(--bg-alt); padding: 48px 0 80px; } .tc-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; } .tc-nav { background: white; border-radius: 16px; border: 2px solid var(--border); overflow: hidden; position: sticky; top: 90px; } .tc-nav-header { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; } .tc-nav-avatar { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; border: 2px solid rgba(255,255,255,.5); flex-shrink: 0; } .tc-nav-header-right { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tc-nav-name { font-weight: 800; font-size: 15px; line-height: 1.25; } .tc-nav-phone { font-size: 12px; opacity: .9; line-height: 1.3; } .tc-nav-id { font-size: 12px; opacity: .85; } .tc-nav-btn { display: flex; align-items: center; gap: 10px; padding: 13px 18px; font-size: 13px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: .2s; border: none; background: none; text-align: left; width: 100%; border-bottom: 1px solid var(--border); text-decoration: none; } .tc-nav-btn:last-child { border-bottom: none; } .tc-nav-btn:hover { background: #E6F7F6; color: var(--primary); } .tc-nav-btn.active { background: #E6F7F6; color: var(--primary); border-left: 3px solid var(--primary); } .tc-nav-ico { font-size: 18px; flex-shrink: 0; } .tc-nav-badge { margin-left: auto; background: var(--primary); color: white; font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 800; } .tc-card { background: white; border-radius: 16px; border: 2px solid var(--border); margin-bottom: 20px; overflow: hidden; box-shadow: var(--shadow-sm); } .tc-card-hd { padding: 20px 24px; border-bottom: 2px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .tc-card-hd h2 { font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 10px; margin: 0; } .tc-card-body { padding: 24px; } /* Mobile/tablet polish for user portal pages */ @media (max-width: 768px) { .tc-page { padding: 28px 0 56px; } .tc-card-hd { padding: 16px 16px; gap: 10px; align-items: flex-start; } .tc-card-hd h2 { font-size: 16px; line-height: 1.3; } .tc-card-body { padding: 16px; } .tc-nav { border-radius: 14px; } .tc-nav-header { padding: 14px 14px; } .tc-nav-avatar { width: 44px; height: 44px; font-size: 18px; } .tc-nav-name { font-size: 14px; } .tc-nav-btn { padding: 12px 14px; font-size: 13px; } .hp-block { padding: 16px; } .hp-info-strip { padding: 14px 14px; } .hp-info-strip .hp-avatar { width: 46px; height: 46px; font-size: 16px; } .hp-info-strip .hp-name { font-size: 15px; } .hp-info-strip .hp-meta { font-size: 12.5px; } .hp-patient-code { font-size: 13px; } .stats-strip { gap: 10px; margin-bottom: 14px; } .stat-chip { padding: 12px; } .stat-chip-num { font-size: 18px; } .hist-hd { padding: 12px 14px; } .hist-doc { font-size: 12.5px; } .hist-spec, .hist-status { font-size: 11.5px; } } @media (max-width: 480px) { .tc-page { padding: 22px 0 44px; } .tc-card { border-radius: 14px; } .tc-card-hd { padding: 14px 14px; } .tc-card-body { padding: 14px; } .hp-block-title { font-size: 11px; } .hp-block-sub { font-size: 10.5px; } .hp-block .fld { margin-bottom: 12px; } .hp-info-strip { gap: 10px; } .tc-search .form-input, .tc-search .fld-inp { min-width: 140px; } .appt-card { padding: 14px; gap: 12px; } .appt-date-badge { width: 54px; } .appt-day { font-size: 18px; } .appt-spec { font-size: 13px; } .appt-time, .appt-doc, .appt-price { font-size: 12px; } .appt-actions { gap: 8px; flex-wrap: wrap; } } /* Hồ sơ sức khỏe: hàng 2 cột — trái Mã bệnh nhân, phải Nhóm máu */ .hp-patient-blood-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; } .hp-patient-id { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; font-size: 12px; font-weight: 600; } .hp-patient-label { text-transform: uppercase; letter-spacing: .5px; opacity: .95; } .hp-patient-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 800; font-size: 14px; color: white; } @media (max-width: 500px) { .hp-patient-blood-row { grid-template-columns: 1fr; } } .hp-info-strip { display: grid; grid-template-columns: auto 1fr auto auto; gap: 20px; align-items: center; padding: 16px 20px; background: var(--bg-alt); border-radius: 14px; margin-bottom: 24px; border: 1.5px solid var(--border); } .hp-info-strip .hp-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; flex-shrink: 0; } .hp-info-strip .hp-name { font-size: 16px; font-weight: 800; color: var(--text-main); } .hp-info-strip .hp-meta { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; } .hp-info-strip .hp-meta span { white-space: nowrap; } /* Hai block trái phải */ .hp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .hp-block { background: white; border: 1.5px solid var(--border); border-radius: 14px; padding: 20px; } .hp-block-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); margin-bottom: 14px; } .hp-block-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); } .hp-block .fld { margin-bottom: 14px; } .hp-block .fld:last-child { margin-bottom: 0; } @media (max-width: 768px) { .hp-info-strip { grid-template-columns: auto 1fr; gap: 12px; } .hp-info-strip .hp-phone, .hp-info-strip .hp-email { grid-column: 1 / -1; } .hp-two-col { grid-template-columns: 1fr; } } .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .stat-chip { background: white; border-radius: 12px; padding: 14px; text-align: center; border: 1.5px solid var(--border); } .stat-chip-num { font-size: 22px; font-weight: 900; color: var(--primary); } .stat-chip-lbl { font-size: 11px; color: var(--text-secondary); font-weight: 600; margin-top: 3px; } .tc-search { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .tc-search .form-input, .tc-search .fld-inp { flex: 1; min-width: 180px; } .hist-list { display: flex; flex-direction: column; gap: 14px; } .hist-item { border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; transition: .2s; } .hist-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); } .hist-hd { padding: 14px 18px; background: var(--bg-alt); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .hist-date { font-size: 12px; font-weight: 700; color: var(--primary); background: #E6F7F6; padding: 4px 10px; border-radius: 8px; } .hist-doc { font-size: 13px; font-weight: 700; } .hist-spec { font-size: 12px; color: var(--text-secondary); } .hist-status { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 8px; } .hist-status.done { background: #F0F9E8; color: #16a34a; } .hist-status.upcoming { background: #E6F7F6; color: var(--primary); } .hist-status.cancelled { background: #FEF2F2; color: #ef4444; } .hist-body { padding: 16px 18px; border-top: 1px solid var(--border); } .hist-row { display: flex; gap: 8px; margin-bottom: 8px; font-size: 13px; } .hist-lbl { color: var(--text-secondary); min-width: 120px; flex-shrink: 0; } .hist-val { font-weight: 600; } .btn-sm { padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; border: none; transition: .2s; } .btn-sm-primary { background: var(--primary); color: white; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .btn-sm-primary:hover { background: var(--primary-dark); color: white; } .btn-sm-outline { background: white; color: var(--primary); border: 1.5px solid var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .btn-sm-outline:hover { background: #E6F7F6; } .appt-card { border: 1.5px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 14px; display: flex; gap: 16px; align-items: flex-start; transition: .2s; } .appt-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); } .appt-date-badge { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; border-radius: 12px; padding: 10px 14px; text-align: center; flex-shrink: 0; min-width: 62px; } .appt-day { font-size: 26px; font-weight: 900; line-height: 1;width:100%; display:block } .appt-mo { font-size: 11px; opacity: .9; } .appt-info { flex: 1; } .appt-spec { font-size: 14px; font-weight: 800; margin-bottom: 3px; } .appt-doc { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; } .appt-time { font-size: 13px; font-weight: 700; color: var(--primary); } .appt-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .appt-status{font-weight:800;color:var(--text-secondary)} .appt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .appt-status-badge{ display:inline-flex;align-items:center;justify-content:center; padding:5px 10px;border-radius:999px; font-size:12px;font-weight:900;white-space:nowrap; border:1px solid var(--border); } .appt-price{font-size:13px;font-weight:900;color:var(--secondary);margin-top:4px} /* Card background by status */ .appt-card.appt-pending{background:linear-gradient(180deg,#fff, #fbfdff)} .appt-card.appt-confirmed{background:linear-gradient(180deg,#fff, #f6fffb)} .appt-card.appt-done{background:linear-gradient(180deg,#fff, #f5f3ff)} .appt-card.appt-cancelled{background:linear-gradient(180deg,#fff, #fff1f2);opacity:.92} .appt-status-badge.appt-status-pending{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.28);color:#92400e} .appt-status-badge.appt-status-confirmed{background:rgba(6,188,176,.12);border-color:rgba(6,188,176,.26);color:#0f766e} .appt-status-badge.appt-status-done{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.26);color:#4338ca} .appt-status-badge.appt-status-cancelled{background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.22);color:#b91c1c} .login-gate { text-align: center; padding: 48px 24px; } .login-gate-ico { font-size: 56px; margin-bottom: 16px; } .login-gate h3 { font-size: 20px; font-weight: 900; margin-bottom: 8px; } .login-gate p { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.7; } .tc-empty { text-align: center; padding: 40px 20px; color: var(--text-secondary); } .tc-empty-ico { font-size: 48px; margin-bottom: 12px; opacity: .6; } .mh-intro { margin-bottom: 20px; font-size: 14px; color: var(--text-secondary); line-height: 1.65; } .mh-intro code { background: var(--bg-alt); padding: 2px 6px; border-radius: 4px; font-size: 12px; } .mh-section { margin-top: 24px; } .mh-section-hd { margin-bottom: 16px; } .mh-section-hd h2 { font-size: 17px; font-weight: 800; margin-bottom: 4px; } .mh-table-placeholder { border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; } .mh-table-header { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr; gap: 12px; padding: 12px 16px; background: var(--bg-alt); font-size: 12px; font-weight: 700; color: var(--text-secondary); } .mh-table-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; } .mh-table-row.skeleton-row { min-height: 44px; } .mh-table-row.skeleton-row span { background: linear-gradient(90deg, #f0f2f5 25%, #e5e7eb 50%, #f0f2f5 75%); background-size: 200% 100%; animation: skeleton 1.2s infinite; border-radius: 4px; height: 16px; } @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .mh-note { font-size: 13px; color: var(--text-light); margin-top: 14px; } @media (max-width: 1024px) { .tc-layout { grid-template-columns: 1fr; } .tc-nav { position: static; } .stats-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .hist-hd { flex-wrap: wrap; } .stats-strip { grid-template-columns: repeat(2, 1fr); } .mh-table-header, .mh-table-row { grid-template-columns: 1fr 1fr; } .mh-table-header span:nth-child(n+3), .mh-table-row span:nth-child(n+3) { display: none; } }