:root {
    --gWidth: 70vw;
    --gWidth_f: 100vw;
    --wMeasure: 1vw;
    --hMeasure: 2vw;
    --fontSize: 1.1vw;
}

* {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    font-family: rubik;
    font-size: var(--fontSize);
    font-weight: 400;
    margin: auto;
    max-width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

::-webkit-scrollbar {
    width: 0px;
}

#chat-widget-container {
    z-index: 2147483648 !important;
}

#top_logo {
    width: 13vw;
    top: 0.5vw;
    left: 2vw;
    z-index: 50;
}

#wg-ar,
#wg-fa {
    display: none !important;
}

.weglot-container a {
    margin: inherit;
    font-size: 1vw;
}

.weglot-container {
    position: absolute;
    top: 10px;
    right: 0px;
}

.wg-drop.country-selector ul {

    max-height: initial !important;
}

.wg-drop.weg-openleft ul {
    right: 10px !important;
    width: auto !important;
    min-width: 19vw !important;

    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.wg-drop.weg-openleft ul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#weglot-language-ms {
    font-size: 150%;
    letter-spacing: -1px;
}

.weglot-container>aside>div>a {
    color: white;
}

.wg-drop.country-selector .wgcurrent:after {
    background-image: url(/asset/images/activity/t_arrow.png) !important;
}

.weglot-container img {
    position: initial;
}

.bold {
    font-size: 105%;
    font-weight: 900;
}

.gText {
    background-image: linear-gradient(to right, #f69223, #df7f1e, #c86d18, #b25c13, #9b4b0d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    width: fit-content;
}

.gText2 {
    background-image: linear-gradient(to bottom, #ffbc2f, #ffb62b, #ffb127, #ffab24, #ffa521, #ffaa32, #feaf41, #feb44e, #fdc46d, #fdd38d, #fee1ac, #ffefcd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cf1 {
    font-family: Roboto;
}

.cc {
    cursor: pointer;
}

.elePage {
    position: absolute;
}

.showMobile {
    display: none !important;
}

.sCN {
    display: none;
}

body {
    margin: 0;
    padding: 0;
}

section {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0vw;
    position: relative;
}

.container {
    width: 100%;
    margin-top: 0vw;
    position: relative;
}

img {
    height: auto;
    position: absolute;

}



#notice_model,
#draw_model,
#gift_win_model,
#draw_model_m {
    width: 100%;
    height: 100vh;
    background-color: #000000ba;
    position: fixed;
    z-index: 1000;
    display: none;
}

#notice_text {
    color: white;
    font-size: 2vw;
}

#draw_model {
    background-image: url(/asset/images/activity/v2_bg.png);
    opacity: .7;
    position: fixed;
    height: 200vh;
    flex-direction: column;
    background-size: contain;
    background-position-y: -5vw;
    top: 0vw;
}

#draw_model_inner {
    position: absolute;
    top: 63vw;
    z-index: 1005;
    left: 4vw;
    width: 26vw;
    display: none;
    flex-direction: column;
}

#draw_model_inner h2,
#draw_model_inner p,
#draw_model_inner span {
    color: #dce5ff !important;
    font-size: 2.5vw !important;
    text-shadow: 0 0 3px #ffc107c4, 0 0 5px #ffc1079e, 0 0 7px #ffc10766 !important;
}

#draw_model_inner h2 {
    margin-bottom: 0vw;
}

#draw_model_inner #confirm_btn p {
    font-size: 2.5vw !important;
    color: rgb(230, 182, 54) !important;
    text-shadow: none !important;
    font-weight: 600;
}


#confirm_btn {
    width: 7vw;
    height: 4vw;
    margin-top: 3vw;
    align-content: center;
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid #e6b636;
}

#confirm_btn img {
    left: 0vw;
    top: 0vw;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

