--main-color: rgb(252, 139, 1);
  --sub-color: rgb(211, 0, 7);
:root {
  --sub-color1: rgba(0, 255, 30, 1);
  --sub-color2: rgba(153, 153, 153, 1);
  --color-white: #fff;
  --color-black: #000;
  --text-color-1: rgba(36, 38, 43, 1);
  --bg-color: #d30208;
  --scrollbar-color: rgba(102, 102, 102, 1);
}

*,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-select: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

html {
  font-size: 62.5%;
}
* {
  font-family: "Montserrat", sans-serif;
}
img {
  border-radius: 10px;
}

body {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  background-color: #232323;
  min-height: 100%;
  overflow-y: auto;
}

.w-100 {
  width: 100%;
}
.w-50 {
  width: 50%;
}
.mt-1 {
  margin-top: 1rem;
}
.mt-2 {
  margin-top: 2rem;
}
.d-flex {
  display: flex;
}
.justify-content-center {
  justify-content: center;
}
.align-items-center {
  align-items: center;
}
.gap-2 {
  gap: 1rem;
}

body.fixed-posi {
  overflow: hidden;
}

body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: var(--main-color);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: 5px;
}
.text-main {
  color:rgba(253, 137, 1, 1) ;
}

.pc-mode {
  width: 100%;
  margin: 0 auto;
}
.pc-mode .btn-home {
  color: #fc8b00;
  position: absolute;
  top: 15px;
  left: 0;
}
.pc-mode .btn-home img {
  width: 23%;
}
.pc-mode .header {
  position: fixed;
  width: 100%;
  height: 100px;
  background: linear-gradient(180deg, #252525 0%, #000000 100%);
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  z-index: 999;
  border-bottom: 2px solid rgba(253, 137, 1, 1);
}
.pc-mode .header .logo-header {
  width: 370px;
}

.pc-mode .okwin-container .banner img{
  max-width: 100%;
  height: auto;
}

.pc-mode .okwin-container .content-1 {
  background-image: url(../images/background.png);
  background-size: cover;
}

.pc-mode .okwin-container .champion-section {
  padding: 26px;
  position: relative;
  /* font-family: Arial, sans-serif; */
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc-mode .okwin-container .signature {
  position: absolute;
  top: 20px;
  left: 33%;
  width: 120px;
  z-index: 2;
  width: 246px;
}
.pc-mode .achi-title {
  font-size: 24px;
  font-weight: 900;
  color: white;
  text-transform: capitalize;
}
.pc-mode .achi-title img {
  width: 17px;
}
.pc-mode .achi-list img {
  width: 200px;
}
.footer-logo-pc {
  max-width: 390px;
  margin-bottom: 25px;
}

.pc-mode .okwin-container .champion-box {
  background-color: var(--main-color);
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding: 15px;
  position: relative;
  max-width: 1200px;
  margin:  auto 0;
}
.pc-mode .gale-image-sing img {
  width: 233px;
}
.pc-mode .video-sing {
  border-radius: 10px;
  margin: 0 auto;
  display: block;
}
.pc-mode .luka-lager-img {
  width: 605px;
  object-fit: cover;
}
.pc-mode .title-sing {
  width: 720px;
  margin: 0 auto;
  display: block;
  margin-bottom: 20px;
}

.pc-mode .okwin-container .player-img {
  position: absolute;
  left: 30px;
  bottom: 1px;
  z-index: 3;
}

.pc-mode .okwin-container .text-content {
  flex: 1;
}

.pc-mode .okwin-container .title {
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 20px;
  text-align: center;
}

.pc-mode .okwin-container .description {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}

.pc-mode .okwin-container .grid-wrapper {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  position: relative;
  max-width: 1200px;
  margin: auto;
  /* padding: 40px; */
}

/* Đảm bảo ảnh fit khung */
.pc-mode .okwin-container .item img {
  /* width: 100%;
  height: 100%; */
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.pc-mode .okwin-container .img1 {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
}

.pc-mode .okwin-container .img2 {
  margin-top: 140px;
  grid-column: 1;
  grid-row: 1 / span 2;
  z-index: 2;
}

.pc-mode .okwin-container .img3 {
  grid-column: 2;
  grid-row: 1;
}

.pc-mode .okwin-container .img4 {
  grid-column: 2;
  grid-row: 2;
}

.drop-section img{
  padding-top: 16px;
  max-width: 100%;
  height: auto;
}
.drop-section {
  text-align: center;
}

.pc-mode .okwin-container .content-2 {
  background-image: url(../images/background.png);
  background-size: cover;
  position: relative;
  
}

.pc-mode .okwin-container .content-2 .player-info {
  text-align: center;
}

.pc-mode .okwin-container .content-2 .desc{
  max-width: 1200px;
  /* position: absolute; */
  margin: auto;
  /* top: 63%; */
  /* left: 5%; */
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-white);
  margin-top: 20px;
}

.pc-mode .okwin-container .content-2 .list-img {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1250px;
  width: 100%;
  margin: auto;
  margin-top: 20px;
}
.pc-mode .okwin-container .content-2 .list-img img{
  margin: 4px;
  border-radius: 10px;
}

.pc-mode .okwin-container .content-3 {
  background-image: url(../images/background.png);
  background-size: cover;
  text-align: center;
}

.pc-mode .okwin-container .content-3 .content-3-container {
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.pc-mode .okwin-container .content-3 .content-3-title {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 16px;
  font-size: 30px;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--main-color);
  padding: 8px 16px;
  border-radius: 8px;
  
}
.pc-mode .okwin-container .img-list-container img {
  width: 390px ;
}
.pc-mode .footer-social {
  position: absolute;
  bottom: 37%;
  right: 16%;
}
.pc-mode footer {
  position: relative;
}

.pc-mode .okwin-container .img-bot {
  margin: 4px;
  margin-top: 8px;
}

.pc-mode .okwin-container .site-footer {
  background: linear-gradient(to top, #000000, #484848);
  color: #fff;
  padding: 40px 20px 20px;
  display: flex;
  justify-content: start;
  align-items: center;
  position: relative;
}

.pc-mode .okwin-container .footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  width: 100%;
  margin: auto;
}

.pc-mode .okwin-container .footer-column {
  flex: 1 1 250px;
}

.pc-mode .okwin-container .footer-column h3 {
  color: #ff6600;
  margin-bottom: 15px;
  font-size: 18px;
}

.pc-mode .okwin-container .footer-column p,
.footer-column a,
.footer-column ul li {
  color: #ccc;
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
}

.pc-mode .okwin-container .footer-column a:hover {
  color: #fff;
}

.pc-mode .okwin-container .footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pc-mode .okwin-container .social-icons a {
  color: #ff6600;
  font-size: 18px;
  margin-right: 12px;
  transition: 0.3s;
}

.pc-mode .okwin-container .social-icons a:hover {
  color: #fff;
}

.pc-mode .okwin-container .footer-bottom {
  border-top: 1px solid #333;
  margin-top: 30px;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.pc-mode .okwin-container .footer-bottom img {
  height: 30px;
}

.pc-mode .okwin-container .info {
  display: flex;
  justify-content: flex-start;
}

.pc-mode .okwin-container .vl {
  border-left: 3px solid red;
  height: 20px;
  margin-right: 8px;
}

.pc-mode .okwin-container .certificate {
  text-align: center;
  background-color: var(--main-color);
  color: var(--color-white);
  padding: 10px ;
}
.pc-mode .okwin-container .certificate p {
  font-weight: 600;
  font-size: 1em;
}

@media only screen and (max-width: 999px) {
  .pc-mode {
    display: none;
  }
  .mobile-mode {
    display: block;
  }
}

@media only screen and (min-width: 1000px) {
  .pc-mode {
    display: block;
  }
  .mobile-mode {
    display: none;
  }
}

.mobile-mode {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.mobile-mode .nav {
  position: relative;
  width: 100%;
  z-index: 999;
}
.mobile-mode .nav .nav1{
  width: 100%;
  position: absolute;
  top: 5px;
  left: 0;
}

.mobile-mode .nav .nav2{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.mobile-mode .banner{ 
  padding: 0; 
  margin: 12px 0; 
}
:root { --nav-rect: 64px; }

.mobile-mode .nav{
  position: fixed;
  top:0; left:0; right:0;
  height:var(--nav-rect);
  z-index:1000;
}

.mobile-mode .first-img{
  padding: 10px;
}

.mobile-mode .banner img {
  width: 100%;
  height: auto;
}

.mobile-mode .mobile-content1 {
  background-image: url(../images/background.png);
  background-size: cover;
}

.mobile-mode .mobile-content1 .mobile-content1-container {
  padding: 20px;
}

.mobile-mode .mobile-content1 .connect{
  text-align: center;
}

.mobile-mode .btn-info {
  /*margin-top: 16px;*/
  display: flex;
  justify-content: center;
}
.mobile-mode .achi-title {
  background: linear-gradient(90deg, #FFA030 0%, #FD8901 100%);
  height: 50px;
  width: 100%;
  color: white;
  font-weight: 900;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.mobile-mode .cupSwiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mobile-mode .cupSwiper {
  padding-bottom: 20px;
}
.mobile-mode .cupSwiper .swiper-pagination {
  bottom: 0;
}
.mobile-mode .cupSwiper .swiper-pagination-bullet-active {
  background :  rgba(253, 137, 1, 1) !important;;
}

.mobile-mode .btn-info .text {
  background-color: var(--main-color);
  color: var(--color-white);
  text-align: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 1em;
  width: 100%;
  font-weight: 700;
}
.mobile-mode .mobile-info-title .intro-home {
  font-weight: 500;
  line-height: 23px;
}
.mobile-mode .trending-slide-img img
{
  width: 28rem;
  height: auto;
  border-radius: 1rem;
  object-fit: cover;
}
.mobile-mode .trending-slide {
  width: 28rem !important;
  height: auto;
}
.mobile-mode .cup {
  margin-top: 20px;
  margin-bottom: 20px;
  /*padding: 20px;*/
}
.mobile-mode .luka-img-4 {
  width: 23rem;
}

.mobile-mode .mobile-info-title {
  color: var(--color-white);
}

.mobile-mode .mobile-info-title .title{
  font-size: 20px;
  font-weight: 900;
  margin: 10px auto;
  text-align: center;
}
.mobile-mode strong{
  color: #fd8901;
}

.mobile-mode .signature {
  width: 100%;
  text-align: end;
  margin-top: 16px;
}

.mobile-mode .signature img{
width: 120px;
}

.mobile-mode .mobile-mode {
  width: 100%;
}
.mobile-mode .mobile-mode img {
  width: 100%;
  height: auto;
  margin-top: 16px;
}

.mobile-mode .mobile-content2 {
  background-image: url(../images/background.png);
  background-size: cover;
}

.mobile-mode .mobile-content2 .btn-video {
  padding-top: 16px;
  text-align: center;
}

.mobile-mode .mobile-content2 .btn-video img{
  width: 100%;
  height: auto;
}

.mobile-mode .first-img img{
  width: 100%;
  height: auto;
  margin-top: 16px;
}

.mobile-mode  .content2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  padding: 8px;
  width: 100%;
}

.mobile-mode .content2-grid img{
  width: 100%;
  height: auto;
}

.mobile-mode .mobile-content3 {
  background-image: url(../images/background.png);
  background-size: cover;
}

.mobile-mode .mobile-content3  .luka-img img{
  padding: 8px;
  width: 100%;
  height: auto;
}

.mobile-mode .mobile-content3 .connect {
  padding: 8px;
  text-align: center;
}

.mobile-mode .mobile-content3 .connect img{
  width: 100%;
  height: auto;
}
.mobile-mode .footer-social{
  position: absolute;
  bottom: 19%;
  right: 10%;
}
.mobile-mode .footer-social img{
  width: 40px;
}

.mobile-mode .mobile-content3 .desc {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-white);
  margin-top: 16px;
  padding: 0 16px;
}

/*.mobile-mode .mobile-content3 .cup img{*/
/*  width: 100%;*/
/*  height: auto;*/
/*  padding: 16px 8px;*/
/*}*/

.mobile-mode .mobile-content4 {
  background-image: url(../images/background.png);
  background-size: cover;
}
.copyright {
  background: rgba(253, 137, 1, 1);
  color: white;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.mobile-mode .mobile-content4 .image-info img{
  width: 100%;
  height: auto;
  text-align: center;
  padding: 16px 8px;
}

.mobile-mode .content4-flex {
  padding-top: 16px;
  padding-right: 8px;
  padding-left: 8px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mobile-mode .content4-flex .signature{
  width: 120px;
  height: auto;
}

.mobile-mode .site-footer {
  background: linear-gradient(0deg, #000000 0%, #484848 100%);
  color: #ccc;
  position: relative;
}

.mobile-mode .footer-container {
  padding: 30px 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

.mobile-mode .footer-section {
  flex: 1 1 250px;
}

.mobile-mode .footer-section h3 {
  color: white;
  font-size: 16px;
  margin-bottom: 12px;
}

.mobile-mode .footer-section p,
.footer-section li,
.footer-section a {
  font-size: 14px;
  line-height: 1.6;
  color: #ccc;
  text-decoration: none;
}

.mobile-mode .footer-section a:hover {
  color: #fff;
  text-decoration: underline;
}

.mobile-mode .footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-mode .dmca-note {
  margin-top: 10px;
  font-size: 13px;
}

.mobile-mode .dmca-badge {
  margin-top: 6px;
  height: 30px;
}

.mobile-mode .footer-bottom {
  background-color: rgba(253, 137, 1, 1);
  color: #fff;
  text-align: center;
  padding: 12px 10px;
  margin-top: 20px;
  font-size: 14px;
}

.mobile-mode .footer-container .info {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}
.mobile-mode .logo-mobile {
  position: absolute;
  top: 5px;
  left: 3px;
  z-index: 999;
}
.mobile-mode .logo-mobile img {
  width: 50px;
}

.mobile-mode .vl {
  border-left: 4px solid rgba(253, 137, 1, 1);
  height: 20px;
  margin-right: 8px;
}

.mobile-mode .footer-container .footer-mobile-logo img{
  text-align: left;
}
.mobile-mode .banner img{
  border-radius: 0;
}
.pc-mode .banner {
  display: flex;
  justify-content: center;
}
.btn-home {
  color: #fc8b00;
  position: absolute;
  top: 10px;
}
/* 自动滚动缩略图条 */
.thumb-strip{
  overflow: hidden;
  border-radius: 14px;
  margin-top: 45px;
  background: rgba(255,255,255,.02);
  position: relative;
}

.thumb-strip .track{
  display: flex;
  gap: 12px;
  padding: 8px 10px;
  will-change: transform;
}

.thumb-strip img{
  flex: 0 0 auto;
  height: 120px;                 /* 行高：可改 */
  aspect-ratio: 16/9;            /* 统一比例 */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.thumb-strip img:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}

/* 小屏更紧凑 */
@media (max-width: 480px){
  .thumb-strip img{ height: 92px; }
}
.pc-mode { display:block; }
.mobile-mode { display:none; }
@media (max-width:1024px){
  .pc-mode { display:none; }
  .mobile-mode { display:block; }
}
/* ====== 顶部变量：根据你的素材调整 ====== */
/* ============= 顶部尺寸变量（按你的两张图的真实高度改） ============= */
:root{
  --nav-rect: 40px !important;        /* 顶部黑色横条本身的高度 */
  --nav-curve-drop: 25px !important;   /* 橙色曲线 PNG 的真实“下垂”高度 */
}

/* 固定导航条（黑色横条） */
.mobile-mode .nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-rect) !important;
  z-index: 1000 !important;
}

/* “曲线条”这一层：固定在横条正下方，高度=曲线PNG的下垂高度 */
.nav-curve{
  position: fixed;
  top: var(--nav-rect) !important;   /* 贴住横条底部 */
  left: 0; right: 0;
  height: var(--nav-curve-drop) !important;
  background: url("./images/mobile/nav-back-logo.png") no-repeat center top / 100% auto !important;
  pointer-events: none;              /* 让它不遮挡点击 */
  z-index: 1001 !important;
}

/* 页面正文整体往下让出（横条 + 曲线）的高度 */
.mobile-mode{
  padding-top: calc(var(--nav-rect) + var(--nav-curve-drop)) !important;
}

/* ===== 轮播图 / 大图：去空隙，贴到曲线条底下 ===== */

/* 统一把 banner 自带的 margin/padding/border 清掉 */
.mobile-mode .banner,
.mobile-mode .banner .swiper{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* 若轮播仍然与曲线条之间出现一道缝，可把 banner 往上提曲线高度 */
.mobile-mode .banner{
  margin-top: calc(-1 * var(--nav-curve-drop)) !important;
}

/* 让图片占满整行且不留缝隙 */
.bannerSwiper .swiper-wrapper{ align-items: stretch !important; }
.bannerSwiper .swiper-slide img{
  display: block !important;
  width: 100% !important;
  height: auto !important;          /* 如果你希望固定可视高，用下面一行替换这一行 */
  /* height: 56.25vw; object-fit: cover; */
  box-shadow: none !important;
}
/* ===== 修复：文字溢出 + 自适应字号 + 安全边距 ===== */

/* 桌面端文本容器 */
.content-1 .text-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-inline: clamp(16px, 4vw, 40px);  /* 左右留安全边距 */
}

/* 防止子元素超宽 */
.content-1 .text-content * { max-width: 100%; }

/* 桌面端标题/正文 */
.content-1 .text-content .title,
.content-1 .text-content h2 {
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.25;
  margin: 0 0 .6em;
  white-space: normal !important;
}

.content-1 .text-content .description,
.content-1 .text-content p {
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.7;
  white-space: normal !important;       /* 有些地方会把 white-space 设成 nowrap */
  overflow-wrap: anywhere !important;   /* 现代浏览器断词 */
  word-break: break-word !important;    /* 兜底断词 */
  hyphens: auto;
}

/* 移动端标题/正文 */
.mobile-content1 .mobile-info-title .title {
  font-size: clamp(18px, 5.2vw, 28px);
  line-height: 1.3;
  margin: 14px 0 8px;
  white-space: normal !important;
}

.mobile-content1 .intro-home {
  font-size: clamp(14px, 3.8vw, 17px);
  line-height: 1.7;
  padding-inline: clamp(12px, 5vw, 24px);
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto;
}

/* 兜底：有时候父级被设置了不合理的 nowrap/transform，可以强压一层 */
.text-panel, .panel, .content-1, .mobile-content1 {
  overflow: visible;
}
/* ============ 通用文字修复：断行、防溢出、自适应字号、内边距 ============ */
.text-fix{
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-inline: clamp(16px, 5vw, 36px); /* 左右安全边距 */
}

/* 所有标题/正文 都保证能换行、不溢出 */
.text-fix h1, .text-fix h2, .text-fix h3,
.text-fix h4, .text-fix h5, .text-fix h6,
.text-fix p,  .text-fix li, .text-fix span {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto;
}

/* 标题/正文字号自适应（可按需微调） */
.text-fix h1, .text-fix h2 { font-size: clamp(22px, 3.2vw, 40px); line-height: 1.25; margin: 0 0 .6em; }
.text-fix p  { font-size: clamp(14px, 1.7vw, 18px);  line-height: 1.7;  margin: 0 0 .8em; }

/* 防止图片/内联块把容器撑爆 */
.text-fix img, .text-fix video, .text-fix svg,
.text-fix canvas { max-width: 100%; height: auto; }
/* ===== 手机端统一安全边距（左右留白） ===== */
:root{ --gutter:16px; }            /* 默认左右 16px */
@media (min-width:480px){ :root{ --gutter:20px; } }  /* 稍大屏再多一点 */

/* 需要留白的模块：标题、说明文字、连接图、下方文字等 */
.mobile-mode .mobile-info-title,
.mobile-mode .desc,
.mobile-mode .desc.text-fix,
.mobile-mode .luka-img,
.mobile-mode .connect,
.mobile-mode .achi-title {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* 让图像仍铺满“各自容器”，但不再贴到屏幕边上 */
.mobile-mode .connect img,
.mobile-mode .luka-img img {
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;              /* 需要可保留，不要就删 */
}

/* 文本排版的兜底，避免超出 */
.mobile-mode .desc p,
.mobile-mode .mobile-info-title .title {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

/* 如果按钮也显得太宽，可同样加左右留白 */
.mobile-mode .achi-title.mt-2 {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
/* 全站深色主题：正文颜色 */
:root{
  --ok-text: #E6ECF5;   /* 你想要的正文字色 */
  --ok-link: #9CC6FF;   /* 常规链接颜色 */
  --ok-link-hover: #CFE3FF;
}

/* 正文容器文本颜色（根据你的结构任选或全加） */
body,
.pc-mode,
.mobile-mode,
.okwin-container {
  color: var(--ok-text) !important;
}

/* 标题/段落/内联文本都继承上面的颜色 */
h1,h2,h3,h4,h5,h6,
p,li,dt,dd,blockquote,
small,span,strong,em {
  color: inherit !important;
}

/* 链接颜色（不影响浮标） */
a{
  color: var(--ok-link);
}
a:hover{
  color: var(--ok-link-hover);
}
/* 高亮词还原为品牌橙色 */
:root{
  --ok-accent: #FFA640;   /* 你要的高亮色，改成你的品牌橙也行 */
  --Luka Moric-accent: #FFA640;
}

.text-main{
  color: var(--ok-accent) !important;
}

/* 如果 .text-main 里还有 strong/b 等，保持同色 */
.text-main strong,
.text-main b{
  color: inherit !important;
}
/* ========== 视频圆角：包裹层裁切 ========== */

/* 公共：外框负责圆角/裁切/占位 */
.video-frame{
  position: relative;
  width: 100%;
  border-radius: 16px;         /* 默认 16px，可被 data-radius 动态覆盖 */
  overflow: hidden;            /* 关键：裁切内部 video */
  background:#000;             /* 视频未加载时的底色 */
  isolation: isolate;          /* 某些浏览器可避免奇怪的合成问题 */
}

/* 16:9 高宽比容器（现代浏览器） */
.video-frame.r-16{
  aspect-ratio: 16 / 9;
}

/* 老浏览器兜底：用 padding-hack 实现 16:9 */
@supports not (aspect-ratio: 16/9){
  .video-frame.r-16::before{
    content:"";
    display:block;
    padding-top:56.25%; /* 9/16 = 56.25% */
  }
  .video-frame.r-16 > *{
    position:absolute;
    inset:0;
  }
}

/* 内部视频：铺满容器，保持裁切 */
.video-frame .video-sing{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;            /* 关键：避免变形 */
  background:#000;
  /* 不给 video 自己加 border-radius，避免 iOS/Safari bug */
}

/* 可选：通过 data-radius 动态设置圆角值 */
.video-frame[data-radius="12"]{ border-radius:12px; }
.video-frame[data-radius="16"]{ border-radius:16px; }
.video-frame[data-radius="20"]{ border-radius:20px; }

/* 移动端也通用，无需额外媒体查询 */
/* ===== 浮动按钮（Facebook） ===== */
.float-social{
  position: fixed;
  right: 18px;
  bottom: 28vh;                    /* 在右侧中上部，避免遮住底部内容，可按需改 */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  z-index: 9999;                   /* 浮在最上层 */
  background: #1877F2;             /* Facebook 标准蓝 */
  color: #fff;                     /* 只影响自己，不会影响全站字体 */
  box-shadow: 0 12px 28px rgba(24,119,242,.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.float-social svg{
  width: 24px;
  height: 24px;
  fill: #fff;
}

.float-social:hover{
  transform: translateY(-2px) scale(1.04);
  filter: saturate(1.1);
  box-shadow: 0 16px 36px rgba(24,119,242,.45);
}

/* 右上角红色的小徽标 */
.float-social .badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #FF3B30;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(255,59,48,.35);
  transform-origin: 100% 0;
  animation:
    badge-pop .35s cubic-bezier(.2,1.4,.3,1) both,
    badge-pulse 2s ease-in-out 1s infinite;
}

/* 弹出动画 */
@keyframes badge-pop{
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
/* 轻微呼吸 */
@keyframes badge-pulse{
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}

/* 移动端尺寸微调 */
@media (max-width: 768px){
  .float-social{
    right: 12px;
    bottom: 22vh;
    width: 46px;
    height: 46px;
  }
  .float-social svg{ width: 20px; height: 20px; }
  .float-social .badge{
    top: -6px; right: -6px;
    min-width: 16px; height: 16px; line-height: 16px; font-size: 10px;
  }
}

/* 固定在右侧的悬浮按钮 */
.fb-float{
  position: fixed;
  right: 18px;
  bottom: 48vh;              /* 让它大概在页面中下部，可按需微调 */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 1000;            /* 确保浮在内容之上 */
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fb-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
}
.fb-float:active{ transform: translateY(0); }

/* Facebook 官方圆图标（自带圆角） */
.fb-icon{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;       /* 保险起见，即便是 <img> 也能裁成圆形 */
}

/* 右上角红色 +1 徽标 */
.fb-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #FF3B30;     /* iOS 风格红色 */
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  box-shadow: 0 2px 6px rgba(255,59,48,.35);
  transform-origin: 100% 0; /* 从右上角“蹦出” */
  animation: fb-badge-pop .35s cubic-bezier(.2,1.4,.3,1) both,
             fb-badge-pulse 1s ease-in-out 0.5s infinite;
}

/* 弹出动画 */
@keyframes fb-badge-pop{
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
/* 轻微呼吸动画 */
@keyframes fb-badge-pulse{
  0%,100% { transform: scale(1.2); }
  50%     { transform: scale(1.08); }
}

/* 移动端尺寸微调 */
@media (max-width: 768px){
  .fb-float{ right: 12px; bottom: 48vh; width: 48px; height: 48px; }
  .fb-badge{ min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; }
}