/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 5.7
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz,wght@8..144,400;8..144,600;8..144,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;800&display=swap');


/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
/* === Trang chủ demo (Night Arcade) === */
.gd-home, .gd-home p, .gd-home h1, .gd-home h2, .gd-home h3, .gd-home h4 { font-family: 'Be Vietnam Pro', sans-serif; color: #E8ECF1; }
.gd-home .gd-h1 { font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 800; line-height: 1.08; margin-bottom: .5em; }
.gd-home .gd-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.1; margin-bottom: .3em; }
.gd-home .gd-h3 { font-size: 1.5rem; font-weight: 800; line-height: 1.15; margin-bottom: .3em; }
.gd-home .gd-h4 { font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #19C37D; }
.gd-home .gd-lead { font-size: 1.1rem; line-height: 1.6; max-width: 34ch; color: #C9D0DA; }
.gd-home .gd-sub, .gd-home .gd-sub a { color: #8A94A6; line-height: 1.7; max-width: 62ch; }
.gd-home .gd-sub a:hover { color: #19C37D; }
.gd-home .gd-copy { color: #8A94A6; font-size: .85rem; border-top: 1px solid #252C37; padding-top: 20px; margin: 0; }
.gd-home .button.success { background: #19C37D; color: #0E1116; border-radius: 8px; box-shadow: none; font-weight: 600; }



.gd-tile { border-radius: 14px; overflow: hidden; }
.gd-tile .banner-bg { border-radius: 14px; }




.gd-tile p { color: #C9D0DA; margin: 0; }
.gd-cats .col { padding-bottom: 20px; }
/* Header & footer demo */
.header-wrapper .logo a { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; color: #E8ECF1; font-size: 1.25rem; text-transform: none; }
.header-main { border-bottom: 1px solid #252C37; }
.absolute-footer { display: none; }
.footer-wrapper { background: #171C24; }
.header-wrapper .logo a { white-space: nowrap; }

/* Trang con + menu */





.gd-home .gd-h4n { font-size: 1.15rem; font-weight: 800; line-height: 1.15; margin-bottom: .2em; }

.gd-home .button.is-outline { border-radius: 8px; border-color: #3A4352; color: #E8ECF1; }
.gd-text .gd-h4 { margin-top: 1em; }
.header-main .nav > li > a { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; text-transform: none; color: #C9D0DA; }
.header-main .nav > li > a:hover, .header-main .nav > li.active > a { color: #19C37D; }
.nav-dropdown { background: #171C24; border: 1px solid #252C37; }
.nav-dropdown li a { color: #C9D0DA !important; font-family: 'Be Vietnam Pro', sans-serif; }
.nav-dropdown li a:hover { color: #19C37D !important; background: transparent; }
.off-canvas-left .mfp-content, .off-canvas .sidebar-menu { background: #0E1116; }

.mobile-sidebar .nav > li > a { font-family: 'Be Vietnam Pro', sans-serif; text-transform: none; font-size: 1rem; color: #E8ECF1; }

/* Ảnh Night Lattice */
.gd-tile .banner-bg { background-color: #171C24; }
.gd-game .banner-bg img { opacity: .9; }
.gd-page-hero .section-bg img { object-position: 80% 50%; }
.header-wrapper .logo a { display: inline-flex; align-items: center; gap: 10px; }


/* Logo CN3789 */
.header-wrapper .logo img { max-height: 46px; width: auto; }
@media (max-width: 849px) { .header-wrapper .logo img { max-height: 36px; } }

/* Footer toàn site (SEO) */
.gd-sitefoot { border-top: 1px solid #252C37; }
.gd-sitefoot .gd-foot-logo img { height: 46px; width: auto; margin-bottom: 14px; }
.gd-sitefoot .gd-foot-about { max-width: 38ch; }
.gd-sitefoot .gd-foot-title { font-family: 'Be Vietnam Pro', sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #19C37D; margin-bottom: 14px; }
.gd-sitefoot .gd-foot-list { list-style: none; margin: 0; padding: 0; }
.gd-sitefoot .gd-foot-list li { margin: 0 0 10px; padding: 0; }
.gd-sitefoot .gd-foot-list a, .gd-sitefoot .gd-foot-nap a { color: #C9D0DA; font-family: 'Be Vietnam Pro', sans-serif; }
.gd-sitefoot .gd-foot-list a:hover, .gd-sitefoot .gd-foot-nap a:hover { color: #19C37D; }
.gd-sitefoot .gd-foot-nap { font-style: normal; color: #8A94A6; line-height: 1.8; font-family: 'Be Vietnam Pro', sans-serif; }
.gd-sitefoot .gd-foot-nap strong { color: #E8ECF1; }
.gd-sitefoot .gd-foot-bottom { margin-top: 24px; }
.footer-wrapper { background: #0E1116; }

/* ===== Giao diện sáng (Sky Portal) ===== */
body { background: #FFFFFF; font-family: 'Roboto Serif', serif; color: #1A2733; }
.gd-home, .gd-home p, .gd-home h1, .gd-home h2, .gd-home h3, .gd-home h4, .gd-home li { font-family: 'Roboto Serif', serif; }
.gd-home:not(.dark), .gd-home:not(.dark) p, .gd-home:not(.dark) li, .gd-home:not(.dark) h1, .gd-home:not(.dark) h2, .gd-home:not(.dark) h3, .gd-home:not(.dark) h4 { color: #1A2733; }
.gd-home:not(.dark) .gd-sub { color: #4A5A68; }
.gd-home:not(.dark) .gd-h4 { color: #02A9DC; }
.gd-home .button.success, .gd-home .button.primary { background: #02A9DC; color: #FFFFFF; }
.gd-home .button.is-outline.primary { color: #02A9DC; border-color: #02A9DC; background: transparent; }
/* header */
.header-main { border-bottom: 0; }
.header-bottom { background: #1E8BC3 !important; }
.header-bottom .nav > li > a { font-family: 'Roboto Serif', serif; font-weight: 800; font-size: 1.02rem; color: #FFFFFF !important; text-transform: none; }
.header-bottom .nav-line-bottom > li > a:before { background: #7FE3FF; height: 3px; }
.header-main .header-button .button { font-family: 'Roboto Serif', serif; font-weight: 800; letter-spacing: .02em; padding: 0 24px; }
.header-main .header-button .button.primary { background: linear-gradient(180deg, #3CD0F7, #02A9DC); box-shadow: 0 3px 0 #0A86AE; }
.header-main .header-button .button.alert { background: linear-gradient(180deg, #E53935, #B71C1C); box-shadow: 0 3px 0 #8E1414; }
.nav-dropdown { background: #FFFFFF; border: 1px solid #D5E7F2; }
.nav-dropdown li a { color: #1A2733 !important; }
/* banner slider */

.gd-home .gd-banner-title { font-family: 'Roboto Serif', serif; font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 800; line-height: 1.08; color: #0F2A3D; margin-bottom: .35em; }
.gd-home .gd-banner-lead { font-size: 1.08rem; line-height: 1.55; color: #12384F; max-width: 34ch; }
/* section titles (H1/H2 center with lines) */
.gd-sec-title .section-title-main { font-family: 'Roboto Serif', serif; font-weight: 800; color: #02A9DC; text-transform: uppercase; font-size: clamp(1.25rem, 2.4vw, 2rem); }
.gd-sec-title .section-title b { background: #CDEFFA; opacity: 1; height: 2px; }
.gd-intro-text { text-align: center; max-width: 78ch; margin: 0 auto; font-style: italic; line-height: 1.8; color: #34495A; }
/* news grid */
.gd-news-grid .box { background: #FFFFFF; border-radius: 10px; overflow: hidden; border: 1px solid #D5E7F2; }
.gd-news-grid .box-text { padding: 16px; }
.gd-news-grid .post-title { font-family: 'Roboto Serif', serif; font-weight: 800; color: #0F2A3D; font-size: 1rem; line-height: 1.3; }
.gd-news-grid .is-divider { background: #02A9DC; }
.gd-news-grid .from_the_blog_excerpt { color: #4A5A68; }
/* category tiles on light ground */
.gd-home:not(.dark) .gd-tile .gd-h3, .gd-home:not(.dark) .gd-tile p, .gd-home:not(.dark) .gd-tile .gd-h4n { color: #FFFFFF; }
.gd-tile { box-shadow: 0 6px 18px rgba(14, 58, 82, .14); }
/* seo box */
.gd-seo-box { background: #FFFFFF; border: 1px solid #D5E7F2; border-radius: 10px; padding: 32px 36px; max-height: 420px; overflow-y: auto; }
.gd-seo-box h2 { font-family: 'Roboto Serif', serif; color: #02A9DC; font-weight: 800; font-size: 1.5rem; }
.gd-seo-box h3 { font-family: 'Roboto Serif', serif; color: #1E8BC3; font-weight: 800; font-size: 1.15rem; margin-top: 1.1em; }
.gd-seo-box p, .gd-seo-box li { color: #34495A; line-height: 1.75; max-width: none; }
/* footer */
.footer-wrapper { background: #0E3A52; }
.gd-sitefoot { border-top: 0; }
.gd-sitefoot .gd-foot-title { color: #7FE3FF; }
.gd-sitefoot .gd-foot-list a, .gd-sitefoot .gd-foot-nap a { color: #E3F3FA; }
.gd-sitefoot .gd-foot-nap, .gd-sitefoot .gd-sub, .gd-sitefoot .gd-copy { color: #A9C7D6; }
.gd-sitefoot .gd-foot-list a:hover, .gd-sitefoot .gd-foot-nap a:hover { color: #7FE3FF; }
.gd-sitefoot .gd-copy { border-top-color: #1D5370; }
/* mobile sidebar */
.off-canvas .sidebar-menu, .off-canvas-left .mfp-content { background: #FFFFFF; }
.mobile-sidebar .nav > li > a { color: #1A2733; font-family: 'Roboto Serif', serif; }
/* Fix mobile */
.header-button .button { white-space: nowrap; }
@media (max-width: 849px) { .header-main .header-button .button { padding: 0 14px; font-size: .82rem; line-height: 2.2em; min-height: 2.2em; } .header-wrapper .logo img { max-height: 32px; } }
@media (max-width: 549px) {  .gd-home .gd-banner-lead { font-size: .95rem; } }

/* Slider tràn viền */
.gd-hero-wrap .row-full-width, .gd-hero-wrap .col { padding: 0 !important; max-width: 100% !important; }
.gd-hero .banner { border-radius: 0 !important; }
.gd-hero-wrap .section-content > .row { margin: 0 !important; }
.gd-hero .text-box { max-width: 1200px; }
@media (min-width: 1300px) { .gd-hero .text-box { left: calc((100% - 1200px) / 2 + 20px) !important; transform: translate(0, -50%) !important; } }

/* Bài SEO trang chủ */
.gd-article-body { max-width: 860px; margin: 0 auto; }
.gd-article-body h2 { font-family: 'Roboto Serif', serif; color: #02A9DC; font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.25; margin: 1.6em 0 .6em; }
.gd-article-body h2:first-child { margin-top: 0; }
.gd-article-body h3 { font-family: 'Roboto Serif', serif; color: #1A2733; font-weight: 800; font-size: 1.12rem; margin: 1.2em 0 .4em; }
.gd-article-body h3 a { color: #1E8BC3; }
.gd-article-body p, .gd-article-body li { color: #34495A; line-height: 1.8; font-size: 1rem; }
.gd-article-body ul { margin-left: 1.2em; }
.gd-article-body li { margin-bottom: .5em; }
.gd-article-body strong { color: #1A2733; }

/* Bài SEO nằm trong mục giới thiệu */
.gd-intro .gd-article-body { margin-top: 36px; text-align: left; }

/* Ẩn mục Tin tức khi chưa có bài */
.gd-news:not(:has(.post-item)) { display: none; }

/* Khối liên hệ footer */
.gd-contact .gd-contact-name { font-family: 'Roboto Serif', serif; font-weight: 800; font-size: 1.15rem; color: #FFFFFF; margin: 0 0 14px; }
.gd-contact ul { list-style: none; margin: 0; padding: 0; }
.gd-contact li { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 0; }
.gd-contact .gd-ci { flex: 0 0 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(127, 227, 255, .12); color: #7FE3FF; border: 1px solid rgba(127, 227, 255, .25); }
.gd-contact .gd-cv { display: flex; flex-direction: column; line-height: 1.45; color: #E3F3FA; font-size: .98rem; padding-top: 1px; }
.gd-contact .gd-cl { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #8FB4C6; margin-bottom: 2px; }
.gd-contact .gd-cv a { color: #FFFFFF; font-weight: 600; }
.gd-contact .gd-cv a:hover { color: #7FE3FF; }

.gd-contact ul, .gd-contact li { margin-left: 0 !important; padding-left: 0 !important; }

.gd-sitefoot .gd-foot-about strong { color: #FFFFFF; }

/* Logo CN3789 lớn hơn */
.header-wrapper .logo img { max-height: 62px !important; width: auto; }
@media (max-width: 849px) { .header-wrapper .logo img { max-height: 40px !important; } }

/* Khung logo lớn (áp dụng cho mọi logo) */
.header-wrapper .logo img { max-height: 88px !important; width: auto !important; max-width: 320px; object-fit: contain; }
@media (max-width: 849px) { .header-wrapper .logo img { max-height: 52px !important; max-width: 190px; } }

/* Khung logo lớn hơn nữa */
.header-wrapper .logo img { max-height: 128px !important; max-width: 420px !important; }
@media (max-width: 849px) { .header-wrapper .logo img { max-height: 72px !important; max-width: 220px !important; } }

/* Nút Đăng ký / Đăng nhập nhỏ hơn trên thanh xanh (mobile) */
.header-bottom .mobile-nav .header-button .button { font-size: .82rem !important; padding: 0 16px !important; line-height: 2.2em !important; min-height: 2.2em !important; margin: 0 !important; letter-spacing: .02em; }
.header-bottom .mobile-nav { gap: 10px; }
.header-bottom .mobile-nav > li { margin: 0 !important; }

/* Header thấp hơn */
.header-wrapper .logo img { max-height: 80px !important; }
@media (max-width: 849px) { .header-wrapper .logo img { max-height: 46px !important; } .header-bottom { min-height: 46px !important; } .header-bottom .flex-row { min-height: 46px !important; height: 46px; } }

/* Nút Đăng nhập màu xanh lá (mọi vị trí) */
.header-wrapper .header-button-1 .button.primary, .header-main .header-button .button.primary { background: linear-gradient(180deg, #34C759, #1E9E46) !important; border-color: rgba(0,0,0,.05) !important; box-shadow: 0 3px 0 #157A35 !important; color: #FFFFFF !important; }
.header-wrapper .header-button-1 .button.primary:hover { background: linear-gradient(180deg, #3DD466, #19893C) !important; }

/* Hiệu ứng nhấp nháy 2 nút Đăng ký / Đăng nhập */
@keyframes gdPulseRed { 0%, 100% { transform: scale(1); box-shadow: 0 3px 0 #8E1414, 0 0 0 0 rgba(229, 57, 53, .65); filter: brightness(1); } 50% { transform: scale(1.06); box-shadow: 0 3px 0 #8E1414, 0 0 0 9px rgba(229, 57, 53, 0); filter: brightness(1.18); } }
@keyframes gdPulseGreen { 0%, 100% { transform: scale(1); box-shadow: 0 3px 0 #157A35, 0 0 0 0 rgba(52, 199, 89, .65); filter: brightness(1); } 50% { transform: scale(1.06); box-shadow: 0 3px 0 #157A35, 0 0 0 9px rgba(52, 199, 89, 0); filter: brightness(1.18); } }
@keyframes gdShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.header-wrapper .header-button .button { position: relative; overflow: hidden; will-change: transform; }
.header-wrapper .header-button-2 .button { animation: gdPulseRed 1.4s ease-in-out infinite; }
.header-wrapper .header-button-1 .button { animation: gdPulseGreen 1.4s ease-in-out infinite .7s; }
.header-wrapper .header-button .button::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: gdShine 2.4s ease-in-out infinite; pointer-events: none; }
.header-wrapper .header-button-1 .button::after { animation-delay: 1.2s; }
.header-wrapper .header-button .button:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .header-wrapper .header-button .button, .header-wrapper .header-button .button::after { animation: none !important; } }
/* Hiệu ứng nút v2: neon nhấp nháy + viền sáng chạy + lấp lánh */
@keyframes gdNeonRed { 0%, 100% { transform: scale(1); filter: brightness(1) saturate(1); box-shadow: 0 3px 0 #8E1414, 0 0 6px rgba(255, 82, 82, .55), 0 0 0 0 rgba(255, 82, 82, .6); } 25% { filter: brightness(1.35) saturate(1.2); } 50% { transform: scale(1.08); filter: brightness(1.15) saturate(1.15); box-shadow: 0 3px 0 #8E1414, 0 0 18px rgba(255, 82, 82, .95), 0 0 0 10px rgba(255, 82, 82, 0); } 75% { filter: brightness(1.35) saturate(1.2); } }
@keyframes gdNeonGreen { 0%, 100% { transform: scale(1); filter: brightness(1) saturate(1); box-shadow: 0 3px 0 #157A35, 0 0 6px rgba(76, 230, 120, .55), 0 0 0 0 rgba(76, 230, 120, .6); } 25% { filter: brightness(1.35) saturate(1.2); } 50% { transform: scale(1.08); filter: brightness(1.15) saturate(1.15); box-shadow: 0 3px 0 #157A35, 0 0 18px rgba(76, 230, 120, .95), 0 0 0 10px rgba(76, 230, 120, 0); } 75% { filter: brightness(1.35) saturate(1.2); } }
@keyframes gdTextGlow { 0%, 100% { text-shadow: 0 1px 0 rgba(0,0,0,.25); } 50% { text-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 12px rgba(255,240,180,.8); } }
@keyframes gdBorderRun { to { --gd-angle: 360deg; } }
@property --gd-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.header-wrapper .header-button .button { border: 2px solid transparent !important; background-clip: padding-box; }
.header-wrapper .header-button-2 .button { animation: gdNeonRed 1.1s ease-in-out infinite !important; }
.header-wrapper .header-button-1 .button { animation: gdNeonGreen 1.1s ease-in-out infinite .55s !important; }
.header-wrapper .header-button .button span { position: relative; z-index: 2; animation: gdTextGlow 1.1s ease-in-out infinite; }
.header-wrapper .header-button-1 .button span { animation-delay: .55s; }
.header-wrapper .header-button .button::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--gd-angle), transparent 0deg, #FFF6C8 40deg, #FFD54A 70deg, transparent 110deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gdBorderRun 1.8s linear infinite; pointer-events: none; z-index: 3; }
.header-wrapper .header-button .button::after { animation-duration: 1.6s !important; }
@media (prefers-reduced-motion: reduce) { .header-wrapper .header-button .button, .header-wrapper .header-button .button::before, .header-wrapper .header-button .button::after, .header-wrapper .header-button .button span { animation: none !important; } }