#confirm_btn .gText {
    font-size: 3vw;
    background-image: linear-gradient(to right bottom, #c12637, #c82336, #cf1f35, #d61b33, #dd1632, #e4283d, #eb3649, #f14254, #f75c6d, #fc7486, #fe8a9d, #ffa0b2);
    position: relative;
}


.bShadow {
    text-shadow: 2px 2px 4px #000000c7;
}

.wShadow {
    text-shadow: 0px 0px 6px white, 0px 0px 8px white;
}


#gift_win_model>div {
    background-image: url(/asset/images/activity/eid-al-fitr-2026/gift_win_model_bg.png);
    width: 40vw;
    height: 41vw;
    display: flex;
    flex-direction: column;


}

#gift_win_model>div * {
    margin: 0 auto;
}

#gift_win_model h1 {
    margin-top: 16.5vw;
    width: 60%;
}

#gift_win_model h1,
#gift_win_model p,
#gift_win_model h3 {
    font-size: 2vw;
    background-image: linear-gradient(to bottom, #c12637, #cf404e, #dc5866, #e76d7d, #f28394, #f28394, #f28394, #f28394, #e76d7d, #dc5866, #cf404e, #c12637);
    position: relative;
    color: #b1722b;
}

#gift_win_model p {
    margin-bottom: 1vw;
    margin-top: -1.5vw;
}

#gift_win_model h3 {
    margin-bottom: 1vw;
    margin-top: -1vw;
}


#gift_model_close {
    font-weight: 600;
    color: #ffffff;
    border-radius: 5px;
    padding: 0vw 1.8vw;
    margin-top: 0.5vw !important;
    background-image: linear-gradient(to top, #e0b25c, #a06626);
    box-shadow: 0 0 28px 2px #a26927a3;
    position: relative;
    font-size: 2vw;
    border-radius: 15px;
}


/************  top_sec start  **************************************************************/

#top_sec {
    background: black;
    height: 50vw;
}

#top_sec .textArea {
    width: 60%;
    margin-top: 8vw;
    position: relative;
    margin-left: 11vw;
}

#top_sec h2 {
    font-size: 2.2vw;
    position: relative;
}

#page_link {
    position: absolute;
    width: 10vw;
    left: 45vw;
    top: 33vw;
    background-image: linear-gradient(to right, #F69223, #9B4B0D);
    display: flex;
    padding: .6vw 2vw;
    border-radius: 50px;
    cursor: pointer;
}

#page_link p {
    font-size: 2vw;
    color: white;
}

#top_bg {
    width: 100%;
    left: 0vw;
    top: 0vw;
}

#top_left_con1 {
    width: 32vw;
    left: 0vw;
    top: 23vw;
}

#top_left_con2 {
    width: 33vw;
    left: 5vw;
    top: 3vw;
}

#top_left_ballon {
    width: 12vw;
    left: 8vw;
    top: 4vw;
}

#top_title {
    position: relative;
    width: 43vw;
    left: 0vw;
    top: 0vw;
    margin-bottom: -10vw;
}

#top_right_con1 {
    width: 35vw;
    right: 0vw;
    top: 0vw;
}

#top_right_con2 {
    width: 8vw;
    right: 28vw;
    top: 31vw;
}

#top_coffee_en {
    width: 25vw;
    right: 15vw;
    top: 8vw;
}

#top_right_ballon1 {
    width: 22vw;
    right: 0vw;
    top: 13vw;
}


/************  top_sec end    **************************************************************/


/************  about_sec start  **************************************************************/

#about_sec {
    position: relative;
    margin-top: -3vw;
    background: #f7931e;
}

#about_sec .container {
    position: relative;
    margin-top: 2vw;
}

#about_sec .textArea {
    width: 70%;
    position: relative;
}

#about_sec .textArea * {
    text-align: left;
}

#about_sec #about_ta1 h2 {
    font-size: 2vw;
    text-align: center;
}

#about_ta1>div {
    display: flex;
    flex-direction: row;
    gap: .5vw;
    margin: 2vw auto;
}

