@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap'); /* ========================================================== BIẾN MÀU — ĐÊM (mặc định) & BAN NGÀY Chế độ nằm ở thẻ , do js/theme.js đặt. Đổi màu toàn site chỉ cần sửa trong hai khối dưới đây. ========================================================== */ :root, :root[data-che-do="toi"] { --nen-1: #1a0033; --nen-2: #33001a; --nen-3: #001a33; --chu: #ffffff; --chu-mo: #bbbbbb; --chu-nhat: #dddddd; --vang: #ffcc00; /* màu nhấn chính */ --vang-dam: #ff9900; --cam: #ff6600; --cam-dam: #ff3300; --tam-nen: rgba(20, 0, 40, .85); /* navbar */ --the-nen: rgba(30, 10, 50, .8); /* thẻ nội dung */ --o-nen: rgba(0, 0, 0, .5); /* ô nhập, select */ --hero-nen: rgba(0, 0, 0, .45); --vien: rgba(255, 204, 0, .3); --vien-dam: rgba(255, 204, 0, .5); --bong: rgba(0, 0, 0, .5); --bong-nhe: rgba(0, 0, 0, .3); --hao-quang: .7; /* độ mạnh của glow */ --menu-nen: #1a0033; --modal-nen: linear-gradient(145deg, #220033, #11001a); --nut-2-chu: #1a0033; } :root[data-che-do="sang"] { --nen-1: #FFF3DC; --nen-2: #FFE7CC; --nen-3: #FDF6E7; --chu: #3A2410; --chu-mo: #6B563E; --chu-nhat: #4A3320; --vang: #B8651B; --vang-dam: #96500F; --cam: #D2691E; --cam-dam: #B01E24; --tam-nen: rgba(255, 255, 255, .92); --the-nen: rgba(255, 255, 255, .78); --o-nen: rgba(255, 255, 255, .9); --hero-nen: rgba(255, 255, 255, .66); --vien: rgba(160, 90, 30, .26); --vien-dam: rgba(160, 90, 30, .45); --bong: rgba(120, 70, 20, .16); --bong-nhe: rgba(120, 70, 20, .1); --hao-quang: 0; /* tắt glow cho nền sáng */ --menu-nen: #FFF6E4; --modal-nen: linear-gradient(145deg, #FFFDF6, #FFF1DC); --nut-2-chu: #FFFDF6; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; } body { background: linear-gradient(135deg, var(--nen-1), var(--nen-2), var(--nen-3)); background-size: 400% 400%; animation: gradientBG 15s ease infinite; color: var(--chu); min-height: 100vh; overflow-x: hidden; transition: color .25s ease; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================================== NÚT ĐỔI CHẾ ĐỘ SÁNG / TỐI ========================================================== */ .nut-che-do { display: inline-flex; align-items: center; gap: 7px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; line-height: 1; padding: 9px 15px; border-radius: 22px; border: 1px solid var(--vien-dam); background: transparent; color: var(--vang); cursor: pointer; transition: .3s; } .nut-che-do:hover { background: rgba(255, 204, 0, .15); transform: translateY(-2px); box-shadow: 0 0 12px rgba(255, 204, 0, calc(.5 * var(--hao-quang))); } .nut-che-do:focus-visible { outline: 3px solid var(--vang); outline-offset: 2px; } .nut-che-do .nut-che-do-icon { font-size: 15px; } @media (max-width: 820px) { .nut-che-do { padding: 8px 11px; } .nut-che-do .nut-che-do-chu { display: none; } } /* ========================================================== MÀN HÌNH CHỜ ========================================================== */ #splashScreen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: url('/fontend/assets/images/background.png') no-repeat center center; background-size: cover; z-index: 9999; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 50px; transition: opacity 0.8s ease; } #splashScreen::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: 1; } .splash-content { position: relative; z-index: 2; width: 80%; max-width: 500px; text-align: center; } .splash-logo h1 { font-size: 28px; color: #ffcc00; text-shadow: 0 0 10px #ff6600, 0 0 20px #ff0000; margin-bottom: 5px; } .splash-logo p { font-size: 14px; color: #fff; margin-bottom: 20px; letter-spacing: 2px; } .loader-box { width: 100%; height: 18px; background: rgba(0, 0, 0, 0.6); border: 2px solid #ffcc00; border-radius: 10px; overflow: hidden; padding: 2px; box-shadow: 0 0 15px rgba(255, 204, 0, 0.6); } .loader-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #ff6600, #ffcc00, #ffff66); border-radius: 6px; transition: width 0.1s linear; } .loader-text { margin-top: 10px; font-size: 14px; font-weight: bold; color: #ffcc00; text-shadow: 1px 1px 2px #000; } /* ========================================================== HOA MAI RƠI ========================================================== */ .apricot-falling-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 999; overflow: hidden; } .apricot-flower { position: absolute; top: -50px; width: 24px; height: 24px; background: radial-gradient(circle, #fff033 30%, #ff9900 80%); border-radius: 50% 0 50% 50%; box-shadow: 0 0 8px #ffcc00; animation: fall linear infinite; } :root[data-che-do="sang"] .apricot-flower { background: radial-gradient(circle, #FFD75E 30%, #E07A15 80%); box-shadow: 0 2px 6px rgba(120, 70, 20, .28); } @keyframes fall { 0% { transform: translateY(-50px) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(360deg); opacity: 0.2; } } /* ========================================================== LAYOUT ========================================================== */ .container { max-width: 1200px; margin: 0 auto; padding: 20px; } /* NAVBAR */ .navbar { display: flex; justify-content: space-between; align-items: center; background: var(--tam-nen); backdrop-filter: blur(10px); padding: 15px 30px; border-radius: 15px; border: 1px solid var(--vien); box-shadow: 0 8px 32px var(--bong); position: sticky; top: 15px; z-index: 99; transition: background-color .25s ease, border-color .25s ease; } .logo { display: flex; align-items: center; flex: none; } .logo a { display: block; line-height: 0; } .logo img { height: 44px; width: auto; max-width: 200px; object-fit: contain; display: block; filter: drop-shadow(0 0 8px rgba(255, 204, 0, calc(.5 * var(--hao-quang)))); transition: transform .2s; } .logo a:hover img { transform: scale(1.04); } .logo a:focus-visible { outline: 3px solid var(--vang); outline-offset: 3px; border-radius: 8px; } @media (max-width: 620px) { .logo img { height: 36px; } } .nav-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .nav-links a { color: var(--chu-nhat); text-decoration: none; font-weight: 600; transition: 0.3s; } .nav-links a:hover, .nav-links a.active { color: var(--vang); text-shadow: 0 0 8px rgba(255, 204, 0, calc(1 * var(--hao-quang))); } /* BUTTONS */ .btn-primary, .btn-secondary, .btn-logout, .btn-user { padding: 10px 20px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px var(--bong-nhe); } .btn-primary { background: linear-gradient(135deg, var(--cam), var(--cam-dam)); color: #fff; } .btn-primary:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 102, 0, .5); } .btn-secondary { background: linear-gradient(135deg, var(--vang), var(--vang-dam)); color: var(--nut-2-chu); } .btn-secondary:hover { filter: brightness(1.12); transform: translateY(-2px); } .btn-logout { background: #dc3545; color: #fff; } .btn-logout:hover { background: #bd2130; } /* USER DROPDOWN */ .user-dropdown { position: relative; display: inline-block; } .btn-user { background: rgba(255, 204, 0, 0.2); color: var(--vang); border: 1px solid var(--vang); } .dropdown-menu { display: none; position: absolute; right: 0; background: var(--menu-nen); min-width: 180px; box-shadow: 0 8px 16px var(--bong); border-radius: 8px; overflow: hidden; border: 1px solid var(--vien); z-index: 10; margin-top: 5px; } .dropdown-menu a { color: var(--chu); padding: 12px 16px; text-decoration: none; display: block; font-size: 14px; } .dropdown-menu a:hover { background: rgba(255, 204, 0, 0.2); color: var(--vang); } .user-dropdown:hover .dropdown-menu { display: block; } /* ========================================================== HERO & FEATURES ========================================================== */ .main-content { margin-top: 40px; } .hero-banner { text-align: center; background: var(--hero-nen); border: 2px dashed var(--vien-dam); padding: 50px 20px; border-radius: 20px; margin-bottom: 40px; box-shadow: inset 0 0 20px rgba(255, 204, 0, calc(.15 * var(--hao-quang))); } .hero-banner h2 { font-size: 32px; color: var(--vang); margin-bottom: 15px; text-shadow: 0 0 10px rgba(255, 204, 0, calc(.5 * var(--hao-quang))); } .hero-banner p { font-size: 16px; color: var(--chu-mo); max-width: 700px; margin: 0 auto 25px auto; line-height: 1.6; } .hero-actions { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } .btn-glow { padding: 12px 25px; font-size: 16px; font-weight: bold; border-radius: 30px; text-decoration: none; transition: 0.3s; box-shadow: 0 0 15px rgba(255, 204, 0, calc(.5 * var(--hao-quang))), 0 4px 14px var(--bong-nhe); } .btn-download-large { background: #28a745; color: white; } .btn-download-large:hover { background: #218838; box-shadow: 0 0 25px #28a745; } .btn-zalo-large { background: #0068ff; color: white; } .btn-zalo-large:hover { background: #0052cc; box-shadow: 0 0 25px #0068ff; } /* FEATURES GRID */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; } .feature-card { background: var(--the-nen); border: 1px solid var(--vien); border-radius: 15px; padding: 30px; text-align: center; transition: 0.3s; box-shadow: 0 10px 30px var(--bong-nhe); } .feature-card:hover { transform: translateY(-5px); border-color: var(--vang); box-shadow: 0 15px 35px rgba(255, 204, 0, calc(.2 * var(--hao-quang))), 0 15px 35px var(--bong-nhe); } .feature-card h3 { color: var(--vang); margin-bottom: 12px; font-size: 20px; } .feature-card p { color: var(--chu-mo); font-size: 14px; line-height: 1.5; margin-bottom: 20px; } .download-buttons { display: flex; flex-direction: column; gap: 10px; } .btn-store { background: var(--o-nen); border: 1px solid var(--vien-dam); color: var(--chu); padding: 10px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.3s; } .btn-store:hover { background: var(--vang); color: var(--nut-2-chu); border-color: var(--vang); } .select-custom { width: 100%; padding: 12px; margin-bottom: 15px; background: var(--o-nen); border: 1px solid var(--vang); border-radius: 8px; color: var(--chu); } /* ========================================================== MODALS ========================================================== */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 1000; justify-content: center; align-items: center; } :root[data-che-do="sang"] .modal { background: rgba(60, 35, 10, .55); } .modal-content { background: var(--modal-nen); border: 2px solid var(--vang); padding: 30px; border-radius: 15px; width: 90%; max-width: 400px; position: relative; color: var(--chu); box-shadow: 0 0 30px rgba(255, 204, 0, calc(.4 * var(--hao-quang))), 0 18px 50px var(--bong); } .modal-content h2 { color: var(--vang); margin-bottom: 20px; text-align: center; } .modal-content input { width: 100%; padding: 12px; margin-bottom: 15px; background: var(--o-nen); border: 1px solid var(--vien-dam); border-radius: 8px; color: var(--chu); } .modal-content input:focus { border-color: var(--vang); outline: none; box-shadow: 0 0 8px rgba(255, 204, 0, .5); } .modal-content p { text-align: center; margin-top: 15px; font-size: 14px; color: var(--chu-mo); } .modal-content p a { color: var(--vang); text-decoration: none; } .close { position: absolute; top: 15px; right: 20px; font-size: 24px; color: var(--vang); cursor: pointer; } /* ========================================================== TIỆN ÍCH ========================================================== */ .hidden { display: none !important; } .message { margin-top: 10px; text-align: center; font-size: 14px; } @media (prefers-reduced-motion: reduce) { body { animation: none; } .apricot-flower { animation: none; display: none; } } /* ========================================================== DIỄN ĐÀN / BÀI ĐĂNG ========================================================== */ .news-section { margin-top: 45px; } .news-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .news-head h2 { font-size: 26px; color: var(--vang); text-shadow: 0 0 10px rgba(255, 204, 0, calc(.5 * var(--hao-quang))); white-space: nowrap; } /* đường kẻ chèn giữa tiêu đề và link "Xem tất cả" */ .news-head h2::after { content: ""; display: inline-block; vertical-align: middle; } .news-head > h2 { flex: none; } .news-head::before { content: ""; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, var(--vien-dam), transparent); } .news-head > a { order: 2; } .news-list { display: grid; gap: 16px; } .post-card { display: flex; align-items: center; gap: 20px; background: var(--the-nen); border: 1px solid var(--vien); border-left: 4px solid var(--vang); border-radius: 14px; padding: 18px 22px; cursor: pointer; text-decoration: none; color: inherit; transition: .25s; box-shadow: 0 8px 24px var(--bong-nhe); } .post-card:hover { transform: translateY(-3px); border-color: var(--vang); box-shadow: 0 14px 32px var(--bong-nhe), 0 0 22px rgba(255, 204, 0, calc(.18 * var(--hao-quang))); } .post-icon { flex: none; width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: rgba(255, 204, 0, .14); border: 1px solid var(--vien); } .post-body { flex: 1; min-width: 0; } .post-title { font-size: 17px; font-weight: 800; color: var(--vang); margin-bottom: 5px; line-height: 1.35; } .post-desc { font-size: 14px; color: var(--chu-mo); line-height: 1.55; margin-bottom: 8px; } .post-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--chu-mo); } .post-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 4px 11px; border-radius: 20px; background: linear-gradient(135deg, var(--cam), var(--cam-dam)); color: #fff; } .post-tag.tag-tin { background: linear-gradient(135deg, #2C7BE5, #1A4FA0); } .post-tag.tag-bao-tri { background: linear-gradient(135deg, #6C757D, #495057); } .post-go { flex: none; font-size: 18px; color: var(--vang); opacity: .75; transition: transform .25s; } .post-card:hover .post-go { transform: translateX(4px); opacity: 1; } .news-empty { padding: 26px; text-align: center; color: var(--chu-mo); border: 1px dashed var(--vien); border-radius: 14px; } /* nội dung bài đăng trong modal */ .post-modal-content { max-width: 620px; text-align: left; max-height: 82vh; overflow-y: auto; } .post-modal-content h2 { text-align: left; font-size: 22px; line-height: 1.35; } .post-modal-body { font-size: 14.5px; line-height: 1.75; color: var(--chu); } .post-modal-body p { margin-bottom: 12px; } .post-modal-body ul { margin: 0 0 14px 20px; } .post-modal-body li { margin-bottom: 7px; } .post-modal-body strong { color: var(--vang); } @media (max-width: 620px) { .post-card { gap: 14px; padding: 15px; } .post-icon { width: 46px; height: 46px; font-size: 23px; } .post-title { font-size: 15.5px; } .post-go { display: none; } }