/* viewport-width: 1700 */
/* viewport-unit: vh */
.role-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(/asset/image/roles/role-r-bg-m.png) no-repeat right top / cover;
}
.role-wrap:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 70%, #000000);
  z-index: 0;
}
.role-video {
  position: absolute;
  width: 19.88235vh;
  height: 11.17647vh;
  border: 1px solid #cba964;
  overflow: hidden;
  bottom: 50%;
  transform: translateY(26.47059vh);
  left: 2.05882vh;
  top: auto;
  z-index: 10;
}
.role-video::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6) url(/asset/image/ui/play-ico.png) no-repeat center / 4.94118vh 4.94118vh;
}
.role-video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.role-video video {
  display: none;
  width: auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.role-tab-list {
  position: absolute;
  top: 50%;
  left: 2.05882vh;
  right: 0;
  z-index: 20;
  font-family: 'UTM Alexander', Arial, sans-serif;
  font-weight: 300;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  transform: translateY(30vh);
  padding: 0;
}
.role-tab-list.active {
  opacity: 1;
  transform: translateY(30vh);
}
.role-tab-list .role-tab-item {
  position: relative;
  font-size: 1.88235vh;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), -1px -1px rgba(0, 0, 0, 0.2), -1px 1px 0 rgba(0, 0, 0, 0.2), 1px -1px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  padding-bottom: 2.64706vh;
  transition: all 0.3s ease;
  cursor: pointer;
}
.role-tab-list .role-tab-item > p {
  position: relative;
  z-index: 5;
  letter-spacing: 0.17647vh;
  width: 6vh;
  height: 2.23529vh;
  line-height: 2.23529vh;
  text-align: center;
  white-space: nowrap;
}
.role-tab-list .role-tab-item > p:before {
  content: '';
  position: absolute;
  top: 0;
  left: -0.29412vh;
  width: 0;
  height: 100%;
  background: linear-gradient(to right, #dcc072, rgba(255, 255, 255, 0));
  z-index: -1;
  transition: all 0.3s 0.1s ease;
}
.role-tab-list .role-tab-item > span {
  display: none;
  position: relative;
  width: 0.70588vh;
  height: 0.70588vh;
  border: 1px solid #fff;
  transform: rotate(45deg);
  margin-right: 0.58824vh;
  opacity: 0.6;
  transition: all 0.3s ease;
}
.role-tab-list .role-tab-item > span:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.35294vh;
  height: 0.35294vh;
  background: #fff;
  transition: all 0.3s ease;
}
.role-tab-list .role-tab-item:after {
  display: none;
}
.role-tab-list .role-tab-item:last-child {
  padding-bottom: 2.64706vh;
}
.role-tab-list .role-tab-item:last-child p {
  width: 7.05882vh;
}
.role-tab-list .role-tab-item:last-child::after {
  display: none;
}
.role-tab-list .role-tab-item:hover {
  color: #dcc072;
}
.role-tab-list .role-tab-item:hover span {
  opacity: 1;
  border-color: #dcc072;
}
.role-tab-list .role-tab-item:hover span:after {
  background-color: #dcc072;
}
.role-tab-list .role-tab-item.active {
  color: #fff;
}
.role-tab-list .role-tab-item.active:before {
  content: '';
}
.role-tab-list .role-tab-item.active p::before {
  width: 100%;
}
.role-tab-list .role-tab-item.active span {
  opacity: 1;
  border-color: #dcc072;
}
.role-tab-list .role-tab-item.active span:after {
  background-color: #dcc072;
  width: 1.29412vh;
  height: 1.29412vh;
  margin: -0.47059vh 0 0 0.47059vh;
}
.role-tab-list:after,
.role-tab-list:before {
  content: '';
  position: absolute;
  left: 0.35294vh;
  width: 1px;
  height: 3.05882vh;
  display: none;
}
.role-tab-list:after {
  top: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6));
}
.role-tab-list:before {
  bottom: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6));
}
.role-detail-cont {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 78.47059vh;
  z-index: 2;
}
.role-detail-cont:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, #000000 80%, #000000);
  z-index: 2;
}
.radar-img {
  position: absolute;
  right: 2.94118vh;
  left: auto;
  top: 6.88235vh;
  width: 9.94118vh;
  height: 9.94118vh;
  transition: all 0.3s ease-out;
  z-index: 10;
}
.radar-img::before {
  content: '';
  background: url(/asset/image/ui/radar-mask.png) no-repeat center / 9.94118vh 9.94118vh;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9.94118vh;
  height: 9.94118vh;
  transform: translate(-50%, -53%);
}
.radar-img canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 14.11765vh;
  height: 14.11765vh;
}
.role-detail-info {
  position: absolute;
  width: auto;
  font-family: 'UTM Alexander', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.41176vh;
  color: #fff;
  z-index: 20;
  background: rgba(0, 0, 0, 0.8);
  padding: 0.58824vh;
}
.role-detail-info .role-detail-title {
  display: flex;
  justify-content: start;
  align-items: end;
  margin-bottom: 1.17647vh;
}
.role-detail-info .role-detail-title p {
  position: relative;
  padding-bottom: 0.29412vh;
  font-size: 1.88235vh;
}
.role-detail-info .role-detail-title p:after {
  content: '';
  width: 100%;
  height: 0.11765vh;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-mask-image: url(/asset/image/ui/role-line.png);
          mask-image: url(/asset/image/ui/role-line.png);
  -webkit-mask-size: 13.17647vh 1px;
          mask-size: 13.17647vh 1px;
}
.role-detail-info .role-detail-ico {
  width: 4.23529vh;
  height: 4.23529vh;
  margin-right: 0.58824vh;
  flex: 0 0 4.23529vh;
}
.role-video-1:before {
  background: url(/asset/image/roles/v-1.png) no-repeat center / cover;
}
.role-detail-cont-1 .role-detail-title {
  color: #65a0c6;
}
.role-detail-cont-1 .role-detail-info {
  left: 53%;
  right: 0.58824vh;
  top: auto;
  bottom: 12.35294vh;
}
.role-detail-cont-1 .role-detail-info p:after {
  background: #65a0c6;
}
.role-video-2:before {
  background: url(/asset/image/roles/v-2.png) no-repeat center / cover;
}
.role-detail-cont-2 .role-detail-title {
  color: #be7f5d;
}
.role-detail-cont-2 .role-detail-info {
  left: 53%;
  right: 0.58824vh;
  top: auto;
  bottom: 12.35294vh;
}
.role-detail-cont-2 .role-detail-info p:after {
  background: #be7f5d;
}
.role-video-3:before {
  background: url(/asset/image/roles/v-3.png) no-repeat center / cover;
}
.role-detail-cont-3 .role-detail-title {
  color: #bd7293;
}
.role-detail-cont-3 .role-detail-info {
  left: 53%;
  right: 0.58824vh;
  top: auto;
  bottom: 12.35294vh;
}
.role-detail-cont-3 .role-detail-info p:after {
  background: #bd7293;
}
.role-video-4:before {
  background: url(/asset/image/roles/v-4.png) no-repeat center / cover;
}
.role-detail-cont-4 .role-detail-title {
  color: #8767b5;
}
.role-detail-cont-4 .role-detail-info {
  left: 53%;
  right: 0.58824vh;
  top: auto;
  bottom: 12.35294vh;
}
.role-detail-cont-4 .role-detail-info p:after {
  background: #8767b5;
}
.role-video-5:before {
  background: url(/asset/image/roles/v-5.png) no-repeat center / cover;
}
.role-detail-cont-5 .role-detail-title {
  color: #9b7b4f;
}
.role-detail-cont-5 .role-detail-info {
  left: 53%;
  right: 0.58824vh;
  top: auto;
  bottom: 12.35294vh;
}
.role-detail-cont-5 .role-detail-info p:after {
  background: #9b7b4f;
}
.role-video-6:before {
  background: url(/asset/image/roles/v-6.png) no-repeat center / cover;
}
.role-detail-cont-6 .role-detail-title {
  color: #80aeb7;
}
.role-detail-cont-6 .role-detail-info {
  left: 53%;
  right: 0.58824vh;
  top: auto;
  bottom: 12.35294vh;
}
.role-detail-cont-6 .role-detail-info p:after {
  background: #80aeb7;
}
.role-video-7:before {
  background: url(/asset/image/roles/v-7.png) no-repeat center / cover;
}
.role-detail-cont-7 .role-detail-title {
  color: #80aeb7;
}
.role-detail-cont-7 .role-detail-info {
  left: 53%;
  right: 0.58824vh;
  top: auto;
  bottom: 12.35294vh;
}
.role-detail-cont-7 .role-detail-info p:after {
  background: #80aeb7;
}
.role-video-8:before {
  background: url(/asset/image/roles/v-8.png) no-repeat center / cover;
}
.role-detail-cont-8 .role-detail-title {
  color: #b56061;
}
.role-detail-cont-8 .role-detail-info {
  left: 53%;
  right: 0.58824vh;
  top: auto;
  bottom: 12.35294vh;
}
.role-detail-cont-8 .role-detail-info p:after {
  background: #b56061;
}
.role-video-9:before {
  background: url(/asset/image/roles/v-9.png) no-repeat center / cover;
}
.role-detail-cont-9 .role-detail-title {
  color: #54669c;
}
.role-detail-cont-9 .role-detail-info {
  left: 53%;
  right: 0.58824vh;
  top: auto;
  bottom: 12.35294vh;
}
.role-detail-cont-9 .role-detail-info p:after {
  background: #54669c;
}
.role-img {
  position: absolute;
  bottom: 0;
  right: 0;
  text-indent: -9999em;
  overflow: hidden;
}
.role-tit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-indent: -9999em;
  overflow: hidden;
}
.role-img.role-img-1 {
  left: calc(50% - 76.5vh);
  top: 0;
  background-position: center top;
  background-size: contain;
  width: 120vh;
  height: 67.58824vh;
}
.role-detail-ico-1 {
  background: url(/asset/image/roles/icon_1.png) no-repeat center / cover;
}
.role-img.role-img-2 {
  left: calc(50% - 76.5vh);
  top: 0;
  background-position: center top;
  background-size: contain;
  width: 120vh;
  height: 67.58824vh;
}
.role-detail-ico-2 {
  background: url(/asset/image/roles/icon_2.png) no-repeat center / cover;
}
.role-img.role-img-3 {
  left: calc(50% - 76.5vh);
  top: 0;
  background-position: center top;
  background-size: contain;
  width: 120vh;
  height: 67.58824vh;
}
.role-detail-ico-3 {
  background: url(/asset/image/roles/icon_3.png) no-repeat center / cover;
}
.role-img.role-img-4 {
  left: calc(50% - 76.5vh);
  top: 0;
  background-position: center top;
  background-size: contain;
  width: 120vh;
  height: 67.58824vh;
}
.role-detail-ico-4 {
  background: url(/asset/image/roles/icon_4.png) no-repeat center / cover;
}
.role-img.role-img-5 {
  left: calc(50% - 76.5vh);
  top: 0;
  background-position: center top;
  background-size: contain;
  width: 120vh;
  height: 67.58824vh;
}
.role-detail-ico-5 {
  background: url(/asset/image/roles/icon_5.png) no-repeat center / cover;
}
.role-img.role-img-6 {
  left: calc(50% - 76.5vh);
  top: 0;
  background-position: center top;
  background-size: contain;
  width: 120vh;
  height: 67.58824vh;
}
.role-detail-ico-6 {
  background: url(/asset/image/roles/icon_6.png) no-repeat center / cover;
}
.role-img.role-img-7 {
  left: calc(50% - 76.5vh);
  top: 0;
  background-position: center top;
  background-size: contain;
  width: 120vh;
  height: 67.58824vh;
}
.role-detail-ico-7 {
  background: url(/asset/image/roles/icon_7.png) no-repeat center / cover;
}
.role-img.role-img-8 {
  left: calc(50% - 76.5vh);
  top: 0;
  background-position: center top;
  background-size: contain;
  width: 120vh;
  height: 67.58824vh;
}
.role-detail-ico-8 {
  background: url(/asset/image/roles/icon_8.png) no-repeat center / cover;
}
.role-img.role-img-9 {
  left: calc(50% - 76.5vh);
  top: 0;
  background-position: center top;
  background-size: contain;
  width: 120vh;
  height: 67.58824vh;
}
.role-detail-ico-9 {
  background: url(/asset/image/roles/icon_9.png) no-repeat center / cover;
}
.role-tit-1 {
  top: 9.64706vh;
  background: url(/asset/image/roles/role-tit-1-9e1a0062.png) no-repeat center / cover;
  width: 43.47059vh;
  height: 35.70588vh;
}
.role-tit-2 {
  top: 8.47059vh;
  background: url(/asset/image/roles/role-tit-2-ad0c9301.png) no-repeat center / cover;
  width: 44.11765vh;
  height: 32.47059vh;
}
.role-tit-3 {
  top: 7.29412vh;
  background: url(/asset/image/roles/role-tit-3-552d647d.png) no-repeat center / cover;
  width: 40.17647vh;
  height: 42vh;
}
.role-tit-4 {
  top: 2.82353vh;
  background: url(/asset/image/roles/role-tit-4-f275b592.png) no-repeat center / cover;
  width: 42.29412vh;
  height: 39.52941vh;
}
.role-tit-5 {
  top: 9.64706vh;
  background: url(/asset/image/roles/role-tit-5-28003b23.png) no-repeat center / cover;
  width: 42.05882vh;
  height: 42.41176vh;
}
.role-tit-6 {
  top: 10.82353vh;
  background: url(/asset/image/roles/role-tit-6-b1d3a5a3.png) no-repeat center / cover;
  width: 44.11765vh;
  height: 39.88235vh;
}
.role-tit-7 {
  top: 6.05882vh;
  background: url(/asset/image/roles/role-tit-7-6bcdde45.png) no-repeat center / cover;
  width: 44.11765vh;
  height: 40.11765vh;
}
.role-tit-8 {
  top: 9.35294vh;
  background: url(/asset/image/roles/role-tit-8-cd8ff03b.png) no-repeat center / cover;
  width: 44.11765vh;
  height: 27.29412vh;
}
.role-tit-9 {
  top: 6.23529vh;
  background: url(/asset/image/roles/role-tit-9-cc8e4f58.png) no-repeat center / cover;
  width: 43.82353vh;
  height: 38.88235vh;
}
.role-slide-enter-active,
.role-slide-leave-active {
  transition: all 0.5s ease;
}
.role-slide-enter {
  transform: translateX(50%);
  opacity: 0;
}
.role-slide-leave-to {
  transform: translateX(-50%);
  opacity: 0;
}
.video-dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.video-dialog > div {
  width: 100%;
}
.video-dialog .dialog-vid {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.video-dialog video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translateZ(0);
}
.video-dialog .video-close {
  width: 4.70588vh;
  height: 4.70588vh;
  background: url(/asset/image/ui/close-btn.png) no-repeat center / cover;
  margin: 2.35294vh auto 0;
  text-indent: -999em;
  overflow: hidden;
}