#about_ta1>div>div {
    display: flex;
    flex-direction: row;
    gap: .5vw;
}

#about_ta1>div>div>img {
    position: initial;
    width: 5vw;
}

#about_ta1>div>div>h3 {
    color: white;
    text-shadow: 0 0 1px white;
}

#about_ta2 {
    margin-top: 10vw;
    width: 50% !important;
}

#about_ta2 h1 {
    font-size: 3vw;
    margin-bottom: 2vw;
    margin-left: 0;
}

#about_ta2 .gText {
    background-image: linear-gradient(to right, #f69223, #d87b1c, #b96416, #9b4f0e, #7e3b07);
}

#about_ta2 p {
    margin-bottom: 1vw;
}

#about_sec #about_ta2 h2 {
    color: #f7931e;
    font-size: 1.6vw;
    text-align: center;
    margin-top: 2vw;
}

#about_top {
    width: 100%;
    left: 0vw;
    top: -2vw;
}

#about_bg {
    width: 100%;
    left: 0vw;
    top: 8vw;
}

#about_ballon1 {
    width: 15vw;
    right: 12vw;
    top: -17vw;
}

#about_ballon2 {
    width: 11vw;
    left: 4vw;
    top: -7vw;
}

#about_right {
    width: 22vw;
    right: 4vw;
    top: 10vw;
}

#about_ballon3 {
    width: 22vw;
    right: 4vw;
    top: 10vw;
}

#about_left {
    width: 18vw;
    left: 4vw;
    top: 24vw;
}

/************  about_sec end    **************************************************************/


/************  campaign_sec start  **************************************************************/

#campaign_sec {
    z-index: 6;
    background: #e18f8f;
    margin-top: 3vw;
}


#csc1 {
    background: #1a1a1a;
}

#csc1 .textArea {
    width: 50%;
    margin-top: 2vw;
}

#csc1 h1 {
    margin-bottom: 2vw;
    font-size: 3vw;
}

#csc1 .gText {
    background-image: linear-gradient(to right, #ffb059, #fdab50, #fca546, #faa03c, #f89a32, #f0912b, #e78825, #df7f1e, #ce711a, #bd6416, #ac5711, #9b4b0d, #9b4b0d, #9b4b0d);
}

#csc1 p {
    margin-bottom: 2vw;
    color: #F69223;
}

#csc1 h2 {
    margin-bottom: 2vw;
    color: white;
}

#csc2 {
    margin-top: 4vw;
}

#csc2>h1 {
    font-size: 3vw;
    background-image: linear-gradient(10deg, #ffffff, #ffffff, #eeeeee, #BF895C, #9b4b0d, #75390b, #75390b);
    margin-bottom: 4vw;
}

#campaign_bg {
    width: 100%;
    left: 0vw;
    top: 16vw;
}

#items_wrapper {
    width: 54vw;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1vw;
}

.item {
    position: relative;
    width: 12vw;
    height: 16vw;
}

.item:nth-child(33) {
    margin-left: auto;
    margin-right: 5vw;
}

.item:nth-child(34) {
    margin-right: auto;
    margin-left: 5vw;
}

.item h1 {
    color: white;
    font-size: 1.8vw;
    position: absolute;
    left: 10.5vw;
    top: 1.9vw;
    rotate: -16deg;
}

.item div {
    color: white;
    position: absolute;
    left: 15%;
    top: 12.5vw;
    width: 70%;
    background: #ffcb8ef5;
    border-radius: 25px;
    height: 3vw;
    display: flex;
    box-shadow: 0 0 5px 1px #c07d2eb3;
}

.item div h2 {
    font-size: .8vw;
    color: black;
    width: 90%;
}

.itemImage {
    width: 6vw;
    top: 4.5vw;
    left: 3vw;
}

.itemDiscountBG {
    width: 8vw;
    top: 1vw;
    left: 7vw;
}

