/* =========================================================
   MC dfc FONT
   ========================================================= */

@font-face {
    font-family: "MC dfc Font";
    src: url("../fonts/FC Iconic Light ver 1.10.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "MC dfc Font";
    src: url("../fonts/FC Iconic Regular ver 1.10.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "MC dfc Font";
    src: url("../fonts/FC Iconic Medium ver 1.10.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   MC dfc
   FRONTEND BASE
   ========================================================= */

.mc-dfc-app {
    --mc-font-family: "MC dfc Font", sans-serif;

    --mc-blue: #1D4B8A;
    --mc-green: #B3CC1C;
    --mc-orange: #D2701D;
    --mc-cream: #EDE8E0;
    --mc-grey: #37353A;

    --mc-border: #d9dee7;
    --mc-bg: #f7f9fc;
    --mc-white: #ffffff;

    --bg: #e9f4ff;
    --blue: #1a477f;
    --teal: #00a0a9;
    --red: #ea0c42;
    --pink: #da558d;
    --s-color-1: #1a477f;
    --s-color-2: #00a0a9;
    --s-color-noti: #ea0c42;
    --s-text-1: #191e23;
    --s-text-2: #828897;
    --s-bg-1: #fff;
    --s-bg-2: #f5f5f7;
    --s-border-1: #d2d2d7;
    --s-border-2: #e2e2e7;
    --s-nav-bg: #ffffffbb;
    --s-foot-bg: #1a477f;
    --s-foot-text: #ffffffcc;
    --s-link-1: var(--s-color-1);
    --s-link-2: var(--s-color-2);
    --s-rounded-1: 3px;
    --s-rounded-2: 5px;
    --s-heading-weight: 400;
    --s-shadow-1: 0 .5px 2px rgba(0, 0, 0, .16);
    --s-shadow-2: 0 4px 12px rgba(0, 0, 0, .08);
    --s-gap: 1rem;
    --s-space: 1rem;
    --s-content-width: 100%;
    --s-container-width: 100%;


    font-family: var(--mc-font-family);
    box-sizing: border-box;
    color: var(--mc-grey);
    line-height: 1.6;
}

/* =========================================================
   BOX SIZING
   ========================================================= */

.mc-dfc-app *,
.mc-dfc-app *::before,
.mc-dfc-app *::after {
    box-sizing: border-box;
    font-family: inherit;
}

/* =========================================================
   FORM ELEMENTS
   ========================================================= */

.mc-dfc-app input,
.mc-dfc-app textarea,
.mc-dfc-app select,
.mc-dfc-app button {
    font-family: "MC dfc Font", sans-serif !important;
}


/*==================================================================*/
.mc-dfc-divider{
    height: 1px;
    background: rgba(55,53,58,.08);
    margin: 14px 0 60px 0;

    /*border: #06C755 solid 1px;*/
}

/* ==========================================
 * Container
 * ========================================== */

.mc-dfc-container {
    max-width: 1200px;
    margin: auto;
    padding: 60px 0px;
    
    //*border: #B3CC1C solid 1px;*/
}


/* ==========================================
 * Card
 * ========================================== */

.mc-dfc-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
    margin-bottom: 60px;

    /*border: #B3CC1C solid 1px;*/
}


/* ==========================================
 * Heading
 * ========================================== */

.mc-dfc-card h2 {
    margin: 0 0 30px;
    color: var(--mc-blue);
    font-size: 28px;
    font-weight: 700;
    border-bottom: 3px solid var(--mc-green);
    padding-bottom: 12px;

    //*border: #B3CC1C solid 1px;*/
}


/* ==========================================
 * Form
 * ========================================== */

.mc-dfc-form {
    display: flex;
    flex-direction: column;
    gap: 20px;

    /*border: #B3CC1C solid 1px;*/
}


/* ==========================================
 * Field
 * ========================================== */

.mc-field {
    margin-bottom: 22px;

    /*border: #d63638 solid 1px;*/
}

.mc-field label {
    display: block;
    margin-bottom: 8px;
    line-height: 24px;
    font-weight: 600;
    color: var(--mc-blue);

    /*border: #1D4B8A solid 1px;*/
}


/* ==========================================
 * Input / Text / Date / Select / Textarea
 * ========================================== */

.mc-dfc-form input,
.mc-dfc-form textarea,
.mc-dfc-form select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    background: #fff;
    transition: .25s;
    box-sizing: border-box;

    /*border: #D2701D solid 1px;*/
}

.mc-dfc-form input:focus,
.mc-dfc-form textarea:focus,
.mc-dfc-form select:focus {
    outline: none;
    border-color: var(--mc-blue);
    box-shadow: 0 0 0 3px rgba(29, 75, 138, .15);

    /*border: #D2701D solid 1px;*/
}


/* Text */

.mc-field input[type="text"] {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: rgba(255, 255, 255, .85);
    color: var(--mc-grey);
    box-sizing: border-box;

    /*border: #D2701D solid 1px;*/
}


/* Date */

.mc-field input[type="date"] {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: rgba(255, 255, 255, .85);
    color: var(--mc-grey);
    box-sizing: border-box;
}


/* Textarea */

.mc-dfc-form textarea {
    min-height: 140px;
    resize: vertical;
}


/* Select */

.mc-field select {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: rgba(255, 255, 255, .85);
    color: var(--mc-grey);
    box-sizing: border-box;
    cursor: pointer;
}

/* ==========================================
 * Button
 * ========================================== */

.mc-btn-primary-dfc {
    display: inline-block;
    background: #10af10;
    color: #fff;
    padding: 14px 30px;
    /*border: none;*/
    border-radius: 40px;
    /*cursor: pointer;*/
    /*transition: .25s;*/
    font-size: 1.2em;
    font-weight: 400;
    text-decoration: none;
    transition: .2s;
}

.mc-btn-primary-dfc:hover {
    background: #17c017;
    color: #fff;
    /*border: var(--mc-blue) solid 1px;*/

}

.mc-btn-secondary-dfc {
    display: inline-block;
    margin-left: 10px;
    padding: 14px 30px;
    border-radius: 40px;
    background: #f3f3f3;
    color: #333;
    font-size: 1.2em;
    font-weight: 400;
    text-decoration: none;
    transition: .2s;
}

.mc-btn-secondary-dfc:hover {
    background: #ddd;
    /*border: #ddd solid 1px;*/
}

.mc-btn-edit-dfc {
    display: inline-block;
    background: var(--mc-orange);
    color: #fff;
    padding: 14px 30px;
    /*border: none;*/
    border-radius: 40px;
    /*cursor: pointer;*/
    /*transition: .25s;*/
    font-size: 1.2em;
    font-weight: 400;
    text-decoration: none;
    transition: .2s;
}

.mc-btn-edit-dfc:hover {
    background: #bb6d07;
    color: #fff;
    /*border: var(--mc-blue) solid 1px;*/

}

/* ==========================================
 * Button TCAS
 * ========================================== */

.mc-btn-tcas-dfc-file {
    display: flex;
    justify-content: center;
    color: var(--mc-blue);
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: .2s;
}

.mc-btn-tcas-dfc-file:hover {
    color: var(--mc-blue);
    border-color: var(--mc-blue);
    background: rgba(29, 92, 210, 0.05);

    /*border: var(--mc-blue) solid 1px;*/
}


/* ==========================================
 * Button File And Image
 * ========================================== */

.mc-btn-primary-dfc-file {
    display: inline-block;
    color: var(--mc-blue);
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: .2s;
}

.mc-btn-primary-dfc-file:hover {
    color: var(--mc-blue);
    border-color: var(--mc-blue);
    background: rgba(29, 92, 210, 0.05);

    /*border: var(--mc-blue) solid 1px;*/
}

.mc-btn-secondary-dfc-file {
    display: inline-block;
    color: #993d3e;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: .2s;
}

.mc-btn-secondary-dfc-file:hover {
    color: #d63638;
    border-color: #d63638;
    background: rgba(210, 29, 29, 0.05);

    /*border: #ddd solid 1px;*/
}


/* ==========================================
 * Button Add Repreater List
 * ========================================== */

.mc-btn-primary-add-repreater {
    display: inline-block;
    background: var(--mc-orange);
    color: #fff;
    padding: 0px 12px 2px 12px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: .25s;
    font-size: 1.5em;
    font-weight: 600;
    text-decoration: none;
    transition: .2s;
    margin-left: 5px;
}

.mc-btn-primary-add-repreater:hover {
    background: #bb6d07;
    color: #fff;
    /*border: var(--mc-blue) solid 1px;*/

}

/* ==========================================
 * Button Delete List
 * ========================================== */

.mc-btn-primary-delete-repreater {
    display: inline-block;
    background: #d63638;
    color: #fff;
    padding: 2px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: .25s;
    /*font-size: 1.5em;*/
    font-weight: 300;
    text-decoration: none;
    transition: .2s;
    margin-left: 5px;
}

.mc-btn-primary-delete-repreater:hover {
    background: #d63638;
    color: #fff;
    /*border: var(--mc-blue) solid 1px;*/

}

/* ==========================================
 * Table
 * ========================================== */

.mc-dfc-table {
    width: 100%;
    border-collapse: collapse;
}

.mc-dfc-table th {
    background: var(--mc-blue);
    color: #fff;
    padding: 14px;
    text-align: left;
}

.mc-dfc-table td {
    padding: 14px;
    border-bottom: 1px solid #eee;
}

.mc-dfc-table tr:hover {
    background: #fafafa;
}


/* ==========================================
 * List
 * ========================================== */

.mc-dfc-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mc-dfc-item {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
    transition: .25s;
}

.mc-dfc-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
}

.mc-dfc-item h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.5;
}

