/* ======================================
   Site Header CSS
   ====================================== */

/* Bắt đầu Header CSS */

#site-header::after {
   clear: both;
   content: '';
   display: block;
}

#site-header .header-bar {
   color: #fff;
   line-height: 44px;
   position: relative;
   background: #333333;
   width: 100%;
   text-align: center;
   font-size: 16px;
   min-height: 44px;
   z-index: 9;
}

#site-header .header-bar::after {
   content: '';
   clear: both;
   display: block;
}

#site-header .header-bar a.site-logo {
   float: left;
   padding: 0 0 0 10px;
   line-height: 44px;
   height: 44px;
   display: flex;
   align-items: center;
}

/* Bắt đầu css logo Sử dụng Logo hình ảnh */
#site-header .header-bar a.site-logo img {
   height: 20px;
   max-width: 100%;
}

#site-header .header-bar a.site-logo i {
   right: 5px;
   display: inline-block;
   border-radius: 2px;
   background: rgba(255, 255, 255, .15);
   color: rgba(255, 255, 255, .7);
   padding: 0 4px;
   font-size: 11px;
   position: relative;
   top: -2px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}

#site-header .header-bar img {
   vertical-align: middle;
   border: 0;
   max-width: 100%;
   position: relative;
   font-size: 12px;
}

/* Kết thúc css logo Sử dụng Logo hình ảnh */

/* Bắt đầu css logo Sử dụng Tên miền văn bản */
#site-header .header-bar a {
   color: #fff;
}

#site-header .header-bar .brand-text {
   font-size: 18px;
   font-weight: bold;
   display: inline-flex;
   align-items: baseline;
   gap: 2px;
}

#site-header .header-bar .brand-name {
   font-size: 120%;
}

#site-header .header-bar .brand-tld {
   font-size: 60%;
}

/* Kết thúc css logo Sử dụng Tên miền văn bản */

#site-header .header-bar a:hover,
#site-header .header-bar .action-icon a:hover,
#site-header #nav-container a:hover,
#site-header .header-bar a:hover .icon,
#site-header .header-bar .action-icon a:hover .icon,
#site-header #nav-container a:hover .icon,
#site-header .header-bar .action-icon.icon-font-setup2:hover,
#site-header .header-bar .dropdown-selector:hover .action-icon,
#site-header .header-bar .dropdown-selector:hover .action-icon.icon,
#site-header .header-bar .dropdown-selector:hover>span:not(.dropdown-list) {
   color: #ffc603 !important;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list li a:hover,
#site-header .header-bar .dropdown-selector ul.dropdown-list li a:hover .item-icon,
#site-header .header-bar .dropdown-selector ul.dropdown-list li a:hover .icon {
   color: inherit !important;
}

#site-header .dropdown-selector:hover::before {
   border-top-color: #ffc603 !important;
}

#site-header .action-icon {
   font-size: 20px;
   width: 20px;
   height: 20px;
   line-height: 20px;
   position: relative;
   color: #595959;
}

#site-header .icon {
   font-family: "iconfont" !important;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

#site-header .header-bar .action-icon {
   background: rgba(255, 255, 255, .15);
   color: #fff;
   font-size: 18px;
   width: 28px;
   height: 28px;
   line-height: 28px;
   text-align: center;
   margin: 12px 8px 0 0;
   padding: 0;
   border-radius: 50%;
   float: right;
   position: relative;
   cursor: pointer;
}

#site-header .header-bar .action-icon .icon,
#site-header .header-bar .icon {
   color: #fff;
}

#site-header .header-bar .action-icon img {
   border-radius: 50%;
   width: 28px;
   height: 28px;
   overflow: hidden;
   display: block;
}

#site-header .header-bar .action-icon .badge_fill {
   position: absolute;
   margin: 0;
   width: 8px;
   height: 8px;
   min-width: unset;
   border: 0 !important;
}

#site-header .header-bar .icon-font-setup2 {
   font-size: 20px;
}

#site-header .header-bar .dropdown-selector {
   font-size: 12px;
   color: #fff;
   background: rgba(255, 255, 255, .15);
   line-height: 28px;
   margin: 12px 8px 0 0;
   padding: 0 22px 0 0 !important;
   border-radius: 20px;
   font-weight: 500;
   cursor: pointer;
   float: right;
   left: auto;
   position: relative;
   height: 28px;
   z-index: 9;
}

#site-header .header-bar .dropdown-selector::before {
   margin-top: -3px;
}

