@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
.fo4-player-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 24px; */
  margin-top: 130px;
}
.fo4-player-card,
.fo4-player-card * {
  box-sizing: border-box;
}
span.club-name {
    margin-left: 10px;
}
.compare-button {
    width: 35px;
    margin-top: 10px;
}
/* Chỉ áp dụng cho cột thứ 2 (cột chứa logo và tên đội bóng) */
.fo4-career-table td:nth-child(2) {
    display: flex;
    align-items: center;
}
span, th, h2 {
    font-family: "Fjalla One", "Kanit", "Tahoma", sans-serif !important;
}
.fo4-player-card {
  max-width: 750px;
  /* background: #102637; */
  border-radius: 4px;
  overflow: hidden;
  /* box-shadow: 0 0 0 1px rgba(255,255,255,0.04); */
  font-family: Arial, Helvetica, sans-serif;
  color: #d9e0e7;
}

.fo4-player-card .fo4-card-header {
  /* height: 255px; */
  /* background: #0d2232; */
  display: flex;
  justify-content: space-between;
  /* padding: 34px 36px 0; */
  position: relative;
}

.fo4-player-card .fo4-player-info {
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
}

.fo4-player-card .fo4-season {
  letter-spacing: 0.3px;
    letter-spacing: 0.3px;
    color: #FFF;
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 300;
    line-height: 25px;
    text-transform: uppercase;
}

.fo4-player-card .fo4-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fo4-player-card .fo4-name-row h1 {
    color: #FFF;
    text-align: center;
   font-family: Inter, sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 22.481px;
    margin-top: 5px;
}

.fo4-player-card .fo4-avatar-mini {
  width: 25px;
  margin-top: 5px;
}
.updating {
    margin-left: -30px;
    margin-top: -15px;
}
.fo4-player-card .fo4-avatar-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fo4-player-card .fo4-position-row {
  display: flex;
  gap: 10px;
  padding-bottom: 7px;
}

.fo4-player-card .fo4-pos-box {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 16px;
    font-size: 24px;
    height: 27px;
    border-radius: 4px;
    background: #132a3d;
}

.fo4-player-card .fo4-pos-box span {
    color: #AF1616;
    text-align: center;
   font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
}

.fo4-player-card .fo4-pos-box b {
    color: #657084;
    text-align: center;
   font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
}

.fo4-player-card .fo4-meta-row {
  display: flex;
  align-items: center;
  gap: 15px;
    color: #FFF;
   font-family: Inter, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
}

.fo4-player-card .fo4-flag {
    width: 27px;
    height: 13px;
    margin-top: -9px !important;
}

.fo4-player-card .fo4-level {
  width: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
   background-image: url("/assets/images/bg_pay.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fo4-player-card .fo4-foot {
  color: #e5e9ee;
}

.fo4-player-card .fo4-player-photo {
  position: absolute; 
  right: -5px;
  top: 10px;
  width: 220px;
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}
@media (min-width: 1200px){
  .mobile {
    display: none !important;
  }
  
}
.fo4-player-card .fo4-player-photo::before {
  content: "";
  position: absolute;
  inset: 0;

 background-image: url("/assets/images/bg-image.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0.45;
    top:20px;
}

/* Huy hiệu tròn phía trên bên phải */
.fo4-player-card .fo4-photo-badge {
    position: absolute;
    top: 30px;
    right: 0px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* background: #132a3d; */

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 3;
}

.fo4-player-card .fo4-photo-badge img {
    width: 20px;
    object-fit: contain;
}

.fo4-player-card .fo4-foot i {
    background-image: url('/assets/images/icon_left_d.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 17px;
    height: 30px;
    display: inline-block;
    font-size: 15px;
    font-style: normal;
    padding-left: 3px;
    padding-top: 2px;
}
.fo4-player-card .fo4-foot .right { 
 background-image: url('/assets/images/icon_right_d.svg');
}
/* Level tròn */
.fo4-player-card .fo4-level-circle {
    position: absolute;
    right: 8px;
    top: 75px;

    width: 27px;
    height: 27px;
    border-radius: 50%;

    background: #121721;
    border: 3px solid #3D380E;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 25px;
}

/* Level vuông bên dưới */
.fo4-player-card .fo4-level-box {
    position: absolute;
    right: 5px;
    top: 110px;
    width: 29px;
    height: 18px;

    background: #818ca4;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 25px;
}

/* Sao bên trái */
.fo4-player-card .fo4-photo-star {
    position: absolute;
    left: 0;
    bottom: 24px;

    color: #f4b01c;
    font-size: 30px;
    line-height: 1;

    text-shadow:
        1px 1px 0 #111,
        -1px -1px 0 #111,
        1px -1px 0 #111,
        -1px 1px 0 #111;

    z-index: 4;
}
.fo4-player-card .fo4-meta-row span {
  margin-top: 0px;
}
.fo4-player-card .fo4-player-photo img {
  position: relative;
  z-index: 1;
  max-height: 116px;
  object-fit: contain;
  padding-bottom: 5px;
}
.fo4-player-card .fo4-player-photo img.player-card__player {
  padding-left: 60px;
}
.fo4-player-card .fo4-upgrade-row {
    margin-top: -2px;
  height: 50px;
  background: #132a3d;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px dashed rgba(0,0,0,0.35);
}

.fo4-player-card .fo4-upgrade-btn,
.fo4-player-card .fo4-plus-btn {
  border: 0;
  height: 24px;
  border-radius: 3px;
background: #74004D;
    padding: 0 18px;
    cursor: pointer;
    color: #B3E400;
    text-align: center;
   font-family: Inter, sans-serif;
    font-size: 14.388px;
    font-style: normal;
    font-weight: 700;
    line-height: 22.481px;
}

.fo4-player-card .fo4-plus-btn {
  width: 38px;
  color: #fff;
  margin-left: 8px;
  padding: 0;
}

.fo4-player-card .fo4-rate-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #e8edf2;
}


.fo4-player-card .fo4-rate-info > div {
  text-align: center;
}

.fo4-player-card .fo4-rate-info b {
    color: #E0E5EB;
    text-align: center;
   font-family: Inter, sans-serif;
    font-size: 24.033px;
    font-style: normal;
    font-weight: 600;
    line-height: 12.517px;
    text-transform: uppercase;
}

.fo4-player-card .fo4-rate-info small {
  display: block;
    color: #E0E5EB;
    text-align: center;
   font-family: Inter, sans-serif;
    font-size: 7.51px;
    font-style: normal;
    font-weight: 400;
    line-height: 12.517px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fo4-player-card .fo4-rate-info div:nth-of-type(3) {
    /* CSS của bạn ở đây */
    height: 35px;
}
.fo4-player-card .fo4-rate-info div:nth-of-type(3) small {
    /* CSS của bạn ở đây */
    margin-bottom: 1px;
}

.fo4-player-card .fo4-rate-info strong {
    color: #E0E5EB;
    text-align: center;
   font-family: Inter, sans-serif;
    font-size: 14.706px;
    font-style: normal;
    font-weight: 600;
    line-height: 18.382px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    justify-content: center;
}

.fo4-player-card .fo4-shirt {
  color: #f5ac10;
  font-size: 30px;
}

.fo4-player-card .fo4-speed-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #132a3d;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.35);
}

/* Thêm đoạn này bên dưới để ghi đè thằng cuối cùng */
.fo4-player-card .fo4-speed-box:last-child {
    border-right: none !important;
}

.fo4-player-card .fo4-speed-box {
  text-align: center;
  padding: 4px 0 4px;
  border-right: 1px dashed rgba(0,0,0,0.35);
}

.fo4-player-card .fo4-speed-box span {
    text-transform: uppercase;
  display: block;
    color: #FFF;
    text-align: center;
   font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
}

.fo4-player-card .fo4-speed-box b {
  display: block;
    color: #EEAB1C;
    text-align: center;
   font-family: Inter, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
}

.fo4-player-card .fo4-position-tabs,
.fo4-player-card .fo4-ovr-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  background: #132a3d;
  padding: 5px 8px 0;
}
/* Ép cột 1 (Vị trí) chỉ rộng vừa đủ chứa chữ CF, không cho chiếm thêm không gian */
.fo4-player-table th:nth-child(1),
.fo4-player-table td:nth-child(1) {
    width: 16% !important;
    /* Trick ép độ rộng co về tối thiểu */
    white-space: nowrap !important;
    /* Không cho chữ xuống dòng */
    padding-left: 25px !important;
    /* Khoảng cách nhỏ giữa chữ CF và Icon cầu thủ */
}

/* Đảm bảo cột 2 (Tên cầu thủ) tự động nới rộng ra để ăn sát về phía cột 1 */
.fo4-player-table th:nth-child(2),
.fo4-player-table td:nth-child(2) {
    width: auto !important;
    text-align: left !important;
    padding-left: 0 !important;
}
.fo4-player-card .fo4-tab {
  height: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
   font-family: Inter, sans-serif;
    font-size: 14.388px;
    font-style: normal;
    font-weight: 700;
    line-height: 22.481px;
}

.fo4-player-card .fo4-gray {
  background: #7d8898;
}

.fo4-player-card .fo4-red {
  background: #c51615;
}

.fo4-player-card .fo4-green {
  background: #007759;
}

.fo4-player-card .fo4-blue {
  background: #2941d6;
}

.fo4-player-card .fo4-yellow {
  background: #eba719;
}

.fo4-player-card .fo4-ovr-row {
  padding-top: 4px;
  padding-bottom: 4px;
}
.fo4-player-card .fo4-stats-col span {
    font-weight: 300 !important;
    /* Hoặc thử hẳn 300 nếu muốn mảnh hơn nữa */

    /* Bộ đôi khử nhòe, giúp nét chữ thanh mảnh và sắc nét hơn trên màn hình */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.text-up {
  text-transform: uppercase;
  margin-top: 4px;
}
.fo4-meta-row span:first-child {
    /* Viết code CSS của bạn ở đây */
    margin-top: 0;
}
.fo4-player-card .fo4-ovr-row span {
  color: #d500aa;
  font-size: 20px;
  text-align: center;
}
.fo4-player-card .fo4-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #132a3d;
  border-top: 1px dashed rgba(0,0,0,0.35);
}

.fo4-player-card .fo4-stats-col {
    padding: 14px 24px 12px 18px;
    border-right: 1px dashed rgba(0, 0, 0, 0.35);
}

/* Khử border-right của cột nằm ở vị trí cuối cùng bên phải */
.fo4-player-card .fo4-stats-col:last-child {
    border-right: none !important;
}

.fo4-player-card .fo4-stats-col div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 25px;
    color: #E0E5EB;
    text-align: right;
   font-family: Inter, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
}

