@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;}

img {
    vertical-align: middle;
    max-width:100%
}
.wrapSnow canvas{
    position: fixed !important;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/static/font/OpenSans-Regular1.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/static/font/OpenSans-Regular2.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/static/font/OpenSans-Regular3.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/static/font/OpenSans-Regular4.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/static/font/OpenSans-Regular5.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/static/font/OpenSans-Regular6.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/static/font/OpenSans-Regular7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/static/font/OpenSans-Bold1.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(h/static/font/OpenSans-Bold2.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/static/font/OpenSans-Bold3.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/static/font/OpenSans-Bold4.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/static/font/OpenSans-Bold5.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/static/font/OpenSans-Bold6.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/static/font/OpenSans-Bold7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(/static/font/OpenSans-ExtraBold1.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(/static/font/OpenSans-ExtraBold2.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(/static/font/OpenSans-ExtraBold3.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(/static/font/OpenSans-ExtraBold4.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(/static/font/OpenSans-ExtraBold-Vi.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(/static/font/OpenSans-ExtraBold-LatinExt.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(/static/font/OpenSans-ExtraBold-Latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: 'Iciel Nabila';
    font-style: normal;
    font-display: swap;
    src: url(/static/font/nabila_1-webfont.woff2) format('woff2');
}
@font-face {
    font-family: 'Iciel Nabila';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(/static/font/NABILA_1.TTF) format('woff2');
}

@font-face {
    font-family: 'Iciel Nabila';
    font-style: normal;
    font-display: swap;
    src: url(/static/font/nabila_1-webfont.woff) format('woff');
}

@font-face {
    font-family: 'SVN Standly';
    font-style: normal;
    font-display: swap;
    src: url(/static/font/SVN-Standly.woff2) format('woff2');
}
@font-face {
    font-family: 'SVN Standly';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(/static/font/SVN-Standly.woff) format('woff');
}

html {
    font-family: 'Open Sans', sans-serif;
    /*font-family: 'Roboto, Arial', sans-serif;*/
    font-size:15px;
    line-height:22px;
}

body{color:#262626;}

a {
    text-decoration: none;
    cursor: pointer;
}

.cl-blue {color:#458ea7!important;}
.cl-yellow {color:#e7b712!important;}
.cl-green {color:#8dc354!important;}
.cl-green2 {color:#509d65!important;}
.cl-orange{color:#ff5c03!important;}
.cl-red{color:#c92121!important;}
#cl-red-right{
    left: 96px !important;
}
.cl-26{color:#262626!important;}
.cl-a{color:#aaa!important;}
.cl-f{color:#fff!important;}
.fw400{font-weight:400!important;}
.fw700{font-weight:700;}

.bg-blue {background-color:#458ea7;}

.bg-blue2 {background-color:#20a28e;}
.bg-yellow {background-color:#e7b712;}
.bg-green {background-color:#8dc354;}
.bg-gray1 {background-color:#e1e1e1;}
.bg-gray2 {background-color:#aaa;}
.bg-f {background-color:#fff;}
.bg-face {background-color:#3a559f;}
.bg-gmail {background-color:#dc4e41;}
.bg-comment {background-color:#f1f4f8;}
.bg-body{background-color:#eceff1;}

.bd1 {border:1px solid #e1e1e1;}
.bt1{border-top:1px dotted #e1e1e1;}


.br20 {border-radius:20px;}
.br5 {border-radius:5px;}

.pd12 {padding:12px;}
.pd24 {padding:24px;}
.pd40 {padding:40px;}

.pl12 {padding-left:12px;}
.pl24 {padding-left:24px;}
.pr12 {padding-right:12px;}
.pr24 {padding-right:24px;}

.rt180{-webkit-transform:rotate(180deg)}


.pc12 {padding:0px 12px;}
.pc24 {padding:0px 24px;}

.pt12 {padding-top:12px;}
.pt24 {padding-top:24px;}
.pt52 {padding-top:52px;}

.pb8 {padding-bottom:8px;}
.pb12 {padding-bottom:12px;}
.pb24 {padding-bottom:24px;}

.mt12 {margin-top:12px;}
.mt24 {margin-top:24px;}

.mb12 {margin-bottom:12px;}
.mb24 {margin-bottom:24px;}

.mr12 {margin-right:12px;}
.mr24 {margin-right:24px;}

.ml12 {margin-left:12px;}
.ml24 {margin-left:24px;}

.shadow {box-shadow:0px 0px 5px 1px #2626262b;}
.fl {float:left}
.fr {float:right}

.w29, .w29-no-ads {width:30.612244898%;}
.w14 {width:14.1156462585%;}
.w56 {width:55.2721088435%;}
.w30 {width:30%;}
.w40 {width:40%;}
.w50 {width:50%;}
.w70 {width:69.3877551020%;}
.w100 {width:100%;}

.ml14 {margin-left:14.1156462585%;}
.bd-left-right{border-left:1px solid #e1e1e1e1;border-right:1px solid #e1e1e1e1}
.fs24{font-size:24px;}
.fw800{font-weight:800;}

.h247-full {width:100%;height:auto;overflow:hidden}
.h247-center {width:100%;max-width:1200px;height:auto;margin:auto;}
.info-Product p{color:#fff;}

.h247-body{min-height:888px;}

.scroll-header {position:fixed;top:0;background-color:#fff;z-index:999}
.h247-header {width:100%;height:52px;position:relative}
.logo {top:50%;-webkit-transform:translateY(-50%);position:relative;left:0;}
.logo-small {display:none}

.header-search {top:50%;-webkit-transform:translateY(-50%);position: relative;left:30px;}
.search-top {width:90% !important;  top:0% !important;-webkit-transform:translateY(0%)!important;text-align:center}

.search-top .searchTerm {height:30px;}
.search-top .searchButton {height:41px;}

.control-header {top:50%;-webkit-transform:translateY(-50%);position:relative;right:0;}

.h247-login{top:50%;-webkit-transform:translateY(-50%);position:absolute;right:0;}
.h247-login li{float:right;list-style:none;margin:0px 12px;height:54px;position:relative}

.h-notifical{width:32px;height:32px;position:relative; display: flex;align-items: center;justify-content: center;overflow:hidden;border-radius:50%;border:1px solid #458ea7;margin:10px 0px;}
.h-notifical img{transform:translateY(12px)}
.h-notifical:hover{background-color:#458ea7;}
.h-notifical:hover img{transform:translateY(-14px)}

.h-login{padding:14px 0px;display:block;color:#262626;}
.h-login img{margin-right:4px;}
.h-login .avt36{margin-right:6px;}
/*.h247-login li:hover .pc-option{display:block!important;}*/
/*.h247-login li:hover .icon-top2{display:block;}*/
/*.h247-login li:hover .icon-top1{display:block;}*/

.show-notifical {width:32px;height:32px;display:inline-block;border:1px solid #458ea7;border-radius:50%;position:relative;overflow:hidden;}
.show-notifical:hover {background-color:#458ea7;}
.show-notifical img {-webkit-transform:translateY(0);margin-top:6px;margin-left:9px;}
.show-notifical:hover img {-webkit-transform:translateY(-25px);}
.number-noti {position:absolute;width:20px;height:20px;background-color:#ff5c03;top:6px;right:-10px;border-radius:50%;text-align:center;color:#fff;vertical-align:bottom;font-size:12px}
.h-notifical ul li{list-style:none;position:relative}
.pc-option-notifocal{width:400px;left:50%;-webkit-transform:translateX(-50%)}
.h-notifical ul li:hover .pc-option-notifocal{display:block}  .h-notifical ul li:hover .icon-top1{display:block}
.h-question.noti_EVENT_WOMEN_DAY, .EVENT_WOMEN_DAY {
    background-color: #ffc0cb8c;
}
.list-notifical{max-height:400px;overflow:auto}
.notifical-child {width:100%;border-bottom:1px solid #e1e1e1;position:relative}  .notifical-child a{color:#262626;} .notifical-child p{display:table-row}
.notifical-child.noti-type-upto_rank {
    background-color: #fffce8;
}
.uprank img{
    width: 18px;
}
.notifical-child.noti-type-verify_answer{
    background-color: #32a28e36;
}
.notifical-child.noti-type-upto_rank span.uprank{
    font-weight: bold;
    color: #000;
}
.notifical-child a:hover{text-decoration:underline}
.notifical-child span time{color:#aaa;}	.more-notifical {color:#458ea7!important;padding:4px 12px;display:block;border-radius:5px;border:1px solid #458ea7;position:absolute;right:8px;bottom:4px;}
.more-notifical:hover{background-color:#458ea7;color:#fff!important;-webkit-transition:all ease 0.3s;text-decoration:none!important;}

.box-notifical-child{max-height:480px;position:relative;}
.notifical-child-more{max-height:344px;overflow:auto;padding-bottom: 56px}
.btn-notifical{width:100%;position:absolute;bottom:0;left:0;background-color:#fff;}
.btn-back {color:#262626!important;padding:4px 12px;display:block;border-radius:5px;border:1px solid #e1e1e1;margin:12px;}
.btn-back:hover{background-color:#f1f1f1;text-decoration:none!important;color:#262626!important;}
.btn-back img{width:16px;marign-right:6px;}

.hide{display:none}   .show{display:block}

.h-signin ul li {float:left;list-style:none;position:relative;display:inline-block}
.h-signin ul li a {padding:5px 0px;display:inline-block;padding-left:12px;color:#262626;}
.h-signin ul li:hover a {color:#458ea7;}
.h-signin ul li img {-webkit-transform:translateY(-2px);margin-right:5px;}
.h-signin ul li span{padding:16px 0px;}

.avt-user {position:absolute;top:0;left:-12px;}
.icon-menu{width:16px;height:16px;position:absolute;bottom:-8px;left:-20px;z-index:9999;display:none}
.h-signin .avt-user img{-webkit-transform:translateY(0)}

.pc-option {height:auto;position:absolute;top:54px;background-color:#fff;border:1px solid #458ea7;border-radius:5px;}
.pc-option-user {width:300px;right:0;}
.clear-fix{overflow:visible!important;}
/*.pc-option {display:none;}*/
.icon-top1 {position:absolute;top:37px;right:8px;}
.icon-top2 {position:absolute;top:37px;right:32px;}
.pc-option li img{width:6px;margin-right:6px;-webkit-transform:translateY(-2px)}
.pc-option li:last-child img{width:auto!important;}
.pc-option li{border-bottom:1px solid #e1e1e1;margin:0px;padding:12px;height:auto;display:block;float:none}
.pc-option li a{color:#262626!important;display:block;}  .pc-option li a:hover{color:#458ea7!important;}

.h-signin ul li:hover .pc-option {display:block;}  .h-signin ul li:hover .icon-top2{display:block}

.top-banner {background-image:linear-gradient(to right, #8dc354, #77b896);width:100%;height:auto;}
.box-banner {width:100%;height:188px;background-image:url(/static/img/bg_texture.png);text-align:center;background-position:right}
.box-banner h1 {font-size:44px;font-weight:800;color:#fff;padding-bottom:24px;line-height:38px !important;}

.search {
    width: 60%;
    position: relative;
    margin:auto;
    top:50%;-webkit-transform:translateY(-50%);
    overflow:hidden
}

.searchTerm {
    float: left;
    width: 96%;
    padding: 5px 2%;
    height: 40px;
    border-radius: 5px;
    outline-color:#e7b712;
    background: #ecf4e9;
    color:#262626;
    border: 1px solid #fff;
    font-size:18px;
}

.searchTerm:focus{
    color: #262626;
}

.searchButton {
    position: absolute;
    right: 0px;
    width: 89px;
    height: 52px;
    border: 1px solid #fff;
    background-color: #e7b712;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
    -webkit-transition:all ease 0.3s;
}

.searchButton:hover {background-color: #e7a312;}

.h247-col {height:auto;}

.h-state {padding:0px 12px;font-size:13px;line-height:18px;position:relative;height:16px;margin-top:3px;display:flex;align-items:center}
.icon-rightq{width:8px;height:18px;position:absolute;top:-1px;background-image:url(/static/img/icon-pattern1.png);background-size:cover;}
.icon-rightq2{width:8px;height:18px;position:absolute;top:-1px;background-image:url(/static/img/icon-pattern2.png);background-size:cover;}
.rightq1 {left:0px}  .rightq2{right:0px;-webkit-transform:rotate(180deg)}
.h-state-green {border-top:1px solid #8dc354;border-bottom:1px solid #8dc354;color:#8dc354;}
.h-state-blue {border-top:1px solid #458ea7;border-bottom:1px solid #458ea7;color:#458ea7;}

.h247-footer {background-image:url(/static/img/bg-pattern1.png)}
.fix {overflow:hidden}
.info-company ul li {list-style:none;color:#fff;padding-bottom:12px;}
.info-company ul li img{padding-right:6px;}

.follow-social ul li {list-style:none;float:left;padding-right:12px;}
.follow-social ul li img {-webkit-transform:scale(0.7);-webkit-transition:all ease 0.3s}
.follow-social ul li:hover img {-webkit-transform:scale(1);-webkit-transition:all ease 0.3s}
.h247-license {background-color:#3e8096;}
.h247-license span {padding:8px 12px;display:block;color:#fff;font-size:13px;}

.form-add-question{position:fixed;z-index:998;bottom:60px;right:36px;display:flex;align-items: center;visibility:hidden;-webkit-transition:all ease 0.2s;opacity:0;}
.float-btn-question {width:66px;height:66px;border-radius:50%;background-color:#e7b712a1;display:inline-block;}
.float-btn-event {width:66px;height:66px;border-radius:50%;display:inline-block;}
.float-btn-event .timedown {
    position: absolute;
    text-align: center;
    width: 46px;
    left: 6px;
    font-size: 12px;
    padding: 0px 4px;
    border-radius: 10px;
    background: #e7b712a1;
    color: #FFF;
    font-weight: 600;
}
.btn-add {width:58px;height:58px;margin:4px;border-radius:50%;background-color:#e7b712;position:relative}
.btn-add img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);max-width:36px;}
.float-btn-question:hover .btn-add{background-color:#db9b00}
.form-add-question strong{margin-right:12px;padding:4px 24px;background-color:#e7b712;border-radius:5px;color:#fff;position:relative}
.form-add-question strong img {position:absolute;right:-10px;max-width:12px;}

.flex {display:flex;bottom:36px;-webkit-transition:all ease 0.2s;visibility:visible;opacity:1}

.avt56 {width:56px;height:56px;overflow:hidden;border-radius:15px;}
.avt36 {width:28px;height:28px;border-radius:10px;overflow:hidden;} .avt36 span{color:#aaa;text-align:center;font-weight:700;display:block;padding-top:3px;}
.avt54 {width:54px;height:54px;overflow:hidden;border-radius:15px;margin:1px;}
.avt48 {width:48px;height:48px;overflow:hidden;border-radius:15px;margin:3px;}

.img-usern {width:42px;height:42px;border-radius:10px;overflow:hidden}

#s-scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
    background-color: #F5F5F5;
}

#s-scroll::-webkit-scrollbar
{
    width: 6px;
    background-color: #F5F5F5;
}

#s-scroll::-webkit-scrollbar-thumb
{
    background-color: #cdcdcd;
}

.opacity {width:100%;height:100%;position:fixed;background-color:#000000a1;z-index:999999;transition: .3s all ease-in-out;visibility:hidden;opacity:0;display:none;top:0;left:0;}
.opacity-show{display:block;transition: .3s all ease-in-out;visibility:visible;opacity:1}

.menu-user {width:276px;height:100%;position:fixed;top:0;right:-276px;background-color:#fff;z-index:1000000;visibility:hidden;transition: .3s all ease-in-out;display:none}
.menu-user-show {right:0;visibility:visible;transition: .3s all ease-in-out;}
.list-menu-user ul li{list-style:none;margin-bottom:12px;}
.list-menu-user ul li a{padding:6px 12px;display:block;border:1px solid #e1e1e1;border-radius:5px;color:#262626;}
.list-menu-user ul li img{width:6px;margin-right:6px;-webkit-transform:translateY(-2px)}
.log-out {position:absolute;bottom:0px;right:0px;width:100%;height:auto;overflow:hidden;background-color:#fff;text-align:right;display:none}
.log-out a{padding:6px 24px;border:1px solid #e1e1e1;border-radius:5px;color:#262626;margin-bottom:12px;}
.log-out img {margin-right:6px;-webkit-transform:translateY(-2px)}

.hover-1:hover{text-decoration:underline}

.border-bottom1{border-bottom:1px dotted #e1e1e1;}

.opacity2 {width:100%;height:100%;position:fixed;background-color:#000000a1;z-index:999999;transition: .3s all ease-in-out;visibility:hidden;opacity:0;top:0;}
.opacity2-show{display:block;transition: .3s all ease-in-out;visibility:visible;opacity:1;}

.exam {min-height: 100vh; display: flex;flex-direction: column; background-color: #eceff1; padding: 53px 0%; width: 100%; margin-bottom: -50px;}
.exam .examCard {background-color: #fff; min-width: 60%; max-width: 64%; position: relative}
.exam .examCard .progress {
	background-color: #d8d8d8;
	border-radius: 20px;
	position: relative;
	height: 12px;
	width: 400px;
}

.exam .examCard .progress-done {
	background: linear-gradient(to left, #36758b, #36758b);
	border-radius: 20px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 0;
	opacity: 0;
	transition: 1s ease 0.3s;
}

.shake {
    animation: shake 2s infinite;
    animation-delay: 3s;
    animation-iteration-count: infinite; /* Repeat infinitely */
}

@keyframes shake {
    0% { transform: rotate(0deg); }
    5% { transform: rotate(10deg); }
    10% { transform: rotate(0deg); }
    15% { transform: rotate(-10deg); }
    20% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.exam .filter {width: 60%}
.exam .relatedExamsContainer {background-color: #fff; width: 100%}
.exam .examDot {background-color: #414141;}
.exam .relatedExamsWrapper {display: flex; flex-direction: row;}
.exam .examPopupContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000b3;
    /* padding-top: 100px; */
}
.exam .examPopupContainer .examPopup {
    background-color: #fff;
    padding: 20px 10%;
    border-radius: 6px;
    /* display: flex; */
    position: relative;
}
.exam .examPopupRightContent {margin-left: 60px;}
.exam .examName:hover {text-decoration:underline}
.exam .examMenuButton {min-height: 30px; border-radius: 4px; border: solid 1px #e1e1e1; padding: 0px 12px; display: flex; align-items: center; margin-left: 12px; margin-top: 12px; cursor: pointer;}
.exam .examHighlightLabel {color: #e7b712; flex: 1}
.exam .examMenuButton img {height: 18px; width: 18px; filter: none; margin-right: 10px;}
.exam .examCard .examOverviewFilter {display: flex; flex-direction: row}
.exam .examCard .examOverviewFilter > li {float: none; display: inline-block;}
.exam .examCard .examOverviewFilter .item-grade {
    border: 1px #edebeb solid;
    flex: 0 0 calc(16.666% - 29px); /* 6 items per row with some spacing */
    margin: 5px 24px 5px 5px;
    padding: 10px 18px 10px 18px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
    font-weight: bold;
    color: #4c3e3e;
    cursor: pointer;
}

.exam .examCard .examOverviewFilter .item-grade:hover {
    background-color: rgb(167, 223, 241) !important;
}

.exam .examCard .handleBack:hover {
    background-color: rgb(178 222 237) !important;
    color: #fff !important;
}

.exam .viewExam:hover {background-color: rgb(231, 183, 18); color: #fff !important;}

.exam .examCard .examOverviewFilter .item-exam-type {
    border: 1px #edebeb solid;
    margin: 8px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
}

.exam .examCard .examOverviewFilter .item-exam-type:hover {
    background-color: #ffa052 !important;
}

.exam .examCard .examOverviewFilter .item-exam-category {
    border: 1px #edebeb solid;
    margin: 8px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
}

.exam .examCard .examOverviewFilter .item-exam-category:hover {
    background-color: rgb(192 226 233) !important;
}

.exam .examCard .showDown{
    filter: invert(100%) sepia(0%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);
}

.exam .examCard .examOverviewFilter .hightlight {
    background-color: rgb(135, 194, 233);
}
.exam .examText {color: #262626}

.animate-charcter
{
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  /* text-fill-color: transparent; */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
}

.exam .headerExam .titleExam { 
    text-wrap: balance;
}


@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
@media screen and (max-width: 1600px) {
    .exam .examCard .note_send_file {
        width: 52% !important;
    }

}
@media screen and (max-width: 1200px) {
    .exam .headerExam .titleExam { 
        width: 100% !important;
    }
    .exam .headerExam .descriptionExam { 
        width: 90% !important;
    }

    .exam .examCard .examOverviewFilter .item-grade {
        min-width: calc(17% - 10px);
    }

    .exam .examCard .note_send_file {
        width: 70% !important;
    }

}
@media screen and (max-width: 960px) {.logo-large {display:none;}  .logo-small {display:block;} .pc24 {padding:0px 12px;} .h247-header{height:46px;}

    .h247-col{width:100%;}   .h247-body{min-height:auto}    .log-out{display:block;}

    .body-center{padding:0;} .pt24 {padding-top:12px;} .mt24{margin-top:12px;} .ml24{margin-left:12px;}

    .form-add-question{bottom:24px;right:24px;}  .float-btn-question {width:55px;height:55px;} .btn-add {width:49px;height:49px;margin:3px;}
    .check-login{bottom:90px !important;right:24px;} 

    .logo {width:auto;} .control-header {width:auto;position:absolute}  .icon-menu{display:block}
    .search-top {width:100%!important;}  .pt52 {padding-top:46px;}

    .h247-login{width:auto}

    .opacity-show{display:block}

    .menu-user{display:block;} .opacity{display:block;} .opacity-show{opacity:1;}

    .h-signin ul li:nth-child(2){display:none;}

    .pc-option-notifocal{right:0;left:auto;-webkit-transform:translateX(0);position:fixed;width:300px;} .ml14 {margin-left:0%;}  .pd24 {padding:12px;}

    .btn-add-ques{max-width:280px;margin:12px auto;}

    .h247-login li{margin-right:0px;}
    .h-login .avt36{margin-right:0px;}
    .h-login span{display:none}  .h247-login li:hover .pc-option-user{display:none!important;}

    .header-search{left:10px;}
    .search-top .searchButton {height:36px;}
    .exam {
        padding: 46px 0px 25rem !important;
    }
    .exam .searchBox {width: 100%;}
    .exam .filter {width: 100%}
    .exam .relatedExamsWrapper {display: flex; flex-direction: column;align-items: center;}
    .exam .relatedExamsContainer {background-color: #fff; margin-bottom: 10px;width:calc(100% - 48px);}
    .exam .examPopupRightContent {margin-left: 10px;}
    .exam .examCard {background-color: #fff; min-width: 50%; max-width: 100%;}
    .exam .examCard .examOverviewFilter {display: flex; flex-direction: column}
    #cl-red-right{
        left: 26px !important;
    };
}
.exam .examCard .iconSubject {
    filter: invert(77%) sepia(80%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(100%)
}

@media screen and (max-width: 768px) {.search-top .searchButton {width:50px;}
    .searchTerm{font-size:15px;padding:2px;}  .searchButton{font-size:15px;}
    .search-top .searchButton {height:38px;}
    .exam .examCard .examOverviewFilter .item-grade {
        border: 1px #edebeb solid;
        margin: 5px;
        padding: 10px 18px 10px 18px;
        box-sizing: border-box;
        text-align: center;
        border-radius: 8px;
        font-weight: bold;
        color: #4c3e3e;
        font-size: 13px;
        align-self: center;
        min-inline-size: max-content;
        font-size: 12px;
        min-width: calc(25% - 10px);
    }
}

@media screen and (max-width: 640px) {.h-signin ul li img{display:none;} .avt-user img{display:block!important;} .icon-menu img{display:block!important;}  .h-signin ul li a{padding:5px 12px;border-radius:5px;} .h-signin ul li:nth-child(1) a{background-color:#fff;margin-right:6px;box-shadow:0px 0px 5px 1px #2626262b;} .h-signin ul li:nth-child(3) a{background-color:#458ea7;color:#fff;}
    .exam .headerExam .titleExam { 
        font-size: 20px !important;
        width: 100% !important;
        padding: 24px 0 !important;
        display: block;
        width: 410px;
    }
    .exam .headerExam .descriptionExam { 
        font-size: 13px !important;
        width: 90% !important;
        padding: 0px 4% !important;
        display: block;
    }
    .pd40{padding:12px;}
    .exam .headerExam {
        display: block !important;
    }
    .exam .examCard .note_send_file {
        padding: 59px 45px 48px !important;
        font-size: 14px !important;
        width: 78% !important;
    }
    .exam .examCard .note_send_file .text_note {
        margin-top: 5px !important;
    }
}

@media screen and (max-width: 480px) {.search{width:100%} .searchTerm {height:30px;} .searchButton {height:36px;}  .img-userq{display:none!important;} .exam .examCard .loadMore {display: none!important;}
    .exam .examCard .examOverviewFilter .item-grade {
        min-width: calc(33% - 10px);
    }

    .exam .examCard .banner_pc {
        display: none;
    }
    .exam .examCard .banner_mobi {
        display: block !important;
    }
    .exam .examCard #add_file_exam {
        padding: 8px 25px !important;
    }
    .exam .examCard #add_file_exam .text_request_login {
        padding: 20px 0px !important;
    }
    .exam .examCard .select_file {
        font-size: 14px !important;
    }
    .exam .examCard .note_send_file {
        background-image: url(/static/img/send_exam/note_mobi.png) !important;
        padding: 20px 20px 50px !important;
        width: 85% !important;
        margin-top: 25px;
    }
    .exam .examCard .note_send_file .text_note {
        margin-top: 10px !important;
    }
    .exam .examCard .challenge {
        line-height: 36px;
        margin: 20px 0 8px !important;
    }
    .exam .examCard .progress {
        width: 55% !important;
    }
    .exam .examCard .img_gift {
        width: 80% !important;
    }
    .exam .examCard .box_process_gift {
        font-size: 14px !important;
    }
    .exam .examCard .process_gift {
        width: 80% !important;
    }
    .exam .examCard .box_info_challenge {
        background-repeat: round !important;
    }
    .exam .examPopupContainer .examPopup {
        border-radius: 10px !important;
        padding: 20px 4px !important;
        text-wrap: nowrap;
        font-size: 11px !important;
    }
    .exam .examCard .examPopup .box_add_info_exam {
        display: block !important;
        /* text-align: center; */
        text-align: -webkit-center;
    }
    .exam .examCard .examPopup .box_add_info_exam .box_child_add_info1 {
        width: inherit !important;
        margin-bottom: 40px;
    }
    .exam .examCard .examPopup .box_add_info_exam .box_child_add_info1 .un_require1 {
        left: 91px !important;
        color: rgb(145 145 145);
        -webkit-text-stroke-width: none;
    }
    .exam .examCard .examPopup .box_add_info_exam .box_child_add_info2 {
        padding: 8px 56px !important;
    }
    .exam .examCard .examPopup .box_add_info_exam .box_child_add_info2 .un_require2 {
        left: 54px !important;
        color: rgb(145 145 145);
        -webkit-text-stroke-width: none;
    }
    .exam .examCard .examPopup .box_add_info_exam .box_child_add_info1 .btn-select {
        width: 208px !important;
    }
    .exam .examCard .examPopup .box_add_info_exam .box_child_add_info1 .list_book {
        width: 238px !important;
        left: 18px !important;
        text-align: center !important;
    }
    .exam .examCard .examPopup .box_add_info_exam .box_child_add_info2 b {
        font-weight: bold !important;
    }
    .exam .examCard .examPopupContainer {
        padding: 0 !important;
    }
    .exam .examCard .examPopup .box_send {
        margin-top: 50px !important;
    }
    .exam .examCard .examPopup .box_send .box_child_send {
        padding: 10px 20px !important;
    }
    .exam .examCard .examPopup .close-popup {
        width: 20px;
        line-height: 20px;
        padding: 2px;
        background: #959595;
        color: #f8f8f8;
        right: -10px;
        top: -10px;
    }
    .exam .examCard .examPopup .subject_fit {
        text-align: center !important;
    }
    .exam .examCard .examPopup .grade_fit {
        margin-bottom: 20px !important;
    }
}

@media screen and (max-width: 425px) {
    
}

@media screen and (max-width: 420px) {.h-state{float:left;} .form-add-question{bottom:12px;right:12px;} .h-state-blue{margin-top:4px!important;} 
    .header-search{width:62%}
    .check-login{bottom:165px !important;right:24px;} 
    .exam .examCard .loadMore {display: none!important;}
    .exam .examCard .parentSearch {
        width: 96% !important;
    }
    .exam .examCard .examOverviewFilter .item-exam-type {
        align-self: center;
        padding: 5px
    }
    .exam .examCard .boxSearch {
        margin: 0 22px !important;
    }
    .exam .examCard .boxSearch .displaySearch {
        display: none;
    }
    .exam .examCard .eYear,.eSubject {
        width: -webkit-fill-available !important;
        justify-content: center;
    }
}

@media screen and (max-width: 360px) {
    .exam .examCard .boxSearch .displaySearch { display: none !important; }
    .exam .examCard .boxSearch { margin: 0px 23px !important; width: 13px; }
    .exam .examCard .loadMore {display: none!important;}
    .exam .examCard .examPopup {
        padding: 20px 3%;
    }
}