.mc-dfc-item h3 a {
    color: var(--mc-blue);
    text-decoration: none;
    font-weight: 700;
}

.mc-dfc-item h3 a:hover {
    color: var(--mc-green);
}


/* ==========================================
 * List Actions
 * ========================================== */

.mc-dfc-actions {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mc-dfc-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: 10px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: .25s;
}

.mc-dfc-actions a:nth-child(1) {
    background: var(--mc-blue);
    color: #fff;
}

.mc-dfc-actions a:nth-child(2) {
    background: var(--mc-green);
    color: var(--mc-grey);
}

.mc-dfc-actions a:nth-child(3) {
    background: #d63638;
    color: #fff;
}

.mc-dfc-actions a:hover {
    transform: translateY(-2px);
    opacity: .9;
}


/* ==========================================
 * Checkbox
 * ========================================== */

.mc-dfc-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.mc-dfc-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: .2s;

    /*border: #d63638 solid 1px;*/
}

.mc-dfc-checkbox:hover {
    border-color: var(--mc-blue);
    background: rgba(29, 75, 138, .05);
}

.mc-dfc-checkbox input {
    width: auto;
    margin: 0;
    accent-color: var(--mc-blue);
}

.mc-dfc-checkbox span {
    color: var(--mc-grey);
    font-size: 15px;
}


/* ==========================================
 * Radio
 * ========================================== */

.mc-dfc-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    /*margin-top: 10px;*/

    /*border: #d63638 solid 1px;*/
}

.mc-dfc-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: .2s;

    /*border: #d63638 solid 1px;*/
}

.mc-dfc-radio:hover {
    border-color: var(--mc-orange);
    background: rgba(210, 112, 29, .05);
}

.mc-dfc-radio input {
    width: auto;
    margin: 0;
    accent-color: var(--mc-orange);
}

.mc-dfc-radio span {
    color: var(--mc-grey);
    font-size: 15px;
}


/* ==========================================
 * View
 * ========================================== */

.mc-dfc-view-item {
    display: grid;
    grid-template-columns: auto;
    gap: 10px;
    align-items: start;
    padding: 26px 0;
    border-bottom: 1px solid #eee;

    /*border: #B3CC1C solid 1px;*/
}

.mc-dfc-view-item:last-child {
    border-bottom: none;

    /*border: #cc1c1c solid 1px;*/
}

.mc-dfc-view-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--mc-blue);

    /*border: #1cccc0 solid 1px*/
}

.mc-dfc-view-value {
    font-size: 16px;
    color: var(--mc-grey);
    line-height: 1.8;
    word-break: break-word;

    /*border: #1f2bd4 solid 1px;*/
}


/* ==========================================
 * NORMAL VIEW
 * ========================================== */

.mc-dfc-normal-view-value {
    display: inline-flex;
    align-items: center;
    /*gap: 8px;*/
    padding: 9px 26px;
    border-radius: 30px;
    background: rgba(127, 132, 139, 0.08);
    color: var(--mc-grey);
    font-weight: 400;
    text-decoration: none;

    /*border: #1f2bd4 solid 1px;*/
}

.mc-dfc-normal-view-value:hover {
    background: var(--mc-blue);
    background: rgba(98, 122, 154, 0.08);

    /*border: #1f2bd4 solid 1px;*/
}

/* ==========================================
 * Form Repeater
 * ========================================== */

.mc-dfc-repeater {
    margin-top: 60px;

    /*border: #1f2bd4 solid 1px;*/
}

.mc-dfc-repeater-title {
    margin-bottom: 20px;
    color: var(--mc-blue);
    font-size: 22px;
    font-weight: 700;

    /*border: #1f2bd4 solid 1px;*/
}

.mc-dfc-repeater-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mc-dfc-repeater-item {
    margin-bottom: 24px;
    padding: 24px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(55, 53, 58, .08);
    border-radius: 18px;
}

.mc-dfc-repeater-item-header {
    margin-bottom: 14px;
}

.mc-dfc-repeater-header {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(179, 204, 28, .35);
    color: var(--mc-blue);
    font-size: 18px;
    font-weight: 700;
}

.mc-dfc-repeater-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ==========================================
 * View Repeater
 * ========================================== */

.mc-dfc-view-repeater {
    margin-top: 60px;

    /*border: #1f2bd4 solid 1px;*/
}

.mc-dfc-view-repeater-title {
    margin-bottom: 20px;
    color: var(--mc-blue);
    font-size: 22px;
    font-weight: 700;

    /*border: #1f2bd4 solid 1px;*/
}

.mc-dfc-view-repeater-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mc-dfc-view-repeater-item {
    margin-bottom: 24px;
    padding: 24px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(55, 53, 58, .08);
    border-radius: 18px;
}

.mc-dfc-view-repeater-header {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(179, 204, 28, .35);
    color: var(--mc-blue);
    font-size: 18px;
    font-weight: 700;
}

.mc-dfc-view-repeater-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ==========================================
 * Repeater Checkbox
 * ========================================== */

.mc-dfc-view-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mc-dfc-view-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(179, 204, 28, .15);
    color: var(--mc-grey);
    font-size: 14px;
    font-weight: 600;
}


/* ==========================================
 * File Field
 * ========================================== */

.mc-dfc-file-field {
    margin-top: 10px;

    //*border: #1f2bd4 solid 1px;*/
}

.mc-dfc-file-preview {
    margin-top: 12px;

    //*border: #1f2bd4 solid 1px;*/
}

.mc-dfc-file-preview a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(29, 75, 138, .08);
    color: var(--mc-blue);
    text-decoration: none;
}

.mc-dfc-remove-file,
.mc-dfc-remove-image {
    margin-left: 8px;
}


/* ==========================================
 * View File
 * ========================================== */