/* Vietnamese names need natural widths and a scrollable mobile tab row. */
.role-tab-list {
  right: 2.05882vh;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px 0 10px;
  touch-action: pan-x;
}
.role-tab-list .role-tab-item,
.role-tab-list .role-tab-item:last-child {
  flex: 0 0 auto;
  padding-bottom: 0;
  font-size: clamp(12px, 3vw, 16px);
}
.role-tab-list .role-tab-item > p,
.role-tab-list .role-tab-item:last-child p {
  width: auto;
  height: auto;
  line-height: 1.5;
  padding: 5px 8px;
  letter-spacing: normal;
  font-family: 'UTM Alexander', Arial, sans-serif;
  font-weight: 300;
}
.role-detail-info p {
  font-family: 'UTM Alexander', Arial, sans-serif;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.5;
}
.role-detail-info .role-detail-title p {
  white-space: normal;
}

/* Show all nine sects in two rows, matching the original mobile layout. */
.role-tab-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px 2px;
  overflow: visible;
  padding: 4px 0;
  touch-action: auto;
}
.role-tab-list .role-tab-item,
.role-tab-list .role-tab-item:last-child {
  min-width: 0;
  justify-content: center;
  font-size: clamp(10px, 2.7vw, 15px);
}
.role-tab-list .role-tab-item > p,
.role-tab-list .role-tab-item:last-child p {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 2px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}