.fo4-player-card .fo4-stats-col span {
    color: #FFF;
   font-family: Inter, sans-serif!important;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: 25px;
}

.fo4-player-card .fo4-stats-col b {
  color: #e01717;
    text-align: center;
   font-family: Inter, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
}

.fo4-player-card .fo4-stats-col b.fo4-pink {
  color: #e300b9;
}

.fo4-player-card .fo4-total-col {
  position: relative;
}

.fo4-player-card .fo4-total-score {
  justify-content: flex-end !important;
  color: #e6ebf0;
  font-weight: 800;
  margin-top: 16px;
}

.fo4-player-card .fo4-hidden-stats {
  height: 62px;
  background: #132a3d;
  border-top: 1px dashed rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  font-size: 21px;
}

.fo4-player-card .fo4-hidden-stats b {
    color: #EEAB1C;
   font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.fo4-player-card .fo4-hidden-stats span {
    color: #657084;
   font-family: Inter, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

@media (max-width: 1280px) {
  .fo4-player-card {
    width: 96vw;
  }

  .fo4-player-card .fo4-name-row h1 {
    font-size: 44px;
  }

  .fo4-player-card .fo4-meta-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .fo4-player-card .fo4-stats-col div {
    font-size: 22px;
  }

  .fo4-player-card .fo4-tab {
    font-size: 18px;
  }
}

.fo4-extra-wrapper,
.fo4-extra-wrapper * {
  box-sizing: border-box;
}

.fo4-extra-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #e4eaf0;
}

/* ================= BOX INFO ================= */

.fo4-info-box {
    max-width: 750px;
  background: #132a3d;
  border-radius: 4px;
  padding: 10px;
}

.fo4-info-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom:10px;
}