.mc-dfc-view-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 26px;
    border-radius: 30px;
    background: rgba(29, 75, 138, .08);
    color: var(--mc-blue);
    font-weight: 600;
    text-decoration: none;

    //*border: #1f2bd4 solid 1px;*/
}

.mc-dfc-view-file:hover {
    background: var(--mc-blue);
    color: #fff;

    //*border: #1f2bd4 solid 1px;*/
}


/* ==========================================
 * File Information
 * ========================================== */

.mc-dfc-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;

    //*border: #1f2bd4 solid 1px;*/
}

.mc-dfc-file-icon {
    font-size: 24px;
    line-height: 1;
}

.mc-dfc-file-name {
    font-weight: 500;
    word-break: break-word;

    //*border: #1f2bd4 solid 1px;*/
}

.mc-dfc-file-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 10px;
    background: var(--mc-blue);
    color: #fff;
    transition: transform .2s ease, opacity .2s ease;
}

.mc-dfc-file-open:hover {
    color: #fff;
    opacity: .9;
    transform: translateY(-1px);
}


/* ==========================================
 * Image Field
 * ========================================== */

.mc-dfc-image-field {
    margin-top: 10px;
}

.mc-dfc-image-preview {
    margin-bottom: 15px;
}

.mc-dfc-image-preview img {
    display: block;
    max-width: 320px;
    max-height: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .08);
}

.mc-dfc-image-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ==========================================
 * View Image
 * ========================================== */

.mc-dfc-view-image-wrapper {
    margin-top: 4px;
}

.mc-dfc-view-image {
    display: block;
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
}


/* ==========================================
 * Text Field
 * ========================================== */

/*
 * ใช้สำหรับ text field โดยเฉพาะ
 * ไม่กระทบ input ของ checkbox / radio / file / image
 */

.mc-dfc-text-field {
    width: 100%;
    box-sizing: border-box;
}

.mc-dfc-text-field input[type="text"] {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: rgba(255, 255, 255, .85);
    color: var(--mc-grey);
    box-sizing: border-box;
    transition: .25s;
}

.mc-dfc-text-field input[type="text"]:focus {
    outline: none;
    border-color: var(--mc-blue);
    box-shadow: 0 0 0 3px rgba(29, 75, 138, .12);
}


/* ==========================================
 * Responsive
 * ========================================== */

@media (max-width: 768px) {

    .mc-dfc-container {
        padding: 15px;
    }

    .mc-dfc-card {
        padding: 20px;
    }

    .mc-dfc-view-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mc-dfc-view-repeater-item {
        padding: 18px;
    }

    .mc-dfc-view-label {
        font-size: 14px;
    }

    .mc-dfc-view-value {
        font-size: 15px;
    }

    .mc-dfc-view-image {
        max-height: 240px;
    }

    .mc-btn-secondary {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* =========================================================
 * dfc Login
 * ========================================================= */

.mc-dfc-login-page {
    width: 100%;
    min-height: 70vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 60px 20px;
}


.mc-dfc-login-card {
    width: 100%;
    max-width: 460px;

    padding: 40px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.82),
            rgba(255, 255, 255, 0.58)
        );

    border: 1px solid rgba(255, 255, 255, 0.65);

    border-radius: 24px;

    box-shadow:
        0 20px 60px rgba(55, 53, 58, 0.12);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* ---------------------------------------------------------
 * Header
 * --------------------------------------------------------- */

.mc-dfc-login-header {
    text-align: center;

    margin-bottom: 30px;
}


.mc-dfc-login-header h2 {
    margin: 0 0 10px;

    color: #1D4B8A;

    font-size: 28px;
    font-weight: 700;
}


.mc-dfc-login-header p {
    margin: 0;

    color: #37353A;

    font-size: 14px;
    line-height: 1.7;
}


/* ---------------------------------------------------------
 * Form
 * --------------------------------------------------------- */

.mc-dfc-login-form form {
    margin: 0;
}


.mc-dfc-login-form label {
    display: block;

    margin-bottom: 8px;

    color: #37353A;

    font-size: 14px;
    font-weight: 600;
}


.mc-dfc-login-form input[type="text"],
.mc-dfc-login-form input[type="password"] {
    width: 100%;

    min-height: 48px;

    padding: 12px 15px;

    border: 1px solid rgba(55, 53, 58, 0.15);

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.75);

    color: #37353A;

    font-size: 15px;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.mc-dfc-login-form input[type="text"]:focus,
.mc-dfc-login-form input[type="password"]:focus {
    outline: none;

    border-color: #1D4B8A;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(29, 75, 138, 0.10);
}


/* ---------------------------------------------------------
 * Username / Password spacing
 * --------------------------------------------------------- */

.mc-dfc-login-form p {
    margin: 0 0 18px;
}


/* ---------------------------------------------------------
 * Remember
 * --------------------------------------------------------- */

.mc-dfc-login-form .login-remember {
    margin-bottom: 20px;
}


.mc-dfc-login-form .login-remember label {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    font-weight: 400;

    cursor: pointer;
}


.mc-dfc-login-form .login-remember input {
    width: 16px;
    height: 16px;

    margin: 0;
}


/* ---------------------------------------------------------
 * Submit
 * --------------------------------------------------------- */

.mc-dfc-login-form input[type="submit"] {
    width: 100%;

    min-height: 50px;

    padding: 12px 20px;

    border: 0;

    border-radius: 12px;

    background: #1D4B8A;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


.mc-dfc-login-form input[type="submit"]:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(29, 75, 138, 0.22);
}


.mc-dfc-login-form input[type="submit"]:active {
    transform: translateY(0);
}


/* ---------------------------------------------------------
 * Login links
 * --------------------------------------------------------- */

.mc-dfc-login-form .login-lost-password {
    margin-top: 18px;

    text-align: center;
}


.mc-dfc-login-form a {
    color: #1D4B8A;

    text-decoration: none;

    transition: color 0.2s ease;
}


.mc-dfc-login-form a:hover {
    color: #D2701D;

    text-decoration: underline;
}


/* ---------------------------------------------------------
 * Mobile
 * --------------------------------------------------------- */

@media (max-width: 600px) {

    .mc-dfc-login-page {
        min-height: auto;

        padding: 40px 15px;
    }


    .mc-dfc-login-card {
        padding: 30px 22px;

        border-radius: 20px;
    }


    .mc-dfc-login-header h2 {
        font-size: 24px;
    }

}

.mc-location-field {
    position: relative;
}

.mc-location-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    z-index: 9999;

    background: #fff;

    border: 1px solid #ddd;
    border-radius: 8px;

    margin-top: 4px;

    max-height: 240px;

    overflow-y: auto;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.12);
}

.mc-location-result {
    display: block;

    width: 100%;

    border: 0;

    background: #fff;

    text-align: left;

    padding: 10px 14px;

    cursor: pointer;

    font-size: 15px;
}

.mc-location-result:hover {
    background: #f5f5f5;
}

.mc-btn-primary-dfc.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto;
}

/* =========================================================
   dfc SEARCH
   ========================================================= */

