/*
 * Make Lazy Load — t-block.css
 * PC styles เท่านั้น — Mobile อยู่ใน t-block-mobile.css
 */

/**************** [ t-block wrapper ] ****************/

.t-block {
    display: flex;
    flex-direction: row;
    border: 1px solid #ddd;
    border-radius: 5px;
    max-width: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
}

/**************** [ Tabs Sidebar ] ****************/

.t-tabs-wrapper {
    height: 640px;
    width: 27%;
    background-color: #f3f3f3;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    flex-shrink: 0;
}

/* Custom scrollbar — Webkit */
.t-tabs-wrapper::-webkit-scrollbar {
    width: 10px;
}
.t-tabs-wrapper::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 5px;
}
.t-tabs-wrapper::-webkit-scrollbar-thumb {
    background-color: #d4d4d4;
    border-radius: 5px;
}

/**************** [ Tab Item ] ****************/

.t-tab {
    padding: 9px;
    cursor: pointer;
    font-size: 15px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #e6e5e5;
    border-left: 1px solid #e6e5e5;
    border-right: 1px solid #e6e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.t-title {
    padding-left: 7px;
}

.t-tab:hover {
    background-color: #e9e9e9;
}

/* Active state */
.t-tab.active {
    background-color: #fafafa;
    border-right: 6px solid #B76E79;
}

/* Arrow (hidden on PC, shown on mobile) */
.t-arrow {
    display: none;
}

/**************** [ Depth Colors ] ****************/

.t-tab.depth-0 { color: #333; }
.t-tab.depth-1 { color: #4385FF; }
.t-tab.depth-2 { color: #FFB146; }
.t-tab.depth-3 { color: #73CC30; }
.t-tab.depth-4 { color: #e092e0; }
.t-tab.depth-5 { color: #d80b27; }

/**************** [ PC Content Area ] ****************/

.t-tab-con {
    flex-grow: 1;
    padding: 20px;
    background-color: #fff;
    overflow-y: auto;
    height: 640px;
}

/* Content pane (mobile only — hidden on PC) */
.t-con-pane {
    display: none;
}

/**************** [ Content Typography ] ****************/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**************** [ Loading Indicator ] ****************/

.t-tab-con .loading,
.t-con-pane .loading {
    text-align: center;
    font-style: italic;
    color: #777;
    padding: 20px;
}

/**************** [ Resume Banner ] ****************/

.make-resume-banner {
    display: none;
    align-items: center;
    gap: 10px;
    background-color: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #5d4037;
}

.make-resume-text {
    flex-grow: 1;
}

.make-resume-btn {
    background-color: #B76E79;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}

.make-resume-btn:hover {
    background-color: #a05c66;
}

.make-resume-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #999;
    padding: 0 4px;
    line-height: 1;
}

.make-resume-close:hover {
    color: #333;
}