.itemBG {
    width: 8vw;
    top: 3.1vw;
    left: 2vw;
}

.itemPoduim {
    top: 10vw;
    left: 0vw;
    width: 100%;
}

#items_info {
    margin-top: 2vw;
    width: 70vw;
}

#items_info h3 {
    font-size: 2vw;
    margin-bottom: 1vw;
    margin-top: 6vw;
}

#items_info div {
    display: flex;
    flex-direction: row;
    width: 63vw;
    height: 7vw;
    margin-bottom: 2vw;
}

#items_info div h4 {
    margin-right: 0;
    font-size: 1.7vw;
    background: black;
    padding: 1vw 4vw;
    color: white;
    border: 2px solid black;
    border-radius: 70px 0 0 70px;
}

#items_info div p {
    margin-left: 0;
    font-size: 1.7vw;
    background: #FDF6ED;
    padding: 1vw;
    color: black;
    border: 2px solid black;
    border-radius: 0 70px 70px 0;
}

#items_info h5 {
    color: white;
    width: 80%;
}

#items_tri {
    width: 6vw;
    left: 47vw;
    bottom: -2.2vw;
}

#campaign_left_1 {
    width: 18vw;
    left: 0vw;
    top: -2vw;
}

#campaign_left_2 {
    width: 19vw;
    left: 0vw;
    top: 114vw;
}

#campaign_right_1 {
    width: 19vw;
    right: 0vw;
    top: -4vw;
}

#campaign_right_2 {
    width: 22vw;
    right: 0vw;
    top: 81vw;
}

#campaign_ballon1 {
    width: 13vw;
    left: 5vw;
    top: 8vw;
    z-index: 1;
}

#campaign_ballon2 {
    width: 18vw;
    right: 5vw;
    top: -3vw;
    z-index: 1;
}

/************  campaign_sec end    **************************************************************/


/************  details_sec start  **************************************************************/
#details_sec {
    height: 140vw;
    z-index: 12;
}

#details_sec .textArea {
    position: relative;
    width: 60%;
    z-index: 12;
    margin-top: 17vw;
}

#details_sec .gText {
    background-image: linear-gradient(to right, #a04f0e, #974b0d, #8f460d, #86420c, #7e3e0b, #70380b, #63330b, #562d0a, #422409, #301c07, #1f1304, #080401);
}

#details_sec h1 {
    font-size: 4vw;
    margin-bottom: 2vw;
}

#details_sec>div>div>div>div p span {
    font-size: 120%;
}

#details_sec>div>div>div>div:nth-child(1) p:nth-child(3) {
    margin-top: 1vw;
    border-top: solid 2px #954a0d;
    padding-top: 1vw;
}

#details_sec>div>div>p:nth-child(2) {
    width: 50%;
}

#details_sec>div>div>div:nth-child(3) {
    width: 100%;
    height: 31vw;
    margin-top: 2vw;
    display: flex;
    flex-direction: row;
    gap: 30%;
}

#details_sec>div>div>div>div {
    width: 45%;
    background: #FDF6ED;
    padding: 2vw;
    margin-top: 0vw;
    height: 20vw;
    border-radius: 25px;
    box-shadow: 0 0 10px 1px #00000063;
}

#details_sec>div>div>div>div h3 {
    background-image: linear-gradient(to right, #a04f0e, #974b0d, #8f460d, #86420c, #7e3e0b, #70380b, #63330b, #562d0a, #422409, #301c07, #1f1304, #080401);
    color: white;
    padding: 1vw;
    border-radius: 25px;
    font-size: 1.5vw;
    margin-bottom: 2vw;
    box-shadow: 0 0 10px 1px #00000026;
}

#info_table_header,
#example_table_header {
    background-image: linear-gradient(to right, #a04f0e, #974b0d, #8f460d, #86420c, #7e3e0b, #70380b, #63330b, #562d0a, #422409, #301c07, #1f1304, #080401);
    display: flex;
    flex-direction: row;
    border-radius: 25px 25px 0 0;
    box-shadow: 0 -1px 10px 1px #00000063;
    z-index: 1;
    position: relative;
    margin-top: 8vw;
}