.mc-dfc-search-card {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   SEARCH HEADER
   ========================================================= */

.mc-dfc-search-header {
    text-align: center;
    margin-bottom: 32px;
}

.mc-dfc-search-header h2 {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 700;
}

.mc-dfc-search-header p {
    margin: 0;
    color: #666;
    line-height: 1.7;
}


/* =========================================================
   SEARCH FORM
   ========================================================= */

.mc-dfc-search-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* =========================================================
   FIELD
   ========================================================= */

.mc-dfc-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mc-dfc-field label {
    font-size: 15px;
    font-weight: 600;
}

.mc-dfc-field input {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;

    border: 1px solid rgba(55, 53, 58, 0.15);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.65);

    font-size: 16px;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.mc-dfc-field input:focus {
    outline: none;

    border-color: #1D4B8A;

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(29, 75, 138, 0.10);
}


/* =========================================================
   ACTION
   ========================================================= */

.mc-dfc-search-actions {
    display: flex;
    justify-content: center;
}

.mc-dfc-search-actions button {
    min-width: 180px;
}


/* =========================================================
   ERROR
   ========================================================= */

.mc-dfc-search-error {
    margin-bottom: 24px;
    padding: 14px 18px;

    border-radius: 12px;

    background: rgba(210, 112, 29, 0.10);
    border: 1px solid rgba(210, 112, 29, 0.25);

    color: #9a4f0e;

    font-size: 15px;
    line-height: 1.6;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .mc-dfc-search-card {
        width: 100%;
    }

    .mc-dfc-search-header h2 {
        font-size: 24px;
    }

    .mc-dfc-search-actions button {
        width: 100%;
    }

}

/* =========================================================
   TCAS TABLE
   ========================================================= */

.t-intro h1 {
    font-weight: 700;
    z-index: 2;
    position: relative;
    margin-bottom: 20px
}

.t-intro h1 span {
    display: block
}

.t-intro .th {
    font-size: .75em;
    padding-top: 10px;
    font-weight: 400
}

.t-intro .search {
    background-image: url(/img/search.webp);
    background-size: auto 100%;
    height: 240px;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 20px;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: -40px
}

.t-intro .search a {
    color: #fff;
    font-size: .875em;
    justify-content: center
}

.t-intro .search #search {
    border: none;
    margin: 0 auto
}

.t-intro .input-search {
    margin: 0 auto
}

.t-intro .input-search .i-search {
    right: 11px;
    top: 11px
}

.t-intro .arrow {
    width: 18px;
    line-height: 1
}

@media(min-width: 768px) {
    .t-intro .hero {
        padding-right:360px
    }

    .t-intro .banner {
        position: absolute;
        right: 10px;
        top: 90px;
        width: 360px;
        z-index: 1
    }
}

@media(min-width: 900px) {
    .t-intro .banner {
        width:400px;
        max-width: unset
    }

    .t-intro .search {
        background-size: 100% auto;
        height: 310px
    }
}

@media(min-width: 1024px) {
    .t-intro .logo {
        width:180px
    }

    .t-intro .hero {
        padding: 120px 40px
    }

    .t-intro .banner {
        top: 220px;
        right: 140px;
        width: 38%
    }
}

@media(min-width: 1200px) {
    .t-intro .hero {
        padding:120px 40px 110px
    }

    .t-intro .banner {
        top: 180px;
        right: 160px
    }
}

@media(min-width: 1400px) {
    .t-intro {
        background-position:top -20px right
    }

    .t-intro .search {
        background-position: top center
    }
}

@media(min-width: 1800px) {
    .t-intro {
        background-position:top -50px right
    }

    .t-intro .search {
        background-position: center center
    }
}

.updated {
    background: #ea0c42;
    font-weight: 700;
    font-size: .75rem;
    color: #fff;
    padding: 5px 6px 4px;
    border-radius: 5px;
    margin-left: 6px;
    vertical-align: .6em;
    display: inline-block
}

.t-sec {
    padding: 24px 0;
    background-color: var(--bg)
}

@media(min-width: 1024px) {
    .t-sec {
        padding:50px 0
    }
}

.t-sec hr {
    border-top: 1px solid #d9e6f3;
    border-bottom: 1px solid #f6faff
}

.mc-dfc-app .t-title {
    font-weight: 700
}

.t-title+h3 {
    font-size: 1.25rem;
    margin: -10px 0 var(--s-gap)
}

.t-title.update {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem
}

.mc-dfc-app .t-title-gap {
    padding-bottom: 10px;
}

.t-sec-cal sup {
    background-color: #ea0c42;
    color: #fff;
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    margin: 0 4px;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    transform: translateY(-2px)
}

.color-red {
    color: var(--red)
}

.t-rounds-m {
    text-align: left;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: var(--s-shadow-2)
}

.t-rounds-m h2 {
    font-size: 1.125em;
    font-weight: 700;
    color: #fff;
    background-color: #1a477f;
    padding: 13px 16px;
    margin: 0
}

.t-rounds-m ul {
    padding-left: 0;
    margin: 0
}

.t-rounds-m li {
    list-style: none
}

.t-rounds-m li li {
    display: flex;
    align-items: flex-start;
    gap: 20px
}

.t-rounds-m li li svg {
    margin-top: 4px
}

.t-rounds-m li li p {
    margin: 0
}

.t-rounds-m li li:not(:last-child) {
    margin-bottom: 10px
}

.t-rounds-m .round>span {
    font-size: .8em;
    font-weight: 700;
    position: absolute;
    height: 65px;
    width: 48px;
    text-align: center;
    line-height: 1.2;
    flex-direction: column;
    display: flex;
    gap: 2px;
    justify-content: center
}

.t-rounds-m .round>span strong {
    display: block;
    font-size: 1.6em
}

.t-rounds-m .round h3 {
    margin: 0;
    color: #fff;
    height: 65px;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1.4em;
    padding: 10px 10px 10px 66px;
    cursor: pointer;
    position: relative
}

.t-rounds-m .round h3:after {
    content: "›";
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 12px;
    top: 17px;
    font-size: 32px;
    width: 32px;
    height: 32px;
    font-weight: 700;
    /*font-family: tt,sans-serif;*/
    transform: rotate(90deg);
    opacity: .8
}

.t-rounds-m .round ul {
    background-color: #fff;
    padding: 0 20px;
    overflow: hidden;
    max-height: 0;
    transition: .5s ease-in-out
}

.t-rounds-m .round.active ul {
    padding-top: 20px;
    padding-bottom: 20px;
    max-height: 500px
}

.t-rounds-m .round.active h3 {
    font-weight: 700
}

.t-rounds-m .round.active h3:after {
    transform: rotate(-90deg);
    right: 17px
}

.t-rounds-m .round.active.round-4>span {
    border-radius: 0
}

.t-rounds-m .round-1 {
    background-color: #ffb600
}

.t-rounds-m .round-1>span {
    color: #ffb600;
    background-color: #fff8ea
}

.t-rounds-m .round-2 {
    background-color: #f26b55
}

.t-rounds-m .round-2>span {
    color: #f26b55;
    background-color: #ffefef
}

.t-rounds-m .round-3 {
    background-color: #00a0a9
}

.t-rounds-m .round-3>span {
    color: #00a0a9;
    background-color: #eefeff
}

.t-rounds-m .round-4 {
    background-color: #00709a
}

.t-rounds-m .round-4>span {
    color: #00709a;
    background-color: #eff6ff;
    border-radius: 0 0 0 5px
}

