.mb-1 {
    margin-bottom: 10px !important;
}

.mb-2 {
    margin-bottom: 20px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mt-2 {
    margin-top: 20px !important;
}

.mt-1 {
    margin-top: 10px !important;
}

.mt-3 {
    margin-top: 30px !important;
}

.pt-0 {
    padding-top: 0;
}
pre {
    color: #000 !important;
}

ul.property {
    list-style: none;
    padding: 0!important;
}

ul.property > li {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0 !important;
}

ul.property > li:before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #f3c258;
    margin-right: 5px;
}

.block__tab__item:not(.active) {
    display: none;
}

.adsBlock {
    background-color: #1b2126;
    border-radius: 5px;
    padding-top: 50%;
    position: relative;
}

.adsBlock.big {
    padding-top: 100%;
}

.adsBlock.small {
    padding-top: 20%;
}

.adsBlock:before {
    content: 'Advertisement';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    text-transform: uppercase;
    font-size: 12px;
    transform: translate(-50%, -50%);
    color: #fff;
}

.ajax-tooltip-box {
    border: 1px solid #FFFFFF30 !important;
    font-size: 14px;
	font-family: "Open Sans", sans-serif !important;
    box-shadow: none;
    min-width: 550px;
    padding: 10px;
    background-color: #232734;
    border-radius: 5px;
    color: #fff;
}

.filter__item:not(.active) {
    display: none;
}

.tax__tooltip {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-column-gap: 10px;
}

.tax__tooltip .image img {
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 4px;
    border-radius: 5px;
    background-color: #2d3245;
	margin-bottom: 10px;

}

.tax__tooltip img,
.tax__tooltip figure {
    max-width: 100%;
    width: 100% !important;
}

.tax__tooltip__name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.tax__tooltip p {
    margin-bottom: 5px;
}

.ajax__search_results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fafafa;
    margin-top: 2px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
}

.ajax__search_result {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 10px;
    padding: 5px 10px;
    overflow: hidden;
    color: #111;
}

.ajax__search_result.not__found,
.ajax__search_result.loading {
    display: block;
    border: none;
}

.ajax__search_result .title {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    font-size: 14px;
    display: block;
    font-weight: 600;
}

.ajax__search_result .title i {
    display: block;
    color: #8f8f8f;
    font-weight: 400;
}

.ajax__search_result .details {
    overflow: hidden;
    padding: 5px 0;
}

.ajax__search_result .details .items {
    display: flex;
    gap: 5px;
}

.ajax__search_result .details .items img {
    width: 25px;
    padding: 4px;
}

.ajax__search_result:hover {
    background-color: #eee;
}

#search__keyword {
    width: 230px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 3px;
    color: #fff;
    background-image: url("../images/search.png");
    background-position: 5px 8px;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-left: 30px;
    filter: grayscale(100%);
}

.character-list {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}

.character-list.col-5 {
    grid-template-columns: repeat(5, 1fr);
}

.character-list.col-6 {
    grid-template-columns: repeat(6, 1fr);
}

.character-list.col-7 {
    grid-template-columns: repeat(7, 1fr);
}

.character-item {
    /* Bỏ viền */
    border: none;
    /* Padding giữ nguyên hoặc chỉnh tùy ý */
    padding: 10px;
    display: block;
    text-align: center;
    border-radius: 5px;
    /* Bỏ nền màu cũ */
    background-color: transparent;

    /* Thêm nền hình ảnh */
/* Nền khung cho từng card vũ khí: luôn khít 4 cạnh */
  background-image: url('https://genshinbuilds.wiki/wp-content/uploads/background-characters.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;   /* <-- thay vì cover */
}

.character-item .character-name {
	color: #ffff;
	font-weight: 400;
    display: block;
    line-height: normal;
}
.character-item img.character-image{
    border-radius: 50%;
    background-color: currentColor;
}
.character-item .box-img{
    display: inline-block;
    margin: 0 auto;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.weapon__item img{
    background-color: currentColor;
}
.weapon__item.weapon__item__star_3{
    color: #75aef4;
}
.box-img.star-4,
.block_teams_characters__item.star-4,
.weapon__item.weapon__item__star_4{
border-radius: 50%;
color: #9c75b7;
}
.box-img.star-5,
.block_teams_characters__item.star-5,
.weapon__item.weapon__item__star_5{
border-radius: 50%;
color: #b27330;
}
.character-item .elemental-image{
    width: 30px;
    border-radius: 50%;
    background-color: #05101a;
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 2;
    padding: 2px;
}
.character-item .line{	
    background-color: transparent !important;
    display: inline-block;
    margin: 20px auto 10px auto;
    width: 30px;
}
.hero-poster {
    height: calc(100vh - 52px);
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    background-size: cover;
    margin-bottom: 20px;
    padding: 40px 0;
}

.hero-poster:before {
    content: '';
    background-color: rgba(0, 0, 0, .6);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    position: absolute;
}

.character-info,
.lightcones-info{
    display: grid;
    grid-template-columns: 160px 1fr;
    grid-column-gap: 20px;
    position: relative;
    z-index: 10;
}
.lightcones-info{
    grid-template-columns: 100px 1fr;
}

.character-info .character-name span {
    display: block;
    font-size: 16px;
    color: #fff;
}
.character-info  .box-img{
    border: 0px solid currentColor;
    border-radius: 5px;
    padding: 0px;
    text-align: center;
	background: transparent !important;
    background-color: transparent !important;
}
.character-info .character-image{
	height: 100%
    border-radius: 5%;
    background-color: currentColor;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 5% !important; /* giữ bo tròn */
}
.character-info .meta{
    display: flex;
    gap: 10px;
}
.character-info .meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;                /* khoảng cách rộng hơn giữa icon và chữ */
    padding: 6px 12px;       /* badge to hơn */
    background-color: #1a1d27;
    border-radius: 6px;      /* bo tròn mềm hơn */
    color: #fff;
    font-size: 14px;         /* chữ to hơn */
    line-height: 1.4;
}

.character-info .meta .weapon:before{
    content: '';
    width: 24px;
    height: 24px;
    background-size: 24px;
    background-position: center center;
    background-repeat: no-repeat;
}
.character-info .meta .TruPhu:before{
    background-image: url("../images/tru-phu.webp");
}
.character-info .meta .Trithuc:before{
    background-image: url("../images/tri-thuc.webp");
}
.character-info .meta .Sanban:before{
    background-image: url("../images/san-ban.webp");
}
.character-info .meta .Huydiet:before{
    background-image: url("../images/huy-diet.webp");
}
.character-info .meta .Huvo:before{
    background-image: url("../images/hu-vo.webp");
}
.character-info .meta .Hoahop:before{
    background-image: url("../images/hoa-hop.webp");
}
.character-info .meta .Baoho:before{
    background-image: url("../images/bao-ho.webp");
}
.character__top .info-head img{
    width: 30px;
}
.character__top .character-elemental{
    text-align: center;
    display: block;
    margin-top: 0px;
}
.character__top .character-elemental img{
    width: 30px;
}
.block {
    padding: 15px;
    background-color: #232734;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 16px;
	
    /* Thêm viền */
    border: 1px solid rgba(255, 255, 255, 0.1); /* viền trắng mờ */
}

.block__head {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding-bottom: 15px;
}

.block__head .block__head__title {
    font-size: 30px;
    margin: 0;
}

.block__content {
    padding-top: 15px;
}

.no__head.block .block__content {
    padding-top: 0;
}

.block__property {
    list-style: none;
    padding: 0!important;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
}

.block__property li {
    display: block;
    padding: 5px 10px;
    background-color: #1a1d27;
    border-radius: 5px;
    margin: 0;
}
.block__property li .label{
    font-weight: bold;
    color: #f99b1c;
}
.block__property li .label:after{
    content: ':';
}
.character__elements {
    display: flex;
    gap: 10px;
    align-items: center;
}

.character__elements > span {
    display: grid;
    grid-template-columns: 40px 1fr;
    background-color: #2d3245;
    padding: 5px 15px;
    border-radius: 5px;
    align-items: center;
    grid-column-gap: 10px;
}

.character__stats {
    color: #fff;
}

.character__stats .stats__item {
    display: grid;
    grid-template-columns: 150px 1fr;
}

.character__stats .stats__item .label {
    color: #8f8f8f;
}

.light__cones__list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 10px;
    font-size: 14px;
}