#info_table_header p,
#example_table_header p {
    width: 33.33%;
    padding: 1vw 0vw;
    color: white;
}

#info_table {
    width: 100%;
    margin-bottom: 2vw;
    background: #FDF6ED;
    padding: 1vw;
    border-radius: 0 0 25px 25px;
    box-shadow: 0 0 10px 1px #00000063;
}

#info_table tbody {
    width: 100%;
    margin-bottom: 2vw;
    padding: 2vw;
}

#info_table td {
    width: 33.33%;
}

#info_table>tbody>tr>td {
    padding-bottom: 1vw;
}


.separateCell {
    border-top: 2px solid #d1d1d194;
}

#info_table>tbody>tr:nth-child(10)>td {
    border-top: 2px solid #83410bb3;
}

#details_sec>div>div>h2 {
    text-align: left;
    font-size: 2vw;
    margin-top: 4vw;
}

#details_sec>div>div>p:nth-child(7) {
    text-align: left;
    line-height: 2.5vw;
}

#details_sec>div>div>h4 {
    font-size: 2.5vw;
    margin-top: 2vw;
}

#example_table_header {
    margin-top: 3vw;
    width: 80%;
}

#example_table td {
    width: 33.33%;
}

#example_table>tbody>tr>td {
    padding-bottom: 1vw;
}

#example_table {
    width: 80%;
    margin-bottom: 2vw;
    background: #FDF6ED;
    padding: 1vw;
    padding-bottom: 0;
    border-radius: 0 0 25px 25px;
    box-shadow: 0 0 10px 1px #00000063;
}

#details_sec img {
    z-index: 12;
}

#details_sec #details_bg {
    width: 100%;
    left: 0;
    top: 2vw;
    z-index: 10;
}

#details_coin1 {
    width: 14vw;
    top: 21vw;
    right: 12vw;
}

#details_coin2 {
    width: 16vw;
    top: 23vw;
    left: 10vw;
}

#details_coin3 {
    width: 21vw;
    top: 119vw;
    right: 4vw;
}

#details_coin4 {
    width: 14vw;
    top: 121vw;
    left: 3vw;
}

#details_right {
    width: 25vw;
    top: 14vw;
    right: 0vw;
}

#details_left {
    width: 24vw;
    top: 7vw;
    left: 0vw;
}

#details_ele1 {
    width: 30vw;
    top: 37vw;
    left: 35vw;
}

/************  details_sec end    **************************************************************/


/************  notice_sec start  **************************************************************/


#notice_sec {
    position: relative;
    z-index: 16;
}

#notice_bg1 {
    width: 100%;
    left: 0vw;
    top: 0vw;
}

#notice_bg2 {
    width: 100%;
    left: 0vw;
    top: 56vw;
}

#notice_sec .textArea {
    width: 80%;
    position: relative;
}

#notice_ta1 {
    margin-top: 15vw;
}

#notice_ta1 h2 {
    font-size: 2vw;
    margin-bottom: .8vw;
    margin-top: 4vw;
}

#notice_ta1 h3 {
    font-size: 1.4vw;
    margin-top: 1vw;
}

#notice_ta1 p {
    text-align: left;
    line-height: 1.6vw;
    margin-bottom: .8vw;
}

.sr5 {
    width: 95%;
    margin-left: 5%;
}

#notice_sec #notice_ta2 {
    margin-top: 10vw;
    color: white;
    width: 70%;
}

#notice_ta2 h2 {
    font-size: 2vw;
    margin-bottom: .4vw;
    margin-top: 2vw;
}

#notice_ta2 p {
    line-height: 1.6vw;
    margin-bottom: .8vw;
}

/************  notice_sec end    **************************************************************/