/* F8BET homepage, navigation and footer. Article and category content retain their existing styles. */
/* The former theme configuration loaded only 700; provide a real regular face. */
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/roboto-slab-regular.ttf") format("truetype"); }
body.f8bet-layout-2026 { font-family: "Roboto Slab", Georgia, serif; font-size: 16px; color: #000; }
body.f8bet-layout-2026.boxed, body.f8bet-layout-2026.boxed #header,
body.f8bet-layout-2026.boxed .header-wrapper { max-width: 1250px; }
body.f8bet-layout-2026 #header .header-main { height: 90px; background: #fff; }
body.f8bet-layout-2026 #header .header-inner { max-width: 1050px; }
body.f8bet-layout-2026 #header #logo { width: 200px; margin-right: 30px; }
body.f8bet-layout-2026 #header #logo img { width: 200px; max-height: 90px; object-fit: contain; }
html body.f8bet-layout-2026 #header #wide-nav.header-bottom { min-height: 55px; height: auto; background: #0553e0 !important; }
html body.f8bet-layout-2026 #header #wide-nav .header-bottom-nav { justify-content: center; flex-wrap: nowrap; gap: 0; }
html body.f8bet-layout-2026 #header #wide-nav .header-bottom-nav > li { margin: 0 7px; }
html body.f8bet-layout-2026 #header #wide-nav .header-bottom-nav > li > a {
  min-height: 55px !important; padding: 0 !important; color: #fff !important;
  font: 700 14.4px/16px "Roboto Slab", Georgia, serif !important;
  opacity: 1 !important; background: transparent !important; letter-spacing: 0;
  display: flex; gap: 6px; align-items: center; white-space: nowrap;
}
html body.f8bet-layout-2026 #header #wide-nav .header-bottom-nav > li:is(.active,.current-menu-item,.current-menu-ancestor,#menu-item-123) > a { background: transparent !important; color: #fff !important; }
html body.f8bet-layout-2026 #header #wide-nav .header-bottom-nav > li > a:is(:hover,:focus-visible) { color: #ffe396 !important; background: transparent !important; }
body.f8bet-layout-2026 .f8bet-nav-icon { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; margin: 0; }
body.f8bet-layout-2026 #header .nav-dropdown { background: #1e73be; border-color: #fff; border-radius: 5px; }
body.f8bet-layout-2026 #header .nav-dropdown > li > a { color: #fff; font-family: "Roboto Slab", Georgia, serif; }
html body.f8bet-layout-2026 #header .header-button .button,
html body.f8bet-layout-2026 #header .header-button-1 .button,
html body.f8bet-layout-2026 #header .header-button-2 .button {
  min-width: 120px; min-height: 43px; height: auto; padding: 10px 16px; margin: 0;
  border-radius: 15px !important; font: 700 13.6px/21.76px "Roboto Slab",Georgia,serif !important;
  color: #fff !important; background: #e83617 !important; border-color: #e83617 !important;
}
body.f8bet-layout-2026 #header .header-button a:focus-visible { outline: 3px solid #ffcc45; outline-offset: 3px; }
body.f8bet-layout-2026 .off-canvas .mfp-content,
body.f8bet-layout-2026 .off-canvas-left .mfp-content,
body.f8bet-layout-2026 #main-menu.mobile-sidebar { background: #0553e0 !important; }
body.f8bet-layout-2026 .nav-sidebar .f8bet-nav-icon { margin-right: 8px; }