@media(min-width: 1024px) {
    .mc-dfc-app .t-rounds-d {
        display:block;
        /*font-family: kvl,sans-serif;*/
        font-size: 1em
    }

    .mc-dfc-app .t-rounds-d table {
        width: 100%;
        background-color: #fff;
        box-shadow: var(--s-shadow-2);
        margin: 0;
        border-spacing: 0;
        border-radius: 12px;
        overflow: hidden
    }

    .mc-dfc-app .t-rounds-d thead {
        background-color: #1a477f;
        color: #fff
    }

    .mc-dfc-app .t-rounds-d th {
        text-align: center;
        padding: 12px 6px
    }

    .mc-dfc-app .t-rounds-d tr {
        background: inherit
    }

    .mc-dfc-app .t-rounds-d tr:last-child td {
        border-bottom: none
    }

    .mc-dfc-app .t-rounds-d tbody tr {
        height: 70px
    }

    .mc-dfc-app .t-rounds-d tr:hover {
        background: inherit
    }

    .mc-dfc-app .t-rounds-d td {
        vertical-align: middle;
        text-align: center;
        padding: 6px;
        line-height: 1.4;
        border-bottom: 1px solid #d5d5d7
    }

    .mc-dfc-app .t-rounds-d .c1 {
        font-weight: 700;
        font-size: 1.25em;
        border-bottom: none;
        width: 58px
    }

    .mc-dfc-app .t-rounds-d .c2 {
        color: #fff;
        font-weight: 700;
        border-bottom: none
    }

    .mc-dfc-app .t-rounds-d .round-1 .c1 {
        background-color: #fff8ea;
        color: #ffb600
    }

    .mc-dfc-app .t-rounds-d .round-1 .c2 {
        background-color: #ffb600
    }

    .mc-dfc-app .t-rounds-d .round-1 .c6>div {
        width: max-content;
        margin: 0 auto;
        text-align: left
    }

    .mc-dfc-app .t-rounds-d .round-2 .c1 {
        background-color: #ffefef;
        color: #f26b55
    }

    .mc-dfc-app .t-rounds-d .round-2 .c2 {
        background-color: #f26b55
    }

    .mc-dfc-app .t-rounds-d .round-3 .c1 {
        background-color: #eefeff;
        color: #00a0a9
    }

    .mc-dfc-app .t-rounds-d .round-3 .c2 {
        background-color: #00a0a9
    }

    .mc-dfc-app .t-rounds-d .round-3 .c4>div {
        width: max-content;
        margin: 0 auto;
        text-align: left
    }

    .mc-dfc-app .t-rounds-d .round-4 .c1 {
        background-color: #eff6ff;
        color: #00709a
    }

    .mc-dfc-app .t-rounds-d .round-4 .c2 {
        background-color: #00709a
    }

    .mc-dfc-app .t-rounds-d .round-4 .c4>div,.t-rounds-d .round-4 .c5>div {
        width: max-content;
        margin: 0 auto;
        text-align: left
    }

    .mc-dfc-app .t-rounds-d .text-left {
        width: max-content;
        margin: 0 auto
    }
}

.mc-dfc-app strong.num {
    background-color: #1a477f;
    color: #fff;
    font-size: 14px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    margin-right: 6px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    vertical-align: 3px
}

.t-remark {
    display: flex;
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px
}

.t-remark .col-left {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #da558d;
    width: 58px;
    min-width: 58px;
    min-height: 116px;
    color: #fff;
    border-radius: 5px 0 0 5px
}

.t-remark .col-left:after {
    content: "";
    position: absolute;
    top: calc(50% - 16px);
    right: -10px;
    width: 0px;
    height: 0px;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 11px solid #da558d;
    z-index: 1
}

.t-remark .col-left strong {
    transform: rotate(-90deg)
}

.t-remark .col-right {
    padding: 12px 12px 12px 30px;
    background-color: #ffeef5;
    border-radius: 0 5px 5px 0;
    text-align: left;
    border: 2px solid #da558d;
    border-left: none;
    margin: 0;
    flex: 1
}

.t-remark .col-right li {
    list-style: none;
    padding: 2px 0 2px 32px;
    position: relative
}

.mc-dfc-app .t-remark .col-right .num {
    position: absolute;
    left: 0;
    top: 5px;
    background-color: #ea0c42;
    border-radius: 3px
}

.t-remark .col-right u {
    font-weight: 700
}

.t-sec-events .s-grid {
    max-width: 910px;
    margin: var(--s-space) auto
}

.t-sec-events .s-grid img {
    box-shadow: var(--s-shadow-2);
    border-radius: 5px
}

.t-cer {
    border-radius: 5px;
    padding: 16px 16px 40px;
    position: relative;
    background: url(/img/bg-globe.svg),linear-gradient(180deg,#cae0fb,#a3c5ef);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center bottom
}

.t-cer .logo {
    margin: 0 6px;
    vertical-align: -10px
}

.t-cer h3 {
    font-weight: 700;
    margin: 0 0 6px;
    position: relative;
    padding-left: 30px;
    font-size: 1.25em
}

.t-cer h3 img {
    position: absolute;
    left: 0;
    top: 1px
}

.t-cer ul {
    padding-left: 4px;
    margin: 4px 0
}

.t-cer li {
    list-style: none;
    font-size: 14px
}

@media(min-width: 600px) {
    .t-cer li span {
        display:block
    }
}

.t-cer .s-grid {
    gap: 16px
}

.t-cer .col {
    border-radius: 5px;
    padding: 14px;
    text-align: left;
    background-color: #fff
}

@media(min-width: 600px) {
    .t-cer .col {
        padding:16px
    }
}

.t-cer .yes {
    border: 2px solid #0b9c23
}

.t-cer .no {
    border: 2px solid #ffb600
}

.t-cer .no li {
    padding-right: 20px
}

.mc-dfc-app .t-cer .btn-main {
    z-index: 10;
    margin: 16px 0 0;
    position: relative
}

.mc-dfc-app .btn-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .6em .9em;
    border-radius: 3px;
    margin-bottom: 1rem;
    background-color: #1a477f;
    background-image: linear-gradient(to right,#00a5ad,#00bad3,#006db6,#1598f0);
    background-size: 300% 100%;
    color: #fff;
    border: none;
    font-weight: 700;
    transition: all .4s ease-in-out;
}

.mc-dfc-app .btn-alt    {
    display: inline-flex;
    align-items: center;
    color: var(--mc-blue);
    border: none;
    font-weight: 700;
    transition: all .4s ease-in-out;
}

.mc-dfc-app .btn-main:hover {
    color: #fff;
    background-position: 100% 0;
    transform: scale(1.06)
}

.mc-dfc-app .btn-main span {
    padding-top: 2px
}

.t-cer .banner {
    position: absolute;
    bottom: 0;
    right: -16px;
    width: 160px
}

@media(min-width: 600px) {
    .t-cer .banner {
        width:222px
    }
}

@media(min-width: 1024px) {
    .t-cer {
        padding:32px
    }

    .t-cer .banner {
        width: 160px;
        right: -4px
    }
}

@media(min-width: 1024px)and (min-width:1200px) {
    .t-cer .banner {
        width:200px
    }
}

@media(min-width: 1024px) {
    .mc-dfc-app .t-cer .btn-main {
        margin:20px auto 0;
        display: block;
        width: max-content
    }
}

/* =========================================================
   T-ROUNDS-D
   REMOVE EXTERNAL TABLE STYLE
   ========================================================= */

.t-rounds-d table,
.t-rounds-d table tr,
.t-rounds-d table th,
.t-rounds-d table td {
    border: none !important;
    outline: none !important;
}

/* ไม่มีเส้นจาก box-shadow */
.t-rounds-d table tr,
.t-rounds-d table th,
.t-rounds-d table td {
    box-shadow: none !important;
}

/* =========================================================
   DISABLE HOVER
   ========================================================= */

.t-rounds-d table tbody tr:hover {
    background: transparent !important;
}

/* สำคัญ: ป้องกัน Theme/Elementor ลงสีที่ TD */
.t-rounds-d table tbody tr:hover > td {
    background-color: inherit !important;
}


/* =========================================================
   RESTORE YOUR ROUND COLORS
   ========================================================= */

/* ROUND 1 */
.mc-dfc-app .t-rounds-d .round-1 .c1 {
    background-color: #fff8ea !important;
    color: #ffb600 !important;
}

.mc-dfc-app .t-rounds-d .round-1 .c2 {
    background-color: #ffb600 !important;
    color: #fff !important;
}

/* ROUND 2 */
.mc-dfc-app .t-rounds-d .round-2 .c1 {
    background-color: #ffefef !important;
    color: #f26b55 !important;
}

.mc-dfc-app .t-rounds-d .round-2 .c2 {
    background-color: #f26b55 !important;
    color: #fff !important;
}

/* ROUND 3 */
.mc-dfc-app .t-rounds-d .round-3 .c1 {
    background-color: #eefeff !important;
    color: #00a0a9 !important;
}

.mc-dfc-app .t-rounds-d .round-3 .c2 {
    background-color: #00a0a9 !important;
    color: #fff !important;
}

/* ROUND 4 */
.mc-dfc-app .t-rounds-d .round-4 .c1 {
    background-color: #eff6ff !important;
    color: #00709a !important;
}

.mc-dfc-app .t-rounds-d .round-4 .c2 {
    background-color: #00709a !important;
    color: #fff !important;
}

/*
==========================================================
Single Library
==========================================================
*/

.mc-single-dfc{
    padding: 90px 20px;
    background:
    linear-gradient(
        180deg,
        rgba(179,204,28,.06),
        rgba(255,255,255,1)
    );
}

.mc-single-dfc-container{
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 25% 75%;
    
    align-items: start;
}

/* SIDEBAR */
.mc-single-dfc-sidebar{
    position: sticky;
    top: 120px;
}

.mc-dfc-cover{
    overflow: hidden;
    border-radius: 30px;
    background: #f5f5f5;
    border: 1px solid rgba(29,75,138,.10);
    box-shadow:
    0 10px 30px rgba(0,0,0,.05);
}

.mc-dfc-cover img{
    width: 100%;
    height: auto;
    display: block;
}

.mc-dfc-side-section{
    margin-top: 24px;
    padding: 24px;
    border-radius: 28px;
    background: rgba(255,255,255,.80);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(29,75,138,.08);
}

.mc-dfc-side-title{
    font-size: 18px;
    font-weight: 700;
    color: #1D4B8A;
    margin-bottom: 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(55,53,58,.08);

    /*border: #17c017 solid 1px;*/
}

.mc-dfc-author{
    display: flex;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(179,204,28,.10);
    color: #1D4B8A;
    font-size: 14px;
    font-weight: 600;

    /*border: #17c017 solid 1px;*/
}

.mc-dfc-meta-list{
    display: flex;
    flex-direction: column;
    gap: 4px;

    /*border: #17c017 solid 1px;*/
}

.mc-dfc-meta-item{
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(55,53,58,.08);

    /*border: #10af10 solid 1px;*/
}

.mc-dfc-meta-item:last-child{
    padding-bottom: 0;
    border-bottom: 0;
}

.mc-dfc-meta-item span{
    display: block;
    font-size: 13px;
    color: #777;
    margin-bottom: 8px;
}

.mc-dfc-meta-item strong{
    color: #37353A;
    line-height: 1.7;
}

.mc-dfc-download{
    margin-top: 24px;
}

.mc-dfc-download-btn{
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: #1D4B8A;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.mc-dfc-download-btn:hover{
    transform: translateY(-3px);
    color: #fff;
}

/* CONTENT */
.mc-single-dfc-content{
    min-width: 0;
    padding: 40px;
    border-radius: 34px;
    background: rgba(255,255,255,.80);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(29,75,138,.08);
    box-shadow:
    0 10px 30px rgba(0,0,0,.04);

    margin: 0 0 0 30px;
}

.mc-single-dfc-title{
    margin: 0;
    font-size: 24px;
    line-height: 1.4;
    color: #1D4B8A;

    margin-bottom: 8px;
    /*border: #06C755 solid 1px;*/
}

.mc-single-dfc-code{
    margin-top: 0;
    margin-bottom: 8px;

    /*border: #06C755 solid 1px;*/
}

.mc-single-dfc-code span{
    display: inline-flex;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(210,112,29,.10);
    color: #D2701D;
    font-size: 14px;
    font-weight: 700;
}

.mc-dfc-inline-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(55,53,58,.08);

    /*border: #06C755 solid 1px;*/
}