.fo4-info-tab {
  border: 0;
  height: 34px;
  padding: 0 16px;
  border-radius: 4px;
color: #EEAB1C;
   font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.fo4-tab-dark {
  background: #0d2130;
}

.fo4-tab-active {
     border-radius: 3px;
    background: #0F212E;
    color: #EEAB1C;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.fo4-info-content {
     display: grid;
    grid-template-columns: 1fr 230px;
    align-items: self-start;
    gap: 10px;
    padding: 0 10px 8px;
}

.fo4-traits-grid {
     display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 10px;
}

.fo4-trait-item {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  column-gap: 5px;
}

.fo4-trait-icon {
    width: 39px;
    height: 39px;
    display: flex;
}

.fo4-icon-gold {
  background: #d7bf72;
  color: #2f2a18;
}

.fo4-trait-item h3 {
  margin: 0 0 6px;
    color: #00ffd0;
   font-family: Inter, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.fo4-trait-item p {
  margin: 0;
    color: rgba(255, 255, 255, 0.78);
   font-family: Inter, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: left;
     display: -webkit-box;
    -webkit-line-clamp: 2;      /* chỉ hiển thị 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    line-height: 1.4;
    max-height: calc(1.4em * 2);
}

/* ================= RADAR ================= */

.fo4-radar-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.fo4-radar {
  width: 200px;
  height: 200px;
  overflow: visible;
}

.fo4-radar-grid {
  fill: transparent;
  stroke: rgba(235, 242, 247, 0.85);
  stroke-width: 1;
}

.fo4-radar-line {
  stroke: rgba(235, 242, 247, 0.75);
  stroke-width: 1;
}

.fo4-radar-value {
  fill: rgba(232, 164, 0, 0.08);
  stroke: #f0a900;
  stroke-width: 3;
}

.fo4-radar-dot {
  fill: rgba(19, 42, 59, 0.9);
  stroke: #f0a900;
  stroke-width: 3;
}

.fo4-radar-label {
  fill: #e5ebf0;
    color: #FFF;
   font-family: Inter, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: 25px;
}

/* ================= BOX CAREER ================= */

.fo4-career-box {
    padding: 14px 26px;
    border-radius: 3px;
    background: #132a3d;
}

.fo4-career-title {
    border-radius: 3px;
background: #2942DA;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 15px;
 margin-bottom: 26px;
    color: #FFF;
   font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.fo4-career-table {
  width: 620px;
  border-collapse: collapse;
  color: #e5ebf0;
  margin-left: 18px;
}

.fo4-career-table th {
  text-align: left;
  color: #ffffff;
  font-weight: 800;
  padding-bottom: 18px;
  font-family: "Noto Sans Georgian";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.fo4-career-table td {
  font-size: 22px;
  padding: 7px 0;
    color: #FFF;
   font-family: Inter, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: 25px;
}

.fo4-career-table th:first-child,
.fo4-career-table td:first-child {
  width: 210px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1024px) {
  .fo4-info-content {
    grid-template-columns: 1fr;
  }

  .fo4-traits-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fo4-radar {
    width: 300px;
    height: 280px;
  }

  .fo4-career-table {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .fo4-extra-wrapper {
    padding: 14px;
  }

  .fo4-info-box,
  .fo4-career-box {
    padding: 12px;
  }

  .fo4-info-content {
    padding: 0;
  }

  .fo4-info-tab {
    font-size: 18px;
    padding: 0 12px;
  }

  .fo4-trait-item h3 {
    font-size: 19px;
  }

  .fo4-career-title {
    font-size: 20px;
  }

  .fo4-career-table th,
  .fo4-career-table td {
    font-size: 18px;
  }
}

.fo4-section-wrapper,
.fo4-section-wrapper * {
  box-sizing: border-box;
}

.fo4-section-wrapper {
  width: 100%;
  color: #e8eef3;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  /* padding: 18px 24px 60px; */
}

/* ================= PLAYER TABLE ================= */

.fo4-player-list-box {
  max-width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.fo4-player-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.fo4-player-table thead tr {
  background: #2c4658;
}

.fo4-player-table th {
  height: 50px;
      padding: 0 16px;
    font-family: "Noto Sans Georgian";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.fo4-player-table th:nth-child(1) {
    text-align: left;
    padding-left: 0px;
}

.fo4-player-table th:nth-child(3),
.fo4-player-table th:nth-child(4),
.fo4-player-table th:nth-child(5),
.fo4-player-table th:nth-child(6) {
  width: 100px;
  text-align: center;
}

.fo4-player-table tbody tr {
  height: 49px;
}

.fo4-player-table tbody tr:nth-child(odd) {
  background: #203846;
}

.fo4-player-table tbody tr:nth-child(even) {
  background: #132a3d;
}

.fo4-player-table td {
  color: #FFF;
  font-family: "Noto Sans Georgian";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.fo4-player-table td:nth-child(1),
.fo4-player-table td:nth-child(3),
.fo4-player-table td:nth-child(4),
.fo4-player-table td:nth-child(5),
.fo4-player-table td:nth-child(6) {
  text-align: center;
}

.fo4-position-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100px;
}

.fo4-position-bar {
  width: 6px;
  height: 20px;
  background: #3097ff;
  display: inline-block;
}

.fo4-name-cell {
  display: flex;
  align-items: center;
  gap: 18px;
}

.fo4-name-cell strong {
  font-size: 18px;
  font-weight: 800;
     color: #FFF;
    font-family: "Noto Sans Georgian";
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.fo4-season-badge {
  width: 35px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  font-family: Arial Black, Arial, sans-serif;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}

.fo4-badge-blue {
  background: #1f58bc;
}

.fo4-badge-red {
  background: #8b1230;
}

.fo4-badge-purple {
  background: #28236f;
  color: #f1c14b;
}

.fo4-salary-badge {
  width: 26px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans Georgian";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: url(/assets/images/bg_pay.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fo4-compare-btn {
  width: 29px;
  height: 29px;
  border: 0;
  border-radius: 50%;
  background: #2f91e8;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.25),
    8px 1px 0 -5px #2f91e8,
    11px 1px 0 -7px #ffffff;
}

/* ================= FAQ ================= */

.fo4-faq-box {
  width: 974px;
  max-width: 100%;
}

.fo4-faq-box h2 {
  margin: 0 0 40px;
  font-weight: 900;
  letter-spacing: 0.3px;
      color: #FFF;
    font-family: "Noto Sans Georgian";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.fo4-faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fo4-faq-item {
  background: #132a3d;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 7px rgba(0,0,0,0.16);
}

.fo4-faq-question {
  width: 100%;
  min-height: 63px;
  border: 0;
  color: #f4f7f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
    gap: 24px;
    padding: 0 36px 0 36px;
    cursor: pointer;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    background: #132a3d;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.fo4-faq-question span {
    color: #FFF;
    font-family: "Noto Sans Georgian";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.fo4-faq-answer {
  max-height: 0;
  overflow: hidden;
  background: #132a3d;
  transition: max-height 0.3s ease;
}

.fo4-faq-answer p {
  margin: 0;
  padding: 10px 52px 10px;
  color: #cbd5dd;
  font-size: 13px;
  line-height: 1.6;
}

.fo4-faq-item.fo4-faq-open .fo4-faq-answer {
  max-height: 180px;
}

.fo4-faq-item.fo4-faq-open .fo4-faq-question i {
  transform: rotate(225deg);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {
  .fo4-section-wrapper {
    padding: 16px;
    gap: 38px;
  }

  .fo4-player-list-box {
    overflow-x: auto;
  }

  .fo4-player-table {
    min-width: 900px;
  }

  .fo4-faq-box h2 {
    font-size: 25px;
    margin-bottom: 24px;
  }

  .fo4-faq-question {
    padding: 0 18px;
    min-height: 72px;
  }

  .fo4-faq-question span {
    font-size: 18px;
  }

  .fo4-faq-answer p {
    padding: 0 18px 22px;
    font-size: 15px;
  }
}

@media (min-width: 1200px) {
    .fo4-player-card,
    .fo4-career-box,
    .fo4-player-list-box,
    .fo4-info-box,
    .fo4-faq-box { 
        width: 750px;
    }
    .fo4-trait-no-item {
      margin-top: -120px;
    } 
    .fo4-faq-box {
      padding-bottom: 40px;
    }
 }

/* ========== Base ========== */
:root{
  --bg: #132a3d;
  --bd: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --link: #58b6ff;
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --radius: 10px;
  --good: #69b36b;
  --bad: #d66657;

  --red: #c62828;
  --green: #5aa65e;
  --blue: #3a86ff;
  --yellow: #e0aa2b;
  --slate: rgba(255,255,255,.06);

}
*{ box-sizing: border-box; }
a{ color: inherit; text-decoration: none; }
a:focus-visible, .btn:focus-visible{
  outline: 3px solid rgba(88,182,255,.55);
  outline-offset: 3px;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.player-card {
  background: unset;
  border-radius: 18px;
  /* padding: 18px 14px; */
  text-align: center;
  /* box-shadow: 0 12px 30px rgba(0, 0, 0, .35); */
  transition: transform .25s ease, box-shadow .25s ease;
}
.section-bg {
  display: none;
}
#select-fograde-gp .dropdownbtn, #select-folevel-gp .dropdownbtn {
  background: transparent;
  padding: 0;
  cursor: pointer;
  margin: 0;
  border: none;
  line-height: 0;
  width: 40px;
  position: relative;
  height: auto;
}
#select-fograde-gp .badgedgrade {
  height: 19px;
}
.badgedgrade.grade1 {
  background-position: 0 7.692308%;
  background-size: 100%;
}
.badgedgrade.grade1 {
  background-position: 0 7.692308%;
  background-size: 100%;
}
.badgedgrade {
  width: 30px !important;
  height: 15px;
  max-width: 100%;
  background-size: 100%;
  background-image: url(/assets/images/189724d.png);
}


.badgedgrade.grade1 {
  background-position: 0 7.692308%;
  background-size: 100%;
}
.badgedgrade {
  width: 30px !important;
  height: 15px;
  max-width: 100%;
  background-size: 100%;
  background-image: url(/assets/images/189724d.png);
}
.badgedgrade.grade1 {
  background-position: 0 7.692308%;
  background-size: 100%;
}
.badgedgrade.grade2 {
  background-position: 0 46.153846%;
  background-size: 100%;
}
.badgedgrade.grade3 {
  background-position: 0 53.846154%;
  background-size: 100%;
}
.badgedgrade.grade4 {
  background-position: 0 61.538462%;
  background-size: 100%;
}
.badgedgrade.grade5 {
  background-position: 0 69.230769%;
  background-size: 100%;
}
.badgedgrade.grade6 {
  background-position: 0 76.923077%;
  background-size: 100%;
}
.badgedgrade.grade7 {
  background-position: 0 84.615385%;
  background-size: 100%;
}
.badgedgrade.grade8 {
  background-position: 0 92.307692%;
  background-size: 100%;
}
.badgedgrade.grade9 {
  background-position: 0 100%;
  background-size: 100%;
}
.badgedgrade.grade10 {
  background-position: 0 15.384615%;
  background-size: 100%;
}
.badgedgrade.grade11 {
  background-position: 0 23.076923%;
  background-size: 100%;
}
.badgedgrade.grade12 {
  background-position: 0 30.769231%;
  background-size: 100%;
}
.badgedgrade.grade13 {
  background-position: 0 38.461538%;
  background-size: 100%;
}
.grade-tooltip {
  position: absolute;
  background:#f7f7f7;
  color: #acacac;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  display: none;
  z-index: 9999;
  width: 280px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
}


.box-level .grade {
  background: #daffd1;
  color: #836201;
  text-align: left;
  padding-left: 5px;
}

.box-grade .grade {
  background: #d0bf80;
  color: #fefefe;
  text-align: left;
  padding-left: 5px;
}
.box-grade .title {
  background: #3b3316;
  color: #fefefe;
}
.box-level .title {
  background: #cc9900;
  color: #fff;
}
.box-level .active { 
  background: #cc9900;
  color: #fff;
}
.box-grade .active {  
  background: #3b3316;
  color: #fff000;
}

.tooltip-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #2b2b2b;
}
.grade-tooltip .grade {
  text-align: center;
  padding: 0px 0;
  border-radius: 3px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
  font-size: 14px;
}
.tooltip-grid button {
  border: none;
}
button.bg-unset {
  background: unset;
}
.box-level-person {
  position: absolute;
  bottom: 0px;
  right: 15%;
}

.tooltip-header {
  display: flex;
  background: unset;
  justify-content: space-between;
  position: relative;
  align-items: center;
  font-weight: bold;
  padding: 0 10px;
}
.grade-tooltip .line {
  height: 1px;
  background: #eaeaea;
}
.tooltip-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.box-level {
  margin-bottom: 10px;
  margin-top: 10px;
}
.box-grade { 
  margin-bottom: 10px;
}
.tooltip-grid .title {
  width: 60px;
}
.tooltip-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 0px 10px;
}
.play-info__level-dropdown {
  position: relative;
  padding-right: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.player-card__inner {
  position: relative;
  overflow: hidden;
  padding-top: 25px;
  padding-bottom: 10px;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.player-card__name.class-1979 {
  color: #fff !important;
} 
.player-card__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
  color: #fff;
  font-weight: 700;
  margin-left: 15px;
  margin-top: -30px;
  position: absolute;
}
.rating-number {
  color: #FFF;
  font-family: "Bebas Neue", sans-serif;
  font-size: 39.654px;
  font-style: normal;
  font-weight: 400; 
  line-height: normal;
}
.rating-position {
  color: #FFF;
  font-family: "Bebas Neue", sans-serif;
  font-size: 23.498px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-left: 2px;
}
.player-card img.player-card__player {
  width: 160px;
  margin-top: 75px;
}

.player-card img {
  width: auto;
  margin: auto;
  display: block;
  height: auto;
}
.player-card__body {
  text-align: center;
  padding: 13px;
}
.player-card h3 {
  font-size: 15px;
}

.player-card__name {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: #0a3b8f;
}
.player-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
  margin-left: 25%;
}

.meta-icon {
  width: 28px;
  height: auto;
}
.player-card img {
  width: 20px;
  margin: auto;
  display: block;
}
.meta-divider {
  width: 1px;
  height: 10px;
  background: #999;
}
.player-card__footer {
  position: absolute;
  bottom: -2%;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(/images/icon_pay_2.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 24px;
  color: #fff;
}
.player-card__pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-family: "Bebas Neue";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}

.player__panel .player-card__inner {
  width: 200px;
  height: 330px;
  padding-top: 0px;
}

/* ========== Breadcrumb ========== */
.breadcrumb{
  margin: 18px auto 16px;
  /* max-width: 600px; */
  display: flex;
}
.breadcrumb ol{
  list-style: none;
  display: inline-flex;
  gap: 10px;
  padding: 10px 14px;
  margin: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, .18);
  color: var(--text);
  background: unset;
  margin: 18px auto 16px;
  border-radius: 20px;
  border: 1px solid #757575;
  background: unset;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.breadcrumb li.current {

  font-family: "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.breadcrumb li.current span { 
  color: #3B9CFF;
}

.breadcrumb-icon {
  font-size: 16px;
  color: #ffffff;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.breadcrumb-icon::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ffffff;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>')
  no-repeat center;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>')
  no-repeat center;
}

.breadcrumb a{
  color: #FFF;
  font-family: "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.breadcrumb a:hover{
  color: var(--link);
}

/* ========== Player Box ========== */
.player{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 28px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 26px;
  align-items: stretch;
}

.player__panel{
  /* background: var(--bg); */
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.player__panel--card{
  padding: 24px;
  display: grid;
  place-items: center;
  padding-bottom: 0px;
}
.player__img{
  border-radius: 12px;
}

/* Right panel */
.player__panel--info{
  padding: 26px 28px 24px;
  display: grid;
  gap: 14px;
}

.player__name{
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: .2px;
}

/* Badges row */
.player__badges{
  list-style: none;
  display: inline-flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  align-items: center;
  margin-top: 10px;
}
.player__badges li img {
  width: 16px;
}
.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-weight: 700;
}
.badge--ghost{
  color: #3B9CFF;
  font-family: "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.pill {
  background-image: url(/images/icon_left.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 20px;
  width: 15px;
  position: relative;
}
.pill-right { 
  background-image: url(/images/icon_right.svg);
}
.tab-pill {
  display: flex;
}
.pill span {
  color: #FFF;
  font-family:  "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin-left: 3px;
}
/* Salary */
.player__salary{
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: 16px;
}
.player__label{ margin-right: 8px; }
.player__value{ color: var(--link); font-weight: 800; }

/* Info grid */
.player__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  margin-top: 50px;
}
.kv{
  margin: 0;
  display: grid;
  gap: 10px;
}
.kv__row{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: baseline;
}
.kv dt{
  margin: 0;
  color: #FFF;
  font-family: "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}
.kv dd{
  margin: 0;
  color: #3B9CFF;
  text-align: right;
  font-family: "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.link{
  color: var(--link);
}
.link:hover{
  text-decoration: underline;
}

.stars{
  letter-spacing: 2px;
  color: rgba(255, 221, 120, .95);
  font-weight: 800;
}
.chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  color: #3B9CFF;
  font-weight: 800;
}
/* Nút + / - */
.counter-btn {
  width: 20px;
  height: 20px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Hover */
.counter-btn:hover {
  background: #eef2ff;
  border-color: #6366f1;
  color: #4338ca;
}

/* Active (nhấn) */
.counter-btn:active {
  transform: scale(0.95);
}

/* Nút + nổi bật hơn */
.counter-btn.plus {
  font-weight: 700;
}

/* CTA button */
.btn{
  margin-top: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 58px;
  padding: 0 18px;
  font-weight: 800;
  font-size: 20px;
  color: #eaf6ff;
  border: 1px solid rgba(88,182,255,.55);
  border-radius: 5px;
  background: linear-gradient(180deg, #3B9CFF 0%, #235E99 100%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  font-family: "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.btn:hover{
  transform: translateY(-1px);
}
.btn:active{
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 767px){
  .updating {
      margin-left: -20px;
      margin-top: 10px;
  }
    .fo4-player-card .fo4-player-photo img.player-card__player {
      padding-left: 0px;
    }
.fo4-tab-5,
.fo4-tab-6,
.fo4-tab-7,
.fo4-tab-8,
.fo4-tab-9,
.fo4-tab-10 {
  display: none !important;
}
  .player{
    grid-template-columns: 1fr;
  }
  .player__panel--card{
    min-height: auto;
  }
  .player__grid{
    grid-template-columns: 1fr;
  }
  .kv__row{
    grid-template-columns: 120px 1fr;
  }
  .player__name{
    font-size: 20px;
  }
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.box-grid{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.box{
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 22px 24px;
}

.box__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.box__head--review{
  margin-bottom: 10px;
}

.box__title{
  margin: 0;
  color: var(--text);
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .2px;
  margin-top: 10px;
}

.box__title--center{
  width: 100%;
  text-align: center;
}

.box__sub{
  margin: 6px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

/* Score */
.score{
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--link);
  font-weight: 900;
}
.score__value{ font-size: 38px; line-height: 1; }
.score__sep{ font-size: 22px; opacity: .85; }
.score__max{ font-size: 22px; opacity: .85; }

/* Pros/Cons */
.pc{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 26px;
  margin: 10px 0 10px;
}
.pc__title{
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--link);
  font-weight: 800;
}
.pc__list{
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}
.pc__list li{
  color: #FFF;
  font-family:  "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

/* Review text + link */
.box__text{
  margin: 10px 0 12px;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  font-size: 15px;
}
.box__link{
  display: inline-block;
  color: var(--link);
  font-weight: 800;
}
.box__link:hover{ text-decoration: underline; }

/* Community bar */
.bar-head{
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.86);
  font-weight: 700;
  margin: 0 2px 10px;
}

.splitbar{
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--bd);
  background: rgba(0,0,0,.18);
  display: flex;
  height: 54px;
}
.splitbar__good,
.splitbar__bad{
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 20px;
  color: rgba(255,255,255,.95);
}
.splitbar__good{
  width: calc(var(--good) * 1%);
  background: #67B067;
}
.splitbar__bad{
  width: calc(var(--bad) * 1%);
  background: #D16253;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 24px;
}
.meta-grid .player-card__inner { 
  height: 190px;
  background-size: contain;
}
.meta-grid .player-card__footer {
  line-height: 12px;
  bottom: 2%;
  left: 49%;
}
.meta-grid .player-card__age {
  font-size: 10px;
}
.meta-grid .player-card__meta {
  gap: 0px;
  margin-top: -8px;
  width: 90px;
  margin-left: 18%;
}
.meta-grid .player-card img { 
  width: 15px;
}
.meta-grid .player-card__body {
  padding: 5px;
  margin-top: -3px;
}
.meta-grid .player-card h3 {
  font-size: 13px;
}
.meta-grid .player-card__rating {
  margin-top: -30px;
  margin-left: 30px;
  gap: 0;
}
.meta-grid .rating-number,
.meta-grid .rating-position { 
  font-size: 15px;
}
.meta-grid .player-card img.player-card__player {
  width: 80px;
  margin-top: 30px;
  margin-left: 40px;
}
.meta-grid  .player-card { 
  background: #0f2538;
  border-radius: 18px;
  padding: 18px 14px;
}

.meta-2{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 2px 16px;
}
.meta-2__item{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 14px;
}
.meta-2__item--right{ text-align: right; }

/* Form */
.community-form{
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 12px;
  margin-top: 50px;
}
.community-form__input{
  height: 44px;
  border-radius: 8px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: var(--text);
}
.community-form__input::placeholder{
  color: rgba(255,255,255,.55);
}
.community-form__btn{
  color: #eaf6ff;
  font-weight: 900;
  cursor: pointer;
  border-radius: 5px;
  background: linear-gradient(180deg, #3B9CFF 0%, #235E99 100%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.community-form__btn:hover{ transform: translateY(-1px); }
.community-form__btn:active{ transform: translateY(0); }

/* Responsive */
@media (max-width: 960px){
  .box-grid{ grid-template-columns: 1fr; }
  .pc{ grid-template-columns: 1fr; }
  .score__value{ font-size: 34px; }
}

.stats{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 36px;
}
.stats__title{
  margin: 0 0 14px;
  color: var(--text);
  font-size: 28px;
  letter-spacing: .2px;
}

.stats__panel{
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Top 6 blocks */
.stats-top{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background-image: url(/images/bg_index.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.stats-top__item{
  padding: 0px 10px 0px;
  text-align: center;
  border-right: 1px solid #3B9CFF;
  margin: 20px 0;
}
.stats-top__item:last-child{ border-right: 0; }

.stats-top__num{
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  color: var(--link);
  text-shadow: 0 0 14px rgba(88,182,255,.25);
}

.stats-top__label{
  margin-top: 6px;
  font-weight: 800;
  letter-spacing: .6px;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  text-transform: uppercase;
}

/* Position tabs */
.pos-tabs{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  background: rgba(0,0,0,.20);
  border-bottom: 1px solid var(--bd);
}

.pos-tabs__tab{
  border: 0;
  color: rgba(255, 255, 255, .92);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .4px;
  cursor: pointer;
  width: 74px;
  height: 25px;
  margin: 5px 6px 5px 6px;
}
.pos-tabs__tab:last-child{ border-right: 0; }

.pos-tabs__tab.is-muted{ background: #505051; color: rgba(255,255,255,.88); }
.pos-tabs__tab.is-red{ background: rgba(198,40,40,.92); }
.pos-tabs__tab.is-green{ background: rgba(90,166,94,.92); }
.pos-tabs__tab.is-blue{ background: rgba(58,134,255,.92); }
.pos-tabs__tab.is-yellow{ background: rgba(224,170,43,.92); }

.pos-tabs__star{
  margin-left: 6px;
  color: #ffd26a;
}

/* OVR row */
.ovr-row{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid var(--bd);
  margin-left: -30px;
}

.ovr-row__cell{
  padding: 5px 0px 10px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.08);
  list-style: none;
}
.ovr-row__cell:last-child{ border-right: 0; }

.ovr-row__k{
  color: rgba(255,255,255,.75);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .5px;
}

.ovr-row__v{
  margin-top: 4px;
  font-size: 26px;
  font-weight: 900;
  color: rgba(255,255,255,.95);
}

/* Detailed table (4 columns like screenshot) */
.stats-table{
  padding: 0;
}

.stats-table__row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.stats-table__cell{
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-right: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.10);
}
.stats-table__cell:last-child{ border-right: 0; }

.stats-table__cell span,
.stats-table__cell dt{
  color: rgba(255,255,255,.78);
  font-size: 14px;
}
.stats-table__cell strong,
.stats-table__cell dd{
  color: var(--link);
  font-weight: 900;
}

.stats-table__cell--sum{
  background: rgba(0,0,0,.16);
}
.stats-table__cell--sum .sum{
  font-size: 26px;
  text-shadow: 0 0 14px rgba(88,182,255,.20);
}

/* Hidden stats */
.hidden{
  padding: 16px 18px 18px;
  background: rgba(0,0,0,.12);
}

.hidden__title{
  margin: 0 0 12px;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  font-weight: 900;
}

.hidden__icons{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 14px;
  align-items: center;
}

.hidden__icon{
  width: 54px;
  height: 54px;
  display: flex;
  justify-content: center;
}


/* ============================================
   COLOR SCALE - Stat Value Colors
   ============================================ */

/* Low tier - Gray scale */
.over0 {
  color: #555 !important;
}
.over10 {
  color: #666 !important;
}
.over20 {
  color: #777 !important;
}
.over30 {
  color: #888 !important;
}
.over40 {
  color: #999 !important;
}
.over50 {
  color: #a0a0a0 !important;
}

/* Mid tier - Blue to Cyan */
.over60 {
  color: #5bb8ff !important;
}
.over70 {
  color: #3ecaff !important;
}
.over80 {
  color: #00ffd0 !important;
}

/* High tier - Gold/Yellow (with glow) */
.over90 {
  color: #b5974f !important;
  text-shadow: 0 0 8px rgba(181, 151, 79, 0.5);
}

.over100 {
  color: #ffcc4d !important;
  text-shadow: 0 0 10px rgba(255, 204, 77, 0.6);
}

.over110 {
  color: #ffb347;
  text-shadow: 0 0 12px rgba(255, 179, 71, 0.6);
}

/* Elite tier - Orange to Red (with strong glow) */
.over120 {
  color: #ff784f !important;
  text-shadow: 0 0 8px rgba(255, 120, 79, 0.7), 0 0 16px rgba(255, 120, 79, 0.4);
}

.over130 {
  color: #ff4d6d !important;
  text-shadow: 0 0 8px rgba(255, 77, 109, 0.7), 0 0 16px rgba(255, 77, 109, 0.4);
}

.over140 {
  color: #ff3388 !important;
  text-shadow: 0 0 10px rgba(255, 51, 136, 0.8),
    0 0 20px rgba(255, 51, 136, 0.5);
}

/* Legendary tier - Pink/Purple (with intense glow) */
.over150 {
  color: #ff66ff !important;
  text-shadow: 0 0 12px rgba(255, 102, 255, 0.9),
    0 0 24px rgba(255, 102, 255, 0.6), 0 0 36px rgba(255, 102, 255, 0.3);
}

.over160 {
  color: #ffffff !important;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.9),
    0 0 30px rgba(255, 255, 255, 0.6), 0 0 45px rgba(255, 215, 0, 0.4);
}

/* ============================================
   END COLOR SCALE
   ============================================ */


/* Responsive */
@media (max-width: 1024px){
  .stats-top{ grid-template-columns: repeat(3, 1fr); }
  .pos-tabs, .ovr-row{ grid-template-columns: repeat(6, 1fr); margin-left: -40px;}
}


/* Wrapper */
.club-history{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 16px 34px;
}

.club-history__title{
  margin: 0 0 14px;
  color: var(--text);
  font-size: 28px;
  letter-spacing: .2px;
}

.club-history__panel{
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Table */
.club-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.club-table thead th{
  padding: 18px 20px;
  text-align: center;
  color: rgba(255,255,255,.95);
  font-weight: 900;
  letter-spacing: .6px;
  border-bottom: 1px solid rgba(255,255,255,.10);

  /* header texture look */
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.10)),
    rgba(0,0,0,.15);
}

.club-table tbody td{
  padding: 13px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
  background: rgba(0,0,0,.10);
}

.club-table tbody tr:last-child td{
  border-bottom: 0;
}

/* Column widths like screenshot */
.club-table thead th:nth-child(1),
.club-table tbody td:nth-child(1){
  width: 22%;
  text-align: left;
  padding-left: 42px;
}

.club-table thead th:nth-child(2),
.club-table tbody td:nth-child(2){
  width: 56%;
  text-align: left;
}

.club-table thead th:nth-child(3),
.club-table tbody td:nth-child(3){
  width: 22%;
  text-align: center;
}

/* Club cell */
.club{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.95);
  text-decoration: none;
}

.club:hover .club__name{
  text-decoration: underline;
}

.club__logo{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.club__name{
  font-weight: 700;
}

/* Helpers */
.is-center{ text-align: center; }

/* Responsive */
@media (max-width: 820px){
  .club-table thead th:nth-child(1),
  .club-table tbody td:nth-child(1){
    padding-left: 18px;
  }
  .club-table thead th,
  .club-table tbody td{
    padding: 12px 14px;
  }
}

/* Wrapper */
.rec{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 16px 40px;
}

.rec__title{
  margin: 0 0 16px;
  color: var(--text);
  font-size: 28px;
  letter-spacing: .2px;
}

/* Grid */
.rec__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

/* Each tile container like screenshot */
.rec-card{
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 340px;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-decoration: none;
}

.rec-card__img{
  width: min(230px, 80%);
  height: auto;
  display: block;
  transform: translateY(2px);
}

/* Hover */
.rec-card:hover{
  transform: translateY(-2px);
  transition: transform .15s ease;
}

/* Responsive */
@media (max-width: 1024px){
  .rec__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .rec__grid{ grid-template-columns: 1fr; }
  .rec-card{ min-height: 320px; }
}
.fo4-player-card .fo4-player-photo img.player-card__player {
  padding-left: 0px;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Wrapper */
.cmt{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 16px 50px;
  display: none;
}

/* ===== Top row ===== */
.cmt-top{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 14px;
}

/* Login block */
.cmt-login{
  display: grid;
  gap: 12px;
}
.btn-login{
  height: 54px;
  border-radius: 10px;
  border: 1px solid rgba(88,182,255,.55);
  background: linear-gradient(180deg, rgba(88,182,255,.55), rgba(40,125,210,.55));
  color: #eaf6ff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
.btn-login:hover{ transform: translateY(-1px); }
.btn-login:active{ transform: translateY(0); }

.social{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.social__btn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  cursor: pointer;
}
.social__btn:hover{ background: rgba(255,255,255,.06); }

/* Editor */
.cmt-editor{
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
}
.cmt-editor__textarea{
  width: 100%;
  resize: vertical;
  min-height: 64px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}
.cmt-editor__textarea::placeholder{
  color: rgba(255,255,255,.55);
}

.cmt-editor__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

.cmt-tools{
  display: flex;
  gap: 10px;
  align-items: center;
}
.tool{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.88);
  cursor: pointer;
  font-size: 13px;
  display: grid;
  place-items: center;
}
.tool:hover{ background: rgba(255,255,255,.06); }

.btn-send{
  height: 38px;
  min-width: 120px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(88,182,255,.55);
  background: linear-gradient(180deg, rgba(88,182,255,.55), rgba(40,125,210,.55));
  color: #eaf6ff;
  font-weight: 900;
  cursor: pointer;
}

/* ===== Comment box ===== */
.cmt-box{
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cmt-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.cmt-title{
  margin: 0;
  font-size: 22px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.badge-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(88,182,255,.30);
  border: 1px solid rgba(88,182,255,.45);
  color: rgba(255,255,255,.95);
  font-weight: 900;
  font-size: 13px;
}

.cmt-sort{
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  padding: 0 12px;
}

/* List */
.cmt-list{
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}

/* Comment item */
.cmt-item{
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cmt-item:last-child{ border-bottom: 0; }

.comment{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: start;
}

.comment__ava{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  object-fit: cover;
}

.comment__name{
  margin: 0;
  color: rgba(255,255,255,.95);
  font-size: 18px;
  font-weight: 900;
}

.comment__time{
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(88,182,255,.85);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.dot{ opacity: .7; }

.comment__text{
  margin: 10px 0 10px;
  color: rgba(255,255,255,.86);
  line-height: 1.65;
}

.comment__actions{
  display: flex;
  gap: 14px;
  align-items: center;
  color: rgba(255,255,255,.75);
  font-size: 13px;
}
.act{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}
.act--link{
  color: rgba(255,255,255,.72);
  text-decoration: none;
}
.act--link:hover{ text-decoration: underline; }

/* Reply (nested) */
.reply-list{
  list-style: none;
  margin: 12px 0 0;
  padding: 0 0 0 36px;
  position: relative;
}
.reply-list::before{
  content: "";
  position: absolute;
  left: 18px;
  top: -6px;
  bottom: 6px;
  width: 2px;
  background: rgba(88,182,255,.55);
  border-radius: 2px;
}
.reply-item{
  margin-top: 10px;
}
.comment--reply{
  grid-template-columns: 46px 1fr;
}
.comment--reply .comment__ava{
  width: 38px;
  height: 38px;
}

/* Responsive */
@media (max-width: 900px){
  .cmt-top{ grid-template-columns: 1fr; }
  .cmt-login{ grid-auto-flow: column; align-items: center; justify-content: space-between; }
}
@media (max-width: 560px){
  .comment{ grid-template-columns: 46px 1fr; }
  .cmt-head{ flex-direction: column; align-items: flex-start; }
    .fo4-player-card .fo4-player-photo img.player-card__player {
      padding-left: 0px;
    }
}
@media (min-width: 1200px){  
  .player__panel .player-card { 
    margin-left: -60px;
  }
  .player__panel--card {
     width: 270px;
  }
  .fo4-player-card .fo4-player-photo img.player-card__player {
    left: 15px;
        width: 140px;
        top: 5px;
  }
  div#select-fograde-gp {
    margin-right: -40px;
    margin-bottom: -5px;
  }
}

@media (max-width: 767px){
.fo4-player-card .fo4-player-photo img.player-card__player {
  padding-left: 0px;
}
  .player__panel--card {
    padding: 24px;
    display: grid;
    place-items: center;
    padding-bottom: 0px;
    background: unset;
    border: unset;
    box-shadow: none;
  }
  .player__panel .player-card__inner {
    margin-left: -30px;
  }
  .breadcrumb li.current {
    font-size: 10px;
  }
  .breadcrumb li { 
    gap: 5px;
  }
  .breadcrumb a {
    font-size: 10px;
  }
  .cmt-editor { 
    padding: 14px 5px 12px;
  }
  .pos-tabs__tab { 
    width: 50px;
  }
  .breadcrumb { 
    display: flex;
  }
  .breadcrumb ol {
    gap: 5px;
    padding: 8px;
  }
  .club-history__title,
  .rec__title,
  .stats__title {
    font-size: 25px;
  }
  section.pc__col-right {
    position: absolute;
    right: 20px;
  }
  .box__title { 
    margin-top: 5px;
  }
  article.stats-top__item.class-3 {
    border-right: none;
  }
  article.stats-top__item.class-4,
  article.stats-top__item.class-5 { 
    margin-bottom: 40px;
  }
  .pc {
    grid-template-columns: 1fr 1fr;
  }
  .btn { 
    font-size: 13px;
    height: 40px;
  }
  .stats-table__row{ 
    grid-template-columns: 1fr 1fr;
  }
  .stats-top__num{ font-size: 30px; }
  .stats-table__cell { 
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  .meta-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .meta-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

@media (min-width: 450px) and (max-width: 500px) { 
  .meta-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
    .fo4-player-card .fo4-player-photo img.player-card__player {
      padding-left: 0px;
    }
  .meta-grid .player-card__age {
    font-size: 8px;
  }
}
@media (max-width: 500px) { 
  .fo4-player-card .fo4-player-photo img.player-card__player {
      padding-left: 0px;
    }
  .meta-grid .player-card__meta {
    gap: 0px;
    margin-top: 0px;
    width: 75px;
    margin-left: 12%;
  }
  .meta-grid .player-card__rating {
    margin-top: -15px;
    margin-left: 10px;
  }
  .meta-grid .player-card img.player-card__player {
    width: 80px;
    margin-top: 22px;
    margin-left: 10px;
  }
  .meta-grid .player-card__age {
    font-size: 8px;
  }
  .meta-grid .player-card {
    border-radius: 10px;
  }
}


@media (max-width: 450px) { 
  .meta-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
    .fo4-player-card .fo4-player-photo img.player-card__player {
      padding-left: 0px;
    }
  .meta-grid .player-card {
    padding: 10px 10px;
    width: 150px;
  }
  .meta-grid .player-card__inner {
    height: 220px;
  }
  .meta-grid .player-card img.player-card__player {
    width: 100px;
    margin-top: 32px;
    margin-left: 35px;
  }
  .meta-grid .player-card__rating {
    margin-top: -25px;
    margin-left: 30px;
    gap: 0;
  }
  .meta-grid .player-card__meta {
    gap: 0px;
    margin-top: -5px;
    width: 90px;
    margin-left: 22%;
  }
}

@media (max-width: 400px) {
  .meta-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .meta-grid .player-card {
    padding: 10px 10px;
    width: 170px;
  }
  .news-overlay h3, .news-item h4 {
    font-size: 10px;
  }
  .news-item h4 { 
    padding: 10px 5px 0;
  }
  .news-item time { 
    font-size: 6px;
  }
  .meta-grid .player-card {
    padding: 10px 10px;
    width: 170px;
  }
}

@media (max-width: 400px) {
.pos-tabs__tab { 
  font-size: 10px;
}
.pos-tabs__tab {
  width: 45px;
}
}
/* =====================================================
   MOBILE FIX - DETAIL PLAYER
   Dán cuối file detail_player.css
===================================================== */
.fo4-player-card .fo4-stars { 
  line-height: 0px;
}
@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
    background: #0d2232;
  }

  main {
    margin-top: 30px;
    background: #0d2232;
  }

  .fo4-player-wrapper {
    min-height: auto;
    padding: 12px;
    margin-top: 0;
    align-items: flex-start;
  }

  .fo4-player-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 4px;
  }

  .fo4-player-card .fo4-card-header {
    min-height: 210px;
    padding: 0;
    display: block;
    position: relative;
    margin-bottom: -15px;
  }

  .fo4-player-card .fo4-player-info {
    width: calc(100% - 135px);
    padding-left: 6px;
    left: -6px;
    padding-top: 30px;
    margin-bottom: 0;
    position: relative;
    z-index: 5;
  }

  .fo4-player-card .fo4-season {
    font-size: 10px;
    line-height: 18px;
    margin-bottom: 4px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fo4-player-card .fo4-name-row {
    gap: 8px;
    align-items: center;
  }

  .fo4-player-card .fo4-avatar-mini {
    flex: 0 0 28px;
  }

  .fo4-player-card .fo4-name-row h1 {
    font-size: 30px;
    line-height: 34px;
    margin: 0;
    text-align: left;
    white-space: nowrap;
  }

  .fo4-player-card .fo4-position-row {
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .fo4-player-card .fo4-pos-box {
    height: 30px;
    padding: 0 10px;
    gap: 8px;
  }

  .fo4-player-card .fo4-pos-box span,
  .fo4-player-card .fo4-pos-box b {
    font-size: 15px;
  }

  .fo4-player-card .fo4-meta-row {
    margin-top: 5px;
    gap: 7px;
    font-size: 10px;
    line-height: 20px;
    flex-wrap: wrap;
    max-width: 100%;
  }

  .fo4-player-card .fo4-flag {
    
    width: 25px;
    height: 13px;
  }

  .fo4-player-card .fo4-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fo4-player-card .fo4-level {
    width: 24px;
    height: 24px;
  }

  .fo4-player-card .fo4-foot {
    display: inline-flex;
    gap: 2px;
  }

  .fo4-player-card .fo4-foot i {
    width: 9px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
        font-style: normal;
  }

  

  .fo4-player-card .fo4-stars {
    display: inline-flex;
    gap: 1px;
    line-height: 0px;
  }

  .fo4-player-card .fo4-stars img {
    width: 13px;
    height: 13px;
  }

  /* Ảnh cầu thủ */
  .fo4-player-card .fo4-player-photo {
    right: 0;
    top: 67px;
    width: 150px;
    height: 135px;
    z-index: 2;
  }

  .fo4-player-card .fo4-player-photo img.player-card__player,
  .fo4-player-card .fo4-player-photo > img {
    max-height: 100px;
    max-width: 100px;
  }

  .fo4-player-card .fo4-photo-badge {
    width: 36px;
    height: 36px;
    top: 30px;
    right: -7px;
  }

  .fo4-player-card .fo4-photo-badge img {
    width: 19px;
  }

  .fo4-player-card .fo4-level-circle {
    right: 0px;
    top: 70px;
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  #select-fograde-gp {
    position: absolute;
    right: -4px;
    left: auto;
    bottom: auto;
    top: 107px;
    z-index: 10;
  }

  #select-fograde-gp .dropdownbtn {
    width: 34px;
    height: 22px;
  }

  #select-fograde-gp .badgedgrade {
    width: 26px !important;
    height: 16px;
  }

  .fo4-player-card .fo4-level-box {
    position: relative;
    right: auto;
    top: auto;
    width: 34px;
    height: 22px;
    padding: 0;
  }

  /* Upgrade row */
  .fo4-player-card .fo4-upgrade-row {
    height: auto;
    min-height: 50px;
    padding: 8px 10px;
    /* flex-wrap: wrap; */
    gap: 8px;
  }

  .fo4-player-card .fo4-upgrade-btn {
    height: 28px;
    padding: 0 14px;
    font-size: 14px;
  }

  .fo4-player-card .fo4-plus-btn {
    width: 34px;
    height: 28px;
    margin-left: 0;
  }

  .fo4-player-card .fo4-rate-info {
    width: 100%;
    margin-left: 0;
    gap: 5px;
    justify-content: space-between;
  }

  .fo4-player-card .fo4-rate-info b {
    font-size: 20px;
  }

  .fo4-player-card .fo4-rate-info small {
    font-size: 7px;
    letter-spacing: 3px;
  }

  .fo4-player-card .fo4-rate-info strong {
    font-size: 11px;
  }

  /* Top stats */
  .fo4-player-card .fo4-speed-row {
    grid-template-columns: repeat(6, 1fr);
  }

  .fo4-player-card .fo4-speed-box {
    padding: 10px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.35);
  }

  .fo4-player-card .fo4-speed-box span {
    font-size: 9px;
    line-height: 18px;
  }

  .fo4-player-card .fo4-speed-box b {
    font-size: 24px;
    line-height: 26px;
  }

  /* Position tabs */
  .fo4-player-card .fo4-position-tabs,
  .fo4-player-card .fo4-ovr-row {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .fo4-player-card .fo4-tab {
    height: 28px;
    font-size: 14px;
  }

  .fo4-player-card .fo4-ovr-row {
    padding-top: 0;
    padding-bottom: 10px;
  }

  .fo4-player-card .fo4-ovr-row span {
    font-size: 22px;
    line-height: 24px;
  }

  /* Stats detail: mobile 2 cột */
  .fo4-player-card .fo4-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fo4-player-card .fo4-stats-col {
    padding: 10px 14px;
    border-right: 1px dashed rgba(0,0,0,0.35);
  }
.fo4-player-card .fo4-speed-row .fo4-speed-box:nth-child(n+4) {
    border-bottom: none;
}
  .fo4-speed-row .fo4-speed-box:nth-child(3) {
      border-right: none !important;
  }
  /* Chọn phần tử .fo4-stats-col thứ 3 */
  .fo4-stats-grid .fo4-stats-col:nth-child(3) {
      margin-top: -20px;
      
      /* Thay bằng hướng margin và số px bạn muốn */
  }
  .fo4-stats-grid .fo4-stats-col:nth-child(2) {
      border-right: none;
      /* Thay bằng hướng margin và số px bạn muốn */
  }

  /* Chọn phần tử .fo4-stats-col thứ 4 */
  .fo4-stats-grid .fo4-stats-col:nth-child(4) {
      margin-top: -20px;
      /* Thay bằng hướng margin và số px bạn muốn */
  }

  .fo4-player-card .fo4-stats-col div {
    font-size: 22px;
  }

  .fo4-player-card .fo4-stats-col span {
    font-size: 12px;
    line-height: 20px;
  }

  .fo4-player-card .fo4-stats-col b {
    font-size: 13px;
    line-height: 20px;
  }

  .fo4-player-card .fo4-total-score {
    /* font-size: 34px !important; */
    justify-content: flex-end !important;
    min-height: 50px !important;
  }

  /* Hidden stats */
  .fo4-player-card .fo4-hidden-stats {
    height: auto;
    min-height: 56px;
    padding: 12px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .fo4-player-card .fo4-hidden-stats b {
    font-size: 14px;
  }

  .fo4-player-card .fo4-hidden-stats span {
    font-size: 12px;
  }

  /* Info box */
  .fo4-extra-wrapper {
    padding: 12px;
    gap: 20px;
  }

  .fo4-info-box,
  .fo4-career-box,
  .fo4-player-list-box,
  .fo4-faq-box {
    width: 100%;
    max-width: 100%;
  }

  .fo4-info-box {
    padding: 10px;
  }

  .fo4-info-tabs {
    gap: 6px;
  }

  .fo4-info-tab {
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
  }

  .fo4-info-content {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .fo4-traits-grid {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .fo4-trait-item {
    grid-template-columns: 42px 1fr;
  }

  .fo4-trait-icon {
    width: 36px;
    height: 36px;
  }

  .fo4-trait-icon img {
    max-width: 100%;
    max-height: 100%;
  }

  .fo4-trait-item h3 {
    font-size: 14px;
  }

  .fo4-trait-item p {
    font-size: 10px;
    line-height: 14px;
  }

  .fo4-radar-box {
    display: none;
  }

  /* Career */
  .fo4-career-box {
    padding: 16px;
  }

  .fo4-career-title {
    height: 30px;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .fo4-career-table {
    width: 100%;
    margin-left: 0;
  }

  .fo4-career-table th,
  .fo4-career-table td {
    font-size: 13px;
    padding: 6px 0;
  }

  .fo4-career-table th:first-child,
  .fo4-career-table td:first-child {
    width: 42%;
  }

  /* Player list table */
  .fo4-section-wrapper {
    padding: 12px 12px 50px;
    gap: 36px;
  }

  .fo4-player-list-box {
    overflow-x: auto;
    border-radius: 4px;
  }

  .fo4-player-table {
    min-width: 720px;
  }

  .fo4-player-table th {
    height: 44px;
    font-size: 13px;
    padding: 0 10px;
  }

  .fo4-player-table td {
    font-size: 14px;
    padding: 0 10px;
  }

  .fo4-player-table tbody tr {
    height: 46px;
  }

  .fo4-name-cell {
    gap: 10px;
  }

  .fo4-name-cell strong {
    font-size: 13px;
  }

  .fo4-season-badge {
    width: 34px;
    height: 28px;
    font-size: 11px;
  }

  /* FAQ */
  .fo4-faq-box h2 {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .fo4-faq-list {
    gap: 16px;
  }

  .fo4-faq-question {
    min-height: 70px;
    padding: 0 14px 0 18px;
  }

  .fo4-faq-question span {
    font-size: 15px;
    line-height: 22px;
  }

  .fo4-faq-question i svg {
    width: 30px;
    height: 30px;
  }

  .fo4-faq-answer p {
    padding: 0 18px 20px;
    font-size: 14px;
  }

  .fo4-faq-item.fo4-faq-open .fo4-faq-answer {
    max-height: 260px;
  }

  /* Popup level */
  .grade-tooltip {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: auto !important;
    border-radius: 12px;
  }

  .tooltip-header {
    padding: 16px 14px 12px;
  }

  .tooltip-header h2 {
    font-size: 30px;
  }

  .tooltip-close {
    font-size: 32px;
  }

  .tooltip-grid {
    grid-template-columns: 80px repeat(5, 1fr);
    gap: 7px;
    padding: 0 12px;
  }

  .grade-tooltip .grade {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
  }

  .box-level {
    margin-top: 14px;
    margin-bottom: 8px;
  }

  .box-grade {
    margin-bottom: 14px;
  }
}
@media (max-width: 430px) {
  .fo4-player-card .fo4-name-row h1 {
    font-size: 26px;
  }

  .fo4-player-card .fo4-player-info {
    width: calc(100% - 125px);
  }

  .fo4-player-card .fo4-player-photo {
    width: 150px;
    height: 128px;
  }

  .fo4-player-card .fo4-player-photo img.player-card__player,
  .fo4-player-card .fo4-player-photo > img {
    max-height: 90px;
    max-width: 90px;
    margin-right: 5px;
  }
  .fo4-player-card .fo4-position-tabs,
  .fo4-player-card .fo4-ovr-row {
    grid-template-columns: repeat(6, 1fr);
  }

  .fo4-player-card .fo4-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fo4-player-card .fo4-speed-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .fo4-shirt img {
    width: 16px;
  }
  .fo4-player-card .fo4-rate-info b {
    font-size: 18px;
  }
  .fo4-player-card .fo4-shirt {
    font-size: 20px;
  }
  .fo4-player-card .fo4-upgrade-btn {
    height: 24px;
    padding: 0 10px;
  }
  .fo4-player-card .fo4-plus-btn {
    height: 24px;
  }
  .fo4-player-card .fo4-speed-box {
    padding: 0px;
  }
  .fo4-player-card .fo4-level {
    width: 15px;
    font-size: 8px;
    height: 16px;
  }
  .fo4-player-card .fo4-position-tabs, .fo4-player-card .fo4-ovr-row {
    padding: 3px;
  }
  .fo4-player-card .fo4-tab {
    font-size: 12px;
    height: 20px;
  }
  .fo4-player-card .fo4-speed-box b,
  .fo4-player-card .fo4-ovr-row span {
    font-size: 18px;
  }
  .fo4-player-card .fo4-foot i {
    width: 14px;
    height: 26px;
    padding-left: 0px;
  }
  .fo4-player-card .fo4-flag {
    height: 10px;
  }
  .fo4-player-card .fo4-upgrade-btn {
    font-size: 13px;
  }
  .fo4-player-card .fo4-upgrade-row,
  .fo4-player-card .fo4-rate-info  {
    gap: 5px;
  }
  .fo4-rate-info>div:first-child {
      margin-top: 6px;
      /* !important giúp vô hiệu hóa cái inline style 6px kia */
  }
  .fo4-player-card .fo4-player-photo img {
    padding-bottom: 2px;
  }
}