body.f8bet-home-2026 #main, body.f8bet-home-2026 #content { background: #fff; }
body.f8bet-home-2026 #content { padding: 0; }
body.f8bet-home-2026 #content > .ubet-toc, body.f8bet-home-2026 #content > .uab-author-bio,
body.f8bet-home-2026 #content > .rcc-comments, body.f8bet-home-2026 #content > .comments-area { display: none; }
body.f8bet-home-2026 .f8bet-front-hero { margin: 0; }
body.f8bet-home-2026 .f8bet-front-hero .slider { margin: 0; }
body.f8bet-home-2026 .f8bet-front-hero__slide { width: 100%; margin: 0; }
body.f8bet-home-2026 .f8bet-front-hero__slide img { display: block; width: 100%; height: auto; aspect-ratio: 1920/660; object-fit: contain; margin: 0; }
body.f8bet-home-2026 .f8bet-front-hero .flickity-page-dots { bottom: 12px; }
body.f8bet-home-2026 .f8bet-front-hero .flickity-page-dots .dot { background: #fff; border-color: #fff; }
body.f8bet-home-2026 .f8bet-front-2026 { padding: 30px 0 !important; }
body.f8bet-home-2026 .f8bet-front-2026 > .section-bg { background: #fff; box-shadow: inset 0 0 21px -1px #39f; }
body.f8bet-home-2026 .f8bet-front-2026 > .section-content { position: relative; }
body.f8bet-home-2026 .f8bet-front-inner { max-width: 1050px; padding: 0 15px; margin: 0 auto; }
body.f8bet-home-2026 .f8bet-front-categories { margin: 0 -15px 20px; max-width: none; }
body.f8bet-home-2026 .f8bet-front-category { padding: 0 15px 0; width: 20%; max-width: 20%; }
body.f8bet-home-2026 .f8bet-front-category > a { display: block; padding: 1.1%; border-radius: 10px; box-shadow: inset 0 0 11px -1px #3a70ef; }
body.f8bet-home-2026 .f8bet-front-category img { width: 100%; height: auto; display: block; margin: 0; }
body.f8bet-home-2026 .f8bet-front-guides { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; margin: 0 0 30px; }
body.f8bet-home-2026 .f8bet-front-guides a, body.f8bet-home-2026 .f8bet-front-guides img { display: block; width: 100%; margin: 0; }
body.f8bet-home-2026 .f8bet-front-guides img { height: auto; }
/* wpautop may add line breaks inside native ux_html; they are not grid items. */
body.f8bet-home-2026 .f8bet-front-guides > br { display: none; }
body.f8bet-home-2026 .f8bet-front-guides > p { display: contents; }
body.f8bet-home-2026 .f8bet-front-heading { padding: 0; margin: 0 0 1.5em; }
body.f8bet-home-2026 .f8bet-front-heading h1 { font: 700 27.2px/1.3 "Roboto Slab",Georgia,serif; text-transform: none; color: #3b9cf1; margin: 0; }
body.f8bet-home-2026 .f8bet-front-heading .section-title-main { border: 0; padding: 0 15px; }
body.f8bet-home-2026 .f8bet-front-heading .section-title b { background: #ccc; opacity: .5; }
body.f8bet-home-2026 .f8bet-front-intro { border-left: 2px solid #446084; margin: 0 0 30px; padding: 0 0 0 20px; font-size: 19.2px; font-weight: 400; color: #333; }
body.f8bet-home-2026 .f8bet-front-intro p { margin: 0; line-height: 1.6; font-size: 19.2px; font-weight: 400; }
html body.f8bet-home-2026 .f8bet-front-intro a { color: #095194 !important; font-weight: 700; }
body.f8bet-home-2026 .f8bet-front-news-shell { max-width: 1050px; margin-left: auto; margin-right: auto; }
body.f8bet-home-2026 .f8bet-front-news-shell > .col { padding-bottom: 0; }
body.f8bet-home-2026 .f8bet-front-news-shell h2 { font-size: 25.6px; color: #3b9cf1; text-transform: none; font-family: "Roboto Slab",Georgia,serif; }
body.f8bet-home-2026 .f8bet-front-news-shell .box { padding: 1.1%; border-radius: 10px; box-shadow: inset 0 0 11px -1px #3a70ef; }
body.f8bet-home-2026 .f8bet-front-news-shell .post-title { color: #3b9cf1; font: 700 18.4px/1.3 "Roboto Slab",Georgia,serif; }
html body.f8bet-home-2026 .f8bet-front-news-shell .post-title a { color: inherit !important; }
body.f8bet-home-2026 .f8bet-front-news-shell .from_the_blog_excerpt { font-size: 14px; line-height: 1.5; }
body.f8bet-home-2026 .f8bet-front-news-shell .box-text { padding: 10px 10px 20px; }
body.f8bet-home-2026 .f8bet-front-news-shell .badge { left: 15px; }
body.f8bet-home-2026 .f8bet-front-news-shell .post-item { padding-bottom: 20px; }

body.f8bet-layout-2026 #footer .f8bet-footer-2026 { background: #fff; padding: 60px 0 30px !important; }
body.f8bet-layout-2026 #footer .f8bet-footer-2026 > .section-bg { background: #fff; box-shadow: inset 0 0 21px -1px #39f; }
body.f8bet-layout-2026 #footer .f8bet-footer-2026 .row { max-width: 1050px; }
body.f8bet-layout-2026 #footer .f8bet-footer-2026 .section-title { color: #3b9cf1; font: 700 18.4px/1.3 "Roboto Slab",Georgia,serif; }
body.f8bet-layout-2026 #footer .f8bet-footer-2026 .section-title-main { border: 0; }
body.f8bet-layout-2026 #footer .f8bet-footer-links { list-style: none; padding: 0; margin: 0; }
body.f8bet-layout-2026 #footer .f8bet-footer-links li { margin: 0 0 1.3em; font-size: 16px; line-height: 1.6; }
body.f8bet-layout-2026 #footer .f8bet-footer-links a { color: #095194; font-weight: 700; }
body.f8bet-layout-2026 #footer .absolute-footer { background: #0a3d84; padding: 10px 0 15px; font-size: 14px; color: #fff; }
body.f8bet-layout-2026 #footer .absolute-footer .footer-primary { float: none; text-align: center; }
body.f8bet-layout-2026 #footer .absolute-footer .copyright-footer { color: #fff !important; }

.f8bet-diamonds { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.f8bet-diamonds > span { position: absolute; top: -100px; left: var(--x); width: 50px; height: 50px; background: url('/wp-content/uploads/f8bet-trang-chu-20261019/kim-cuong-trang-tri-f8bet.gif') center/contain no-repeat; animation: f8bet-diamond-fall 20s linear infinite; animation-delay: var(--delay); }
@keyframes f8bet-diamond-fall { 0% { transform: translateY(0) rotate(0); opacity: .9; } 100% { transform: translate(30px,130vh) rotate(360deg); opacity: 0; } }

@media (max-width: 849px) {
  body.f8bet-layout-2026 #header .header-main { height: 70px; }
  body.f8bet-layout-2026 #header #logo { margin: 0; width: 200px; }
  body.f8bet-layout-2026 #header #logo img { max-height: 70px; }
  body.f8bet-layout-2026 #header .header-bottom .header-nav { min-height: 55px; justify-content: center; gap: 16px; }
  body.f8bet-layout-2026 #header .header-bottom .header-nav > li { margin: 0; }
  body.f8bet-layout-2026 #header .header-main .mobile-nav > li > a { color: #111; }
  body.f8bet-home-2026 .f8bet-front-category { width: 33.3333%; max-width: 33.3333%; }
  body.f8bet-home-2026 .f8bet-front-guides { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.f8bet-home-2026 .f8bet-front-heading h1 { font-size: 23px; }
}
@media (max-width: 549px) {
  body.f8bet-home-2026 .f8bet-front-category { width: 50%; max-width: 50%; }
  body.f8bet-home-2026 .f8bet-front-2026 { padding: 30px 0 !important; }
  body.f8bet-home-2026 .f8bet-front-heading h1 { font-size: 22px; }
  body.f8bet-home-2026 .f8bet-front-heading .section-title-main { padding: 0 7px; }
  body.f8bet-home-2026 .f8bet-front-news-shell h2 { font-size: 22px; }
  body.f8bet-layout-2026 #footer .f8bet-footer-2026 { padding: 60px 0 30px !important; }
  .f8bet-diamonds > span { width: 35px; height: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  .f8bet-diamonds { display: none; }
  body.f8bet-home-2026 .f8bet-front-2026 *, body.f8bet-layout-2026 #header * { scroll-behavior: auto; transition: none !important; }
}