#site-header .header-bar .dropdown-selector .action-icon {
   background: transparent;
   float: left;
   font-size: 18px;
   width: 24px;
   height: 24px;
   margin: 2px;
   line-height: 24px;
   padding: 0;
}

#site-header .header-bar .dropdown-selector a:hover {
   color: #ffc603 !important;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list {
   display: none;
   position: absolute;
   top: 40px;
   width: 200px;
   border-radius: 16px;
   background: #fff;
   -webkit-box-shadow: 0 0 10px #000;
   box-shadow: 0 0 15px rgba(0, 0, 0, .5);
   left: 50%;
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
   z-index: 9;
   color: #1b1b1b;
   max-width: 300px;
   padding: 5px;
}

#site-header .header-bar .dropdown-selector.active ul.dropdown-list {
   display: block;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list::before {
   content: '';
   width: 0;
   height: 0;
   -webkit-transform: rotate(-45deg) translateX(-5px);
   -ms-transform: rotate(-45deg) translateX(-5px);
   transform: rotate(-45deg) translateX(-5px);
   position: absolute;
   top: -8px;
   left: 50%;
   border: solid 5px #fff;
   border-left-color: transparent;
   border-bottom-color: transparent;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list li {
   background: transparent;
   overflow: hidden;
   padding: 5px 10px;
   margin: 2px;
   border-radius: 0;
   border-bottom: solid 1px #f5f5f5;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list li.active .item-name,
#site-header .header-bar .dropdown-selector ul.dropdown-list li.active .item-icon {
   color: #333333;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list li .item-icon {
   flex: 0 0 auto;
   width: 30px;
   height: 30px;
   line-height: 26px;
   font-size: 26px;
   color: #595959;
   background: none !important;
   margin: 0;
   text-align: center;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list li .item-icon,
#site-header .header-bar .category-item .icon-baseball:before {
   font-size: 22px;
   line-height: 36px;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list li a {
   display: flex;
   align-items: center;
   overflow: hidden;
   line-height: 36px;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list li .item-name {
   flex: 1 1 auto;
   margin-left: 4px;
   color: #595959;
   text-align: left;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list li .item-count {
   flex: 0 0 auto;
   font-weight: normal;
   background: #f5f5f5;
   height: 16px;
   color: #595959;
   line-height: 16px;
   border-radius: 20px;
   padding: 0 5px;
   font-size: 12px;
   margin-left: 6px;
   text-align: right;
   min-width: 22px;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list li .action-button {
   float: right;
   background: #f5f5f5 !important;
   width: 36px;
   height: 36px;
   display: block;
   background-size: 80%;
   text-align: center;
   border-radius: 50%;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list li .action-button.active {
   background: #333333 !important;
   background-size: 80%;
   color: #fff !important;
}

#site-header .header-bar .dropdown-selector ul.dropdown-list li:last-child {
   border: 0 !important;
}

#site-header .dropdown-selector {
   line-height: 30px;
   height: 30px;
   border-radius: 4px;
   font-size: 12px;
   padding: 0 25px 0 0 !important;
   position: relative;
   background: #333333;
   color: #fff;
   display: inline-block;
}

#site-header .dropdown-selector::before {
   content: "";
   position: absolute;
   right: 8px;
   top: 55%;
   margin-top: -4px;
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 5px solid #fff;
}

#site-header #nav-wrapper,
#site-header #nav-container {
   z-index: 1;
   background: #3d699b;
   width: 100%;
   overflow: hidden;
   height: 35px;
   float: left;
   position: relative;
}

#site-header #nav-wrapper #menu-scroller {
   height: 35px;
   left: 0;
   position: absolute;
   z-index: 1;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
   -ms-text-size-adjust: none;
   -o-text-size-adjust: none;
   text-size-adjust: none;
   white-space: nowrap;
   display: flex;
}

#site-header #nav-wrapper li a {
   position: relative;
   width: auto;
   display: inline-block;
   color: rgba(255, 255, 255, .7);
}

#site-header #nav-wrapper li a.active {
   color: #fff;
}

#site-header #nav-wrapper #menu-scroller li {
   font-size: 14px;
   width: auto;
   line-height: normal;
   float: left;
   display: block;
   overflow: hidden;
   text-align: center;
   white-space: nowrap;
   -webkit-box-flex: 1;
   -webkit-flex: 1 0 auto;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
}

