/* ============================================================
   GLOBAL RESETs
   ============================================================ */
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}

html, body {
    width: 100dvw;
    height: 100dvh;
    background-color: #F1F1F1;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

body {
    margin: 0;
    background-color: #0C9;
}

input, textarea, select, option {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 1em;
}

a {
    text-decoration: none;
}

div {
    font-family: Arial, Helvetica, sans-serif;
}

table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #ccb78f;
    font-size: 1rem;
}

/* ============================================================
   static elments
   ============================================================ */

/* Loading Progress */
.tt_loading {
    position: absolute;
    left: calc(50% - 60px);
    top: calc(40% - 60px);
    width: 120px;
    height: 120px;  
    z-index: 21;
    display: none;
}
.tt_loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid orange;
    border-bottom: 16px solid #000;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Application Body */
.tt_body {
    position: absolute;
    left: 0;
    top: 0;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    opacity: 1;
    background-color: #f1f1f1;
    margin: 0;
}

/* General Page */
.tt_page {
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow-y: scroll;
    z-index: 2;    
    transition: 0.5s;
}



































/* ============================================================
   CHAT & BOT COMPONENTS
   ============================================================ */
.k_bot0 { 
    z-index: 101; 
    position: fixed;
    bottom: 5px;
    right: 30px; 
    width: 25dvw;
    aspect-ratio: 1/1.2; 
    background-color: #f1f1f1;
    box-shadow: 0 0 10px 1px #000;
    border-radius: 9px 9px 0 0;
    overflow: hidden;
    display: none;
}