.light__cones__list .light__cones__item img {
    margin-bottom: 10px;
}

.light__cones__list .light__cones__item {
    text-align: center;
}

.light__cones__list .light__cones__item .name {
    display: block;
    color: #fff;
}

.ajax-tooltip-loaded {
    display: none;
}

.skills__list,
.artifacts__list {
    display: flex;
    gap: 25px;
    padding: 15px;
}

.skills__list .skills__item,
.artifacts__list .artifacts__item {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    opacity: .65;
    position: relative;
}
.skills__list .skills__item img,
.artifacts__list .artifacts__item img{
    width: 70px;
    border-radius: 50%;
    padding: 2px;
    border: 1px solid;
    position: relative;
    z-index: 1;
}
.skills__list .skills__item:not(.active) svg,
.artifacts__list .artifacts__item:not(.active) svg {
    opacity: 0;
}
.d-talent-keys-active {
    height: 114px;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 114px;
    z-index: 2;
}

.td-property {
    width: 300px;
}

.characters_use_suggestions {
    display: flex;
    gap: 5px;
}

.characters_use_suggestions .character-item {
    padding: 2px;
}

.characters_use_suggestions img {
    width: 30px;
}

.artifact__set {
    padding: 0!important;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 5px;
}
.artifact__set img{
    width: 30px;
    padding: 1px;
}
.equiped__item{
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.equiped__item .label{
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: #2d3245;
    margin: 0;
    color: #fff;
    font-size: 12px;
}
.equiped__item:last-child{
    margin-bottom: 0;
}
body .dark,
body .dark p,
body .dark td {
    color: #bbb8b8;
}

.text-heading {
    color: #fff;
}
.img-border {
    border: 0px solid rgba(255, 255, 255, .2);
    padding: 0px;
    background-color: #1a1d27;
    border-radius: 5px;
}

.team__comp__list__item {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-column-gap: 10px;
    padding: 15px;
    background-color: #1b2126;
    border-radius: 5px;
    margin-bottom: 10px;

}
.team__comp__list li{
    margin-left: 0!important;
}
.team__comp__list__item .team-title {
    font-size: 20px;
    display: block;
    margin-bottom: 5px;
}

.team__comp__list__item .team__members {
    display: flex;
    gap: 5px;
}

.team__comp__list__item .team__members img {
    width: 40px;
}

body .nav-pagination > li > a,
body .nav-pagination > li > span {
    border: 1px solid #ececec;
    border-radius: 5px;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-numbers.nav-pagination {
    display: flex;
}

.team__character {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-column-gap: 10px;
}

.characters__team__list {
    display: flex;
    gap: 10px;
}

.characters__team__list img {
    width: 80px;
}

.characters__team__list .name {
    display: block;
    text-align: left;
    color: #fff;
}

.td-img {
    width: 100px;
}

body .select-resize-ghost,
body .select2-container .select2-choice,
body .select2-container .select2-selection,
body input[type="date"],
body input[type="email"],
body input[type="number"],
body input[type="password"],
body input[type="search"],
body input[type="tel"],
body input[type="text"],
body input[type="url"],
body select,
body textarea {
    background-color: #1a1d27;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    border-radius: 5px;
}
body input[type="date"]:focus,
body input[type="email"]:focus,
body input[type="number"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body input[type="tel"]:focus,
body input[type="text"]:focus,
body input[type="url"]:focus,
body select,
body textarea{
    box-shadow: none;
    background-color: #2d3245;
    color: #fff;
}

@media screen and (min-width: 850px) {
    body .row-divided > .col + .col:not(.large-12) {
        border-left: 1px solid rgba(255, 255, 255, .1);
    }
}
.block__eidolons__item{
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-column-gap: 15px;
    margin-bottom: 10px;
}
.block__eidolons__item:last-child{
    margin-bottom: 0;
}
.block__eidolons__item .image{
    position: relative;
}
.block__eidolons__item .image .label{
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 10px;
    background-color: #57a7f5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: 2px;
}
.upgrade__row{
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    background-color: #2d3245;
    margin-bottom: 2px;
    border-radius: 5px;
    padding: 10px;
}
.upgrade__row__materials{
    display: grid;
    grid-template-columns: repeat(10,1fr);
}
.upgrade__row .label{
    font-weight: 600;
    color: #fff;
}
.upgrade__row__materials>span{
    background-color:#1b2126;
    border-radius: 5px;
    position: relative;
    padding: 5px;
}

.upgrade__row__materials .qty{
    display: block;
    color: #fff;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 12px;
    background-color: #57a7f5;
    padding: 0 5px;
    border-radius: 3px;
    line-height: normal;
}
.upgrade__row__materials .name{
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    background-color: #000;
    width: 100%;
}
.small-path{
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
}
.small-path img{
    width: 30px;
}
.gs_ranks__row{
    display: grid;
    grid-template-columns: 35px 1fr;
    align-items: center;
    margin-bottom: 5px;
    background-color: #303745;
    padding: 10px;
    border-radius: 5px;
    grid-column-gap: 15px;
}
.gs_ranks__row .label{
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    height: 100%;
    background-color: #57a7f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
}
.gs_ranks__row .characters{
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 20px;
}
.gs_ranks__row .characters .characters__list__item{
    text-align: center;
    font-size: 12px;
    line-height: normal;
}
.gs_ranks__row .characters .characters__list__item img{
    background-color: currentColor;
    border-radius: 50%;
    padding: 0;
    border: none;
}
.gs_ranks__row .characters .characters__list__item .name{
    color: #fff;
    display: block;
    margin-top: 5px;
}

.gs__filter__row{
    padding: 2.5px 0;
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
}
.gs__filter__row.no__label{
    display:block;
}
.filter__links,
.gs_ranks__tab{
    display: flex;
    align-items: center;
}
.filter__links .filter__link,
.gs_ranks__tab .gs_ranks__tab__item{
    display: flex;
    align-items: center;
    background-color: #1a1d27;
    border-radius: 5px;
    margin-right: 5px;
    padding: 5px 10px;
    height: 40px;
    cursor: pointer;
    color: #fff;
    gap: 5px;
    font-size: 14px;
}
.filter__links .filter__link.active,
.filter__links .filter__link:hover,
.gs_ranks__tab .gs_ranks__tab__item.active,
.gs_ranks__tab .gs_ranks__tab__item:hover{
    background-color: #ceae7e;
}
.filter__links .filter__link img{
    width: 30px;
}
.characters__list__item .name{
    line-height: normal;
}

body .container .section,
body .row .section {
   padding-left: 0;
    padding-right: 0;
}
.element-gio img{
    background: rgb(34,193,195);
    background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(60,198,151,1) 100%);
}
.element-lua img{
    background: rgb(230,44,40);
    background: linear-gradient(0deg, rgba(230,44,40,1) 0%, rgba(246,128,97,1) 100%);
}
.element-luong-tu img{
    background: rgb(79,73,182);
    background: linear-gradient(0deg, rgba(79,73,182,1) 0%, rgba(175,172,246,1) 100%);
}
.element-loi img{
    background: rgb(180,73,212);
    background: linear-gradient(0deg, rgba(180,73,212,1) 0%, rgba(227,133,249,1) 100%);
}
.element-luong-bang img{
    background: rgb(38,141,208);
    background: linear-gradient(0deg, rgba(38,141,208,1) 0%, rgba(173,231,253,1) 100%);
}
.element-so-ao img{
    background: rgb(243,223,52);
    background: linear-gradient(0deg, rgba(243,223,52,1) 0%, rgba(255,241,148,1) 100%);
}
.element-vat-ly img{
    background: rgb(157,157,157);
    background: linear-gradient(0deg, rgba(157,157,157,1) 0%, rgba(199,199,199,1) 100%);
}
.tax__tooltip .character__elements>span{
    font-size: 12px;
    padding: 3px 10px;
    grid-template-columns: 25px 1fr;
    grid-column-gap: 5px;
    align-items: center;
}
.tax__tooltip .character__elements>span >span{
    display: flex;
    height: 100%;
    align-items: center;
}
.post_comments.block{
    padding: 0;
    margin: 0;
    background-color: transparent;
}
.team__comp__widget .team__comp__list__item{
    grid-template-columns: 60px 1fr;
    padding: 5px;
}
.team__comp__widget .team__comp__list__item .team-title{
    font-size: 14px;
}
.team__comp__widget  .team__comp__list__item .team__members img{
    width: 30px;
}
.upgrade__row{
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    background-color: #1a1d27;
    margin-bottom: 2px;
    border-radius: 5px;
    padding: 10px;
}
.upgrade__row__materials{
    display: flex;
    gap: 5px;

}
.upgrade__row .label{
    font-weight: 600;
    color: #fff;
}
.upgrade__row__materials>span{
    background-color:#303745;
    border-radius: 5px;
    position: relative;
    padding: 5px;
}
.upgrade__row__materials img{
    width: 60px;
}
.upgrade__row__materials .qty{
    display: block;
    color: #fff;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 12px;
    background-color: #57a7f5;
    padding: 0 5px;
    border-radius: 3px;
    line-height: normal;
}
.upgrade__row__materials .name{
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    background-color: #000;
    width: 100%;
}
.block_weapons,
.block_aggregates,
.block_teams_characters{
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-gap: 10px;
}
.block__weapons__item,
.block__aggregates__item,
.block_teams_characters__item{
    border: 1px solid rgba(255,255,255,.1);
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    position: relative;
}
.block_teams_characters__item{
    border: none;
}
.block_teams_characters__item .elemental-image{
    position: absolute;
    width: 24px;
    left: 7px;
    top: 7px;
    border-radius: 50%;
    background-color: #05101a;
    padding: 2px;
}

.block__weapons__item .name,
.block__aggregates__item .name,
.block_teams_characters__item .name{
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: normal;
}
.block_teams_characters__item .role{
    position: absolute;
    top: 7px;
    right: 7px;
    font-size: 10px;
    background-color: #57a7f5;
    padding: 2px 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: 600;
}
.block__content ul,
.block__content ol{
    padding-left: 0px;
}
.block_artifact__set__item{
    margin-bottom: 10px;
}
.block_artifact__set__item:last-child{
    margin-bottom: 0;
}
.block_artifact__set__item .info{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-column-gap: 10px;
    margin-bottom: 10px;
}
.block_artifact__set__item .text>span{
    display: block;
}
.table__leaderboard{
    font-size: 14px;
}
.constellation{
    display: inline-block;
    background-color: #4b5563;
    padding: 0 3px;
    border-radius: 2px;
}
.constellation.c-1{

}
.constellation.c-2{
    width: 40%;
}
.constellation.c-3{
    width: 60%;
}
.constellation.c-4{
    width: 80%;
}
.constellation.c-5{
    width: 90%;
}
.constellation.c-6{
    width: 100%;
}
.table__leaderboard .character{
    display: flex;
    align-items: center;
}
.table__leaderboard .character img{
    width: 20px;
    margin-right: 2px;
}
.leaderboard_pagination{
    text-align: center;

}
.nowrap{
    white-space: nowrap;
}
.select2-container{
    width: 100%;
}
.upgrade_skills {
    display: flex;
    font-size: 12px;
    text-align: center;
    gap: 10px;
    margin-bottom: 20px;
}
.upgrade_skills>span {
    width: 100px;
    position: relative;
}
.upgrade_skills img {
    width: 60px;
}
.upgrade_skills>span:after {
    content: '➜';
    display: inline-block;
    color: #fc0;
    font-size: 16px;
    position: absolute;
    top: 20px;
    right: -10px;
}
.upgrade_skills>span:last-child:after{
    display: none;
}
.upgrade_skills .name{
    display: block;
}
.skill__tags{
    display: flex;
    align-items: center;
    gap: 5px;
}
.skill__tags span {
    display: inline-block;
    padding: 3px 15px;
    background-color: #2271b1;
    font-size: 12px;
    border-radius: 99px;
    color: #fff;
    line-height: normal;
}
.aggregate__info,
.weapons__info{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-gap: 10px;
    align-items: center;
}
.aggregate__info .image,
.weapons__info .image{
    border: 0px solid rgba(255,255,255,.1);
    border-radius: 5px;
    position: relative;
    padding: 5px;
    position: relative;
}
.aggregate__info .image .qty,
.weapons__info  .image .weapon__label{
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #2c313f;
	border-radius: 10%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: #E7E5E4;
}
.weapons__info .name{
    display: inline-block;
    line-height: normal;
}
.block__property.block__aggregate__options{
    grid-template-columns: repeat(2, 1fr);
}
.block_teams{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}
.block_teams .block_teams_characters{
    grid-template-columns: repeat(4, 1fr);
}
.block_teams .block_team{
    padding: 10px;
    background-color: #0f1724;
    border-radius: 5px;
}
.aggregate__options{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.block__property.block__aggregate__options li,
.block__property.block__weapons__options li{
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    grid-gap: 5px;
}
.stt{
    width: 25px;
    height: 25px;
    background-color: #2c313f;
    color: #E7E5E4;
	font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
body h1.entry-title.mb{
    margin-bottom: 20px;
}
form.searchform{
    background-color: #2d3245;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 5px;
}
form.searchform  .search-field{
    border: none;
}
form.searchform  .button{
    background-color: transparent;
}
.d-block{
    display: block;
}

.dark .block.text a{
    color: #57a7f5;
}
@media screen and (max-width: 480px) {

    .ajax-tooltip-box {
        min-width: 380px;
    }

    .tax__tooltip {
        grid-template-columns: 50px 1fr;
    }

    .character-list {
        grid-gap: 10px;
    }

    .character-list.col-5,
    .character-list.col-6,
    .character-list.col-7 {
        grid-template-columns: repeat(3, 1fr);
    }

    .block__property {
        grid-template-columns: repeat(1, 1fr);
    }

    .light__cones__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .character-info {
        grid-template-columns: 100px 1fr;
    }

    .character__elements > span {
        grid-template-columns: 25px 1fr;
        padding: 5px 10px;
    }
    .gs_ranks__row .characters{
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 5px;
    }
    .gs_ranks__row {
        grid-template-columns: 30px 1fr;
    }
    .gs__filter__row{
        display: block;
        text-align: center;
    }
    .filter__links .filter__link,
    .gs_ranks__tab .gs_ranks__tab__item{
        white-space: nowrap;
        padding: 0 10px;
        line-height: normal;
    }
    .filter__links .filter__link img{
        width: 20px;
    }
    .__table__items,
    .__table__items thead,
    .__table__items tbody,
    .__table__items tr,
    .__table__items td,
    .__table__items th{
        display: block;
        border: none;
        padding: 0;
    }
    .__table__items thead{
        display: none;
    }
    .__table__items tr{
        border-bottom: 1px solid rgba(255,255,255,.1);
        padding: 10px 0;
        overflow: hidden;
    }
    .__table__items .td-img{
        width: 100px;
        float: left;
    }
    .__table__items .td-property{
        width: calc(100% - 100px);
        float: left;
        padding-left: 10px;
    }
    .__table__items .td-desc {
        margin-top: 10px;
        float: left;
        width: 100%;
    }
    .aggregate__options{
        grid-template-columns: repeat(1, 1fr);
    }
    .block_weapons, .block_aggregates, .block_teams_characters {
        grid-template-columns: repeat(4, 1fr);
    }
    .upgrade__row{
        display: block;
    }
    .upgrade__row__materials{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
    .block__weapons__item,
    .block__aggregates__item,
    .block_teams_characters__item{
        padding: 1px;
    }
    .block_weapons,
    .block_aggregates,
    .block_teams_characters {
        grid-gap: 5px;
    }
    .block__property{
        grid-gap: 2px;
    }
    .block{
        padding: 5px;
        margin-bottom: 10px;
    }
    .block_teams_characters__item .role{
        position: static;
    }
    .character-item{
        padding: 10px;
    }
    .filter__links .filter__link img+.title{
        display: none;
    }
    .block__property.block__aggregate__options,
    .block_teams{
        grid-template-columns: repeat(1, 1fr);
    }
}
/* Desktop lớn ≥1400px: 8 cột */
@media (min-width: 1400px) {
  .character-list { grid-template-columns: repeat(8, 1fr) !important; }
}

/* Laptop/Tablet ngang 1024–1399px: 6 cột */
@media (min-width: 1024px) and (max-width: 1399px) {
  .character-list { grid-template-columns: repeat(6, 1fr) !important; }
}

/* Tablet 769–1023px: 4 cột */
@media (min-width: 769px) and (max-width: 1023px) {
  .character-list { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Mobile ≤768px: 3 cột */
@media (max-width: 768px) {
  .character-list { grid-template-columns: repeat(3, 1fr) !important; }
}
.character-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.character-item:hover {
    transform: scale(1.05); /* phóng to 5% */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* đổ bóng để nổi hơn */
    z-index: 2; /* đảm bảo không bị item khác đè */
}

/* phần bài viết vũ khí */
@media screen and (min-width: 850px) {
    .large-9 {
        flex-basis: 100% !important;
        max-width: 100% !important;
   
    }
}

/* Vòng nền theo sao hiển thị đúng */
.weapon__item {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 0px; /* tạo viền để thấy nền */
}

/* nền riêng từng sao */
.weapon__item.weapon__item__star_3 {
  background: url("https://genshinbuilds.wiki/wp-content/uploads/bg-3star.png") center/contain !important;
}
.weapon__item.weapon__item__star_4 {
  background: url("https://genshinbuilds.wiki/wp-content/uploads/bg-4star.png") center/contain !important;
}
.weapon__item.weapon__item__star_5 {
  background: url("https://genshinbuilds.wiki/wp-content/uploads/bg-5star.png") center/contain !important;
}

/* Ảnh không che nền */
.weapon__item img{
  border-radius: 50%;
  background-color: transparent !important; /* để nhìn thấy nền phía sau */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Grid vũ khí: mặc định 6 cột */
.weapon-list { display: grid; gap: 20px; grid-template-columns: repeat(6, 1fr); }

/* Ép theo class col-X khi cần (ưu tiên thấp hơn media query) */
.weapon-list.col-3 { grid-template-columns: repeat(3, 1fr); }
.weapon-list.col-4 { grid-template-columns: repeat(4, 1fr); }
.weapon-list.col-5 { grid-template-columns: repeat(5, 1fr); }
.weapon-list.col-6 { grid-template-columns: repeat(6, 1fr); }
.weapon-list.col-7 { grid-template-columns: repeat(7, 1fr); }

/* Card cơ bản (giữ tách biệt với nhân vật) */
.weapon-item { display:block; text-align:center; padding:10px; border-radius:5px; }
.weapon-item .box-img { position:relative; display:inline-block; }
.weapon-name { display:block; margin-top:6px; font-weight:600; }
.weapon-type { display:block; font-size:12px; opacity:.8; }

/* ===== Responsive giống tab nhân vật (chỉ áp cho weapon-list) ===== */
/* Desktop lớn ≥1400px: 8 cột */
@media (min-width: 1400px) {
  .weapon-list { grid-template-columns: repeat(8, 1fr) !important; }
}

/* Laptop/Tablet ngang 1024–1399px: 6 cột */
@media (min-width: 1024px) and (max-width: 1399px) {
  .weapon-list { grid-template-columns: repeat(6, 1fr) !important; }
}

/* Tablet 769–1023px: 4 cột */
@media (min-width: 769px) and (max-width: 1023px) {
  .weapon-list { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Mobile ≤768px: 3 cột */
@media (max-width: 768px) {
  .weapon-list { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ========== WEAPON LIST – MOBILE TUNING ========== */

/* Tablet nhỏ / mobile ngang: 3 cột, gap nhỏ hơn */
@media (max-width: 768px) {
  .weapon-list { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
  .weapon-item { padding: 8px !important; }
  .weapon-name { font-size: 13px !important; }
}

/* Điện thoại nhỏ: 2 cột, icon & text gọn lại */
@media (max-width: 480px) {
  .weapon-list { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  .weapon-item { padding: 6px !important; }
  .weapon-item .box-img { transform: scale(0.9); transform-origin: center; }

  /* vòng tròn & ảnh gọn hơn */
  .weapon__item { padding: 3px !important; }
  .weapon__item img { border-radius: 50% !important; }

  /* Ẩn đường kẻ trang trí để tiết kiệm chiều dọc */
  .weapon-item .line { display: none !important; }

  /* Tên vũ khí: tối đa 2 dòng + dấu “…” */
  .weapon-name {
    font-size: 13px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em; /* giữ chiều cao đều hàng */
  }

  /* Ẩn loại vũ khí (nếu chưa bỏ PHP) */
  .weapon-type { display: none !important; }
}

/* Filter bar trên mobile: xếp hàng, gọn icon */
@media (max-width: 768px) {
  .page__weapons .gs__filter__row { display: block !important; text-align: center; }
  .page__weapons .filter__links { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .page__weapons .filter__links .filter__link { height: 34px; padding: 4px 8px; margin-right: 0; font-size: 13px; }
  .page__weapons .filter__links .filter__link img { width: 22px; }

  /* ô tìm kiếm ngắn lại */
  #weapon_filter_input { width: 100%; max-width: 260px; margin: 6px auto 0; display: inline-block; }
}

/* Giữ trải nghiệm hover/zoom chỉ trên desktop */
@media (hover: none) and (pointer: coarse) {
  .weapon-item:hover { transform: none !important; box-shadow: none !important; }
}

/* Nền khung cho từng card vũ khí: luôn khít 4 cạnh */
.weapon-item{
  background-image: url('https://genshinbuilds.wiki/wp-content/uploads/background-weapons.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;   /* <-- thay vì cover */
}

/* 1) Khôi phục card Builds (đừng bo tròn cả card) */
.block__weapons__options .weapons__info.weapon__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0px;
  border-radius: 12px;
  background: #0b1432;
  background-image: none !important; /* NGẮT nền theo sao ở card */
}

/* 2) Vòng tròn nền CHỈ cho khung ảnh */
.block__weapons__options .weapon__item .image{
  width: 72px;
  height: 72px;
  padding: 0px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; /* mặc định */
}


/* 3) Áp nền theo sao vào .image (không áp lên card) */
.block__weapons__options .weapon__item__star_3 .image{
  background: url("https://genshinbuilds.wiki/wp-content/uploads/bg-3star.png") center/contain !important;
}
.block__weapons__options .weapon__item__star_4 .image{
  background: url("https://genshinbuilds.wiki/wp-content/uploads/bg-4star.png") center/contain !important;
}
.block__weapons__options .weapon__item__star_5 .image{
  background: url("https://genshinbuilds.wiki/wp-content/uploads/bg-5star.png") center/contain !important;
}

/* 4) Ảnh luôn trong suốt, không “ăn” nền */
.block__weapons__options .weapon__item .image img{
  width: 100%; height: 100%;
  object-fit: contain;
  background: transparent !important;
}



/* Khi hover vẫn giữ trong suốt */
.block_teams_characters__item:hover img,
.block_teams_characters__item:focus img,
.block_teams_characters__item:active img {
  background-color: transparent !important;
}

/* Nhân vật 4★ */
.block_teams_characters__item.star-4 {
  background: url("https://genshinbuilds.wiki/wp-content/uploads/bg-4star.png") center/contain !important;
  border-radius: 5%;
}

/* Nhân vật 5★ */
.block_teams_characters__item.star-5 {
  background: url("https://genshinbuilds.wiki/wp-content/uploads/bg-5star.png") center/contain !important;
  border-radius: 5%;
}


/* 1) Mọi ảnh nhân vật phải trong suốt, không lấy currentColor */
.character-item img.character-image {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 50% !important; /* giữ bo tròn */
}
.block_teams_characters__item img {  
 border-radius: 30% !important; /* giữ bo tròn */
}

/* 2) Đừng dùng currentColor cho khung sao nữa (nếu trước đó có) */
.box-img.star-3,
.box-img.star-4,
.box-img.star-5 {
  color: inherit !important; /* hoặc bỏ hẳn thuộc tính color ở các rule sao */
}



.character-item .box-img.star-4,
.character-info .box-img.star-4 {
  background: url("https://genshinbuilds.wiki/wp-content/uploads/bg-4star.png")
              center/contain !important;
}
.character-item .box-img.star-5,
.character-info .box-img.star-5 {
  background: url("https://genshinbuilds.wiki/wp-content/uploads/bg-5star.png")
              center/contain !important;
}

/* Hero: ảnh trên, tất cả căn giữa (mobile) */
@media (max-width: 640px) {
  .character-info {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "img"
      "info";
    justify-items: center;   /* căn giữa mọi phần tử con */
    text-align: center;      /* căn giữa chữ */
    row-gap: 10px;
	  
  }
  .character-info .box-img { 
    grid-area: img; 
    justify-self: center; 
    margin: 0 0 8px 0;
  }
  .character-info .info      { grid-area: info; width: 100%; }
  .character-info .info-head,
  .character-info .character-name,
  .character-info .character-description { 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
  }
  .character-info .meta {
    justify-content: center; /* căn giữa các “pill” */
    flex-wrap: wrap;
    gap: 8px;
  }
  .character__top .character-elemental { 
    margin: 0 auto; 
    display: block; 
  }
  .character-info .box-img { width:160px !important; height:160px !important; }
}
}
/* ====== BUILD LAYOUT ====== */
.builds-title{color:#ffc027;margin:0 0 10px;font-weight:700;font-size:38px !important; }
.builds-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* Vũ khí */
.builds-weapons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.builds-weapons__row{
  margin-bottom: 0px;
  display:grid;grid-template-columns:36px 64px 1fr;align-items:center;
  background:#0f1724;border-radius:6px;padding:2px 5px
}
.builds-weapons .rank{
  width:28px;height:28px;border-radius:6px;background:#193047;color:#5de3ff;
  display:flex;align-items:center;justify-content:center;font-weight:700
}
.builds-weapons .pic{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.builds-weapons .pic img{width:100%;height:100%;border-radius:50%;background:transparent}
.builds-weapons .info .name{color:#ffffff;font-weight:600;display:inline-block}
.builds-weapons .info .sub{font-size:12px;opacity:.85}

/* Thánh di vật */
.builds-artifacts{display:flex;flex-direction:column;gap:10px}
.builds-artifacts__row{display:flex;align-items:center;gap:14px;background:#0f1724;border-radius:6px;padding:5px 5px}
.builds-artifacts .artifact{display:flex;align-items:center;gap:10px;color:#ffffff;text-decoration:none;font-weight: 600}
.builds-artifacts .pic{width:50px;height:50px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink: 0}
.builds-artifacts .pic img{width:100%;height:100%;border-radius:50%;background:transparent}
.builds-artifacts .badge{
  position:absolute;right:2px;bottom:2px;width:20px;height:20px;border-radius:6px;
  background:#2c313f;color:#E7E5E4;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:600
}
/* Chỉ số 2 */
.builds-stats-2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.builds-stats-2 li{display:grid;grid-template-columns:50px 1fr;align-items:center;background:#152033;border-radius:6px;padding:5px 5px}
.builds-stats-2 .label{color:#7aa6ff;font-weight:700}
.builds-stats-2 .val{color:#e2e8f0}
.builds-stats-2 .rank-dot{width:22px;height:22px;border-radius:6px;background:#193047;margin-right:8px}
/* Chỉ số */
.builds-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px}
.panel{background:#0f1724;border-radius:6px;padding:10px 12px;margin-bottom: 20px}
.builds-stats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.builds-stats li{display:grid;grid-template-columns:150px 1fr;align-items:center;background:#152033;border-radius:6px;padding:5px 5px}
.builds-stats .label{color:#7aa6ff;font-weight:700}
.builds-stats .val{color:#e2e8f0}
.builds-stats .rank-dot{width:22px;height:22px;border-radius:6px;background:#193047;margin-right:8px}

/* Responsive */
@media (max-width: 1024px){ .builds-grid{grid-template-columns:1fr} .builds-stats-grid{grid-template-columns:1fr} }

/* Khung ảnh vũ khí trong danh sách build */
.builds-weapons .pic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;               /* chỉnh cho khớp UI của bạn */
  height: 56px;
  border-radius: 50%;
}
.builds-weapons .pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent !important; /* để thấy nền theo sao */
  object-fit: contain;
}

/* Badge R (R5, R3…) */
.refine-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  padding: 2px 5px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  color: #E7E5E4;
  background: #2c313f;
  border-radius: 4px;
  pointer-events: none;
}

/* Nếu muốn giống “nhãn” vuông nhẹ bo góc */
.refine-badge::before { content: " "; }


.builds-weapons__row .rank,
.builds-artifacts__row .rank{
  width: 28px; height: 28px; display:inline-flex;
  align-items:center; justify-content:center;
  border-radius:50%; background:#2c313f; color:#E7E5E4;
  font-weight:600; margin-right:10px; flex:0 0 28px;
}
.builds-artifacts__row{ display:flex; align-items:center; gap:12px; }

.builds-stats-2 li .rank {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2c313f;
  color: #E7E5E4;
  font-size: 13px;
  font-weight: 600;
  margin-right: 8px;
  flex-shrink: 0;
}

.builds-desc{margin-top:14px;padding:12px;border-radius:10px;background:#2a3040;color:#e9eefc}
.block_team .desc {
  margin-top:14px;
  padding:12px;
}


/* =======================================================
   Block: Genshin Home Banner
   Scope: .gs-home-banner (isolated)
   Author: you
   ======================================================= */
.gs-home-banner .gs-home-banner__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.gs-home-banner .c-banner-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #2a3040;
  padding: 20px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: #e9eefc;
  transition: all 0.2s ease;
}
.gs-home-banner .c-banner-entry:hover {
  background: #363d52;
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}

/* Avatar */
.gs-home-banner .c-banner-entry-avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.gs-home-banner .c-banner-entry-avatar img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* Text */
.gs-home-banner .c-banner-entry-name {
  font-weight: 700;
  font-size: 15px;
  color: #f4e2ba;
}

/* Responsive (vẫn trong scope) */
@media (max-width: 1200px) {
  .gs-home-banner .gs-home-banner__list { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .gs-home-banner .gs-home-banner__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .gs-home-banner .gs-home-banner__list { grid-template-columns: repeat(2, 1fr); }
}

/* ===== GS Banners Grid — Mobile-first, tối ưu di động ===== */

/* 1) Grid cơ bản (mặc định 1 cột trên mobile) */
.gs-banners-grid {
  display: grid;
  grid-template-columns: 1fr;     /* mobile: luôn 1 cột để dễ đọc */
  gap: 12px;                      /* gap nhỏ cho mobile */
  margin-top: 20px;
  padding: 0 12px;                /* thở 2 bên cho mobile */
}

/* 2) Số cột theo kích thước màn hình
   - <480px: 1 cột (mặc định)
   - ≥480px: có thể 2 cột
   - ≥768px: tối đa 3 cột
   - ≥1024px: dùng đúng columns bạn chọn (cols-1..6)
*/

/* ≥480px: ưu tiên 2 cột nếu bạn đặt cols >=2 */
@media (min-width: 480px) {
  .gs-banners-grid.cols-1 { grid-template-columns: 1fr; }
  .gs-banners-grid.cols-2,
  .gs-banners-grid.cols-3,
  .gs-banners-grid.cols-4,
  .gs-banners-grid.cols-5,
  .gs-banners-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }

  .gs-banners-grid { gap: 14px; }
}

/* ≥768px: ưu tiên 3 cột nếu bạn đặt cols >=3 */
@media (min-width: 768px) {
  .gs-banners-grid.cols-1 { grid-template-columns: 1fr; }
  .gs-banners-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .gs-banners-grid.cols-3,
  .gs-banners-grid.cols-4,
  .gs-banners-grid.cols-5,
  .gs-banners-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }

  .gs-banners-grid { gap: 16px; padding: 0 16px; }
}

/* ≥1024px: dùng đúng số cột bạn cấu hình */
@media (min-width: 1024px) {
  .gs-banners-grid.cols-1 { grid-template-columns: 1fr; }
  .gs-banners-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .gs-banners-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .gs-banners-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .gs-banners-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
  .gs-banners-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

  .gs-banners-grid { gap: 20px; padding: 0; }
}

/* 3) Card & hiệu ứng: mượt nhưng tiết kiệm trên mobile */
.gs-banner-wrap { transition: transform 0.25s ease, filter 0.25s ease; }
@media (hover: hover) and (pointer: fine) {
  .gs-banner-wrap:hover { transform: translateY(-6px); }
}

.gs-banner {
  display: block;
  background: #2a3040;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,0.22);
  text-decoration: none;
  color: #e9eefc;
}

/* 4) Ảnh đáp ứng: giữ tỉ lệ 16:9, zoom nhẹ khi hover (chỉ desktop) */
.gs-banner__image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.gs-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.45s ease;
}
@media (hover: hover) and (pointer: fine) {
  .gs-banner-wrap:hover .gs-banner__image img { transform: scale(1.06); }
}

/* 5) Overlay + badge: rõ ràng trên màn nhỏ */
.gs-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.35), transparent);
  opacity: 0.6;
  pointer-events: none;
}

/* Badge đủ to để nhìn/nhấn trên mobile */
.gs-banner__badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,0.6);
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  border-radius: 9999px;
  padding: 6px 10px;     /* tăng padding cho ngón tay */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (min-width: 768px) {
  .gs-banner__badge { font-size: 12px; padding: 6px 12px; }
}

/* 6) Nội dung: chữ lớn hơn chút trên mobile, khoảng cách thoáng */
.gs-banner__content { padding: 14px; }
@media (min-width: 768px) { .gs-banner__content { padding: 16px; } }

.gs-banner__title {
  font-size: 1rem;        /* mobile: ~16px */
  font-weight: 700;
  color: #e9eefc;
  margin: 0;
  letter-spacing: 0.2px;
  transition: color 0.25s ease;
}
@media (min-width: 768px) { .gs-banner__title { font-size: 1.06rem; } }
@media (hover: hover) and (pointer: fine) {
  .gs-banner-wrap:hover .gs-banner__title { color: #fff; }
}

.gs-banner__date {
  margin-top: 6px;
  font-size: 12.5px;      /* dễ đọc trên mobile */
  color: #aeb7cc;
}

/* 7) Giảm chuyển động cho người dùng “reduce motion” */
@media (prefers-reduced-motion: reduce) {
  .gs-banner-wrap,
  .gs-banner__image img { transition: none !important; }
}

/* ===== Cung Mệnh (Constellation) – Grid + Watermark ===== */
.block__eidolons {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;               /* ~16px */
  width: 100%;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .block__eidolons { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .block__eidolons { grid-template-columns: repeat(3, 1fr); } /* Desktop 3 cột */
}

.block__eidolons__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  text-align: center;
  background: #1f2330;
  border-radius: 12px;
  overflow: hidden;
  padding: 24px 18px 20px;
}

/* Ảnh mờ làm watermark phía sau chữ (lấy từ --bg-img) */
.block__eidolons__item::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  background-image: var(--bg-img);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;      /* Độ mờ của icon nền */
  pointer-events: none;
  /* tùy chọn: giúp ảnh “ăn” vào nền tối hơn một chút */
  filter: brightness(1.05) contrast(1.05);
}

.block__eidolons__item .label { display: none; } /* Ẩn C1/C2... nếu không dùng */

.block__eidolons__item .info {
  position: relative;
  z-index: 10;       /* Trên watermark */
  padding: 0 20px;
}

.block__eidolons__item .info .name {
  display: block;
  font-size: 1.125rem;   /* ~18px */
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.block__eidolons__item .info .level,
.block__eidolons__item .info h3 {
  font-size: 0.9rem;
  font-style: italic;
  color: #ccc;
  margin-bottom: 10px;
}

.block__eidolons__item .info .desc {
  font-size: 0.875rem;   /* ~14px */
  line-height: 1.5;
  color: #ddd;
  word-wrap: break-word;
}
/* ====== Thiên Phú (Talent) – Grid + Card mở/đóng ====== */

/* 1) Grid 3 cột */
.gs-talents-grid{
  display:grid; grid-template-columns:1fr; gap:12px; width:100%;
  margin-bottom:1.25rem;
}
@media (min-width:768px){ .gs-talents-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (min-width:1024px){ .gs-talents-grid{ grid-template-columns:repeat(3,1fr); gap:16px; } }

/* Nếu còn CSS tab cũ ẩn item, bật lại */
.gs-talents-grid .block__tab__item{ display:block!important; opacity:1!important; visibility:visible!important; }

/* 2) Card chung */
.talent-card{
  --wm-opacity: .15;         /* độ mờ icon khi card đóng */
  --wm-size: 96px;           /* kích thước icon khi card đóng */
  position:relative; background:#1f2330; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* 3) Phần head (vùng click) + icon mờ khi ĐÓNG */
.talent-card__head{
  position:relative; height:100px; padding:20px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  cursor:pointer; transition:height .25s ease, padding .25s ease;
}
.talent-card__icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  opacity:var(--wm-opacity); pointer-events:none; transition:opacity .25s ease;
}
.talent-card__icon img{ width:var(--wm-size); height:var(--wm-size); object-fit:contain; }

/* 4) Nền preview (GIF/PNG) chỉ hiện khi MỞ – dùng --bg-img từ inline style */
.talent-card::before{
  content:""; position:absolute; inset:0; background-image:var(--bg-img);
  background-size:cover; background-position:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  filter:saturate(1.05) contrast(1.05);
}

/* 5) Body: ẩn mặc định, hiện khi mở */
.talent-card__body{
  position:relative; z-index:2; padding:0 16px 16px;
  opacity:0; max-height:0; overflow:hidden; transition:opacity .25s ease, max-height .25s ease;
}

/* 6) Ảnh preview nằm TRÊN CÙNG khi mở */
.talent-card__preview{
  width:100%; max-height:260px; object-fit:cover;
  border-bottom:1px solid rgba(255,255,255,.1);
  border-radius:8px 8px 0 0; display:block; margin-bottom:12px;
  opacity:0; transition:opacity .25s ease;
}

/* 7) Tiêu đề chính + nội dung */
.skill-name{ font-size:1.125rem; font-weight:700; color:#fff; margin:0 0 6px; }
.skill__tags{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 6px; }
.skill__tags span{ color:#e9eefc; padding:4px 8px; border-radius:8px; font-size:.8rem; }
.skill-description{ font-size:.9rem; line-height:1.6; color:#ddd; }

/* 8) Nguyên liệu */
.talent_upgrade{ margin-top:12px; }
.talent_upgrade .text-heading{ margin-bottom:6px; color:#fff; }
.upgrade__row{ display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px dashed rgba(255,255,255,.08); }
.upgrade__row:first-child{ border-top:0; }
.upgrade__row .label{ min-width:140px; color:#bbb; font-size:.9rem; }
.upgrade__row__materials{ display:flex; flex-wrap:wrap; gap:8px; }
.material_item{ position:relative; display:inline-flex; }
.material_item img{ width:44px; height:44px; border-radius:8px; display:block; }
.material_item .qty{
  position:absolute; right:-6px; bottom:-6px; background:#2a3040; color:#fff;
  border-radius:999px; padding:2px 6px; font-size:.75rem; border:1px solid rgba(255,255,255,.15);
}

/* 9) Trạng thái MỞ */
.talent-card.open{ border-color:rgba(255,255,255,.14); box-shadow:0 10px 24px rgba(0,0,0,.35); transform:translateY(-2px); }
.talent-card.open::before{ opacity:.35; }                 /* nền preview hiện */
.talent-card.open .talent-card__icon{ opacity:0; }        /* icon mờ biến mất */
.talent-card.open .talent-card__head{ height:0; padding:0; overflow:hidden; border:0; } /* co head để ảnh trong body lên sát đỉnh */
.talent-card.open .talent-card__body{ opacity:1; max-height:2000px; } /* mở nội dung */
.talent-card.open .talent-card__preview{ opacity:1; }     /* hiện ảnh preview */

/* ===== Genshin Upgrade (pure CSS) ===== */
/* ==== Fix vỡ bảng & tối ưu mobile (override) ==== */
:root{
  --gs-card-bg:#1f2430; --gs-text:#e9eefc; --gs-muted:rgba(255,255,255,.06); --gs-muted-2:rgba(255,255,255,.07);
  --gs-border:rgba(255,255,255,.08); --gs-radius:12px; --gs-shadow:0 8px 20px rgba(0,0,0,.25);
  --gs-gap:8px; --gs-thumb:64px;
}

.gs-upgrade{background:var(--gs-card-bg);color:var(--gs-text);border:1px solid var(--gs-border);border-radius:var(--gs-radius);box-shadow:var(--gs-shadow);overflow:hidden}

/* mỗi hàng */
.gs-upgrade__row{display:grid;grid-template-columns:0.8fr repeat(6,1fr);align-items:center;gap:var(--gs-gap);padding:2px 12px;border-top:1px solid var(--gs-border)}
.gs-upgrade__row:first-child{border-top:none}
.gs-upgrade__row--alt{background:var(--gs-muted-2)}
.gs-upgrade__row--total{background:var(--gs-muted)}

@media (min-width:1024px){.gs-upgrade__row{grid-template-columns:0.5fr 0.5fr repeat(5,minmax(0,1fr))}}

/* cột nhãn */
.gs-upgrade__label{text-align:center;font-weight:600;font-size:14px}
@media (min-width:1024px){.gs-upgrade__label{font-size:16px}}
.gs-upgrade__label--total{text-transform:uppercase;font-weight:700}

/* ô vật liệu */
.gs-upgrade__cell{display:flex;align-items:center;justify-content:flex-start}

/* thumbnail */
.gs-upgrade__thumb{display:inline-block;width:48px;height:48px;border-radius:8px;overflow:hidden}
@media (min-width:640px){.gs-upgrade__thumb{width:56px;height:56px}}
@media (min-width:1024px){.gs-upgrade__thumb{width:var(--gs-thumb);height:var(--gs-thumb)}}

.gs-upgrade__thumb-inner{position:relative;display:block;width:100%;height:100%}
.gs-upgrade__thumb-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gs-upgrade__cell:hover .gs-upgrade__thumb-inner img{transform:scale(1.08)}

.gs-upgrade__qty{position:absolute;left:0;right:0;bottom:0;padding:6px 0 4px;background-image:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));text-align:center;font-size:12px;font-weight:600;color:#fff}

/* tên vật liệu */
.gs-upgrade__name{display:none;margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1024px){.gs-upgrade__name{display:block}}

/* màu theo độ hiếm */
.gs-rarity-1{background:#4b5563}
.gs-rarity-2{background:#3b82f6}
.gs-rarity-3{background:#8b5cf6}
.gs-rarity-4{background:#f59e0b}
.gs-rarity-5{background:linear-gradient(135deg,#f43f5e 0%,#f59e0b 100%)}

/* responsive nhỏ */
@media (max-width:480px){
  .gs-upgrade__row{gap:2px;padding:8px}
  .gs-upgrade__cell{min-height:0px}
}
.team-title {
  font-size: 19px;
  margin-bottom: 0.5em;
}
.block__content:empty {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border: 0 !important;
}


.meta-badges{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center}
.gb-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:.375rem;padding:.25rem .5rem;font-weight:600;line-height:1;white-space:nowrap;overflow:hidden;border:1px solid transparent;font-size:12px;max-width:100%;transition:color .15s, box-shadow .15s, background-color .15s, border-color .15s}
.gb-badge img{width:30px;height:30px;flex-shrink:0;margin-right:.25rem}
.gb-badge .truncate{overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:12rem}
@media (min-width:640px){.gb-badge{font-size:13px}.gb-badge .truncate{max-width:none}}

.gb-badge.is-weapon{background:#f1f5f9;color:#0f172a}
.gb-badge.is-element{background:rgba(16,185,129,.12);color:#10b981}
.gb-badge.is-area{background:#eef2ff;color:#4338ca}
.gb-badge.is-rarity{background:#fff7ed;color:#c2410c}
.gb-badge.is-role{background:#f5f3ff;color:#7c3aed}
.gb-badge.is-constellation-alt{background:#fff1f2;color:#9d174d}  /* Cung mệnh (khác) */
.gb-badge.is-domain{background:#f0fdf4;color:#166534}              /* Bí cảnh */
.gb-badge.is-release{background:#eff6ff;color:#1d4ed8}             /* Ngày ra mắt */
.gb-badge:hover{filter:brightness(.97)}

/* Base element badge */
.gb-badge.is-element{
  border: 1px solid transparent;
}


/* ===== Element badge override (độ ưu tiên cao hơn rule chung) ===== */
.character-info .meta > span.gb-badge.is-element.el-thao {
  background: rgba(16,185,129,.18);
  color:#34d399;
  border-color: rgba(16,185,129,.35);
}
.character-info .meta > span.gb-badge.is-element.el-hoa {
  background: rgba(239,68,68,.18);
  color:#f87171;
  border-color: rgba(239,68,68,.35);
}
.character-info .meta > span.gb-badge.is-element.el-thuy {
  background: rgba(59,130,246,.18);
  color:#60a5fa;
  border-color: rgba(59,130,246,.35);
}
.character-info .meta > span.gb-badge.is-element.el-loi {
  background: rgba(139,92,246,.18);
  color:#a78bfa;
  border-color: rgba(139,92,246,.35);
}
.character-info .meta > span.gb-badge.is-element.el-bang {
  background: rgba(96,165,250,.15);
  color:#93c5fd;
  border-color: rgba(96,165,250,.32);
}
.character-info .meta > span.gb-badge.is-element.el-phong {
  background: rgba(45,212,191,.18);
  color:#5eead4;
  border-color: rgba(45,212,191,.35);
}
.character-info .meta > span.gb-badge.is-element.el-nham {
  background: rgba(234,179,8,.18);
  color:#facc15;
  border-color: rgba(234,179,8,.35);
}
.character-info .desc { margin-top: 16px; }

.teams-group{
  background:#1e293b;
  padding:20px;
  border-radius:10px;
  margin-bottom:25px;
}
.teams-group .team-title{ margin:12px 0 10px; }

.info-head .character-name {
  margin: 0;         /* bỏ khoảng cách */
  font-size: 42px;   /* chỉnh lại cỡ chữ */
}
.block__h3 {  padding-top: 15px;     /* cách phía trên 15px */
}
.builds-title-3 {font-size: 25px}
.builds-title-4 {
	font-size: 18px;
	color: #FFCC00 !important;
}
/* ========== Weapon Stats (only) ========== */
.weapon-stats {
  --ws-gap: .5rem;
  --ws-icon: 24px;
  --ws-muted: 0.68;
  --ws-border: rgba(0,0,0,.08);
  --ws-dots: rgba(0,0,0,.22);
  --ws-bgqty: rgba(0,0,0,.06);
}

.weapon-stats .block__head { margin-bottom: .5rem; }


.weapon-stats__list {
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
}

/* Mỗi dòng chỉ số */
.weapon-stats__list .stat-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  column-gap: var(--ws-gap);
  padding: .35rem .5rem;
  border: 1px solid var(--ws-border);
  border-radius: .5rem;
  background: #1a1d27;
}

/* Icon trái */
.weapon-stats .stat-icon {
  width: var(--ws-icon);
  height: var(--ws-icon);
  object-fit: contain;
  display: block;
}

/* Nhãn và giá trị */
.weapon-stats .stat-label {
  font-weight: 600;
}

/* Dấu chấm chấm tự giãn giữa label và value (trên màn to) */
@media (min-width: 480px) {
  .weapon-stats .stat-label {
    position: relative;
    padding-right: .5rem;
  }
  .weapon-stats .stat-label::after {
    content: "";
    position: absolute;
    left: 100%;
    right: calc(100% + 12ch); /* chừa chỗ cho value, sẽ bị override bởi grid */
    top: 50%;
    height: 1px;
    background: var(--ws-dots);
    transform: translateY(-50%);
    display: none; /* tắt vì ta đang dùng grid 3 cột */
  }
}

.weapon-stats .stat-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .2px;
}

/* trạng thái rỗng */
.weapon-stats__empty,
.weapon-stats .text-muted {
  opacity: var(--ws-muted);
  margin: .25rem 0 0;
}

/* Dark mode (nếu site của bạn có) */
@media (prefers-color-scheme: dark) {
  .weapon-stats {
    --ws-border: rgba(255,255,255,.12);
    --ws-dots: rgba(255,255,255,.25);
    --ws-bgqty: rgba(255,255,255,.08);
  }
  .weapon-stats__list .stat-item { background: rgba(255,255,255,.03); }
}

/* Mobile tweak */
@media (max-width: 420px) {
  .weapon-stats__list .stat-item {
    grid-template-columns: 20px 1fr auto;
    padding: .3rem .45rem;
  }
  .weapon-stats { --ws-icon: 20px; }
}

/* ====== LAYOUT CHUNG ====== */
.stats-and-upgrade{
  display:grid;
  grid-template-columns: auto 1fr; /* cột trái cố định ~ như ảnh */
  gap:24px;
  align-items:start;
}

/* Mobile / tablet xếp dọc */
@media (max-width: 1024px){
  .stats-and-upgrade{
    grid-template-columns: 1fr;
  }
}

/* ====== BLOCK CHỈ SỐ (TRÁI) ====== */

.weapon-stats__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.stat-item{
  display:grid;
  grid-template-columns: 28px 1fr auto;
  align-items:center;
  gap:10px;
  background:#0c1016;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:10px 12px;
}
.stat-item .stat-icon{ display:block; }
.stat-item .stat-label{
  opacity:.8;
  font-size:14px;
}
.stat-item .stat-value{
  font-weight:700;
  font-size:16px;
  color:#f6c445; /* số vàng như ảnh */
}

/* ====== UPGRADE TABLE (PHẢI) ====== */


/* tổng */
.tong__row{display:grid;grid-template-columns:0.8fr repeat(6,1fr);align-items:center;gap:var(--gs-gap);padding:2px 12px;border-top:1px solid var(--gs-border)}
.tong__row:first-child{border-top:none}
.tong__row--alt{background:var(--gs-muted-2)}
.tong__row--total{background:var(--gs-muted)}

@media (min-width:1024px){.tong__row{grid-template-columns:0.5fr repeat(10,minmax(0,1fr))}}

/* ====== Container 2 cột: Stats + Upgrade ====== */

@media (max-width: 768px){
  .stats-and-upgrade{
    grid-template-columns: 1fr; /* xếp dọc trên mobile */
  }
}

/* Quan trọng: cho phép co giãn đúng, tránh tràn */
.block, .block__content, .weapon-stats, .gs-upgrade{
  min-width:0;
  box-sizing:border-box;
}

/* ====== Khối Chỉ số ====== */
.weapon-stats .block__content{ padding:12px }
.weapon-stats__list{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.stat-item{
  display:grid;
  grid-template-columns: auto 1fr auto; /* icon | label | value */
  align-items:center;
  gap:8px;
  min-width:0; /* để text có thể co */
}
.stat-icon{ flex:0 0 auto; width:24px; height:24px }
.stat-label{ white-space:nowrap; color:var(--gs-text, #e9eefc) }
.stat-value{
  justify-self:end;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ===== Câu Chuyện (Lore) ===== */
.block--stories .stories-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 768px){
  .block--stories .stories-grid{ grid-template-columns: 1fr; }
}

.story-card{
  background: #1a1d27;
  color: #9ca3af;
  border:1px solid var(--gs-border, rgba(255,255,255,.08));
  border-radius:12px;
  padding:16px;
  box-shadow: var(--gs-shadow, 0 8px 20px rgba(0,0,0,.25));
}

.story-card__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}

.story-card__thumb{
  width:64px;height:64px;flex:0 0 64px;
  display:grid;place-items:center;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  overflow:hidden;
}
.story-card__thumb img{ width:100%; height:100%; object-fit:cover; }

.story-card__title{
  font-size:16px;
	Color:#ffcc00;
  line-height:1.3;
  margin:0;
}

.story-card__body p{ margin: 0 0 10px; }
.story-card__body p:last-child{ margin-bottom:0; }