.mc-dfc-inline-item{
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
}

.mc-meta-label{
    font-weight: 700;
    color: #1D4B8A;
}

.mc-dfc-format{
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(29,75,138,.08);
    color: #1D4B8A;
    font-size: 14px;
    font-weight: 600;
}

.mc-dfc-categories{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;

    /*border: #06C755 solid 1px;*/
}

.mc-dfc-category{
    display: inline-flex;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(179,204,28,.10);
    color: #37353A;
    font-size: 14px;
    font-weight: 600;

    /*border: #06C755 solid 1px;*/
}

.mc-dfc-content-section{
    margin-bottom: 42px;
}

.mc-dfc-content-section h2{
    margin: 0 0 18px;
    font-size: 28px;
    color: #1D4B8A;
}

.mc-meta-label{
    font-weight: 700;
    color: #1D4B8A;
}

.mc-dfc-abstract{
    color: #555;
    line-height: 2;
    font-size: 16px;
}

.mc-dfc-keywords{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.mc-dfc-keyword{
    display: inline-flex;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(29,75,138,.08);
    color: #1D4B8A;
    font-size: 14px;
    font-weight: 600;
}

/* RELATED */
.mc-dfc-related{
    padding: 90px 20px;

    /*border: #06C755 solid 1px;*/
}

.mc-dfc-related-head{
    max-width: 1200px;
    margin: auto;

    /*border: #06C755 solid 1px;*/
}

.mc-dfc-related-head h2{
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    color: #1D4B8A;
}

.mc-dfc-related-head p{
    margin-top: 12px;
    margin-bottom: 36px;
    font-size: 16px;
    font-weight: 500;
    color: #666;
}

.mc-dfc-related-card{
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(29,75,138,.08);
}

.mc-dfc-related-thumb{
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.mc-dfc-related-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mc-dfc-related-content{
    padding: 22px;
    border-top: 1px solid rgba(55,53,58,.08);
}

.mc-dfc-related-content h3{
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
}

.mc-dfc-related-content a{
    color: #37353A;
    text-decoration: none;
}

.mc-dfc-swiper{
    max-width: 1200px;
    margin: auto auto 40px;
}

/* RESPONSIVE */
@media(max-width:880px){

    .mc-single-dfc-container{
        grid-template-columns: 1fr;
    }

    .mc-single-dfc-sidebar{
        position: relative;
        top: 0;
    }

    .mc-single-dfc-content{
        margin: 30px 0 0 0;
    }

    .mc-single-dfc-sidebar{
        position: relative;
        top: 0;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;

        align-items: start;
    }

    /* COVER */
    .mc-dfc-cover{
        grid-column: 1 / 2;
        grid-row: 1 / span 2;
        height: 100%;
    }

    .mc-dfc-cover img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ผู้แต่ง */
    .mc-dfc-side-section:nth-of-type(1){
        grid-column: 2 / 3;
        grid-row: 2;
    }

    /* ข้อมูลเอกสาร */
    .mc-dfc-side-section:nth-of-type(2){
        grid-column: 2 / 3;
        grid-row: 1;
    }


}

@media(max-width:768px){

    .mc-single-dfc-sidebar{
        grid-template-columns: 1fr;
    }

    .mc-dfc-cover,
    .mc-dfc-side-section:nth-of-type(1),
    .mc-dfc-side-section:nth-of-type(2){
        grid-column: auto;
        grid-row: auto;
    }

}

@media(max-width:480px){

    .mc-single-dfc-content{
        padding: 28px;

        margin: 30px 0 0 0;
    }

    .mc-dfc-title{
        font-size: 34px;
    }

    .mc-dfc-related-head h2{
        font-size: 32px;
    }

}

/* RELATED */
.mc-dfc-swiper{
    overflow: hidden;
    padding: 6px;
}

.mc-dfc-swiper .swiper-wrapper{
    align-items: stretch;
}

.mc-dfc-swiper .swiper-slide{
    width: calc((100% - 48px) / 5) !important;
    height: auto;
}

.mc-dfc-related-card{
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(29,75,138,.08);
    transition: .3s;
}

.mc-dfc-related-card:hover{
    transform: translateY(-5px);
    box-shadow:
    0 12px 30px rgba(0,0,0,.06);
}

.mc-dfc-related-thumb{
    display: block;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: #f5f5f5;
}

.mc-dfc-related-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s;
}

.mc-dfc-related-card:hover img{
    transform: scale(1.05);
}

.mc-dfc-related-content{
    padding: 18px;
    border-top: 1px solid rgba(55,53,58,.08);
}

.mc-dfc-related-content h3{
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

.mc-dfc-related-content a{
    color: #37353A;
    text-decoration: none;
}

/* TABLET */
@media(max-width:1024px){

    .mc-dfc-swiper .swiper-slide{
        width: calc((100% - 24px) / 3) !important;
    }

}

/* MOBILE */
@media(max-width:767px){

    .mc-dfc-swiper .swiper-slide{
        width: calc((100% - 12px) / 2) !important;
    }

}

/* =========================================
   SMART DIGITAL RESOURCE
========================================= */

.mc-dfc-ebook,
.mc-dfc-external-resource{
    overflow: hidden;
    border-radius: 32px 32px 0 0;
    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.95),
        rgba(245,247,250,.95)
    );
    border: 1px solid rgba(29,75,138,.08);
    box-shadow:
    0 15px 40px rgba(0,0,0,.05);

    margin-top: 24px;
}