#site-header .main-menu {
   width: 100%;
   background: #333333;
   display: flex;
   line-height: 44px;
   overflow: hidden;
}

#site-header .main-menu li {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   padding: 0;
   border: 0;
   font-size: 16px;
   color: #595959;
   display: block;
   float: left;
   text-align: center;
   background: transparent;
}

#site-header .main-menu li a {
   color: #fff;
   line-height: 35px;
   display: block;
   font-size: 16px;
   position: relative;
   font-weight: 700;
}

#site-header .main-menu li a.active {
   font-weight: bold;
   border-bottom: 2px solid #b4f1fe;
   line-height: 35px;
   opacity: 1;
   border: 0;
}

#site-header .main-menu li a.active::after {
   content: '';
   width: 0;
   height: 0;
   -webkit-transform: rotate(-45deg) translateX(-7px);
   -ms-transform: rotate(-45deg) translateX(-7px);
   transform: rotate(-45deg) translateX(-7px);
   position: absolute;
   bottom: -2px;
   left: 50%;
   border: solid 5px #fff;
   border-left-color: transparent;
   border-bottom-color: transparent;
}

#site-header #nav-wrapper .main-menu .is-highlighted {
   color: #ffcd00;
   font-size: 12px;
   line-height: 20px;
   font-weight: normal;
   position: absolute;
   top: 0;
   right: -15px;
}

#site-header .sub-nav-section {
   display: flex;
   background-color: #ebebeb;
   width: 100%;
   position: relative;
   overflow: hidden;
}

#site-header .sub-nav-section:after {
   content: '';
   height: 1px;
   width: 280%;
   position: absolute;
   left: 0;
   top: auto;
   right: auto;
   bottom: 0;
   background-color: #bfbfbf;
   border: 0 solid transparent;
   border-radius: 0;
   -webkit-border-radius: 0;
   transform: scale(.4);
   -webkit-transform: scale(.4);
   -moz-transform: scale(.4);
   -ms-transform: scale(.4);
   -o-transform: scale(.4);
   transform-origin: top left;
   -webkit-transform-origin: top left;
   -moz-transform-origin: top left;
   -ms-transform-origin: top left;
   -o-transform-origin: top left;
}

#site-header .sub-nav-section .sub-nav-tabs {
   position: static;
   left: 0;
   margin-top: 0;
   margin-left: 0;
   border: 0;
   width: 100%;
   background: #fff;
   border-radius: 0;
   display: flex;
   gap: 6px;
   padding: 8px;
   overflow-x: auto;
}

#site-header .sub-nav-section.fav .sub-nav-tabs {
   width: 100%;
   position: relative;
   display: flex;
}

#site-header .sub-nav-section.fav .sub-nav-tabs .sub-nav-item {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   background: transparent;
   color: #333;
}

#site-header .sub-nav-section .sub-nav-tabs .sub-nav-item {
   color: #595959;
   position: relative;
   background: #f5f5f5 !important;
   flex: 1 0 auto;
   line-height: 28px;
   height: 28px;
   padding: 0 10px;
   display: inline-block;
   border-radius: 20px;
   cursor: pointer;
}

#site-header .sub-nav-section .sub-nav-tabs .sub-nav-item.active::after {
   content: "";
   height: 3px;
   background: #ffa500;
   width: 76%;
   left: 12%;
   display: none;
   position: absolute;
   bottom: 0;
}

#site-header .sub-nav-section .sub-nav-tabs .sub-nav-item i {
   position: absolute;
   right: 1px;
   top: 1px;
   background: #e00606;
   width: 7px;
   height: 7px;
   border-radius: 50%;
}

#site-header .sub-nav-section .sub-nav-tabs .sub-nav-item.active {
   background: #333333 !important;
   color: #fff !important;
   font-weight: bold !important;
}

#site-header .sub-nav-tabs {
   font-size: 14px;
   border-radius: 4px;
   width: 50%;
   position: absolute;
   left: 50%;
   margin-left: -25%;
   border: solid 1px #bfbfbf;
   margin-top: 8px;
}

#site-header .sub-nav-tabs .sub-nav-item {
   font-weight: 500;
   text-align: center;
   color: #1b1b1b;
   float: left;
   line-height: 26px;
   background-color: #f5f5f5;
}

#site-header .sub-nav-tabs .sub-nav-item.active {
   color: #595959;
   font-weight: normal !important;
}

#site-header .sub-nav-tabs,
#site-header .sub-nav-tabs.sub-nav-small {
   border-color: #693131;
}

