/*
 * Make BB — make-bb.css
 * รวม CSS ทั้งหมด: Text styles, Exams, Verse
 * Mobile เขียนใหม่ตามพฤติกรรมเดิม
 *
 * หมายเหตุ selector:
 * ใช้ .t-tab-con (กรณีโหลดผ่าน Lazy Load) และ .mbb (กรณีดูเพจตรง ๆ)
 * เพื่อให้ bbcode แสดงผลได้ทั้งสองบริบท
 */

/***************************** [ Font: vintage ] *****************************/

@font-face {
    font-family: 'vintage';
    src: url('fonts/vintage3.woff2') format('woff2'),
         url('fonts/vintage3.woff')  format('woff'),
         url('fonts/vintage3.ttf')   format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/**************** [ Utility ] ****************/

/* ล้าง float — ใช้คั่นระหว่างบล็อกที่ลอย (verse / exam) กับเนื้อหาถัดไป */
.t-tab-con .clear,
.mbb .clear {
    clear: both;
    display: block;
    height: 0;
    font-size: 0;
    line-height: 0;
}

/**************** [ Lazy Menu Styles con ] ****************/

.t-tab-con {
    font-size: 1.2em;
    width: 100%;
    flex: 1;
}

.t-tab-con .dd,
.mbb .dd {
    font-size: 107%;
    text-shadow: 1px 1px 1px #b6b6b6;
    font-weight: bold;
    margin-bottom: 17px;
    text-align: center;
}

.t-tab-con .b1,
.mbb .b1 {
    font-size: 107%;
    font-weight: bold;
    color: #4385FF;
    text-shadow: 1px 1px 1px #92b8ff;
}

.t-tab-con .b2,
.mbb .b2 {
    font-size: 102%;
    font-weight: bold;
    margin-left: 19px;
    color: #FFB146;
    text-shadow: 1px 1px 1px #f8ce94;
}

.t-tab-con .b3,
.mbb .b3 {
    font-size: 102%;
    font-weight: bold;
    margin-left: 37px;
    color: #73CC30;
    text-shadow: 1px 1px 1px #c0f895;
}

.t-tab-con .b4,
.mbb .b4 {
    font-size: 102%;
    font-weight: bold;
    margin-left: 54px;
    color: #e092e0;
    text-shadow: 1px 1px 1px #fdd5fd;
}

.t-tab-con .b5,
.mbb .b5 {
    font-size: 102%;
    font-weight: bold;
    margin-left: 72px;
    color: #f16524;
    text-shadow: 1px 1px 1px #f5dfc1;
}

.t-tab-con .d1,
.mbb .d1 {
    text-indent: 1.5em;
    display: block;
    text-align: left;
}

.t-tab-con .d2,
.mbb .d2 {
    text-indent: 2.6em;
    display: block;
    text-align: left;
}

.t-tab-con .d3,
.mbb .d3 {
    text-indent: 3.7em;
    display: block;
    text-align: left;
}

.t-tab-con .d4,
.mbb .d4 {
    text-indent: 4.8em;
    display: block;
    text-align: left;
}

.t-tab-con .d5,
.mbb .d5 {
    text-indent: 5.9em;
    display: block;
    text-align: left;
}

.t-tab-con .ts,
.mbb .ts {
    text-indent: 1em;
    margin: 7px 0 9px 0;
    color: #13bbee;
    display: block;
}

.t-tab-con .ts1,
.mbb .ts1 {
    text-indent: 1em;
    margin: 7px 0 9px 0;
    color: #13bbee;
}

.t-tab-con .te,
.mbb .te {
    color: #8a8989;
    text-shadow: 1px 1px 1px #acacac;
    display: block;
    text-align: center;
}

/**************** [ Exams con ] ****************/

.t-tab-con .ecb,
.mbb .ecb {
    text-align: center;
    font-weight: bold;
    clear: both;
}

.t-tab-con .ec,
.mbb .ec {
    text-align: center;
}

.t-tab-con .el,
.mbb .el {
    font-family: 'vintage', sans-serif;
    color: #070f18;
    font-size: 7.4em;
    text-align: center;
    margin-top: -120px;
    margin-bottom: -50px;
}

.t-tab-con .e1,
.mbb .e1 {
    text-indent: 5.7%;
}

.t-tab-con .ex,
.mbb .ex {
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 17px;
    overflow: hidden;
    clear: both;
}

.t-tab-con .num,
.mbb .num {
    width: 55px;
    float: left;
    font-weight: bold;
    clear: left;
}

.t-tab-con .ans,
.mbb .ans {
    width: 50px;
    margin-left: 55px;
    float: left;
    font-weight: bold;
    clear: left;
}

.t-tab-con .asu,
.t-tab-con .qsu,
.mbb .asu,
.mbb .qsu {
    width: 50px;
    float: left;
}

.t-tab-con .asb,
.t-tab-con .qsb,
.mbb .asb,
.mbb .qsb {
    width: 50px;
    margin-left: 105px;
    float: left;
    clear: left;
}

.t-tab-con .que1,
.t-tab-con .qsu1,
.t-tab-con .qsb2r,
.t-tab-con .qsb3r,
.mbb .que1,
.mbb .qsu1,
.mbb .qsb2r,
.mbb .qsb3r {
    width: auto;
    font-weight: bold;
}

.t-tab-con .que2l,
.mbb .que2l {
    width: 47%;
    float: left;
    font-weight: bold;
}

.t-tab-con .qsu2l,
.mbb .qsu2l {
    width: 40%;
    float: left;
    font-weight: bold;
}

.t-tab-con .que2r,
.t-tab-con .qub2r,
.t-tab-con .qsu2r,
.t-tab-con .qsu3r,
.t-tab-con .que3r,
.t-tab-con .qub3r,
.mbb .que2r,
.mbb .qub2r,
.mbb .qsu2r,
.mbb .qsu3r,
.mbb .que3r,
.mbb .qub3r {
    width: auto;
    font-weight: bold;
    clear: right;
}

.t-tab-con .que3l,
.t-tab-con .qub3c,
.t-tab-con .que3c,
.mbb .que3l,
.mbb .qub3c,
.mbb .que3c {
    width: 32%;
    float: left;
    font-weight: bold;
}

.t-tab-con .qsu3l,
.t-tab-con .qsu3c,
.t-tab-con .qsb3c,
.mbb .qsu3l,
.mbb .qsu3c,
.mbb .qsb3c {
    width: 27%;
    float: left;
    font-weight: bold;
}

.t-tab-con .que41,
.t-tab-con .que42,
.t-tab-con .que43,
.t-tab-con .que44,
.t-tab-con .qub42,
.t-tab-con .qub43,
.t-tab-con .qub44,
.mbb .que41,
.mbb .que42,
.mbb .que43,
.mbb .que44,
.mbb .qub42,
.mbb .qub43,
.mbb .qub44 {
    width: 23%;
    float: left;
    font-weight: bold;
}

.t-tab-con .qsu41,
.t-tab-con .qsu42,
.t-tab-con .qsu43,
.t-tab-con .qsu44,
.t-tab-con .qsb42,
.t-tab-con .qsb43,
.t-tab-con .qsb44,
.mbb .qsu41,
.mbb .qsu42,
.mbb .qsu43,
.mbb .qsu44,
.mbb .qsb42,
.mbb .qsb43,
.mbb .qsb44 {
    width: 20%;
    float: left;
    font-weight: bold;
}

.t-tab-con .qub1,
.mbb .qub1 {
    width: auto;
    text-indent: 55px;
    font-weight: bold;
    clear: both;
}

.t-tab-con .qsb1,
.mbb .qsb1 {
    width: auto;
    text-indent: 105px;
    font-weight: bold;
    clear: both;
}

.t-tab-con .qub2l,
.mbb .qub2l {
    width: 47%;
    margin-left: 55px;
    float: left;
    font-weight: bold;
}

.t-tab-con .qsb2l,
.mbb .qsb2l {
    width: 40%;
    margin-left: 155px;
    float: left;
    font-weight: bold;
    clear: left;
}

.t-tab-con .qub3l,
.mbb .qub3l {
    width: 32%;
    margin-left: 55px;
    float: left;
    font-weight: bold;
}

.t-tab-con .qsb3l,
.mbb .qsb3l {
    width: 27%;
    margin-left: 155px;
    float: left;
    font-weight: bold;
    clear: left;
}

.t-tab-con .qub41,
.mbb .qub41 {
    width: 23%;
    margin-left: 55px;
    float: left;
    font-weight: bold;
}

.t-tab-con .qsb41,
.mbb .qsb41 {
    width: 20%;
    margin-left: 155px;
    float: left;
    font-weight: bold;
    clear: left;
}

.t-tab-con .ans1,
.t-tab-con .anb2r,
.t-tab-con .ans2r,
.t-tab-con .ans3r,
.t-tab-con .anb3r,
.t-tab-con .asu1,
.t-tab-con .asb2r,
.t-tab-con .asb3r,
.mbb .ans1,
.mbb .anb2r,
.mbb .ans2r,
.mbb .ans3r,
.mbb .anb3r,
.mbb .asu1,
.mbb .asb2r,
.mbb .asb3r {
    width: auto;
}

.t-tab-con .ans2l,
.mbb .ans2l {
    width: 42%;
    float: left;
}

.t-tab-con .ans3l,
.t-tab-con .ans3c,
.t-tab-con .anb3c,
.mbb .ans3l,
.mbb .ans3c,
.mbb .anb3c {
    width: 29%;
    float: left;
}

.t-tab-con .ans41,
.t-tab-con .ans42,
.t-tab-con .ans43,
.t-tab-con .ans44,
.t-tab-con .anb42,
.t-tab-con .anb43,
.t-tab-con .anb44,
.mbb .ans41,
.mbb .ans42,
.mbb .ans43,
.mbb .ans44,
.mbb .anb42,
.mbb .anb43,
.mbb .anb44 {
    width: 22%;
    float: left;
}

.t-tab-con .anb1,
.mbb .anb1 {
    width: auto;
    text-indent: 105px;
    clear: left;
}

.t-tab-con .anb2l,
.mbb .anb2l {
    width: 42%;
    margin-left: 105px;
    float: left;
}

.t-tab-con .anb3l,
.mbb .anb3l {
    width: 29%;
    margin-left: 105px;
    float: left;
}

.t-tab-con .anb41,
.mbb .anb41 {
    width: 22%;
    margin-left: 105px;
    float: left;
}

.t-tab-con .asu2l,
.mbb .asu2l {
    width: 40%;
    float: left;
}

.t-tab-con .asu2r,
.t-tab-con .asu3r,
.mbb .asu2r,
.mbb .asu3r {
    width: auto;
    clear: right;
}

.t-tab-con .asu3l,
.t-tab-con .asu3c,
.t-tab-con .asb3c,
.mbb .asu3l,
.mbb .asu3c,
.mbb .asb3c {
    width: 27%;
    float: left;
}

.t-tab-con .asu41,
.t-tab-con .asu42,
.t-tab-con .asu43,
.t-tab-con .asu44,
.t-tab-con .asb42,
.t-tab-con .asb43,
.t-tab-con .asb44,
.mbb .asu41,
.mbb .asu42,
.mbb .asu43,
.mbb .asu44,
.mbb .asb42,
.mbb .asb43,
.mbb .asb44 {
    width: 20%;
    float: left;
}

.t-tab-con .asb1,
.mbb .asb1 {
    width: auto;
    text-indent: 155px;
    clear: both;
}

.t-tab-con .asb2l,
.mbb .asb2l {
    width: 40%;
    margin-left: 155px;
    float: left;
    clear: left;
}

.t-tab-con .asb3l,
.mbb .asb3l {
    width: 27%;
    margin-left: 155px;
    float: left;
    clear: left;
}

.t-tab-con .asb41,
.mbb .asb41 {
    width: 20%;
    margin-left: 155px;
    float: left;
    clear: left;
}

/**************** [ Verse con ] ****************/

.t-tab-con .ves,
.mbb .ves {
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.t-tab-con .v1s,
.mbb .v1s {
    width: 100%;
    padding-left: 20%;
}

.t-tab-con .v2s,
.mbb .v2s {
    width: 54%;
    float: left;
    padding-left: 15%;
    box-sizing: border-box;
}

.t-tab-con .v3s,
.mbb .v3s {
    width: 36%;
    float: left;
    padding-left: 11%;
    box-sizing: border-box;
}

.t-tab-con .v4s,
.mbb .v4s {
    width: 27%;
    float: left;
    padding-left: 7%;
    box-sizing: border-box;
}

.t-tab-con .v1,
.mbb .v1 {
    width: 100%;
    padding-left: 17%;
}

.t-tab-con .v2l,
.mbb .v2l {
    width: 54%;
    float: left;
    padding-left: 12%;
    box-sizing: border-box;
}

.t-tab-con .v2r,
.mbb .v2r {
    width: 46%;
    float: left;
    box-sizing: border-box;
}

.t-tab-con .v3l,
.mbb .v3l {
    width: 36%;
    float: left;
    padding-left: 7%;
    box-sizing: border-box;
}

.t-tab-con .v3c,
.mbb .v3c {
    width: 32%;
    float: left;
    box-sizing: border-box;
}

.t-tab-con .v3r,
.mbb .v3r {
    width: 32%;
    float: left;
    box-sizing: border-box;
}

.t-tab-con .v4l,
.mbb .v4l {
    width: 27%;
    float: left;
    padding-left: 4%;
    box-sizing: border-box;
}

.t-tab-con .v4c,
.mbb .v4c {
    width: 23%;
    float: left;
    box-sizing: border-box;
}

/***************************** [ Mobile (max-width: 768px) ] *****************************/

@media (max-width: 768px) {

    /**************** [ Exams — mobile ] ****************/

    .t-tab-con .e1,
    .mbb .e1 {
        text-indent: 2.5%;
    }

    .t-tab-con .num,
    .mbb .num {
        width: 55px;
        float: left;
        font-weight: bold;
        clear: left;
    }

    .t-tab-con .ans,
    .mbb .ans {
        width: 40px;
        margin-left: 0px;
        float: left;
        font-weight: bold;
        clear: left;
    }

    .t-tab-con .asu,
    .t-tab-con .qsu,
    .mbb .asu,
    .mbb .qsu {
        width: 50px;
        float: left;
    }

    .t-tab-con .asb,
    .t-tab-con .qsb,
    .mbb .asb,
    .mbb .qsb {
        width: 50px;
        margin-left: 40px;
        float: left;
        clear: left;
    }

    .t-tab-con .qsu1,
    .mbb .qsu1 {
        width: auto;
        font-weight: bold;
    }

    .t-tab-con .qsb2r,
    .t-tab-con .qsb3r,
    .mbb .qsb2r,
    .mbb .qsb3r {
        width: 100%;
        font-weight: bold;
        text-indent: 90px;
        margin-left: 0px;
        clear: both;
    }

    .t-tab-con .qsu2l,
    .mbb .qsu2l {
        width: auto;
        font-weight: bold;
    }

    .t-tab-con .qsu2r,
    .t-tab-con .qsu3r,
    .mbb .qsu2r,
    .mbb .qsu3r {
        width: 100%;
        font-weight: bold;
        text-indent: 90px;
        margin-left: 0px;
        clear: both;
    }

    .t-tab-con .qsu3l,
    .mbb .qsu3l {
        width: auto;
        font-weight: bold;
    }

    .t-tab-con .qsu3c,
    .t-tab-con .qsb3c,
    .mbb .qsu3c,
    .mbb .qsb3c {
        width: 100%;
        font-weight: bold;
        text-indent: 90px;
        margin-left: 0px;
        clear: both;
    }

    .t-tab-con .qsu41,
    .mbb .qsu41 {
        width: auto;
        font-weight: bold;
    }

    .t-tab-con .qsb41,
    .mbb .qsb41 {
        width: 100%;
        text-indent: 90px;
        margin-left: 0px;
        font-weight: bold;
        clear: both;
    }

    .t-tab-con .qsu42,
    .t-tab-con .qsu43,
    .t-tab-con .qsu44,
    .t-tab-con .qsb42,
    .t-tab-con .qsb43,
    .t-tab-con .qsb44,
    .mbb .qsu42,
    .mbb .qsu43,
    .mbb .qsu44,
    .mbb .qsb42,
    .mbb .qsb43,
    .mbb .qsb44 {
        width: 100%;
        font-weight: bold;
        text-indent: 90px;
        margin-left: 0px;
        clear: both;
    }

    .t-tab-con .qsb1,
    .mbb .qsb1 {
        width: auto;
        text-indent: 105px;
        font-weight: bold;
        clear: both;
    }

    .t-tab-con .qsb2l,
    .mbb .qsb2l {
        width: 100%;
        margin-left: 90px;
        font-weight: bold;
    }

    .t-tab-con .qsb3l,
    .mbb .qsb3l {
        width: 100%;
        margin-left: 90px;
        font-weight: bold;
    }

    .t-tab-con .que1,
    .t-tab-con .que2l,
    .t-tab-con .que3l,
    .t-tab-con .que41,
    .mbb .que1,
    .mbb .que2l,
    .mbb .que3l,
    .mbb .que41 {
        width: auto;
        font-weight: bold;
    }

    .t-tab-con .que2r,
    .t-tab-con .que3r,
    .t-tab-con .qub3r,
    .mbb .que2r,
    .mbb .que3r,
    .mbb .qub3r {
        width: 100%;
        text-indent: 55px;
        font-weight: bold;
        clear: both;
    }

    .t-tab-con .qub2r,
    .t-tab-con .qub3c,
    .t-tab-con .que3c,
    .mbb .qub2r,
    .mbb .qub3c,
    .mbb .que3c {
        width: 100%;
        text-indent: 55px;
        font-weight: bold;
    }

    .t-tab-con .qub1,
    .mbb .qub1 {
        width: auto;
        text-indent: 55px;
        margin-left: 0px;
        font-weight: bold;
        clear: both;
    }

    .t-tab-con .que42,
    .t-tab-con .que43,
    .t-tab-con .que44,
    .t-tab-con .qub42,
    .t-tab-con .qub43,
    .t-tab-con .qub44,
    .t-tab-con .qub2l,
    .t-tab-con .qub3l,
    .t-tab-con .qub41,
    .mbb .que42,
    .mbb .que43,
    .mbb .que44,
    .mbb .qub42,
    .mbb .qub43,
    .mbb .qub44,
    .mbb .qub2l,
    .mbb .qub3l,
    .mbb .qub41 {
        width: 100%;
        text-indent: 55px;
        margin-left: 0px;
        font-weight: bold;
    }

    .t-tab-con .ans1,
    .t-tab-con .ans2l,
    .t-tab-con .asu1,
    .t-tab-con .ans3l,
    .t-tab-con .ans41,
    .t-tab-con .asu2l,
    .t-tab-con .asu3l,
    .t-tab-con .asu41,
    .mbb .ans1,
    .mbb .ans2l,
    .mbb .asu1,
    .mbb .ans3l,
    .mbb .ans41,
    .mbb .asu2l,
    .mbb .asu3l,
    .mbb .asu41 {
        width: auto;
    }

    .t-tab-con .asb2r,
    .mbb .asb2r {
        width: 100%;
        text-indent: 90px;
    }

    .t-tab-con .ans2r,
    .t-tab-con .ans3r,
    .t-tab-con .anb2r,
    .mbb .ans2r,
    .mbb .ans3r,
    .mbb .anb2r {
        width: 100%;
        text-indent: 40px;
        margin-left: 0px;
        clear: both;
    }

    .t-tab-con .anb3r,
    .t-tab-con .ans3c,
    .t-tab-con .anb3c,
    .t-tab-con .ans42,
    .t-tab-con .ans43,
    .t-tab-con .ans44,
    .t-tab-con .anb42,
    .t-tab-con .anb43,
    .t-tab-con .anb44,
    .t-tab-con .anb1,
    .t-tab-con .anb2l,
    .t-tab-con .anb3l,
    .t-tab-con .anb41,
    .mbb .anb3r,
    .mbb .ans3c,
    .mbb .anb3c,
    .mbb .ans42,
    .mbb .ans43,
    .mbb .ans44,
    .mbb .anb42,
    .mbb .anb43,
    .mbb .anb44,
    .mbb .anb1,
    .mbb .anb2l,
    .mbb .anb3l,
    .mbb .anb41 {
        width: 100%;
        text-indent: 40px;
        margin-left: 0px;
    }

    .t-tab-con .asu2r,
    .t-tab-con .asu3r,
    .mbb .asu2r,
    .mbb .asu3r {
        width: 100%;
        text-indent: 90px;
        margin-left: 0px;
        clear: both;
    }

    .t-tab-con .asb3r,
    .t-tab-con .asu3c,
    .t-tab-con .asb3c,
    .t-tab-con .asu42,
    .t-tab-con .asu43,
    .t-tab-con .asu44,
    .t-tab-con .asb42,
    .t-tab-con .asb43,
    .t-tab-con .asb44,
    .t-tab-con .asb1,
    .t-tab-con .asb2l,
    .t-tab-con .asb3l,
    .t-tab-con .asb41,
    .mbb .asb3r,
    .mbb .asu3c,
    .mbb .asb3c,
    .mbb .asu42,
    .mbb .asu43,
    .mbb .asu44,
    .mbb .asb42,
    .mbb .asb43,
    .mbb .asb44,
    .mbb .asb1,
    .mbb .asb2l,
    .mbb .asb3l,
    .mbb .asb41 {
        width: 100%;
        text-indent: 90px;
        margin-left: 0px;
    }

    /**************** [ Verse — mobile ] ****************/

    .t-tab-con .v1s,
    .t-tab-con .v2s,
    .t-tab-con .v3s,
    .t-tab-con .v4s,
    .mbb .v1s,
    .mbb .v2s,
    .mbb .v3s,
    .mbb .v4s {
        width: 100%;
        padding-left: 12%;
        float: none;
        margin-right: 0;
    }

    .t-tab-con .v1,
    .t-tab-con .v2l,
    .t-tab-con .v2r,
    .t-tab-con .v3l,
    .t-tab-con .v3c,
    .t-tab-con .v3r,
    .t-tab-con .v4l,
    .t-tab-con .v4c,
    .mbb .v1,
    .mbb .v2l,
    .mbb .v2r,
    .mbb .v3l,
    .mbb .v3c,
    .mbb .v3r,
    .mbb .v4l,
    .mbb .v4c {
        width: 100%;
        padding-left: 5%;
        float: none;
        margin-right: 0;
    }
}