@charset "UTF-8";
/*
Theme Name: V9sport Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
:root { --secondary-color: var(--fs-color-secondary); }

.header-top .social-icons { margin: 0 auto; display: flex; justify-content: center; }
.header-top .social-icons > a { font-size: 17px !important; margin: 0 11px; }

.header-nav-main > li { margin: 0 15px; }
.header-nav-main > li > a { color: #fff !important; font-size: 18px; line-height: 1.2; }
.header-nav-main > li:hover > a, .header-nav-main > li.current-menu-item > a { color: var(--secondary-color) !important; }

.nav-dropdown { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.1) !important; border-radius: 10px; border: none; padding: 12px; min-width: 230px; -webkit-box-shadow: 0 1px 24px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 24px 0 rgba(0, 0, 0, 0.1); }
.nav-dropdown:before { border-color: rgba(255, 255, 255, 0.1) !important; }
.nav-dropdown li a { font-size: 17px; color: #d2d0ce; border-bottom: none !important; margin: 0 !important; border-radius: 12px; padding: 12px 12px !important; }
.nav-dropdown li:hover a, .nav-dropdown li.current-menu-item a { color: var(--secondary-color) !important; }

.stuck .header-main { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }

.gap-3 { gap: 3px; }

.bg_gray { background-color: #212121; }

.radius-10 { border-radius: 10px; }

.p-30 { padding: 30px; }

.button:not(.icon) { font-weight: 600; font-size: 16px; text-transform: none; position: relative; padding: 3px 21px; }
.button:not(.icon).is-outline { border-width: 2px; border-style: solid; color: #fff !important; }
.button:not(.icon).is-larger { font-size: 18px; }

.slider-nav-circle .flickity-prev-next-button { opacity: 1 !important; height: 42px; min-width: 42px; }
.slider-nav-circle .flickity-prev-next-button svg { border: none !important; padding: 29% !important; color: #fff; background-color: rgba(52, 53, 56, 0.7); backdrop-filter: blur(4px); }

.slider:not(.slider-nav-dots-square) .flickity-page-dots .dot { background-color: #B3B3B3; height: 12px; opacity: 1; width: 12px; border: none; }
.slider:not(.slider-nav-dots-square) .flickity-page-dots .dot.is-selected { background-color: var(--primary-color) !important; }

.slider-nav-simple .flickity-prev-next-button { opacity: 1; transform: none; margin-top: 0 !important; }
.slider-nav-simple .flickity-prev-next-button svg { color: var(--primary-color) !important; }
.slider-nav-simple .flickity-prev-next-button:hover svg, .slider-nav-simple .flickity-prev-next-button:hover .arrow { fill: var(--primary-color) !important; }

.slider-nav-simple .flickity-button { opacity: 1; }
.slider-nav-simple .flickity-button > svg { display: none; }
.slider-nav-simple .flickity-button:before, .slider-nav-simple .flickity-button:after { content: ''; height: 25px; width: 25px; display: block; transform: translate(0, -50%) rotate(45deg); -moz-transform: translate(0, -50%) rotate(45deg); -webkit-transform: translate(0, -50%) rotate(45deg); -o-transform: translate(0, -50%) rotate(45deg); z-index: 2; margin: auto; position: absolute; }
.slider-nav-simple .flickity-button.previous:before { border-bottom: 2px solid #fff; border-left: 2px solid #fff; }
.slider-nav-simple .flickity-button.next::before { border-top: 2px solid #fff; border-right: 2px solid #fff; }
.slider-nav-simple .flickity-button:hover:before { border-color: var(--primary-color); }

.slider-nav-outside .flickity-prev-next-button.previous { right: 100%; left: auto; margin-top: 0; }
.slider-nav-outside .flickity-prev-next-button.next { right: auto; left: 100%; margin-top: 0; }
.slider-nav-outside .flickity-page-dots { bottom: -25px; }
.slider-nav-outside.slider-nav-simple .flickity-button:before { border-color: var(--primary-color); }

.box-shadow-1 { background: #FFFFFF; box-shadow: 7px 0px 14px 0px rgba(0, 0, 0, 0.15); }

.nav-pills > li { margin: 0 10px; }
.nav-pills > li > a { border: 1px solid #a6a9b829; font-size: 17px; font-style: normal; font-weight: 600; text-align: center; text-transform: capitalize; color: #fff; }
.nav-pills > li:hover > a, .nav-pills > li.active > a { border-color: var(--secondary-color); color: var(--secondary-color); }

.nav-line-bottom > li > a { font-size: 15px; color: #747474; }
.nav-line-bottom > li > a:before { background-color: #068161; height: 2px; }
.nav-line-bottom > li:hover > a, .nav-line-bottom > li.active > a { color: #068161 !important; }

.accordion .accordion-item .accordion-title { border: none; font-size: 18px; min-height: 80px; background: #1E1E1E; margin-bottom: 20px; display: flex; align-items: center; }
.accordion .accordion-item .accordion-title.active { color: #fff; background-color: var(--secondary-color); }
.accordion .toggle { left: auto; right: 10px; top: 20px; }

.gallery-col { padding-bottom: 0; }

.text-justify { text-align: justify; }

.wpcf7 label { font-weight: 400; }
.wpcf7 label span { color: red; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type="tel"], .wpcf7 textarea { background-color: transparent !important; height: 48px; border: none; box-shadow: none; color: #fff; border-radius: 8px; border: 1px solid #505050; }
.wpcf7 textarea { min-height: 410px; }
.wpcf7 ::-webkit-input-placeholder { color: #fff; font-style: italic; }
.wpcf7 :-ms-input-placeholder { color: #fff; font-style: italic; }
.wpcf7 ::placeholder { color: #fff; font-style: italic; }
.wpcf7 .wpcf7-submit { color: #202020 !important; background-color: var(--secondary-color) !important; margin: 0; min-height: 50px; text-transform: none; border-radius: 100px; min-width: 120px; }
.wpcf7 .wpcf7-submit:hover { color: #fff !important; background: var(--primary-color) !important; }
.wpcf7 .wpcf7-spinner { display: none; }
.wpcf7 .wpcf7-response-output { background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(20px); border-radius: 5px; font-size: 12px; border-width: 1px !important; }

.banner h2 { font-size: 30px; }
.banner p { font-size: 18px; }

.bg_glass { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 10px 20px; }

.section-title { border-bottom: none; }
.section-title span.section-title-main { font-size: 32px; text-transform: none; border-bottom: none; }
.section-title a { font-size: 24px; text-transform: uppercase; }
.section-title .icon-angle-right:before { content: ""; background: url("assets/images/arrow-right.svg") no-repeat center center; background-size: contain; width: 20px; height: 20px; display: inline-block; }

.post-item .is-divider { display: none; }
.post-item .box-image .image-cover { border-radius: 6px; }
.post-item .post-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.post-item .post-title.is-large { font-size: 28px; }
.post-item .post-title:hover { color: var(--secondary-color); }
.post-item p { font-size: 18px; display: -webkit-box; -webkit-line-clamp: 3; /* number of lines to show */ line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-item .box-vertical .box-text { padding-top: 0; padding-right: 0; }
.post-item .box-vertical .box-image, .post-item .box-vertical .box-text { vertical-align: top; }
.post-item .box-overlay .box-text { background: linear-gradient(179deg, rgba(0, 0, 0, 0), black); }
.post-item .box-label .from_the_blog_excerpt { -webkit-line-clamp: 8; line-clamp: 8; }