#site-header .sub-nav-tabs.sub-nav-small .sub-nav-item.active {
   background-color: #693131;
}

/* Kết thúc Header CSS */

/* ======================================
   Page Header - Header đơn giản cho trang Page
   ====================================== */
#site-header.page-header {
   color: #fff;
   line-height: 44px;
   position: relative;
   background: #333333;
   width: 100%;
   font-size: 16px;
   min-height: 44px;
   z-index: 9;
   display: flex;
   align-items: center;
}

#site-header.page-header::after {
   content: '';
   clear: both;
   display: block;
}

#site-header.page-header .back-button {
   flex: 0 0 auto;
   width: 60px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   position: relative;
   z-index: 10;
}

#site-header.page-header .page-back {
   background: url(../images/com/back.png) no-repeat 10px center;
   width: 60px;
   height: 44px;
   display: block;
   background-size: auto 20px;
   text-decoration: none;
}

#site-header.page-header .page-back:hover {
   opacity: 0.8;
}

#site-header.page-header .page-title {
   flex: 1 1 auto;
   line-height: 22px;
   color: #fff;
   font-size: 16px;
   font-weight: normal;
   margin: 0;
   padding: 10px 10px;
   text-align: center;
   margin-left: -60px;
   padding-left: 30px;
   pointer-events: none;
}

#site-header.page-header .page-title * {
   pointer-events: auto;
}

/* ======================================
   Site Footer CSS
   ====================================== */

/* Bắt đầu Footer CSS */
#site-footer {
   text-align: center;
   color: #fff;
   margin-top: .5em;
   width: 100%;
   float: left;
   overflow: hidden;
   padding-top: 2em;
   padding-bottom: 2em;
   height: auto;
   background: #333;
   padding: 10px 0;
}

#site-footer a {
   display: inline;
   padding: 5px 0;
   color: #fff;
   white-space: nowrap;
}

#site-footer a:hover {
   color: #ffc603 !important;
}

#site-footer a:hover img {
   filter: brightness(0) saturate(100%) invert(77%) sepia(100%) saturate(2000%) hue-rotate(5deg) brightness(1.1);
}

#site-footer .site-branding {
   text-align: center;
   margin-bottom: 5px;
}

#site-footer .site-branding a {
   display: inline-block;
   font-size: 20px;
   font-weight: bold;
   font-family: Gotham, Helvetica Neue, Helvetica, Arial, " sans-serif";
}

#site-footer .site-branding .highlight-link {
   font-size: 14px;
   color: #ffc700;
}

#site-footer .site-branding:hover a.site-name {
   color: #ffc603 !important;
}

#site-footer .site-branding:hover a.highlight-link {
   color: #ffffff !important;
}

#site-footer .footer-menu {
   font-size: 80%;
   margin-bottom: 6px;
}

#site-footer .footer-menu a {
   color: #bfbfbf;
}

#site-footer .footer-menu a::after {
   content: "";
   background: #434343;
   width: 1px;
   height: 12px;
   margin: 0 10px;
   vertical-align: -2px;
   display: inline-block;
}

#site-footer .footer-menu a:last-child::after {
   content: none;
}

#site-footer .quick-links-grid {
   overflow: hidden;
   display: flex;
   padding: 0 10px;
   margin: 0 auto;
}

#site-footer .link-column-left,
#site-footer .link-column-right {
   width: 49%;
   margin: 0 auto;
}

#site-footer .footer-link {
   background: #434343;
   color: #bfbfbf;
   width: 100%;
   text-align: center;
   float: left;
   font-size: 13px;
   border-radius: 4px;
   margin: 2px;
}

#site-footer .footer-link img {
   vertical-align: -2px;
   width: 15px;
   margin-right: 4px;
}

#site-footer .social-links {
   padding: 10px;
}

#site-footer .social-links a {
   display: inline-block;
   padding: 0 8px;
   line-height: 26px;
   margin-right: 10px;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
}

#site-footer .social-links img {
   margin-right: 6px;
   width: 25px;
   height: auto;
   top: 0;
   border-radius: 50%;
}

#site-footer .social-links a:hover {
   background-color: #3e3e3e;
   text-decoration: none;
   border-radius: 3px;
}

#site-footer .social-links a:last-child {
   margin: 0;
}

#site-footer .copyright {
   font-size: 12px;
   padding: 5px;
   opacity: .3;
}

/* Kết thúc Footer CSS */