/* =========================================
   TOP BAR
========================================= */

.mc-dfc-ebook-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    border-bottom: 1px solid rgba(55,53,58,.08);

    background:
    linear-gradient(
        90deg,
        rgba(179,204,28,.08),
        rgba(29,75,138,.04)
    );
}

.mc-dfc-ebook-title{
    font-size: 16px;
    font-weight: 700;
    color: #1D4B8A;
    line-height: 1.5;
}

/* =========================================
   BUTTONS
========================================= */

.mc-dfc-ebook-actions,
.mc-dfc-external-actions{
    display: flex;
    align-items: center;
    gap: 12px;
}

.mc-dfc-ebook-btn,
.mc-dfc-open-btn{
    height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    background: #1D4B8A;
    color: #fff;

    font-size: 14px;
    font-weight: 600;

    transition: .3s;
}

.mc-dfc-ebook-btn:hover,
.mc-dfc-open-btn:hover{
    transform: translateY(-2px);
    color: #fff;
}

.mc-dfc-ebook-btn.is-download{
    background: rgba(210,112,29,.12);
    color: #D2701D;
}

/* =========================================
   PDF VIEWER
========================================= */

.mc-dfc-pdf-viewer{
    position: relative;
    width: 100%;
    height: 1000px;
    overflow: hidden;
    background: #dfe5ea;
}

.mc-dfc-pdf-viewer iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}

/* =========================================
   EXTERNAL RESOURCE
========================================= */