/* Shared chat bubble base */
.w_auto { width: auto; }
.w_mx80p { max-width: 80%; }
.k_pad10 { padding: 10px; }
.k_space_pwrap { white-space: pre-wrap; }
.k_bot5 { 
    border-radius: 0 10px 10px 10px;
    background-color: #f6eded;
    float: left; 
}
.k_bot6 { 
    border-radius: 10px 0 10px 10px;
    background-color: #fdf9f1;
    float: right; 
}
.k_chatline {
    width: 100%;
    padding: 5px;
    float: left;
}
.k_userbot {
    border-radius: 10px 0 10px 10px;
    background-color: #ffe0e0;
    float: right;
}
.k_sysbot { 
    display: inline-block;
    padding: 20px;
    border-radius: 0 10px 10px 10px;
    background-color: #f1f1f1;  
}
.amanah_chat_full_log .k_sysbot.amanah_chat_options_bubble {
    max-width: 90%;
}
.k_chat {
    width: 16dvw;
    aspect-ratio: 1/1;
    position: fixed;
    bottom: 10px;
    right: 30px;
    padding: 0.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ============================================================
   LOADING & MESSAGE DIALOGS
   ============================================================ */



/* Shared overlay box base */
.msg_box, .dlg_box {
    position: absolute;
    top: 25%;
    left: 10%;
    width: 80%;
    height: 50%;
    box-shadow: 0 0 10px 1px #000;
    background-color: #f0f0f0;
    border-radius: 3px;
    z-index: 20;
    display: none;
}

/* Message Box */
.msg_txt {
    position: absolute;
    top: 40%;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 20px;
    transform: translateY(-50%);
}
.msg_okbtn {
    position: absolute;
    top: 80%;
    width: 100%;
    height: 20%;
    text-align: center;
    font-weight: bolder;
    z-index: 2;
    font-size: 20px;
    color: #000;
    text-decoration: underline;
}

/* Dialog Box */
.dlg_txt {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80%;
    height: 50%;
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;
    text-align: center; 
    font-size: 12px;
}

/* ============================================================
   CARDS & CONTAINERS
   ============================================================ */

/* Shared card base */
.tt_card1, .tt_card2, .tt_card3 {
    width: 100%;
    height: auto;
    float: left;
}
.tt_card1 {
    background: linear-gradient(to bottom, white, white, white, #efefef); 
}
.tt_card2 {
    overflow: hidden;
    background: linear-gradient(to bottom, white, white, white, #efefef);    
    padding: 10px;
}
.tt_card3 {
    overflow: hidden;
    background-color: navy;
    padding: 10px;
    color: white;
}
.tt_card50x100 {
    width: 50%;
    height: 100%;
    float: left;
}
.tt_card300xa {
    width: 300px;
    height: auto;
}

/* ============================================================
   SLIDER & ANIMATIONS
   ============================================================ */
.k_slidercase {
    width: 100%;
    height: 100%;
    overflow: hidden; 
}
.k_slider {
    width: 300%;
    height: 100%;
    animation: slideAnimation 30s infinite;
}
.k_slide {
    width: 33.33%;
    height: 100%;
    float: left;
    transition: 0.5s;
    padding: 1vw 2dvw;
}
@keyframes slideAnimation {
    0%, 20% { transform: translateX(0); }
    25%, 45% { transform: translateX(-33.33%); }
    50%, 70% { transform: translateX(-66.66%); }
    75%, 95% { transform: translateX(-33.33%); }
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.k_line {
    width: 100%;
    padding: 5px 20px;
}
.k_line50 {
    width: 100%;
    height: 50px;
    padding: 5px 20px;
    line-height: 40px;
}
.k_line80 {
    width: 100%;
    height: 80px;
    padding: 5px 20px;
    line-height: 40px;
}
.k_hidden {
    left: 100%;
}
.k_ph1 {
   width: 15%;
   height: 80%;
   float: left;  
}
.k_logo1 {
    width: 80%;
    height: auto;
    float: left;
    padding: 5px;
}
.k_dtm {
    display: none;
    width: 50%;
    height: 80%;
    float: left;
    padding: 5px;
}

/* ============================================================
   APPLICATION BODY & PAGES
   ============================================================ */


/* Page Elements */
.hp_holder {
    width: 100%;
    height: 80px;
    text-align: center;
    line-height: 60px;
    font-weight: bold;
}
.tt_pgh {
    width: 100%;
    height: auto;
}
.tt_imgw100xa {
    width: calc(100% - 1px);
    height: auto;  
}
.ttmnu_list {
    width: 100%;
    height: 75px;
    background-color: #fff;
    text-align: left;
    border-bottom: solid #cacaca 1px;
    font-size: 12px;
    line-height: 25px;
}
.tt_listah {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 15px;
    text-align: left;
    border-bottom: solid #cacaca 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 25px;
}

/* Business-Folio home page */
.bf_page {
    --bf-orange: orange;
    --bf-black: #000000;
    --bf-white: #ffffff;
    --bf-gray: #d4d4d4;
    --bf-dark-gray: #5a5a5a;
    --bf-light-gray: #f1f1f1;
    --bf-ink: #141414;
    --bf-muted: #565656;
    --bf-border: #cfcfcf;
    width: 100%;
    min-height: 100%;
    float: left;
    background-color: var(--bf-light-gray);
    color: var(--bf-ink);
    font-family: Arial, Helvetica, sans-serif;
}
.bf_section {
    padding: 38px 7vw 44px;
}
.bf_bar {
    min-height: 68px;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 7dvw;
    background-color: var(--bf-gray);
    border-bottom: 1px solid var(--bf-orange);
    position: sticky;
    top: 0;
    z-index: 50;
}
.bf_brand {
    gap: 12px;
}
.bf_brand_name {
    color: var(--bf-black);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.bf_brand_tag {
    margin-top: 2px;
    color: var(--bf-dark-gray);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.bf_logo,
.bf_ui_icon_lg {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
}
.bf_logo polygon:nth-child(1),
.bf_logo polygon:nth-child(3) {
    fill: var(--bf-orange);
    stroke: var(--bf-orange);
}
.bf_logo polygon:nth-child(2) {
    fill: var(--bf-black);
    stroke: var(--bf-black);
}
.bf_links {
    margin-left: auto;
    gap: 28px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: right;
}
.bf_links a {
    color: var(--bf-black);
}
.bf_links a:hover {
    color: var(--bf-orange);
}
.bf_section_hero {
    min-height: 58dvh;
    gap: clamp(24px, 5vw, 60px);
    padding-top: clamp(36px, 5vw, 64px);
    padding-bottom: clamp(36px, 5vw, 64px);
    background: linear-gradient(110deg, var(--bf-white) 0%, var(--bf-white) 58%, var(--bf-gray) 58%, var(--bf-gray) 100%);
    border-bottom: 1px solid var(--bf-border);
}
.bf_stack {
    flex-direction: column;
    gap: 10px;
}
.bf_col_wide {
    width: 58%;
    max-width: 800px;
}
.bf_kicker {
    gap: 8px;
    color: var(--bf-dark-gray);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.bf_kicker svg circle {
    fill: var(--bf-orange);
}
.bf_display {
    max-width: 700px;
    margin: 4px 0 0;
    color: var(--bf-black);
    font-size: clamp(34px, 4.5vw, 58px);
    line-height: 1.04;
    letter-spacing: 0;
    font-weight: 900;
}
.bf_display em {
    color: var(--bf-orange);
    font-style: normal;
}
.bf_lead {
    max-width: 560px;
    margin: 10px 0 0;
    color: var(--bf-muted);
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.55;
}
.bf_lead_sub {
    margin-top: 0;
    color: var(--bf-dark-gray);
    font-weight: 700;
}
.bf_cta_row {
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.bf_cta,
.bf_cta_ghost {
    gap: 8px;
    min-height: 42px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 800;
}
.bf_cta {
    padding: 12px 24px;
    background-color: var(--bf-orange);
    color: var(--bf-black);
    border: 2px solid var(--bf-orange);
}
.bf_cta_ghost {
    padding: 12px 20px;
    color: var(--bf-black);
    border: 2px solid var(--bf-black);
    background-color: transparent;
}
.bf_chip_list {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.bf_chip {
    min-height: 30px;
    padding: 6px 13px;
    border-radius: 6px;
    background-color: var(--bf-dark-gray);
    color: var(--bf-white);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.03em;
}
.bf_media {
    flex: 1;
    min-width: 200px;
    position: relative;
}
.bf_media::before {
    content: '';
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background-color: rgba(255, 165, 0, 0.18);
    pointer-events: none;
}
.bf_illustration {
    width: min(300px, 68vw);
    height: auto;
}
.bf_line {
    fill: none;
    stroke: var(--bf-black);
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bf_line_frame {
    stroke-width: 1.65;
}
.bf_line_accent {
    stroke: var(--bf-orange);
}
.bf_line_soft {
    stroke: rgba(0, 0, 0, 0.28);
    stroke-width: 1;
}
.bf_section_white {
    background-color: var(--bf-light-gray);
}
.bf_section_title {
    margin-bottom: 26px;
    padding-bottom: 12px;
    color: var(--bf-black);
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--bf-orange);
}
.bf_grid {
    display: grid;
    gap: 16px;
}
.bf_grid_3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bf_grid_footer {
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 32px;
}
.bf_card {
    min-height: 190px;
    padding: 24px;
    border: 1px solid var(--bf-border);
    border-top: 2px solid var(--bf-orange);
    border-radius: 6px;
    background-color: var(--bf-white);
    overflow: hidden;
}
.bf_icon_wrap {
    width: 65px;
    height: 65px;
    border-radius: 6px;
    background-color: var(--bf-gray);
    border: 1px solid rgba(255, 165, 0, 0.45);
    margin-bottom: 16px;
    flex-shrink: 0;
}
.bf_ui_icon {
    width: 26px;
    height: 26px;
    margin: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bf_ui_icon path,
.bf_ui_icon circle,
.bf_ui_icon line,
.bf_ui_icon rect {
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bf_card h2 {
    margin: 0 0 8px;
    color: var(--bf-black);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.01em;
}
.bf_card p {
    margin: 0;
    color: var(--bf-muted);
    font-size: 13px;
    line-height: 1.6;
}
.bf_section_warm {
    background-color: var(--bf-dark-gray);
    border-top: 1px solid var(--bf-orange);
    color: var(--bf-white);
}
.bf_section_warm p {
    margin: 0 0 8px;
    color: #eeeeee;
    font-size: 14px;
    line-height: 1.6;
}
.bf_heading_icon {
    gap: 12px;
    margin-bottom: 6px;
    color: var(--bf-white);
    font-size: 18px;
    font-weight: 900;
}
.bf_ui_icon_accent,
.bf_heading_icon .bf_ui_icon_accent {
    stroke: var(--bf-orange);
}
.bf_link_row {
    gap: 12px;
    margin-top: 8px;
}
.bf_ui_icon_sm {
    width: 28px;
    height: 28px;
    margin: 0;
    stroke: var(--bf-orange);
}
.bf_section_copyright {
    padding-top: 16px;
    padding-bottom: 16px;
    background-color: var(--bf-black);
    color: #d4d4d4;
    font-size: 13px;
}

@media (max-width: 980px) {
    .bf_section_hero {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        background: var(--bf-white);
    }
    .bf_col_wide {
        width: 100%;
    }
    .bf_display {
        font-size: clamp(34px, 7vw, 50px);
    }
    .bf_grid_3,
    .bf_grid_footer {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 820px) {
    .bf_page .bf_links,
    .bf_page .bf_links.k_dipflx {
        display: none;
    }
}

@media (max-width: 620px) {
    .bf_section,
    .bf_bar {
        padding-left: 18px;
        padding-right: 18px;
    }
    .bf_display {
        font-size: 32px;
    }
    .bf_lead {
        font-size: 15px;
    }
    .bf_grid_3,
    .bf_grid_footer {
        grid-template-columns: 1fr;
    }
}
/* Miscellaneous Sizes */
.k_80xa {
    width: 80px;
    height: auto;
}
.k_120x50 {
    width: 120px;
    height: 50px;
}
.k_inlblock {
    display: inline-block;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

/* Font Families */
.k_font1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
}
.tt_font2, .tt_txt2, .tt_listah {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.tt_font3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* Font Sizes - Fixed */
.k_txt10, .tt_f10 { font-size: 10px; }
.tt_f11 { font-size: 11px; }
.tt_f12 { font-size: 12px; }
.tt_f13 { font-size: 13px; }
.tt_f14 { font-size: 14px; }
.tt_f16 { font-size: 16px; }
.tt_txt1, .tt_f18 { font-size: 18px; }
.tt_f20 { font-size: 20px; }
.k_txt24 { font-size: 24px; }
.tt_f28 { font-size: 28px; }
.tt_f48 { font-size: 48px; }

/* Font Sizes - Responsive */
.k_f06vw { font-size: 0.6dvw; }
.k_f08vw { font-size: 0.8dvw; }
.k_f6vw { font-size: 6dvw; }
.k_f8vw { font-size: 8dvw; }
.k_f5vw { font-size: 5dvw; }
.k_f4vw { font-size: 4dvw; }
.k_f3vw { font-size: 3dvw; }
.k_f1vw { font-size: clamp(12px, 1vw, 14px); }
.k_f1p3vw { font-size: 1.3dvw; }
.k_f1p4vw { font-size: 1.4dvw; }
.k_f1p6vw { font-size: 1.6dvw; }
.k_f1p8vw { font-size: clamp(18px, 1.8vw, 20px); }
.k_f2vw { font-size: clamp(18px, 2vw, 28px); }
.k_f75p { font-size: 75%; }

/* Font Weight */
.k_bold, .k_ftitle {
    font-weight: bold;
}
.k_ftitle {
    font-size: 1.4rem;
}

/* Line Height */
.k_lnh10p { line-height: 10%; }
.k_lnh18 { line-height: 18px; }
.k_lnh20 { line-height: 20px; }
.k_lnh24 { line-height: 24px; }
.k_lnh30 { line-height: 30px; }
.k_lnh44 { line-height: 44px; }
.k_lnh50 { line-height: 50px; }
.k_lnh100 { line-height: 100px; }
.k_lnh100p { line-height: 100%; }
.k_lnh200 { line-height: 200px; }
.k_lnh300 { line-height: 300px; }
.k_lnh1vw { line-height: 1dvw; }
.k_lnh1p5vw { line-height: 1.5dvw; }
.k_lnh2vw { line-height: 2dvw; }
.k_lnh6mm { line-height: 6mm; }
.k_lnh8mm { line-height: 8mm; }

/* Text Alignment */
.txt_c, .k_tac { text-align: center; }
.k_tal { text-align: left; }
.k_tar { text-align: right; }
.k_taj { text-align: justify; }


/* ============================================================
   ICONS & BUTTONS
   ============================================================ */

/* Icons */
.k_icon1 {
    width: 2.4dvw;
    aspect-ratio: 1/1;
    float: left;
    margin: 3px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.k_icon2 {
    width: 1.5dvw;
    aspect-ratio: 1/1;
    float: right;
    padding: 5px;
    border-radius: 0.75dvw;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.k_iconwa {
    width: auto;
    height: 46px;
    overflow: hidden;
    color: white;
    cursor: pointer;
    stroke: white;
}
.k_icon25p {
    width: 25%;
    aspect-ratio: 1/1; 
}
.k_icon50p {
    width: 50%;
    aspect-ratio: 1/1; 
}
.tt_icon50 {
    width: 50px;
    height: 50px;
    cursor: pointer;
}
.tt_icon70 {
    width: 70px;
    height: 70px;
    cursor: pointer;
}
.tt_canvas1 {
    width: 50%;
    height: auto;
    float: left;
}
.tt_img1 {
    width: 100%;
}

/* SVG Strokes & Fills */
.k_stroke1 { stroke: black; }
.k_stroke2 { stroke: orange; }
.k_svgfill1 { fill: #025852; }
.k_svgfill2 { fill: #ffffff; }

/* Inputs */
.k_in1 {
    height: 2dvw;
    width: auto;
    margin: 0.5dvw;
}

/* Buttons */
.k_btn1 {
    height: 2dvw;
    line-height: 2dvw;
    text-align: center;
    border-radius: 3px;
    background-color: #b99955;
    cursor: pointer;
    color: #fff;
}

/* Cursor */
.k_hand {
    cursor: pointer;
}

/* ============================================================
   TABS
   ============================================================ */
/* Shared tab base */
.k_tab0, .k_tab1 {
    width: 10dvw;
    height: 2.5dvw;
    float: left;
    border-radius: 0 0.5vw 0 0;
    overflow: hidden;
    padding: 0.5dvw;
    margin: 0.5vw 0.25dvw;
    cursor: pointer;
}
.k_tab0 {
    background-color: #fdfaf5;
}
.k_tab1 {
    background-color: #c6b9a0;
}

/* ============================================================
   COLORS
   ============================================================ */

/* Background Colors */
.bg_1 { background-color: #fff5e6; }
.bg_2 { background-color: #fffbf5; }

.k_bg1 { background-color: #fff5e6; }
.k_bg2 { background-color: #fffbf5; }
.k_bg3, .k_bg8 { background-color: #ffa500; }
.k_bg4 { background-color: #b99955; }
.k_bg5 { background-color: black; }
.k_bg6 { background-color: #ffe5cc; }
.k_bg7 { background-color: #444; }
.k_bg9 { background-color: #425451; }
.k_bg10 { background-color: #fef9f5; }
.k_bg11 { background-color: #ffb733; }
.k_bg12 { background-color: #f1f1f1; }
.k_bg13 { background-color: #4CAF50; }
.k_bg14 { background-color: #2196F3; }
.k_bg15 { background-color: #e8f0fe; }
.k_bg16 { background-color: #9fb3e7; }

/*svg background*/
.k_bgsvg1 { background-image:url("images/bg_svg1.svg"); background-repeat:no-repeat;
    background-position:center;
    background-size:cover; 
}

/* Background Colors - Transparent */
.k_bgtr1 { background-color: rgba(255, 255, 255, 0.5); }
.k_bgtr2 { background-color: rgba(0, 0, 0, 0.5); }

/* Gradient Backgrounds */
.k_grad1 {
    background: linear-gradient(to bottom, white, #fbf6ee);
}
.k_grad2, .k_grad3 {
    background: linear-gradient(to top, white, white, #616161);
}

/* Foreground Colors */
.k_fcolor1 { color: black; }
.k_fcolor2 { color: #ffffff; }
.k_fcolor3 { color: #fff5e6; }
.k_fcolor4 { color: #fff; }
.k_fcolor5 { color: #000000; }
.k_fcrre { color: #000000; }
.k_txtgray { color: #888; }
.k_fc1 { color: #f2eae0; }
.k_fc2 { color: #ffa500; }

/* ============================================================
   BORDERS
   ============================================================ */

/* Border Styles */
.k_brdr1 { border: solid #ffa500 1px; }
.k_brdr2 { border: solid orange 1px; }
.k_brdr5 { border: solid #025852 1px; }
.k_brdr_gry { border: solid #ccc 1px; }

/* Border Sides */
.brdr_1110 { border-left: solid rgb(206, 159, 159) 1px; border-top: solid rgb(206, 159, 159) 1px; border-right: solid rgb(206, 159, 159) 1px; }
.brdrb_1 { border-bottom: solid rgb(206, 159, 159) 1px; }
.brdrt_1 { border-top: solid rgb(206, 159, 159) 1px; }
.brdrrt_1 { border-right: solid rgb(206, 159, 159) 1px; }
.brdrlt_1 { border-left: solid rgb(206, 159, 159) 1px; }

.k_brdrb1 { border-bottom: solid #d3dddc 1px; }
.k_brdrb2 { border-bottom: solid orange 2px; }
.k_brdrb3 { border-bottom: solid #000 1px; }
.k_brdrbm1 { border-bottom: solid #f0f0e7 1px; }
.k_brdrt1 { border-top: solid #97bad4 1px; }
.k_brdrrt1 { border-right: solid #fff 1px; }
.k_brdrlt1 { border-left: solid #fff 1px; }
.k_brdrlt2 { border-left: solid #ffa500 1px; }
.k_brdrrt2 { border-right: solid #ffa500 1px; }

/* Border Radius - Fixed */
.brdrr_3 { border-radius: 3px; }
.brdrr_5 { border-radius: 5px; }
.brdrr_50p { border-radius: 50%; }
.brdrr_06vw { border-radius: 0.6dvw; }

/* Border Radius - Specific Corners */
.brdrr_5500 { border-radius: 5px 5px 0 0; }
.brdrr_7770 { border-radius: 7px 7px 7px 0; }
.brdrr_7707 { border-radius: 7px 7px 0 7px; }
.k_brdrrs1 { border-radius: 0 0 0.5vw 0; }
.k_brdrrs2 { border-radius: 0 0 0 0.5dvw; }
.k_brdrrs3 { border-radius: 0 0.5vw 0 0; }
.k_brdrrs4 { border-radius: 0.5vw 0 0 0; }
.k_brdrrs5 { border-radius: 0.5vw 0.5vw 0 0; }
.k_brdrrs7 { border-radius: 3vw 3vw 0 0; }

.k_brdrr2 { border-radius: 2px; }
.k_brdrr3 { border-radius: 3px; }
.k_brdrr5, .k_brdrr8 { border-radius: 5px; }
.k_brdrr7 { border-radius: 7px; }
.k_brdrr15 { border-radius: 15px; }
.k_brdrr25 { border-radius: 25px; }
.k_brdrr35 { border-radius: 35px; }
.k_brdrr50 { border-radius: 50px; }
.k_brdrr100 { border-radius: 100px; }

/* Border Radius - Responsive */
.k_brdrr0p75vw { border-radius: 0.75dvw; }
.k_brdrr1vw { border-radius: 1dvw; }
.k_brdrr2vw { border-radius: 2dvw; }
.k_brdrr20vw { border-radius: 20dvw; }



/* zindex */
.z_1 { z-index: 1; }
.z_2 { z-index: 2; }
.z_3 { z-index: 3; }
.z_4 { z-index: 4; }
.z_5 { z-index: 5; }
.z_10 { z-index: 10; }
.z_20 { z-index: 20; }


/*shadow*/
.shdw_1 { box-shadow: 0 0 10px 1px #000; }
.shdw_2 { box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.shdw_3 { box-shadow: 0 12px 24px rgba(0,0,0,0.3); }

/* Display */
.disp_n { display: none; }
.disp_f { display: flex; }
.disp_b { display: block; }

/* content alignment */
.just_fr { justify-content: flex-end; }
.just_fl { justify-content: flex-start; }
.just_c { justify-content: center; }

/* ============================================================
   SPACING - PADDING
   ============================================================ */

/* Padding - Fixed (px) */
.k_pad1 { padding: 1px; }
.k_pad2 { padding: 2px; }
.k_pad3 { padding: 3px; }
.k_pad4 { padding: 4px; }
.k_pad5 { padding: 5px; }
.k_pad8 { padding: 8px; }
.k_pad10 { padding: 10px; }
.k_pad15 { padding: 15px; }
.k_pad16 { padding: 16px; }
.k_pad20 { padding: 20px; }
.k_pad40 { padding: 40px; }

.pad_1vw03vw { padding: 0.3dvw 1dvw 0.3dvw 1dvw; }

.pad_05vw { padding: 0.5dvw; }
.pad_03vw { padding: 0.3dvw; }
.pad_02vw { padding: 0.2dvw; }
.pad_01vw { padding: 0.1dvw; }
.pad_3vh { padding: 3dvh; }
.pad_2vh { padding: 2dvh; }
.pad_1vh { padding: 1dvh; }
.pad_1vw { padding: 1dvw; }
.pad_05vh { padding: 0.5dvh; }
.padt_2vh { padding-top: 2dvh; }
.pad_5p { padding: 5%; }

/* Padding - Multi-value */
.k_pad40_20 { padding: 40px 2px; }
.k_pad5_20 { padding: 5px 20px; }
.k_pada4 { padding: 25mm 20mm 20mm 20mm; }
.k_pada4min { padding: 8mm 8mm 8mm 8mm; }
.k_padt1mm { padding-top: 1mm; }
.k_pad1mm { padding: 1mm; }

/* Padding - Responsive (vw) */
.k_pad0p3vw { padding: 0.3dvw; }
.k_pad0p5vw, .k_pad05vw { padding: 0.5dvw; }
.k_pad1vw { padding: 1dvw; }
.k_pad1p2vw { padding: 1.2dvw; }
.k_pad2vw { padding: 2dvw; }
.k_pad2p5vw { padding: 2.5dvw; }
.k_pad3vw { padding: 3dvw; }
.k_pad4vw { padding: 4dvw; }
.k_pad5vw { padding: 5dvw; }
.pad_t2vw { padding-top: 2dvw; }
.pad_t3vw { padding-top: 3dvw; }

.k_pad5p10p { padding: 5vw 10dvw; }
/* Padding - Percentage */
.k_pad1p { padding: 1%; }
.k_pad2p { padding: 2%; }
.k_pad3p { padding: 3%; }
.k_pad4p { padding: 4%; }
.k_pad5p { padding: 5%; }

/* Padding - Specific Sides */
.k_padt4p { padding-top: 4%; }

/* ============================================================
   SPACING - MARGINS
   ============================================================ */
.mal_2vw { margin-left: 2dvw; }
.k_ma { margin: auto; }
.k_ma1 { margin: 1px; }
.k_m3 { margin: 3px; }
.k_m5 { margin: 5px; }
.k_m10 { margin: 10px; }
.k_m0p2p { margin: 0 2%; }
.k_m5_10 { margin: 5px 10px; }
.k_m10_10_5_10 { margin: 15px 10px 5px 10px; }

/* Margin - Specific Sides */
.k_mal5 { margin-left: 5px; }
.k_mgnl10 { margin-left: 10px; }
.k_mt0p5vw { margin-top: 0.5dvw; }
.k_mt1vw { margin-top: 1dvw; }

/* ============================================================
   DIMENSIONS - WIDTH
   ============================================================ */

/* Width - Layout Parts */
.tt_2part { width: 100%; }
.tt_3part { width: 100%; }
.tt_4part { width: 50%; }

/* Width - Responsive (vw) */
.w_0p5vw { width: 0.5dvw; }
.w_0p8vw { width: 0.8dvw; }
.w_1vw { width: 1dvw; }
.w_1p2vw { width: 1.2dvw; }
.w_1p5vw { width: 1.5dvw; }
.w_2vw { width: 2dvw; }
.w_2p5vw { width: 2.5dvw; }
.w_3vw { width: 3dvw; }
.w_5vw { width: 5dvw; }
.w_6vw { width: 6dvw; }
.w_8vw { width: 8dvw; }
.w_10vw { width: 10dvw; }
.w_15vw { width: 15dvw; }
.w_18vw { width: 18dvw; }
.w_20vw { width: 20dvw; }
.w_25vw { width: 25dvw; }
.w_30vw { width: 30dvw; }
.w_40vw { width: 40dvw; }
.w_47vw { width: 47dvw; }
.w_50vw { width: 50dvw; }
.w_100vw { width: 100dvw; }

/* width view height */
.w_3vh { width: 3dvh; }
.w_4vh { width: 4dvh; }
.w_5vh { width: 5dvh; }
.w_6vh { width: 6dvh; }
.w_7vh { width: 7dvh; }
.w_8vh { width: 8dvh; }
.w_10vh { width: 10dvh; }

/* Width - Percentage */
.w_100p { width: 100%; }
.w_99p { width: 99%; }
.w_95p { width: 95%; }
.w_90p { width: 90%; }
.w_85p { width: 85%; }
.w_80p { width: 80%; }
.w_71p { width: 71%; }
.w_70p { width: 70%; }
.w_66p { width: 66%; }
.w_65p { width: 65%; }
.w_60p { width: 60%; }
.w_58p { width: 58%; }
.w_56p { width: 56%; }
.w_50p, .w50p { width: 50%; }
.w_49p { width: 49%; }
.w_48p { width: 48%; }
.w_47p { width: 47%; }
.w_46p { width: 46%; }
.w_44p { width: 44%; }
.w_45p { width: 45%; }
.w_40p { width: 40%; }
.w_39p { width: 39%; }
.w_35p { width: 35%; }
.w_34p { width: 34%; }
.w_33p { width: 33%; }
.w_30p5p { width: 30.5%; }
.w_30p { width: 30%; }
.w_25p { width: 25%; }
.w_22p { width: 22%; }
.w_20p { width: 20%; }
.w_15p { width: 15%; }
.w_10p { width: 10%; }
.w_8p { width: 8%; }
.w_7p { width: 7%; }
.w_5p { width: 5%; }
.w_4p { width: 4%; }
.w_3p { width: 3%; }

/* Width - Fixed (px) */
.w_200 { width: 200px; }
.w_150 { width: 150px; }
.w_100 { width: 100px; }
.w_70 { width: 70px; }
.w_60 { width: 60px; }
.w_50 { width: 50px; }
.w_40 { width: 40px; }
.w_30 { width: 30px; }
.w_auto { width: auto; }

/* Width - Print (mm) */
.w_40mm { width: 40mm; }
.w_60mm {width: 60mm;}


/* Width - Calculated & Min/Max */
.w_100pm3p5vw { width: calc(100% - 3.5vw); }
.w_min100p { min-width: 100%; }

/* ============================================================
   DIMENSIONS - HEIGHT
   ============================================================ */

/* Height - Aspect Ratios */
.h_1t1 { aspect-ratio: 1/1; }
.h_1t2 { aspect-ratio: 1/2; }
.h_4t5 { aspect-ratio: 4/5; }
.h_2t1 { aspect-ratio: 2/1; }
.h_3t1 { aspect-ratio: 3/1; }
.h_3t2 { aspect-ratio: 3/2; }
.h_4t1 { aspect-ratio: 4/1; }
.h_5t1 { aspect-ratio: 5/1; }
.h_6t1 { aspect-ratio: 6/1; }
.h_7t1 { aspect-ratio: 7/1; }
.h_8t1 { aspect-ratio: 8/1; }
.h_10t1 { aspect-ratio: 10/1; }
.h_20t1 { aspect-ratio: 20/1; }
.h_25t1 { aspect-ratio: 25/1; }

/* Height - Percentage */
.h_100p { height: 100%; }
.h_94p { height: 94%; }
.h_93p { height: 93%; }
.h_90p { height: 90%; }
.h_88p { height: 88%; }
.h_86p { height: 86%; }
.h_85p { height: 85%; }
.h_84p { height: 84%; }
.h_83p { height: 83%; }
.h_82p { height: 82%; }
.h_80p { height: 80%; }
.h_78p { height: 78%; }
.h_75p { height: 75%; }
.h_74p { height: 74%; }
.h_73p { height: 73%; }
.h_72p { height: 72%; }
.h_70p { height: 70%; }
.h_60p { height: 60%; }
.h_65p { height: 65%; }
.h_50p { height: 50%; }
.h_35p { height: 35%; }
.h_30p { height: 30%; }
.h_25p { height: 25%; }
.h_20p { height: 20%; }
.h_15p { height: 15%; }
.h_10p { height: 10%; }
.h_8p { height: 8%; }
.h_7p { height: 7%; }
.h_6p { height: 6%; }
.h_5p { height: 5%; }
.h_3p { height: 3%; }
.h_2p { height: 2%; }
.h_1p { height: 1%; }

/* Height - Fixed (px) */
.h_300 { height: 300px; }
.h_200 { height: 200px; }
.h_120 { height: 120px; }
.h_100 { height: 100px; }
.h_80 { height: 80px; }
.h_75 { height: 75px; }
.h_70 { height: 70px; }
.h_50 { height: 50px; }
.h_45 { height: 45px; }
.h_40 { height: 40px; }
.h_30 { height: 30px; }
.h_26 { height: 26px; }
.h_25 { height: 25px; }
.h_20 { height: 20px; }
.h_2 { height: 2px; }
.h_0 { height: 0px; }
.h_auto { height: auto; }

/*height calculated */
.h_100p16vh { height: calc(100% - 16dvh); }
.h_100p9vw { height: calc(100% - 9dvw); }
.h_100p6vw { height: calc(100% - 6dvw); }
.h_100p3vw { height: calc(100% - 3dvw); }
.h_100vh3vw { height: calc(100dvh - 3dvw); }

.h_100p6vh { height: calc(100% - 6dvh); }

/* Height - Responsive (vw) */
.h_0p5vw { height: 0.5dvw; }
.h_1vw { height: 1dvw; }
.h_2vw { height: 2dvw; }
.h_2p5vw { height: 2.5dvw; }
.h_3vw { height: 3dvw; }
.h_4vw { height: 4dvw; }
.h_6vw { height: 6dvw; }
.h_10vw { height: 10dvw; }
.h_20vw { height: 20dvw; }
.h_25vw { height: 25dvw; }
.h_30vw { height: 30dvw; }
.h_50ph { height: 50dvw; }
.h_80ph { height: 80dvw; }
.h_100ph { height: 100dvw; }
.h_100vh { height: 100dvh; }
.h_4vh { height: 4dvh; }
.h_5vh { height: 5dvh; }
.h_6vh { height: 6dvh; }
.h_7vh { height: 7dvh; }
.h_8vh { height: 8dvh; }
.h_10vh { height: 10dvh; }
.h_88vh { height: 88dvh; }
.h_84vh { height: 84dvh; }
.h_83vh { height: 83dvh; }
.h_94vh { height: 94dvh; }   

/* Height - Print (mm) */
.h_297mm { height: 297mm; }
.h_277mm {height: 277mm;}
.h_170mm {height: 170mm;}
.h_160mm {height: 160mm;}
.h_140mm { height: 140mm; }
.h_50mm { height: 50mm; }
.h_40mm {height: 40mm;}
.h_30mm { height: 30mm; }
.h_20mm { height: 20mm; }
.h_10mm {height: 10mm;}
.h_5mm { height: 5mm; }
.h_6mm { height: 6mm; }
.h_7mm { height: 7mm; }
.h_8mm { height: 8mm; }

/* Height - Calculated & Min/Max */
.h_100pm3vw { height: calc(100% - 3vw); }
.h_100pl6vw { height: calc(100% - 6vw); }
.h_min2t1 { min-height: 0.5dvw; }
.h_max1000 { max-height: 1000px; }


.trans_05s { transition: 0.5s; }

































/* ============================================================
   RESPONSIVE BUNDLE UTILITIES (resolved individual definitions)
   Class names encode values as mobile_tablet_desktop order.
   Mobile defaults below; tablet and desktop overrides in @media blocks.
   ============================================================ */

/* width */
.w_80p_50p_50p { width: 80%; }

.w_100p_100p_50p  { width: 100%; }
.w_100p_50p_25p   { width: 100%; }
.w_100p_50p_50p   { width: 100%; }
.w_50p_50p_25p    { width: 50%; }
.w_12vw_8vw_4vw   { width: 12dvw; }
.w_80p_40p_25p    { width: 80%; }
.w_100p_50p_70p   { width: 100%; }
.w_80p_60p_50p    { width: 80%; }

.w_100_100_50vw { width: 100dvw; }

/* Dynamic aspect-ratio */
.h_5t1_12t1_18t1  { aspect-ratio: 5 / 1; }
.h_6t1_12t1_20t1  { aspect-ratio: 5 / 1; }
.h_4t3_4t3_1t1    { aspect-ratio: 4 / 3; }

/* height */
.h_5vw_3vw_2p5vw  { height: 10dvw; }

/* position */
.pos_r { position: relative; }
.pos_a { position: absolute; }
.pos_f { position: fixed; }
.top_0 { top: 0px; }
.lft_0 { left: 0px; }
.lft_n100 { left: -100px; }
.btm_0 { bottom: 0px; }
.btm_6vw { bottom: 6dvw; }




.lft_10p_25p_25p { left: 10%; }
.btm_0 { bottom: 0; }

/* line heights */
.lh_4vh { line-height: 4dvh; }
.lh_1vw { line-height: 1dvw; }
.lh_1p2vw { line-height: 1.2dvw; }
.lh_1p4vw { line-height: 1.4dvw; }

/* font-size */
.fs_05vw { font-size: 0.5dvw; }
.fs_08vw { font-size: 0.8dvw; }
.fs_1vw { font-size: 1dvw; }
.fs_2vw { font-size: 2dvw; }
.fs_2vw { font-size: 2dvw; }
.fs_3vh { font-size: 3dvh; }
.fs_2vh { font-size: 2dvh; }
.fs_1p6vh { font-size: 1.6dvh; }
.fs_1vh { font-size: 1dvh; }


.k_f18vw_14vw_12vw   { font-size: 18dvw; }
.k_f13vw_9p5vw_8vw   { font-size: 13dvw; }
.k_f10vw_7p5vw_6vw   { font-size: 10dvw; }
.k_f9p5vw_6vw_5vw    { font-size: 9.5dvw; }
.k_f8p5vw_5vw_4vw    { font-size: 8.5dvw; }
.k_f4p8vw_3p6vw_3vw  { font-size: 4.8dvw; }
.k_f6vw_2p7vw_2vw    { font-size: 6dvw; }
.k_f5vw_2p3vw_1p8vw  { font-size: 5dvw; }
.k_f4p5vw_2p1vw_1p6vw { font-size: 4.5dvw; }
.k_f4vw_1p8vw_1p4vw  { font-size: 4dvw; }
.k_f3p8vw_1p7vw_1p3vw { font-size: 3.8dvw; }
.k_f3p6vw_1p6vw_1p2vw { font-size: 3.6dvw; }
.k_f3p5vw_1p5vw_1vw  { font-size: 3.5dvw; }
.k_f3p2vw_1p2vw_0p8vw { font-size: 3.2dvw; }
.k_f2p8vw_1vw_0p6vw  { font-size: 2.8dvw; }
.k_lh1p45 { line-height: 1.45; }

/* Dynamic padding */
.k_pad3vw_1p8vw_1vw  { padding: 3dvw; }

/* Section width helper */
.s_100t50p { width: 100%; }


.k_floatl { float: left; }
.k_floatr { float: right; }
.k_dispfx  { display: flex; }
.k_dispgrid { display: grid; }
.k_dispbl  { display: block; }
.k_dispn   { display: none; }
.k_aic     { align-items: center; }
.k_justc   { justify-content: center; }
.k_placec  { place-items: center; }
.k_fxdc    { flex-direction: column; }
.k_flex1   { flex: 1; }
.k_flex0   { flex: 0 0 auto; }
.k_minw0   { min-width: 0; }
.k_minh0   { min-height: 0; }
.k_minh34  { min-height: 34px; }
.k_minh58  { min-height: 58px; }
.k_minh72  { min-height: 72px; }
.k_h54     { height: 54px; }
.k_gap8    { gap: 8px; }
.ovf_h { overflow: hidden; }
.ovfy_h { overflow-y: hidden; }
.ovfy_s { overflow-y: scroll; }
.ovfx_s { overflow-x: scroll; }
.ovfx_nw { white-space: nowrap; }
.sbars_n { scrollbar-width: none; -ms-overflow-style: none; }
.k_ovfy_auto { overflow-y: auto; }
.k_ovfx_auto { overflow-x: auto; }
.k_resizev { resize: vertical; }
.k_shadow_chat { box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.k_brdr_chat   { border: 1px solid rgba(15,10,6,.18); }
.k_wchatdesk   { width: min(420px, calc(100vw - 40px)); }
.k_hchatdesk   { height: min(680px, calc(100vh - 130px)); }
.k_right14  { right: 14px; }
.k_bottom14 { bottom: 14px; }
.k_btm20    { bottom: 20px; }
.k_grad_logo1 { background: linear-gradient(135deg, #ffa500, #ffb733, #0f0a06); }
.k_grad_logo2 { background: linear-gradient(135deg, #4CAF50, #0f0a06); }
.k_grad_logo3 { background: linear-gradient(135deg, #0f0a06, #444, #ffa500); }
.k_grad_logo4 { background: linear-gradient(135deg, #ffb733, #ffa500, #0f0a06); }

/* Tablet overrides (769px – 1199px) */
@media (min-width: 769px) and (max-width: 1199px) {
    /*width*/
    .w_80p_50p_50p   { width: 50%; }

    .w_100p_100p_50p  { width: 100%; }
    .w_100p_50p_25p   { width: 50%; }
    .w_100p_50p_50p   { width: 50%; }
    .w_50p_50p_25p    { width: 50%; }
    .w_12vw_8vw_4vw   { width: 8dvw; }
    .w_80p_40p_25p    { width: 40%; }
    .w_100p_50p_70p   { width: 70%; }
    .w_80p_60p_50p    { width: 60%; }
    .w_100_100_50vw { width: 100dvw; }
    .h_5t1_12t1_18t1  { aspect-ratio: 11 / 1; }
    .h_6t1_12t1_20t1  { aspect-ratio: 12 / 1; }
    .h_4t3_4t3_1t1    { aspect-ratio: 1 / 1; }
    .h_5vw_3vw_2p5vw  { height: 3dvw; }
    /*postion*/
    .lft_10p_25p_25p { left: 25%; }
    
    /*font-size*/
    .k_f18vw_14vw_12vw   { font-size: 14dvw; }
    .k_f13vw_9p5vw_8vw   { font-size: 9.5dvw; }
    .k_f10vw_7p5vw_6vw   { font-size: 7.5dvw; }
    .k_f9p5vw_6vw_5vw    { font-size: 6dvw; }
    .k_f8p5vw_5vw_4vw    { font-size: 5dvw; }
    .k_f4p8vw_3p6vw_3vw  { font-size: 3.6dvw; }
    .k_f6vw_2p7vw_2vw    { font-size: 2.7dvw; }
    .k_f5vw_2p3vw_1p8vw  { font-size: 2.3dvw; }
    .k_f4p5vw_2p1vw_1p6vw { font-size: 2.1dvw; }
    .k_f4vw_1p8vw_1p4vw  { font-size: 1.8dvw; }
    .k_f3p8vw_1p7vw_1p3vw { font-size: 1.7dvw; }
    .k_f3p6vw_1p6vw_1p2vw { font-size: 1.6dvw; }
    .k_f3p5vw_1p5vw_1vw  { font-size: 1.5dvw; }
    .k_f3p2vw_1p2vw_0p8vw { font-size: 1.2dvw; }
    .k_f2p8vw_1vw_0p6vw  { font-size: 1dvw; }
    .k_pad3vw_1p8vw_1vw  { padding: 1.8dvw; }
    .s_100t50p { width: 50%; }
}

/* Desktop overrides (1200px+) */
@media (min-width: 1200px) {
    /*width*/
    .w_80p_50p_50p   { width: 50%; }


    .w_100p_100p_50p  { width: 50%; }
    .w_100p_50p_25p   { width: 25%; }
    .w_100p_50p_50p   { width: 50%; }
    .w_50p_50p_25p    { width: 25%; }
    .w_12vw_8vw_4vw   { width: 4dvw; }
    .w_80p_40p_25p    { width: 25%; }
    .w_100p_50p_70p   { width: 70%; }
    .w_80p_60p_50p    { width: 50%; }
    .w_100_100_50vw { width: 50dvw; }
    .h_5t1_12t1_18t1  { aspect-ratio: 18 / 1; }
    .h_6t1_12t1_20t1  { aspect-ratio: 18 / 1; }
    .h_4t3_4t3_1t1    { aspect-ratio: 1 / 1; }
    .h_5vw_3vw_2p5vw  { height: 3dvw; }

    /*postion*/
    .lft_10p_25p_25p { left: 25%; }
    
    /*font-size*/
    .k_f18vw_14vw_12vw   { font-size: 12dvw; }
    .k_f13vw_9p5vw_8vw   { font-size: 8dvw; }
    .k_f10vw_7p5vw_6vw   { font-size: 6dvw; }
    .k_f9p5vw_6vw_5vw    { font-size: 5dvw; }
    .k_f8p5vw_5vw_4vw    { font-size: 4dvw; }
    .k_f4p8vw_3p6vw_3vw  { font-size: 3dvw; }
    .k_f6vw_2p7vw_2vw    { font-size: 2dvw; }
    .k_f5vw_2p3vw_1p8vw  { font-size: 1.8dvw; }
    .k_f4p5vw_2p1vw_1p6vw { font-size: 1.6dvw; }
    .k_f4vw_1p8vw_1p4vw  { font-size: 1.4dvw; }
    .k_f3p8vw_1p7vw_1p3vw { font-size: 1.3dvw; }
    .k_f3p6vw_1p6vw_1p2vw { font-size: 1.2dvw; }
    .k_f3p5vw_1p5vw_1vw  { font-size: 1dvw; }
    .k_f3p2vw_1p2vw_0p8vw { font-size: 0.8dvw; }
    .k_f2p8vw_1vw_0p6vw  { font-size: 0.6dvw; }
    .k_pad3vw_1p8vw_1vw  { padding: 1dvw; }
    .s_100t50p { width: 50%; }
}

/* ============================================================
   ctstudent AI Study Assistant Styles
   ============================================================ */

/* Chat Container */
.ct_chat_container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.ct_chat_history {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    scroll-behavior: smooth;
}

.ct_chat_input_area {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-top: 1px solid #ddd;
    background: #fff;
}

.ct_chat_input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 18px;
    padding: 8px 14px;
    font-size: 1.4dvh;
    resize: none;
    outline: none;
    min-height: 32px;
    max-height: 120px;
    line-height: 1.4;
}

.ct_chat_send {
    width: 36px;
    height: 36px;
    margin-left: 6px;
    border-radius: 50%;
    background: #f6cd82;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.ct_chat_send:hover {
    background: #e8b86a;
}

/* Chat Messages */
.ct_msg {
    margin-bottom: 8px;
    display: flex;
}

.ct_msg_user {
    justify-content: flex-end;
}

.ct_msg_system {
    justify-content: flex-start;
}

.ct_msg_bubble {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 1.4dvh;
    line-height: 1.5;
    word-wrap: break-word;
}

.ct_msg_user .ct_msg_bubble {
    background: #dcf8c6;
    border-bottom-right-radius: 4px;
}

.ct_msg_system .ct_msg_bubble {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 4px;
}

/* Welcome Screen */
.ct_welcome {
    text-align: center;
    padding: 20px;
    color: #666;
}

.ct_welcome h2 {
    font-size: 2dvh;
    margin-bottom: 8px;
    color: #333;
}

.ct_welcome p {
    font-size: 1.4dvh;
    margin: 4px 0;
}

/* Chips / Quick Action Buttons */
.ct_chip {
    display: inline-block;
    padding: 4px 10px;
    margin: 3px;
    background: #f0f0f0;
    border-radius: 14px;
    font-size: 1.2dvh;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid #ddd;
    user-select: none;
}

.ct_chip:hover {
    background: #e0e0e0;
}

/* Task Items */
.ct_task_item {
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}

.ct_task_name {
    font-size: 1.5dvh;
    font-weight: bold;
    color: #333;
}

.ct_task_type {
    font-size: 1.2dvh;
    color: #888;
    margin-right: 6px;
}

.ct_task_desc {
    font-size: 1.2dvh;
    color: #666;
    margin: 2px 0;
}

.ct_task_time {
    font-size: 1.1dvh;
    color: #999;
}

/* Status Badges */
.ct_status_badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 1.1dvh;
    font-weight: bold;
}

.ct_status_pending {
    background: #fff3cd;
    color: #856404;
}

.ct_status_completed {
    background: #d4edda;
    color: #155724;
}

.ct_status_inprogress {
    background: #cce5ff;
    color: #004085;
}

.ct_status_cancelled {
    background: #f8d7da;
    color: #721c24;
}

/* Timeline Bar */
.ct_timeline_bar {
    position: relative;
    height: 1dvh;
    margin: 4px 0;
}

.ct_duration_bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 1dvh;
    background: #e0e0e0;
    border-radius: 3px;
}

.ct_completed_bar {
    height: 0.5dvh;
    background: #28a745;
    border-radius: 3px;
    position: absolute;
    top: 0.25dvh;
    left: 0;
}

/* Subject Cards */
.ct_subject_card {
    padding: 8px;
    margin: 4px 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.ct_subject_card:hover {
    background: #f9f9f9;
}

.ct_subject_name {
    font-size: 1.5dvh;
    font-weight: bold;
    color: #333;
}

.ct_subject_progress {
    font-size: 1.2dvh;
    color: #888;
}

/* Topic Cards */
.ct_topic_card {
    padding: 8px;
    margin: 4px 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.ct_topic_name {
    font-size: 1.4dvh;
    font-weight: bold;
    color: #333;
}

.ct_topic_code {
    font-size: 1.1dvh;
    color: #999;
}

/* Progress Bar */
.ct_progress_bar {
    width: 100%;
    height: 1.2dvh;
    background: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    margin: 4px 0;
}

.ct_progress_fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 6px;
    transition: width 0.3s ease;
}

/* Score Indicators */
.ct_score {
    font-size: 1.2dvh;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 8px;
}

.ct_score_high {
    background: #d4edda;
    color: #155724;
}

.ct_score_medium {
    background: #fff3cd;
    color: #856404;
}

.ct_score_low {
    background: #f8d7da;
    color: #721c24;
}

/* Action Buttons */
.ct_action_btn {
    display: inline-block;
    padding: 4px 10px;
    margin: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.2dvh;
    cursor: pointer;
    background: #fff;
    color: #333;
    user-select: none;
}

.ct_action_btn:hover {
    background: #f0f0f0;
}

.ct_action_btn.primary {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.ct_action_btn.primary:hover {
    background: #0069d9;
}

/* Question Display */
.ct_question {
    padding: 12px;
    margin: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
}

.ct_question_prompt {
    font-size: 1.6dvh;
    font-weight: bold;
    color: #333;
    margin-bottom: 12px;
}

.ct_question_options {
    margin: 8px 0;
}

.ct_option_btn {
    padding: 8px 12px;
    margin: 4px 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.4dvh;
    transition: background 0.2s;
}

.ct_option_btn:hover {
    background: #f0f0f0;
}

.ct_option_btn.selected {
    border-color: #007bff;
    background: #e8f0fe;
}

.ct_option_btn.correct {
    border-color: #28a745;
    background: #d4edda;
}

.ct_option_btn.incorrect {
    border-color: #dc3545;
    background: #f8d7da;
}

.ct_hint {
    margin-top: 8px;
    padding: 8px;
    background: #fff3cd;
    border-radius: 6px;
    font-size: 1.3dvh;
    color: #856404;
}