.label-group { display: flex; gap: 5px; }
.label-group.absolute { top: 30px; left: 30px; }
.label-group .label { background-color: rgba(255, 255, 255, 0.3); padding: 5px 10px; font-size: 13px; font-weight: 500; color: #fff; border-radius: 3px; text-transform: uppercase; cursor: pointer; }
.label-group .label.active { color: #21222D; background-color: #F9D000; }

.partnership-item .box-label .box-text { background-color: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); padding: 10px 20px; border-radius: 20px; opacity: 1; width: 50%; height: 90%; display: flex; align-items: center; justify-content: center; bottom: 0; left: auto; right: 50px; margin: 0; transform: none; }
.partnership-item .logo-partnership { max-width: 450px; margin: 0 auto !important; }

.list-post.bg_gray { padding: 20px; }
.list-post.bg_gray .col { padding-bottom: 0; }

.partnership-filters { top: 130px !important; z-index: 99; }

.partnership-info .partnership-item .box-label .box-text { position: relative; width: 92%; right: 0; margin-top: -300px; left: 50%; transform: translateX(-50%); }
.partnership-info .filter-partnership { top: 20px; left: 50%; transform: translateX(-50%); z-index: 99; }

.filter-post { width: 100%; margin-bottom: 30px; }

.filter-container { display: flex; flex-wrap: nowrap; gap: 10px; padding: 5px 0; }
.filter-container.text-center { justify-content: center; }

.filter-item { display: inline-block; padding: 8px 16px; background-color: transparent; color: #fff; border-radius: 30px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all 0.3s ease; border: 1px solid #a6a9b829; }
.filter-item.active, .filter-item:hover { border-color: #00a859; /* Màu xanh cho mục đang active */ }
.filter-item.current { background-color: #00a859; }

.single-logo { background: #000; border: 1px solid #2D2D2D; display: flex; align-items: center; justify-content: center; border-radius: 10px; }

.fixtures-date-nav { display: flex; align-items: center; margin-bottom: 20px; justify-content: space-around; }

.nav-arrow { background: transparent; color: white; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0; }
.nav-arrow svg { height: 17px; width: 17px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-44%, -50%); }
.nav-arrow:hover { background: #00b140; border-color: #00b140; }

.date-buttons { display: flex; gap: 10px; margin: 0 10px; }

.date-btn { background: transparent; color: white; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 25px; padding: 5px 10px; font-size: 12px; cursor: pointer; font-weight: 400; margin: 0; }
.date-btn.active { background: #00b140; border-color: #00b140; }

.author-box-v9sport { border-radius: 10px; position: relative; }

.author-box-v9sport .author-avatar { max-width: 250px; margin-bottom: 10px; }
.author-box-v9sport .author-info { flex: 1; }
.author-box-v9sport .author-name { font-size: 22px; font-weight: 700; margin-bottom: 5px; color: #fff; }
.author-box-v9sport .author-description { font-size: 16px; line-height: 1.5; margin-bottom: 15px; color: #e0e0e0; }

.contact-infomation h3 { font-size: 28px; font-weight: 700; }
.contact-infomation .col-inner { padding: 40px; background-color: #000000; border-top-left-radius: 10px; border-bottom-left-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.contact-infomation .col-inner:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100px; height: 300; background: url("assets/images/contact.png") no-repeat center center; }
.contact-infomation .contact-info-item { margin-bottom: 10px; }
.contact-infomation .social-icons { margin: 0 auto; display: flex; justify-content: center; }
.contact-infomation .social-icons > a { font-size: 22px; margin: 0 11px; }

.contact-form { flex-direction: column; }

.footer-1 { border-top: 1px solid rgba(255, 255, 255, 0.2); }
.footer-1 .social-icons { margin: 0 auto; display: flex; justify-content: center; }
.footer-1 .social-icons > a { font-size: 22px; margin: 0 11px; }

.absolute-footer { background-color: #000000; }

.copyright-footer { color: #fff; font-size: 15px; font-style: italic; font-weight: 300; }

.back-to-top { z-index: 999; display: inline-block; opacity: 0; bottom: 90px; border-radius: 0 !important; background-color: var(--primary-color) !important; color: #fff !important; border: none !important; }
.back-to-top.active { opacity: 1; }

.nav-pagination-box { display: block; text-align: center; }
.nav-pagination-box .nav-pagination li:before { display: none; }

.nav-pagination li { margin: 0 5px; }
.nav-pagination li a, .nav-pagination li span { border: none; height: 42px; width: 42px; border-radius: 4px; line-height: 42px; }
.nav-pagination li.active a, .nav-pagination li span.current { background-color: var(--secondary-color); color: #fff; }

.white-popup-block { background: #fff; text-align: left; max-width: 1053px; margin: 40px auto; position: relative; border-radius: 10px; }
.white-popup-block .mfp-close { display: none; }
.white-popup-block .modal-header .modal-close { position: absolute; top: -45px; right: 0; height: 49px; width: 49px; background: url("assets/images/X.svg") no-repeat center center; }
.white-popup-block .modal-body { padding: 10px 0px; }

@media screen and (max-width: 820px) { .off-canvas-left { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
  .off-canvas-left .mfp-content { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 4.17%, rgba(255, 255, 255, 0) 100%); }
  .mobile-nav > li a { color: #fff; font-size: 14px; }
  .mobile-nav > li.has-icon > a > i { min-width: 1em; color: #fff; font-size: 30px; }
  .mobile-nav .icon-image { min-width: 20px; }
  .transparent .mobile-nav > li a { color: #fff; }
  .transparent .mobile-nav > li.has-icon > a > i { color: #fff; }
  .nav-sidebar li { border-top: none; }
  .nav-sidebar li a { font-size: 15px; color: #fff !important; display: block; text-transform: none; padding-top: 15px !important; padding-bottom: 15px !important; text-transform: none; }
  .nav-sidebar li a .icon-image img { margin-top: -4px; margin-right: 5px; }
  .nav-sidebar li + li { border-top: 1px solid rgba(236, 236, 236, 0.12) !important; }
  .off-canvas #logo { padding: 20px 20px 0; }
  .off-canvas .sidebar-menu { padding: 20px 0; }
  .post-item p { font-size: 16px; }
  .post-item .box-label .from_the_blog_excerpt { font-size: 16px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 8; /* number of lines to show */ line-clamp: 8; -webkit-box-orient: vertical; }
  .post-item .label-group .label { font-size: 11px; }
  .section-title a { font-size: 20px; }
  .partnership-info .partnership-item .box-label .box-text { margin-top: -100px; } }
@media screen and (max-width: 512px) { .home-slide .banner h2 { font-size: 30px; }
  .section-title span.section-title-main { font-size: 18px; margin-bottom: 0; padding-bottom: 0; margin: 0; }
  .post-item .box-vertical button { position: relative; margin-top: 15px; }
  .banner p, .section-title a { font-size: 14px; }
  .section-title a { display: flex; }
  .post-item p { font-size: 14px; }
  .post-item .box-label .from_the_blog_excerpt { -webkit-line-clamp: 4; /* number of lines to show */ line-clamp: 4; }
  .partnership-item .box-label .box-text, .box-overlay .box-text { position: relative; width: 100%; right: 0; padding-left: 0; }
  .post-item .post-title { font-size: 15px; }
  .post-item .box-vertical .box-image, .post-item .box-vertical .box-text { display: table-cell; }
  .post-item .box-vertical .box-image { max-width: 40%; }
  .post-item .box-vertical .box-text { padding-left: 10px; }
  .p-30 { padding: 10px; }
  .slider-nav-outside .flickity-prev-next-button.next { left: 93%; }
  .slider-nav-outside .flickity-prev-next-button.previous { right: 93%; }
  .post-item .box-overlay .box-text { background: transparent; }
  .partnership-info .filter-partnership { position: relative !important; top: -12px; }
  .partnership-info .partnership-item .box-label .box-text { margin-top: -37px; }
  .dark .has-shadow .box:not(.box-overlay):not(.box-shade) { background-color: transparent; }
  .row-main > .col { padding-left: 0; padding-right: 0; }
  .partnership-filters { top: 40px !important; left: 0 !important; }
  .filter-container { overflow: scroll; } }
#partnership-content.loading { opacity: 0.5; position: relative; }

#partnership-content.loading:after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; transform: translate(-50%, -50%); }

@keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); } }
/* CSS cho AJAX Pagination */
.post-list { position: relative; min-height: 200px; }

.post-list.loading { opacity: 0.7; pointer-events: none; }

.loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100; border-radius: 5px; }

.loading-icon { width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: var(--secondary-color); animation: spin 1s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
/* Style cho phân trang */
.page-number.current { background-color: var(--secondary-color); color: #fff; }

a.page-number { transition: all 0.3s ease; cursor: pointer; }

a.page-number:hover { background-color: rgba(0, 168, 89, 0.1); color: var(--secondary-color); }