/* ============================================================
   ROOT / CUSTOM PROPERTIES
   ============================================================ */
:root { --vh: 1vh; }


/* ============================================================
   GLOBAL
   ============================================================ */
@media (max-width: 480px) {
    body { font-size: 1.5em; }
}

html, body { overscroll-behavior: none;background-color:#fff!important; }
a:focus,
a:active,
button:focus,
button:active {
    outline: none;
}

.font-bold { font-weight: bold; }
.hidescroll { overflow: hidden; }
.xsmall { font-size: 10px; }
.height30 { height: 30px; }
.height80 { height: 80px; }
.h28 { height: 35px; }
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 25px;
}
.overflowHidden {
    overflow: hidden;
    margin: 0;
    height: 100vh;
    touch-action: none;
    -ms-touch-action: none;
}


/* ============================================================
   PROGRESS / LOADING
   ============================================================ */
progress {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1003;
    display: none;
}
.loadingbg {
    background: url(/images/loading-page.gif) center left no-repeat;
    padding: 5px 20px;
}


/* ============================================================
   BACK TO TOP / FAV BUTTONS
   ============================================================ */
#backtotop {
    position: fixed;
    right: 0;
    bottom: 30px;
    opacity: .6;
    display: none;
}
.myfav {
    position: fixed;
    left: 0;
    bottom: 30px;
    opacity: .6;
    display: none;
}
#pleasewait {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -85px;
    opacity: .8;
    display: none;
    z-index: 2000;
}


/* ============================================================
   TOP NAV BAR
   ============================================================ */
