/* ================================================================ TimeGolden News — Design System v2 Gold: #C9A84C | Navy: #0D1B2A | Font: Lora + Be Vietnam Pro Light/Dark mode via [data-theme="dark"] on ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,600;0,700;1,600&family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap'); /* ================================================================ DESIGN TOKENS — Light Mode (default) ================================================================ */ :root { /* ── Brand palette ─────────────────────────────────────── */ --gold: #C9A84C; --gold-dark: #A8882E; --gold-mid: #DEC074; --gold-light: #F0DC9A; --gold-dim: rgba(201, 168, 76, 0.14); --gold-glow: rgba(201, 168, 76, 0.28); --gold-pale: #FBF7EC; --navy: #0D1B2A; --navy-mid: #1C3A5B; --red-hot: #C0021A; /* ── Surfaces ──────────────────────────────────────────── */ --bg: #FFFFFF; --bg-light: #F8F8F8; --bg-section: #F3F3F3; --bg-card: #FFFFFF; /* ── Borders — gold-tinted ─────────────────────────────── */ --border: rgba(201, 168, 76, 0.22); --border-soft: rgba(201, 168, 76, 0.12); --border-hard: rgba(201, 168, 76, 0.40); /* ── Text ──────────────────────────────────────────────── */ --text: #1A1A1A; --text-sec: #505050; --text-muted: #909090; --text-inv: #FFFFFF; /* ── Header ────────────────────────────────────────────── */ --header-bg: #FFFFFF; /* Nền trắng suốt */ --header-text: #0D1B2A; /* Chữ Navy đậm */ --header-border: rgba(201, 168, 76, 0.20); /* Viền vàng nhẹ */ --header-logo-filter: none; /* Giữ nguyên màu logo vàng + navy */ /* ── Topbar (Light Gray) ───────────────────────────────── */ --topbar-bg: #F8F8F8; /* Nền xám nhạt hiện đại */ --topbar-text: #555555; /* Chữ xám tối */ --topbar-icon-cl: #C9A84C; /* Icon màu vàng logo */ --topbar-link-hover: #C9A84C; /* ── Nav (White / Transparent) ─────────────────────────── */ --nav-bg: #FFFFFF; /* Nền trong suốt/trắng */ --nav-text: #222222; /* Chữ tối rõ ràng */ --nav-hover-bg: transparent; /* Hover trong suốt */ --nav-active-bg: transparent; --nav-active-txt: #C9A84C; /* Màu vàng logo khi active */ --nav-active-border: #C9A84C; /* Gạch dưới vàng */ /* ── Search Bar (Clean White) ──────────────────────────── */ --search-bar-bg: #FFFFFF; --search-bar-border: rgba(201, 168, 76, 0.15); /* ── Footer (White - Dan Tri style) ────────────────────── */ --footer-bg: #FFFFFF; /* Nền trắng sạch sẽ */ --footer-text: #444444; /* Chữ xám tối dễ đọc */ --footer-head: #0D1B2A; /* Tiêu đề Navy đậm */ --footer-border: rgba(201, 168, 76, 0.20); /* Viền vàng nhẹ */ --footer-icon-cl: #C9A84C; /* Icon màu vàng nổi bật */ --footer-logo-filter: none; /* Giữ nguyên màu logo vàng + navy */ --footer-link-hover: #C9A84C; /* Hover chuyển vàng */ --footer-social-bg: #F5F5F5; /* Nền nút social xám nhạt */ --footer-social-cl: #555555; --footer-social-hover-bg: #C9A84C; --footer-social-hover-cl: #FFFFFF; --footer-bottom-bg: #F8F8F8; /* Nền bản quyền xám nhạt */ --footer-bottom-text: #777777; /* ── Shadows ───────────────────────────────────────────── */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, .06); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08); --shadow-gold: 0 0 0 3px var(--gold-glow); /* ── Type ──────────────────────────────────────────────── */ --font-display: 'Lora', Georgia, serif; --font-body: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif; --radius: 4px; --radius-sm: 2px; --radius-lg: 8px; --container: 1200px; --transition: all .2s ease; } /* ================================================================ DARK MODE TOKENS [data-theme="dark"] ================================================================ */ [data-theme="dark"] { --bg: #0E1A26; --bg-light: #152030; --bg-section: #1A2C3E; --bg-card: #152030; --border: rgba(201, 168, 76, 0.20); --border-soft: rgba(201, 168, 76, 0.10); --border-hard: rgba(201, 168, 76, 0.35); --text: #E5DCC8; --text-sec: #A09888; --text-muted: #66604A; --text-inv: #0D1B2A; /* ── Header ────────────────────────────────────────────── */ --header-bg: #0D1B2A; /* Dark navy background */ --header-text: rgba(255, 255, 255, 0.88); --header-border: rgba(201, 168, 76, 0.25); --header-logo-filter: none; /* Keep standard colors (gold + white) */ /* ── Topbar ────────────────────────────────────────────── */ --topbar-bg: #07111C; --topbar-text: rgba(255, 255, 255, 0.7); --topbar-icon-cl: #C9A84C; --topbar-link-hover: #FFFFFF; /* ── Nav ───────────────────────────────────────────────── */ --nav-bg: #07111C; --nav-text: rgba(255, 255, 255, 0.75); --nav-hover-bg: rgba(255, 255, 255, 0.05); --nav-active-bg: #0D1B2A; --nav-active-txt: #C9A84C; /* Active state has gold text */ --nav-active-border: #C9A84C; /* ── Search Bar ────────────────────────────────────────── */ --search-bar-bg: #0D1B2A; --search-bar-border: rgba(201, 168, 76, 0.25); /* ── Footer ────────────────────────────────────────────── */ --footer-bg: #060E16; /* Deep dark background */ --footer-text: rgba(255, 255, 255, 0.60); --footer-head: #FFFFFF; --footer-border: rgba(255, 255, 255, 0.1); --footer-icon-cl: #C9A84C; /* Gold icons in dark mode footer */ --footer-logo-filter: brightness(0) invert(1); /* All-white logo filter */ --footer-link-hover: #C9A84C; --footer-social-bg: rgba(255, 255, 255, 0.1); --footer-social-cl: rgba(255, 255, 255, 0.6); --footer-social-hover-bg: var(--gold); --footer-social-hover-cl: var(--navy); --footer-bottom-bg: #03070B; --footer-bottom-text: rgba(255, 255, 255, 0.3); --shadow-xs: 0 1px 3px rgba(0, 0, 0, .25); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35); --gold-pale: rgba(201, 168, 76, 0.08); color-scheme: dark; } /* ── Transitions pour éviter les flashs ───────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; transition: background-color .2s ease, border-color .2s ease, color .15s ease; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; min-height: 100vh; } body.nav-open { overflow: hidden !important; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; } @media (min-width: 768px) { .container { padding: 0 20px; } } @media (min-width: 1024px) { .container { padding: 0 24px; } } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.35; color: var(--text); } /* ================================================================ HEADER ================================================================ */ /* Gold accent line trên cùng */ .header-gold-line { height: 3px; background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold-mid) 50%, var(--gold) 80%, transparent 100%); } .nav-overlay { display: none; } /* Top bar */ .header-topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--header-border); padding: 5px 0; font-size: 12px; color: var(--topbar-text); } .header-topbar .container { display: flex; justify-content: space-between; align-items: center; } .topbar-date { display: flex; align-items: center; gap: 5px; } .topbar-date i { color: var(--topbar-icon-cl); } .topbar-links { display: flex; gap: 14px; align-items: center; } .topbar-links a { color: var(--topbar-text); transition: color .15s; } .topbar-links a:hover { color: var(--topbar-link-hover); } /* Dark mode toggle button */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 18px; background: var(--border-hard); border-radius: 10px; border: none; cursor: pointer; position: relative; transition: background .25s; flex-shrink: 0; } .theme-toggle::after { content: ''; position: absolute; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .25s ease, background .25s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); } [data-theme="dark"] .theme-toggle { background: var(--gold); } [data-theme="dark"] .theme-toggle::after { transform: translateX(12px); background: var(--navy); } .theme-toggle-label { font-size: 11px; color: var(--topbar-text); white-space: nowrap; } .theme-toggle-wrap { display: flex; align-items: center; gap: 6px; } .theme-icon { font-size: 13px; } /* Logo row */ .header-main { background: var(--header-bg); border-bottom: 1px solid var(--header-border); padding: 10px 0; color: var(--header-text); } .header-main>.container { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .site-logo { display: inline-block; margin-left: -48px; /* Dịch trái để bù đắp khoảng trắng tự nhiên của tệp logo SVG */ } .site-logo img { height: 44px; width: auto; transition: var(--transition); } .logo-light { filter: var(--header-logo-filter); } [data-theme="dark"] .logo-light { display: none; } [data-theme="dark"] .logo-dark { display: block; } .logo-dark { display: none; } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 4px; padding: 6px; color: var(--header-text); } .nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 1px; transition: var(--transition); } /* ── Nav — transparent/white background, gold active/hover ── */ .site-nav { background: var(--nav-bg); border-bottom: 1px solid var(--header-border); } .site-nav .container { display: flex; align-items: center; } .nav-list { display: flex; align-items: center; } .nav-list>li { position: relative; } .nav-list>li>a { display: block; padding: 10px 14px 8px; font-size: 13.5px; font-weight: 700; color: var(--nav-text); letter-spacing: .2px; white-space: nowrap; transition: color .15s, border-color .15s; border-bottom: 2px solid transparent; } .nav-list>li>a:hover { color: var(--nav-active-txt); background: var(--nav-hover-bg); } .nav-list>li>a.active { background: var(--nav-active-bg); color: var(--nav-active-txt); border-bottom: 2px solid var(--nav-active-border); } /* ── Desktop Sub-menu Dropdown (Premium Hover) ── */ .nav-arrow { transition: transform 0.25s ease, color 0.25s ease; display: inline-block; } .nav-list>li:hover>a .nav-arrow { transform: rotate(180deg); color: var(--gold); } .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--bg-card); border: 1px solid var(--border-soft); border-top: 3px solid var(--gold); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s; z-index: 999; padding: 8px 0; list-style: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .nav-list>li:hover .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .sub-menu li { width: 100%; } .sub-menu li a { display: block; padding: 10px 20px; font-size: 13.5px; font-weight: 600; color: var(--text-sec); letter-spacing: normal; white-space: nowrap; border-left: 3px solid transparent; transition: all 0.2s ease; } .sub-menu li a:hover, .sub-menu li a.active { background: var(--bg-light); color: var(--gold-dark); border-left-color: var(--gold); padding-left: 24px; /* Micro-translate indentation */ } /* Flyout Submenu Cấp 3 (Nested Submenu) */ .sub-menu li { position: relative; } .grandsub-menu { position: absolute; top: -8px; /* Cân đối với padding 8px của .sub-menu */ left: 100%; min-width: 220px; background: var(--bg-card); border: 1px solid var(--border-soft); border-top: 3px solid var(--gold); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transform: translateX(12px); transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s; z-index: 1000; padding: 8px 0; list-style: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .sub-menu li:hover .grandsub-menu { opacity: 1; visibility: visible; transform: translateX(0); } .grandsub-menu li a { display: block; padding: 10px 20px; font-size: 13.5px; font-weight: 600; color: var(--text-sec); white-space: nowrap; border-left: 3px solid transparent; transition: all 0.2s ease; } .grandsub-menu li a:hover, .grandsub-menu li a.active { background: var(--bg-light); color: var(--gold-dark); border-left-color: var(--gold); padding-left: 24px; } /* ================================================================ SEARCH — Modern, prominent ================================================================ */ .site-search-bar { background: var(--search-bar-bg); border-bottom: 1px solid var(--search-bar-border); padding: 10px 0; transition: background .2s; } .search-wrap { position: relative; max-width: 640px; margin: 0 auto; } .search-input-group { display: flex; align-items: center; background: var(--bg-light); border: 1.5px solid var(--border-hard); border-radius: 40px; overflow: hidden; transition: border-color .2s, box-shadow .2s, background .2s; } .search-input-group:focus-within { border-color: var(--gold); box-shadow: var(--shadow-gold); background: var(--bg); } .search-icon-left { flex-shrink: 0; padding: 0 10px 0 16px; color: var(--text-muted); display: flex; align-items: center; transition: color .2s; } .search-input-group:focus-within .search-icon-left { color: var(--gold-dark); } .search-input-group input { flex: 1; padding: 10px 4px; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 14px; color: var(--text); min-width: 0; } .search-input-group input::placeholder { color: var(--text-muted); } .search-kbd { flex-shrink: 0; font-size: 10px; color: var(--text-muted); background: var(--bg-section); border: 1px solid var(--border-hard); border-radius: 3px; padding: 1px 5px; font-family: monospace; margin-right: 6px; display: none; white-space: nowrap; } @media (min-width: 768px) { .search-kbd { display: inline; } } .search-input-group:focus-within .search-kbd { display: none; } .search-clear { display: none; flex-shrink: 0; padding: 0 6px; color: var(--text-muted); font-size: 18px; line-height: 1; border-radius: 50%; width: 24px; height: 24px; align-items: center; justify-content: center; margin-right: 4px; transition: background .15s, color .15s; } .search-clear:hover { background: var(--border); color: var(--text); } .search-clear.visible { display: flex; } .search-btn { flex-shrink: 0; background: var(--gold); color: var(--navy); border: none; padding: 10px 18px; font-size: 13px; font-weight: 700; font-family: var(--font-body); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: background .15s; border-radius: 0 40px 40px 0; } .search-btn:hover { background: var(--gold-dark); } /* Suggestions dropdown */ .search-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-card); border: 1.5px solid var(--border-hard); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); z-index: 200; display: none; overflow: hidden; } .search-suggestions.open { display: block; } .search-suggestion-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 13.5px; color: var(--text-sec); cursor: pointer; transition: background .12s; border-bottom: 1px solid var(--border-soft); } .search-suggestion-item:last-child { border-bottom: none; } .search-suggestion-item:hover { background: var(--gold-pale); color: var(--navy); } .search-suggestion-item svg { flex-shrink: 0; color: var(--text-muted); } .search-suggest-label { font-size: 11px; color: var(--text-muted); padding: 6px 16px 4px; border-bottom: 1px solid var(--border-soft); text-transform: uppercase; letter-spacing: .5px; background: var(--bg-light); } @media (max-width: 767px) { .header-topbar { display: none; } .nav-toggle { display: flex; z-index: 1002; transition: all 0.3s ease; } /* Định hình lại nút đóng khi menu di động đang mở */ .nav-open .nav-toggle { position: fixed; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-light); border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--gold-dark); } .header-main { position: relative; z-index: 1001; transition: background-color .2s ease; } /* Khi menu di động mở, cố định thanh logo row ở trên cùng */ .nav-open .header-main { position: fixed; top: 0; left: 0; width: 100%; box-shadow: var(--shadow-sm); background: var(--bg-card); /* Đảm bảo che phủ các menu cuộn phía sau */ } /* Translucent Blur Backdrop Overlay */ .nav-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 998; display: none; opacity: 0; transition: opacity 0.3s ease; } .nav-overlay.open { display: block; opacity: 1; } /* Full-Screen Slide-Down Menu (GPU Optimized) */ .site-nav { position: fixed; top: -100vh; /* Nằm ẩn hoàn toàn phía trên màn hình */ left: 0; width: 100vw; height: 100vh; background: var(--bg-card); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); z-index: 999; display: block !important; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); padding: 84px 24px 40px; /* Bù đắp chiều cao logo row */ box-sizing: border-box; overflow-y: auto; border-right: none; -webkit-overflow-scrolling: touch; /* Cuộn mượt quán tính iOS */ overscroll-behavior: contain; /* Khóa cuộn trang nền */ } .site-nav.open { transform: translateY(100vh); /* Trượt dọc từ trên xuống */ } .site-nav .container { display: block; padding: 0; } .nav-list { flex-direction: column; align-items: stretch; padding: 0; margin: 0; list-style: none; } .nav-list>li { width: 100%; } .nav-list>li>a { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: 16px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border-soft); border-left: 4px solid transparent; transition: var(--transition); } .nav-list>li>a:hover { background: var(--bg-light); color: var(--gold-dark); } .nav-list>li>a.active { color: var(--gold-dark); background: var(--gold-dim); border-left-color: var(--gold); border-bottom-color: var(--border-soft); } /* Animate Nav Arrow Chevron on Mobile */ .nav-arrow { font-size: 12px; color: var(--text-muted); transition: transform 0.25s ease; } .nav-list>li>a.active .nav-arrow { color: var(--gold); transform: rotate(180deg); } /* ── Mobile Sub-menu (Hierarchical Indentation with Guideline) ── */ .sub-menu { position: static; display: block; min-width: unset; background: transparent; border: none; border-top: none; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; padding: 4px 0 12px 16px; margin-left: 24px; /* Thụt lề so với danh mục cha */ border-left: 2px solid var(--border-soft); /* Đường line chỉ hướng tinh tế */ list-style: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .sub-menu li { width: 100%; } .sub-menu li a { display: block; padding: 8px 16px; font-size: 14.5px; font-weight: 500; color: var(--text-sec); border-bottom: none; border-left: none; background: transparent; transition: var(--transition); } .sub-menu li a:hover, .sub-menu li a.active { color: var(--gold-dark); background: transparent; font-weight: 700; padding-left: 20px; /* Dịch nhẹ khi active/hover trên mobile */ } /* ── Mobile Grandsub-menu (Cấp 3 Thụt lề đệ quy) ── */ .grandsub-menu { position: static; display: block; min-width: unset; background: transparent; border: none; border-top: none; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; padding: 2px 0 8px 12px; margin-left: 16px; /* Thụt lề sâu thêm so với danh mục cấp 2 */ border-left: 1.5px solid var(--border-soft); /* Đường guideline chỉ hướng nhẹ */ list-style: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .grandsub-menu li { width: 100%; } .grandsub-menu li a { display: block; padding: 6px 12px; font-size: 13.5px; font-weight: 400; color: var(--text-sec); border-bottom: none; border-left: none; background: transparent; transition: var(--transition); } .grandsub-menu li a:hover, .grandsub-menu li a.active { color: var(--gold-dark); background: transparent; font-weight: 700; padding-left: 16px; } } /* ================================================================ LAYOUT ================================================================ */ .page-body { padding: 20px 0 48px; } .layout-main { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } @media (min-width: 1024px) { .layout-main { grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; } } /* ================================================================ SECTION HEADING ================================================================ */ .section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--border-hard); position: relative; } .section-heading::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 44px; height: 2px; background: var(--gold); } .section-heading h1, .section-heading h2 { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: .3px; text-transform: uppercase; padding-left: 10px; border-left: 3px solid var(--gold); margin: 0; } .section-heading a { font-size: 12px; color: var(--text-muted); } .section-heading a:hover { color: var(--gold-dark); } /* ================================================================ CARDS — Gold-tinted borders ================================================================ */ .card { background: var(--bg-card); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, box-shadow .2s; } .card:hover { border-color: var(--gold); box-shadow: 0 2px 12px var(--gold-dim); } .card:hover .card-title { color: var(--gold-dark); } .card-thumb { position: relative; overflow: hidden; background: var(--bg-section); aspect-ratio: 16/9; } .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .card:hover .card-thumb img { transform: scale(1.04); } .card-cat-badge { position: absolute; bottom: 0; left: 0; background: var(--gold); color: var(--navy); font-size: 10px; font-weight: 700; padding: 3px 8px; letter-spacing: .5px; text-transform: uppercase; } .card-cat-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 4px; display: block; } .card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .card-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; } .card-sapo { font-size: 13px; color: var(--text-sec); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border-soft); } .card-meta svg { width: 12px; height: 12px; } /* Horizontal card */ .card-h { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); transition: var(--transition); } .card-h:last-child { border-bottom: none; padding-bottom: 0; } .card-h:hover .card-h-title { color: var(--gold-dark); } .card-h-thumb { flex-shrink: 0; width: 120px; height: 80px; overflow: hidden; background: var(--bg-section); border: 1px solid var(--border); border-radius: var(--radius-sm); } .card-h-thumb.sm { width: 90px; height: 60px; } .card-h-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .card-h:hover .card-h-thumb img { transform: scale(1.04); } .card-h-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .card-h-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--gold-dark); } .card-h-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-display); transition: color .15s; } .card-h-meta { font-size: 12px; color: var(--text-muted); margin-top: auto; } /* ================================================================ HERO ================================================================ */ .hero-section { background: var(--bg); padding: 16px 0 0; border-bottom: 2px solid var(--border-hard); } .hero-grid { display: grid; gap: 0; } @media (min-width: 768px) { .hero-grid { grid-template-columns: 3fr 2fr; gap: 20px; } } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 5fr 3fr; gap: 24px; } } .hero-main-article { padding-bottom: 16px; } .hero-main-article .hero-img { position: relative; overflow: hidden; aspect-ratio: 16/9; background: var(--bg-section); margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); } .hero-main-article .hero-img img { width: 100%; height: 100%; object-fit: cover; } .hero-main-article .hero-img .hero-cat { position: absolute; bottom: 0; left: 0; background: var(--gold); color: var(--navy); font-size: 11px; font-weight: 700; padding: 3px 10px; letter-spacing: .5px; text-transform: uppercase; } .hero-main-article .hero-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 8px; transition: color .15s; display: block; } .hero-main-article .hero-title:hover { color: var(--gold-dark); } .hero-main-article .hero-sapo { font-size: 14px; color: var(--text-sec); line-height: 1.65; margin-bottom: 8px; } .hero-main-article .hero-meta { font-size: 12px; color: var(--text-muted); } .hero-sub-col { border-left: 2px solid var(--border-hard); padding-left: 20px; display: flex; flex-direction: column; } @media (max-width: 767px) { .hero-sub-col { border-left: none; padding-left: 0; border-top: 2px solid var(--border-hard); padding-top: 16px; } } /* ================================================================ GRID ================================================================ */ .articles-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .articles-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .articles-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } } /* ================================================================ CATEGORY BLOCK ================================================================ */ .category-block { padding: 20px 0; border-top: 2px solid var(--border-hard); } .cat-block-inner { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .cat-block-inner { grid-template-columns: 1fr 1fr; gap: 20px; } } @media (min-width: 1024px) { .cat-block-inner { grid-template-columns: 3fr 2fr; gap: 24px; } } .cat-main-article .cat-thumb { overflow: hidden; aspect-ratio: 16/9; background: var(--bg-section); margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius); } .cat-main-article .cat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .cat-main-article:hover .cat-thumb img { transform: scale(1.03); } .cat-main-article .cat-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 6px; transition: color .15s; } .cat-main-article:hover .cat-title { color: var(--gold-dark); } .cat-main-article .cat-sapo { font-size: 13px; color: var(--text-sec); line-height: 1.6; } /* ================================================================ SIDEBAR ================================================================ */ .sidebar { display: flex; flex-direction: column; gap: 20px; } .sidebar-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; border-top: 3px solid var(--gold); } .sidebar-heading { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .4px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .sidebar-ranked { display: flex; flex-direction: column; } .sidebar-ranked-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); align-items: flex-start; } .sidebar-ranked-item:last-child { border-bottom: none; } .rank-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--bg-section); color: var(--text-muted); margin-top: 1px; } .rank-num.rank-1 { background: var(--gold); color: var(--navy); } .rank-num.rank-2 { background: var(--border-hard); color: var(--text-sec); } .rank-num.rank-3 { background: rgba(201, 168, 76, .25); color: var(--gold-dark); } .rank-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; } .rank-title:hover { color: var(--gold-dark); } .tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; } .tag-pill { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; background: var(--bg-light); color: var(--text-sec); border: 1px solid var(--border-hard); transition: var(--transition); } .tag-pill:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); } /* ================================================================ BREADCRUMB ================================================================ */ .breadcrumb { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; flex-wrap: wrap; } .breadcrumb a { color: var(--text-sec); } .breadcrumb a:hover { color: var(--gold-dark); } .breadcrumb-sep { color: var(--border-hard); } /* ================================================================ ARTICLE DETAIL ================================================================ */ .article-category-link { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gold-dark); background: var(--gold-pale); padding: 3px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-hard); margin-bottom: 10px; } .article-title { font-family: var(--font-display); font-size: 26px; line-height: 1.35; color: var(--text); margin-bottom: 14px; } @media (min-width: 768px) { .article-title { font-size: 30px; } } .article-sapo { font-size: 16px; line-height: 1.7; color: var(--text-sec); font-weight: 500; padding: 14px 16px; border-left: 3px solid var(--gold); background: var(--gold-pale); margin-bottom: 16px; border-radius: 0 var(--radius) var(--radius) 0; } .article-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .article-meta-item { display: flex; align-items: center; gap: 4px; } .article-meta svg { width: 13px; height: 13px; } .article-thumbnail { margin-bottom: 24px; background: var(--bg-section); aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); } .article-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .article-content { font-size: 16px; line-height: 1.9; color: var(--text); } .article-content h2 { font-size: 20px; margin: 24px 0 10px; color: var(--text); } .article-content h3 { font-size: 17px; margin: 20px 0 8px; color: var(--text); } .article-content p { margin-bottom: 16px; } .article-content img { margin: 20px auto; border-radius: var(--radius); } .article-content blockquote { border-left: 3px solid var(--gold); padding: 10px 16px; background: var(--gold-pale); margin: 20px 0; font-style: italic; color: var(--text-sec); } .article-content a { color: #1A6FA8; text-decoration: underline; } [data-theme="dark"] .article-content a { color: #7BB8E8; } .article-content ul, .article-content ol { margin: 14px 0; padding-left: 22px; } .article-content ul { list-style: disc; } .article-content ol { list-style: decimal; } .article-content li { margin-bottom: 5px; } .article-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); } .article-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; } .article-tags-label { font-size: 13px; font-weight: 600; color: var(--text-sec); } .share-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .share-label { font-size: 13px; font-weight: 600; color: var(--text-sec); } .share-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 3px; font-size: 12.5px; font-weight: 600; transition: opacity .15s; } .share-btn:hover { opacity: .85; } .share-fb { background: #1877F2; color: #fff; } .share-zalo { background: #0068FF; color: #fff; } .share-copy { background: var(--bg-section); color: var(--text-sec); border: 1px solid var(--border-hard); } .share-copy:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); } .related-section { margin-top: 28px; } /* ================================================================ CATEGORY PAGE ================================================================ */ .category-header { background: var(--navy); padding: 22px 0; margin-bottom: 20px; } .category-header h1 { color: #fff; font-size: 22px; margin-bottom: 4px; } .category-header p { color: rgba(255, 255, 255, .6); font-size: 13px; } .category-header .breadcrumb { margin-bottom: 10px; } .category-header .breadcrumb a { color: rgba(255, 255, 255, .55); } .category-header .breadcrumb-current { color: rgba(255, 255, 255, .9); } .category-header .breadcrumb-sep { color: rgba(255, 255, 255, .3); } /* ================================================================ SEARCH PAGE ================================================================ */ .search-header { padding: 24px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .search-results-count { font-size: 13.5px; color: var(--text-sec); } .search-results-count strong { color: var(--text); } /* ================================================================ PAGINATION ================================================================ */ .pagination { display: flex; justify-content: center; gap: 4px; margin-top: 24px; flex-wrap: wrap; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius); font-size: 13px; font-weight: 600; background: var(--bg-card); color: var(--text-sec); border: 1px solid var(--border-hard); transition: var(--transition); } .pagination a:hover { background: var(--gold-pale); border-color: var(--gold); color: var(--navy); } .pagination .active { background: var(--gold); border-color: var(--gold); color: var(--navy); } .pagination .disabled { opacity: .4; pointer-events: none; } /* ================================================================ SMALL CARD ================================================================ */ .card-sm { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); } .card-sm:last-child { border-bottom: none; } .card-sm-thumb { flex-shrink: 0; width: 90px; height: 60px; overflow: hidden; background: var(--bg-section); border: 1px solid var(--border); border-radius: var(--radius-sm); } .card-sm-thumb img { width: 100%; height: 100%; object-fit: cover; } .card-sm-body { flex: 1; min-width: 0; } .card-sm-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; } .card-sm-title:hover { color: var(--gold-dark); } .card-sm-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; } /* ================================================================ FOOTER ================================================================ */ .site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 36px 0 0; margin-top: 40px; font-size: 13.5px; border-top: 4px solid var(--gold); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px; } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer-brand img { height: 38px; margin-bottom: 12px; filter: var(--footer-logo-filter); transition: var(--transition); } .footer-brand p { font-size: 13px; line-height: 1.7; color: var(--footer-text); } .footer-social { display: flex; gap: 8px; margin-top: 14px; } .footer-social a { width: 32px; height: 32px; border-radius: 50%; background: var(--footer-social-bg); border: 1px solid var(--footer-border); display: flex; align-items: center; justify-content: center; color: var(--footer-social-cl); transition: var(--transition); } .footer-social a:hover { background: var(--footer-social-hover-bg); color: var(--footer-social-hover-cl); border-color: var(--footer-social-hover-bg); } .footer-col h4 { font-size: 13px; font-weight: 700; color: var(--footer-head); margin-bottom: 12px; letter-spacing: .2px; padding-bottom: 8px; border-bottom: 1px solid var(--footer-border); } .footer-col h4 i { margin-right: 6px; color: var(--footer-icon-cl) !important; } .footer-col ul { display: flex; flex-direction: column; gap: 7px; } .footer-col ul li a { color: var(--footer-text); font-size: 13px; transition: var(--transition); } .footer-col ul li a i { color: var(--footer-icon-cl) !important; } .footer-col ul li a:hover { color: var(--footer-link-hover); padding-left: 3px; } .footer-bottom { background: var(--footer-bottom-bg); border-top: 1px solid var(--footer-border); padding: 14px 0; text-align: center; font-size: 12px; color: var(--footer-bottom-text); transition: background .2s ease, color .15s ease; } .footer-bottom strong { color: var(--footer-bottom-text) !important; } /* ================================================================ MISC ================================================================ */ .no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-section); color: var(--border-hard); } .no-img svg { width: 28px; height: 28px; } .empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); } .empty-state h3 { font-size: 17px; color: var(--text-sec); margin-bottom: 6px; } .ad-slot { background: var(--bg-light); border: 1px dashed var(--border-hard); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (max-width: 639px) { .article-title { font-size: 20px; } .article-content { font-size: 15px; } } /* ================================================================ COMMENTS SECTION ================================================================ */ .comments-section { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); } .comment-form-box { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 24px; } .comment-form-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; } @media (min-width: 640px) { .comment-form-row { grid-template-columns: 1fr 1fr; } } .comment-logged-in-user { font-size: 13.5px; color: var(--text-sec); margin-bottom: 10px; } .comment-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border-hard); border-radius: var(--radius); background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 13.5px; outline: none; transition: border-color .2s, box-shadow .2s; } .comment-input:focus { border-color: var(--gold); box-shadow: var(--shadow-gold); } .comment-textarea { resize: vertical; min-height: 80px; } .comment-submit-btn { background: var(--gold); color: var(--navy); font-family: var(--font-body); font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 20px; transition: background .15s, transform .1s; } .comment-submit-btn:hover { background: var(--gold-dark); } .comment-submit-btn:active { transform: scale(0.97); } .comment-cancel-reply-btn { background: transparent; color: var(--text-muted); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 20px; transition: color .15s; } .comment-cancel-reply-btn:hover { color: var(--text-sec); } .comments-list { display: flex; flex-direction: column; gap: 20px; } .comment-item { display: flex; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); transition: background .4s ease; } .comment-item:last-child { border-bottom: none; } .comment-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); background: var(--bg-section); } .comment-avatar img { width: 100%; height: 100%; object-fit: cover; } .comment-main { flex: 1; min-width: 0; } .comment-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .comment-author-name { font-size: 13.5px; font-weight: 700; color: var(--text); } .comment-admin-badge { display: inline-flex; align-items: center; background: var(--navy); color: #FFFFFF; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: .2px; } [data-theme="dark"] .comment-admin-badge { background: var(--gold); color: var(--navy); } .comment-time { font-size: 11.5px; color: var(--text-muted); } .comment-content { font-size: 14px; line-height: 1.6; color: var(--text-sec); margin-bottom: 6px; word-wrap: break-word; } .comment-footer { display: flex; gap: 12px; } .comment-reply-btn { color: var(--gold-dark); font-size: 12px; font-weight: 600; padding: 2px 0; transition: color .15s; display: inline-flex; align-items: center; gap: 4px; } .comment-reply-btn:hover { color: var(--gold); } .comment-replies-list { margin-top: 14px; padding-left: 16px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 14px; } .comment-reply-item { border-bottom: none; padding-bottom: 0; } .comment-reply-item .comment-avatar { width: 32px; height: 32px; } .comment-empty-state { text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 13.5px; border: 1px dashed var(--border); border-radius: var(--radius-lg); } .comment-highlight { background: var(--gold-dim); border-radius: var(--radius); animation: fadeHighlight 2s forwards; } @keyframes fadeHighlight { 0% { background: var(--gold-glow); } 100% { background: transparent; } } /* ================================================================ ARTICLE ACTIONS BAR ================================================================ */ .article-actions-bar { display: flex; background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0, 0, 0, .06); z-index: 100; transition: all .25s ease; } .article-actions-bar .action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: transparent; border: none; cursor: pointer; color: var(--text-sec); font-family: var(--font-body); transition: color .2s, transform .1s; } .article-actions-bar .action-btn i { font-size: 16px; } .article-actions-bar .action-btn span { font-size: 10px; font-weight: 600; white-space: nowrap; } .article-actions-bar .action-btn:hover { color: var(--gold-dark); } .article-actions-bar .action-btn:active { transform: scale(0.92); } .action-share-wrap { position: relative; } .share-dropdown { position: absolute; background: var(--bg-card); border: 1px solid var(--border-hard); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .15); display: none; flex-direction: column; min-width: 160px; z-index: 1010; overflow: hidden; } .share-dropdown.open { display: flex; } .share-dropdown a, .share-dropdown button { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; color: var(--text-sec); background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; font-family: var(--font-body); transition: background .15s, color .15s; box-sizing: border-box; } .share-dropdown a:hover, .share-dropdown button:hover { background: var(--bg-light); color: var(--gold-dark); } /* Print utility styles */ @media print { .header-topbar, .site-header, .site-nav, .site-search-bar, .sidebar, .site-footer, .comments-section, .related-section, .article-actions-bar, .share-bar { display: none !important; } .page-body { padding: 0 !important; } .layout-main { grid-template-columns: 1fr !important; } .content-area { width: 100% !important; } } /* Responsive positions */ @media (min-width: 1024px) { .article-actions-bar { position: sticky; top: 120px; float: left; margin-left: -76px; width: 56px; flex-direction: column; align-items: center; border-radius: 30px; padding: 16px 0; gap: 20px; } .share-dropdown { left: 70px; top: 0; } } @media (max-width: 1023px) { .article-actions-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; flex-direction: row; justify-content: space-around; align-items: center; border-radius: 0; border-left: none; border-right: none; border-bottom: none; padding: 0 10px; box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); } .article-actions-bar .action-btn { height: 100%; flex: 1; } .share-dropdown { bottom: 60px; right: 10px; } /* Extra bottom padding for layout so content is not cut off by floating bar */ .page-body { padding-bottom: 80px !important; } } /* ================================================================ STATIC PAGES — About, Contact, Privacy, Terms ================================================================ */ .static-page-container { padding: 40px 0 60px; } .static-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-sm); transition: background .2s, border-color .2s; } @media (max-width: 767px) { .static-card { padding: 24px; } } .static-header { margin-bottom: 32px; } .static-header h1 { font-size: 32px; font-weight: 800; color: var(--text); margin: 0 0 12px; border-left: 4px solid var(--gold); padding-left: 16px; line-height: 1.2; } .static-header .static-subtitle { font-size: 15px; color: var(--text-muted); padding-left: 20px; } .static-content { color: var(--text-sec); line-height: 1.8; font-size: 15.5px; } .static-content p { margin-bottom: 20px; } .static-content h2 { font-size: 22px; font-weight: 700; color: var(--text); margin: 36px 0 16px; display: flex; align-items: center; gap: 10px; } .static-content h2 i { color: var(--gold); font-size: 18px; } .static-content h3 { font-size: 17px; font-weight: 700; color: var(--text); margin: 24px 0 12px; } .static-content ul, .static-content ol { margin-bottom: 20px; padding-left: 24px; } .static-content li { margin-bottom: 8px; } /* Contact Grid & Form */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 768px) { .contact-grid { grid-template-columns: 1.2fr 1.8fr; } } .contact-info-wrap { display: flex; flex-direction: column; gap: 24px; } .contact-info-card { background: var(--bg-light); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 24px; display: flex; align-items: flex-start; gap: 16px; } .contact-info-card i { font-size: 20px; color: var(--gold); background: var(--bg-card); padding: 14px; border-radius: 50%; box-shadow: var(--shadow-xs); flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .contact-info-text h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--text); } .contact-info-text p, .contact-info-text a { margin: 0; font-size: 14.5px; color: var(--text-sec); text-decoration: none; } .contact-info-text a:hover { color: var(--gold-dark); } .contact-form-wrap h2 { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 24px; } .form-group-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; } @media (min-width: 600px) { .form-group-grid { grid-template-columns: 1fr 1fr; } } .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .form-group label { font-size: 13.5px; font-weight: 700; color: var(--text); } .form-control { background: var(--bg-light); border: 1.5px solid var(--border-soft); border-radius: var(--radius); padding: 12px 16px; color: var(--text); font-family: var(--font-body); font-size: 14.5px; transition: all .2s ease; } .form-control:focus { border-color: var(--gold); background: var(--bg-card); box-shadow: var(--shadow-gold); outline: none; } .btn-submit { background: var(--gold); color: var(--navy); font-weight: 700; padding: 14px 28px; border: none; border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; transition: var(--transition); } .btn-submit:hover { background: var(--gold-dark); box-shadow: var(--shadow-sm); transform: translateY(-1px); }