.mc-dfc-external-resource{
    padding: 42px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.mc-dfc-external-icon{
    width: 72px;
    height: 72px;
    border-radius: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
    linear-gradient(
        135deg,
        rgba(179,204,28,.12),
        rgba(29,75,138,.08)
    );

    color: #1D4B8A;
    font-size: 30px;
    font-weight: 700;

    flex-shrink: 0;
}

.mc-dfc-external-content{
    flex: 1;
}

.mc-dfc-external-content h3{
    margin: 0 0 10px;
    font-size: 24px;
    color: #1D4B8A;
}

.mc-dfc-external-content p{
    margin: 0;
    color: #666;
    line-height: 1.8;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:767px){

    .mc-dfc-ebook-top{
        flex-direction: column;
        align-items: flex-start;
    }

    .mc-dfc-ebook-actions{
        width: 100%;
        flex-wrap: wrap;
    }

    .mc-dfc-ebook-btn{
        flex: 1;
    }

    .mc-dfc-pdf-viewer{
        height: 650px;
    }

    .mc-dfc-external-resource{
        flex-direction: column;
        align-items: flex-start;
        padding: 28px;
    }

    .mc-dfc-open-btn{
        width: 100%;
    }

}

/*=================================================
    PROGRAM
=================================================*/

.meta-line {
  border-bottom: 1px solid var(--s-border-2);
  padding-bottom: 16px;
}
.meta-space {
  padding-top: 16px;
}

.mc-dfc-app .tabs-nav {
  display: flex;
  width: calc(100% + 2px);
  margin: 0 -1px;
  a {
    padding: 12px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex: 1;
    font-weight: bold;
    color: #fff;
    border-top: 3px solid transparent;
    cursor: pointer;
    * {
      pointer-events: none;
    }
    &:hover {
      color: #fff;
    }
    &.active {
      &:hover {
        color: var(--accent);
      }
    }
  }
  svg {
    width: 24px;
    height: 24px;
  }
  path {
    fill: currentColor;
  }
  .r0 {
    background-color: var(--blue);
    border-color: var(--blue);
  }
  .active {
    background-color: #fff;
    color: var(--blue);
  }
}

.mc-dfc-app .tabs-content {
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: transform 0.4s ease, opacity 0.2s linear 0.2s, visibility 0s linear 0.4s;
  &.active {
    transform: translateY(0);
    transition-delay: 0s;
    opacity: 1;
    height: auto;
    overflow: unset;
    visibility: visible;
    transition-timing-function: cubic-bezier(0, 0.2, 0.25, 1), linear, linear;
  }
}

.mc-dfc-app .t-program {
  margin: 0;
  dd {
    font-weight: bold;
    margin-bottom: 10px;
  }
  @media (min-width: 768px) {
    dl {
      display: grid;
      grid-template-columns: max-content auto;
      gap: 6px 20px;
    }
    dd {
      margin-bottom: 0;
    }
  }
  > li {
    position: relative;
    left: -40px;
    list-style: none;
    ul {
      max-height: unset;
      padding: 0;
      li {
        display: flex;
        margin-bottom: 0;
      }
    }
    &.active {
      ul {
        padding: 0;
      }
    }
  }

  .i-yes,
  .i-no {
    min-width: 20px;
    width: 20px;
    height: 20px;
    margin: 3px 6px 0 0;
    position: relative;
    /*top: 5px;*/
  }
  .indent {
    text-indent: 50px;
    padding: 5px 0;
  }
  .condition,
  .basic-info {
    > div {
      display: flex;
    }
  }
  .basic-info {
    b {
      margin-left: 6px;
    }
  }
  .not-open {
    font-size: 1.25em;
  }
  h2,
  label {
    font-weight: bold;
  }
  h2 {
    font-size: 1.5em;
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    color: var(--accent);
    margin-top: 10px;
    strong {
      font-size: 14px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin-right: 10px;
      background-color: var(--accent);
    }
    > span {
      padding-top: 2px;
    }
    &.active {
      .r-toggle svg {
        transform: scaleY(-1);
      }
    }
  }
  .topic {
    font-weight: bold;
    
    font-size: 1.125em;
  }

  .detail {
    margin-bottom: var(--s-gap);
    .detail {
      margin: 0;
    }
  }
  .admission {
    background-color: #e9f3ff;
    padding: var(--s-space);
    border-radius: 5px;
    h5 {
      font-weight: bold;
      
      margin-top: 6px;
      margin-bottom: 6px;
    }
    .last-score {
      display: grid;
      gap: var(--s-space);
      &:not(:last-child) {
        border-bottom: 1px dashed #aebac7;
        padding-bottom: var(--s-space);
        margin-bottom: var(--s-space);
      }
      hr {
        display: none;
      }
      .t-scores {
        width: 100%;
      }
      @media (min-width: 992px) {
        display: flex;
        flex-wrap: wrap;
        row-gap: 5px;
        .col {
          width: calc(50% - 15px);
        }
        .full {
          width: 100%;
        }
      }
    }
    table {
      tr {
        border-bottom: 1px solid #d8dfe7;
      }
    }
    .t-scores + table {
      width: 100%;
      td {
        border-color: #d8dfe7;
      }
    }
  }
  .link {
    a {
      font-weight: bold;
      display: unset;
    }
  }
  table {
    margin: 0;
    tr,
    tr:hover {
      background: none;
    }
  }
  th {
    font-weight: normal;
  }
  td {
    word-break: break-word;
  }
}

.mc-dfc-app .t-program-tap {
  margin: 0;
  dd {
    font-weight: bold;
    margin-bottom: 10px;
  }
  @media (min-width: 768px) {
    dl {
      display: grid;
      grid-template-columns: max-content auto;
      gap: 6px 20px;
    }
    dd {
      margin-bottom: 0;
    }
  }
  > li {
    position: relative;
    left: 0px;
    list-style: none;
    ul {
      max-height: unset;
      padding: 0;
      li {
        display: flex;
        margin-bottom: 0;
      }
    }
    &.active {
      ul {
        padding: 0;
      }
    }
  }

  .i-yes,
  .i-no {
    min-width: 20px;
    width: 20px;
    height: 20px;
    margin: 3px 6px 0 0;
    position: relative;
    top: 5px;
  }
  .condition,
  .basic-info {
    > div {
      display: flex;
    }
  }
  .basic-info {
    b {
      margin-left: 6px;
    }
  }
  .not-open {
    font-size: 1.25em;
  }
  h2,
  label {
    font-weight: bold;
  }
  h2 {
    font-size: 1.5em;
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    color: var(--accent);
    margin-top: 10px;
    strong {
      font-size: 14px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin-right: 10px;
      background-color: var(--accent);
    }
    > span {
      padding-top: 2px;
    }
    &.active {
      .r-toggle svg {
        transform: scaleY(-1);
      }
    }
  }
  .topic {
    font-weight: bold;
    
    font-size: 1.125em;
  }

  .detail {
    margin-bottom: var(--s-gap);
    .detail {
      margin: 0;
    }
  }
  .admission {
    background-color: #e9f3ff;
    padding: var(--s-space);
    border-radius: 5px;
    h5 {
      font-weight: bold;
      
      margin-top: 6px;
      margin-bottom: 6px;
    }
    .last-score {
      display: grid;
      gap: var(--s-space);
      &:not(:last-child) {
        border-bottom: 1px dashed #aebac7;
        padding-bottom: var(--s-space);
        margin-bottom: var(--s-space);
      }
      hr {
        display: none;
      }
      .t-scores {
        width: 100%;
      }
      @media (min-width: 992px) {
        display: flex;
        flex-wrap: wrap;
        row-gap: 5px;
        .col {
          width: calc(50% - 15px);
        }
        .full {
          width: 100%;
        }
      }
    }
    table {
      tr {
        border-bottom: 1px solid #d8dfe7;
      }
    }
    .t-scores + table {
      width: 100%;
      td {
        border-color: #d8dfe7;
      }
    }
  }
  .link {
    a {
      font-weight: bold;
      display: unset;
    }
  }
  table {
    margin: 0;
    tr,
    tr:hover {
      background: none;
    }
  }
  th {
    font-weight: normal;
  }
  td {
    word-break: break-word;
  }
}

i[class^='i-'],
i[class*=' i-'],
span[class^='i-'] {
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.mc-dfc-app .i-yes {
  background-image: url('https://course.mytcas.com/img/i/i-yes.svg');
}
.mc-dfc-app .i-no {
  background-image: url('https://course.mytcas.com/img/i/i-no.svg');
}
.mc-dfc-app .round-0 {
  --accent: var(--blue);
}
.mc-dfc-app .round-1 {
  --accent: #{$r_1};
}
.mc-dfc-app .round-2 {
  --accent: #{$r_2};
}
.mc-dfc-app .round-3 {
  --accent: #{$r_3};
}
.mc-dfc-app .round-4 {
  --accent: #{$r_4};
}

.mc-dfc-app .info-content {
  background-color: #fff;
  margin-bottom: 2px;
  .title {
    display: flex;
    font-weight: normal;
    cursor: pointer;
    margin: 0;
    border: none;
    padding: 0.75rem 1rem 0.6rem;
    font-size: 1.125em;
    background-color: var(--s-bg-2);
    line-height: 1.4;
    border-radius: 5px;
  }
  &.active {
    .title {
      color: #fff;
      font-weight: bold;
      background-color: var(--accent);
      border-radius: 5px 5px 0 0;
    }
    .info-content-detail {
      padding: 10px 16px 4px;
      height: auto;
      opacity: 1;
      border: 2px solid var(--accent);
      margin-bottom: 20px;
      border-radius: 0 0 5px 5px;
    }
    .p-toggle svg {
      transform: scaleY(-1);
      vertical-align: -2px;
    }
  }
}

.mc-dfc-app .info-content-detail {
  padding: 0 16px;
  border: 2px solid transparent;
  border-top: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 0.3s ease-in-out;
}

.mc-dfc-app .receive-quota {
  margin-left: auto;
  font-weight: normal;
  white-space: nowrap;
  font-size: 0.9em;
  padding: 4px 0 0 6px;
  h2 & {
    font-size: 1rem;
    padding: 6px 16px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--accent);
  }
}

.mc-dfc-app .p-toggle {
  margin-left: 8px;
  width: 18px;
}
.mc-dfc-app .r-toggle,
.mc-dfc-app .p-toggle {
  svg {
    transition: 0.3s;
    vertical-align: 0;
  }
}

.mc-dfc-app .t-scores {
  display: flex;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  b {
    height: 20px;
    background-color: #eee;
    &:not(:last-of-type) {
      border-right: 1px solid #fff;
    }
  }
  & + table {
    width: 100%;
    margin: 6px 0;
    border-collapse: unset;
    font-size: 15px;
    td {
      border-bottom: 1px solid line;
      padding: 3px;
      &:last-child {
        text-align: right;
      }
    }
  }
  @media (min-width: 480px) {
    width: 430px;
    & + table {
      width: unset;
      min-width: 430px;
    }
  }
}

.mc-dfc-app .unv-list {
  li {
    @media (min-width: 768px) {
      display: flex;
      gap: 10px;
      justify-content: space-between;
    }
  }
  .brand {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .files {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0.5rem;
    margin: 0 0 0 69px;
    padding-left: 0;
    flex-shrink: 0;
    li {
      width: 25px;
    }
    img {
      display: block;
    }
  }
}

/*=======================================================
    LIST PROGRAM
=======================================================*/

:root {
            --primary-color: #0d47a1;
            --secondary-color: #1976d2;
            --accent-color: #f57c00;
            --bg-light: #f8f9fa;
            --text-dark: #212529;
            --border-color: #e0e0e0;
        }

        /* Course List */
        .course-list {
            list-style: none;
            padding: 0;
        }

        .course-item {
            display: flex;
            justify-content: space-between;
            align-items: top;
            padding: 10px 15px;
            border-bottom: 1px dashed var(--border-color);

            /*border: var(--teal) solid 1px;*/
        }

        /*.course-item:hover {
            background-color: #f5f8ff;
        }*/

        .course-code {
            font-weight: 600;
            /*color: var(--secondary-color);*/
            min-width: 110px;

            /*border: #17c017 solid 1px;*/
        }

        .course-name {
            flex-grow: 1;
            padding: 0 10px;

            /*border: #17c017 solid 1px;*/
        }

        .course-credits {
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;

            /*border: #17c017 solid 1px;*/
        }
        credits {
            background: #e0e0e0;
            padding: 2px 8px;
            border-radius: 4px;
        }

        @media (max-width: 768px) {
            
            .course-item {
                flex-direction: column;
                align-items: flex-start;
            }
            .course-credits {
                margin-top: 5px;
            }
        }