.mynav_bar {
    background-image: url('/images/nav_bg.gif?x');
    background-color: #2B2B2B !important;
    padding: 5px;
    color: #fff;
    height: 25px;
    transition: top 0.25s ease;
}
.mynav_bar a:link,
.mynav_bar a:visited,
.mynav_bar a:active { color: #fff !important; }
.mynav_bar.nav-hide { top: -40px; }

.nav a {
    background-color: #F0F0F0;
    margin: 0 1px;
}
.nav .active a {
    border-top: 2px solid #FF2007 !important;
    font-weight: bold;
    background-color: #E3E3E3 !important;
}
.nav_bar {
    background-color: #F0F0F0;
    border-radius: 5px;
    border: 1px solid #EDEDED;
    border-bottom: 3px solid #ccc;
    margin: 0 2px;
    padding: 5px 0;
}
.ucp_navbar { border-bottom: 4px solid #ccc; }


/* ============================================================
   DROP NAV (MOBILE SLIDE-DOWN MENU)
   ============================================================ */
.dropnav {
    position: fixed;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    transition: 0.5s;
    padding: 0;
    display: none;
    background: rgba(0,0,0,0.6);
    overscroll-behavior: contain;
}
.dropnav a {
    display: block;
    transition: 0.3s;
    padding: 5px 0;
    border-bottom: 1px dotted #E8E8E8;
}
.dropnav a:hover { color: #f1f1f1; }

.allnavX {
    margin-top: -10px;
    padding: 25px 10px 0;
    background-color: #fff;
    max-height: 65vh;
    overflow: auto;
}
.allnavXYZ {
    margin-top: -10px;
    padding: 25px 10px 10px;
    background-color: #fff;
}
.allnav {
    margin-top: -10px;
    padding: 20px 15px;
    min-height: 30vh;
    max-height: 65vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
}


/* ============================================================
   MOBILE MENU BUTTONS
   ============================================================ */
.menunav_cont {
    position: relative;
    top: 0;
    right: 0;
}
.menunav_btn {
    background-image: url('/css/nav_btn.png?a21');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #fff;
    background-color: #000;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    float: left;
    margin-right: 5px;
}
.menunav_btn1 { background-position: -3px -3.5px; }
.menunav_btn2 { background-position: -37px -3px; }
.menunav_btn3 { background-position: -75px -2px; }
.menunav_btn4 { background-position: -111px -2px; }
.menunav_btn5 { background-position: -155px -3px; color: #000 !important; }


/* ============================================================
   FOOTER NAV (MOBILE)
   ============================================================ */
.footnav {
    background-color: #000;
    color: #ccc;
    padding: 10px;
}
.footnav a {
    display: block;
    transition: 0.3s;
    padding: 5px 0;
    text-transform: uppercase;
    border-bottom: 1px dotted #4C4C4C;
    color: #fff;
}
.footnav a:hover { color: #f1f1f1; }


/* ============================================================
   SEPARATOR
   ============================================================ */
.seprator {
    background-image: url('/images/seprator.png');
    background-repeat: no-repeat;
    background-position: center center;
    padding: 8px;
}


/* ============================================================
   BOOTSTRAP PANEL OVERRIDES
   ============================================================ */
.panel-body > .panel {
    border: 0;
    margin: 0;
}


/* ============================================================
   ERROR / FORM HELPERS
   ============================================================ */
.error {
    padding: 0 10px;
    background-color: #FDF22B;
    margin: 10px 0;
    border-radius: 4px;
}


/* ============================================================
   AD NAV / AD LAYOUT
   ============================================================ */
.ad_nav_bar {
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    border-radius: 5px;
    padding: 10px 0 0;
}
.lang_tabs {
    border-radius: 0 0 6px 6px;
    background-color: #E1E6E5;
    padding: 2px 8px;
    margin: -1px 2px 0 0;
    float: right;
}
.lang_tabs_active { background-color: #C5DFA4; }

.icontainer {
    margin: 5px 0;
    padding: 15px 5px 0;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.contact_info {
    border: 0;
    border-radius: 3px;
    padding: 2px;
    white-space: nowrap;
    background-color: rgba(0,1,10,0.1);
}

.tab_box {
    border: 1px solid #E3E3E3;
    border-top-width: 0;
    background-color: #fff;
}
.webpage {
    background-image: url('/images/webpage.png?a');
    background-repeat: no-repeat;
    background-position: 10px top;
}


/* ============================================================
   AD LISTING STYLES
   ============================================================ */
.regular   { background-color: #fff; }
.featured1 { background-color: #CCFFFF; }
.featured2 { background-color: #FFFF99; }
.featured3 { background-color: #FFC68C; }
.featured4 { background-color: #CCFF66; }
.featured5 { background-color: #9999FF; }
.featured6 { background-color: #FFD5AA; }

.adstat0 {
    background-image: url('/images/sample.jpg');
    background-repeat: repeat-x;
}
.border_reg { padding: 10px; }
.border_vip { padding: 10px; }

.fullad {
    line-height: 24px;
    padding: 0;
    overflow: hidden;
    border-right: 1px solid #e1e1e1;
}
.double_in {
    padding: 10px;
    margin: 10px 0 0;
    border: 1px solid #e1e1e1;
    background-image: url('/images/xemtiep1.gif');
    background-repeat: no-repeat;
    background-position: right bottom;
}
.adsmall_in {
    padding: 10px 0 0 10px;
    line-height: 26px;
    border: 1px solid #e1e1e1;
    margin: 10px 0 0;
}
.adsmall_in_mobile {
    padding: 10px 0 0 10px;
    line-height: 26px;
    border-bottom: 1px dotted #ccc;
}
.small_ad_body {
    line-height: 1.8em;
    overflow: hidden;
    cursor: pointer;
    background-image: url('/images/xemtiep1.gif');
    background-repeat: no-repeat;
    background-position: right bottom;
    padding: 0 0 10px;
}
.small_ad_xemtiep_img {
    position: absolute;
    right: 5px;
    bottom: -5px;
    z-index: 1;
}
.viewmore {
    line-height: 1.8em;
    overflow: hidden;
    cursor: pointer;
}
.ads_msg    { height: 75px;  overflow: hidden; }
.ads_msg_lg { height: 225px; overflow: hidden; }
.shop_small_in {
    height: 90px;
    overflow: hidden;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #e1e1e1;
}
.adlocator {
    background-image: url('/images/adlocator_bg.gif');
    background-size: contain;
    background-position: center;
}
.citybg {
    line-height: 35px;
}
.hr { background: url(/images/hr.png) center center no-repeat; }
.rightb {
    background: url(/images/goright.png) center left no-repeat;
    padding: 5px 20px;
    margin: 10px 5px;
}
.vipicon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/images/vip_img.gif');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-right: 2px;
}


/* ============================================================
   VIDEO EMBED
   ============================================================ */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ============================================================
   THUMBNAIL
   ============================================================ */
.thumbnail img { max-height: 50px; }
.content::-webkit-scrollbar { display: none; }


/* ============================================================
   SEARCH INPUTS
   ============================================================ */
.kw1,
.kw2 {
    background-image: url('/images/kw1_search.png?q1');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 28px;
}
input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    content: URL(/images/x.gif);
    cursor: pointer;
    height: 20px;
    width: 20px;
}


/* ============================================================
   AUTOCOMPLETE
   ============================================================ */
.autocomplete-suggestions {
    text-align: left;
    cursor: default;
    border: 1px solid #ccc;
    border-top: 0;
    background: #fff;
    box-shadow: -1px 1px 3px rgba(0,0,0,.1);
    position: absolute;
    display: none;
    z-index: 9999;
    max-height: 254px;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}
.autocomplete-suggestion {
    position: relative;
    padding: 0 .6em;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.02em;
    color: #333;
}
.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
.autocomplete-suggestion.selected { background: #f0f0f0; }


/* ============================================================
   CSS-ONLY TABS
   ============================================================ */
.input_tab { display: none; }
.input_tab + label { display: inline-block; }
.input_tab ~ .tabx { display: none; }

#input_tab1:checked ~ .content1,
#input_tab2:checked ~ .content2,
#input_tab3:checked ~ .content3,
#input_tab4:checked ~ .content4,
#input_tab5:checked ~ .content5 { display: block; }

.input_tab + label {
    background: #EEE;
    padding: 4px 12px;
    border-radius: 4px 4px 0 0;
    position: relative;
    top: 1px;
    cursor: pointer;
}
.input_tab:checked + label {
    background: #D6D6D6;
    border-bottom: 1px solid transparent;
    border-top: 3px solid #FF0000;
}
label:first-of-type { margin-left: 5px; }
.input_tab ~ .tabx {
    padding: 12px;
    border: 1px solid #DDDDDD;
    border-top: 4px solid #DDDDDD;
    margin-top: -5px;
    border-radius: 4px;
    background: #fff;
}


/* ============================================================
   SEARCH BOX PANEL
   ============================================================ */
.padding_sbox { width: 100%; }
.padding_sbox > form { padding: 11px; background: #fff; }
.padding_sbox .collapse { display: inline; }
.tttxx1 {
    display: none;
    border-bottom: 4px solid #3BBF98;
    padding: 5px 11px;
    background: #fff;
}
.padding_sbox > .tttxx1 { display: block !important; }


/* ============================================================
   DROPDOWN SUBMENU
   ============================================================ */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu {
    display: block;
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
}


/* ============================================================
   SCROLLBAR STYLING
   ============================================================ */
div::-webkit-scrollbar { width: 5px; }
div::-webkit-scrollbar-track { background: #f1f1f1; }
div::-webkit-scrollbar-thumb { background: #888; }
div::-webkit-scrollbar-thumb:hover { background: #555; }


/* ============================================================
   RESPONSIVE — TABLET AND UP (min-width: 768px)
   ============================================================ */
@media (min-width: 768px) {
    .ad_full_box {
        height: 430px;
        max-height: 430px;
        overflow: auto;
        padding: 10px;
    }
    .doublead { height: 310px; overflow: hidden; }
    .xsmall { font-size: 14px; }
}

@media (min-width: 800px) {
    .ad_full_box {
        height: 440px;
        max-height: 440px;
        overflow: auto;
        padding: 10px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
    .mynav_bar { height: 35px; }

    .panel:has(.panel) {     border: 0px solid #F6F6F6; }
    .panel-body:has(.panel) {
        padding: 0;
        background-color: #F6F6F6;
    }
    .panel-body:not(:has(.panel)) {
        margin: -10px -2px -10px;
        padding: 20px 10px;
    }

    .modal { padding: 0 !important; height: 100%; }
    .modal-dialog {
        margin: 0;
        width: 100%;
        height: 100%;
        transition: transform 0.2s ease;
    }
    .modal-content {
        height: calc(var(--vh) * 100);
        min-height: calc(var(--vh) * 100);
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 765px) {
    .adsmall_in {
        border-left: 0;
        border-right: 0;
        margin: 0 0 -1px;
    }
}