/* =========================================================
   VietCALL 2026 Custom Conference Theme
   Final Version: Centered Content + Aligned Left Menu
   ========================================================= */


/* =========================================================
   1. Brand Colors and Layout Variables
   ========================================================= */

:root {
    --vcl-red: #e00000;
    --vcl-red-dark: #b80000;
    --vcl-red-soft: #fff2f2;

    --vcl-blue: #4f5f8f;
    --vcl-blue-dark: #263746;
    --vcl-header-blue: #17639b;

    --vcl-gold: #d9902f;
    --vcl-gold-soft: #fff8eb;

    --vcl-bg: #f4f8fb;
    --vcl-text: #263746;
    --vcl-muted: #5f6b76;
    --vcl-border: rgba(38, 55, 70, 0.14);
    --vcl-shadow: 0 12px 32px rgba(38, 55, 70, 0.10);

    /* Main layout */
    --vcl-menu-width: 215px;
    --vcl-menu-gap: 22px;
    --vcl-content-width: 950px;

    /*
       This controls the vertical position of the left menu.
       It pushes the menu down so it aligns with the content area,
       not with the top hero/header.
    */
    --vcl-menu-top: 255px;
}


/* =========================================================
   2. General Background
   ========================================================= */

html,
body {
    background:
        radial-gradient(circle at top left, rgba(224, 0, 0, 0.06), transparent 34rem),
        radial-gradient(circle at top right, rgba(79, 95, 143, 0.14), transparent 32rem),
        linear-gradient(180deg, #ffffff 0%, #f4f8fb 48%, #edf4f8 100%) !important;
    color: var(--vcl-text) !important;
}

.conf,
.conference-page,
.event-page {
    background: transparent !important;
}


/* =========================================================
   3. Header / Title Area
   ========================================================= */

.confTitleBox,
.event-header,
.event-title,
.conference-title {
    background: var(--vcl-header-blue) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

.confTitleBox h1,
.conference-title h1,
.event-title h1 {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px;
}

h1,
h2,
h3 {
    color: var(--vcl-blue-dark) !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px;
}

.confSubHeader,
.confSubHeaderBox,
.page-title {
    color: var(--vcl-blue-dark) !important;
    font-weight: 700 !important;
}


/* =========================================================
   4. Reset Problematic Layout Rules
   ========================================================= */

.confSectionsBox,
#confSectionsBox,
.confSectionsContainer,
.confCenterBox,
.confMainContent,
.confContent,
.conference-content,
.event-content {
    display: block !important;
    grid-template-columns: none !important;
    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
}


/* =========================================================
   5. Main Content Layout
   Content is centered.
   Menu is positioned close to the left side of content.
   ========================================================= */

.confBodyBox {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 28px 24px 52px 24px !important;

    box-sizing: border-box !important;
    overflow: visible !important;
}


/* Center the actual content column */
.confBodyBox > :not(.conf_leftMenu),
.confSectionsBox,
#confSectionsBox,
.confSectionsContainer,
.confCenterBox,
.confMainContent,
.confContent {
    width: var(--vcl-content-width) !important;
    max-width: var(--vcl-content-width) !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}


/* Keep nested content full-width inside the centered content column */
.confBodyBox .confSectionsBox,
.confBodyBox #confSectionsBox,
.confBodyBox .confCenterBox,
.confBodyBox .confMainContent,
.confBodyBox .confContent {
    width: 100% !important;
    max-width: 100% !important;
}


/* Prevent inner content from shrinking */
.confBodyBox .confSectionsBox > *,
.confBodyBox #confSectionsBox > *,
.confBodyBox .confContent > *,
.confBodyBox .confMainContent > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* =========================================================
   6. Left Conference Menu Position
   ========================================================= */

.conf_leftMenu {
    position: absolute !important;

    width: var(--vcl-menu-width) !important;
    min-width: var(--vcl-menu-width) !important;
    max-width: var(--vcl-menu-width) !important;

    /*
       Place menu immediately to the left of the centered content.
    */
    left: calc(
        50% - (var(--vcl-content-width) / 2) - var(--vcl-menu-gap) - var(--vcl-menu-width)
    ) !important;

    /*
       Align menu vertically with content area, not with hero/header.
    */
    top: var(--vcl-menu-top) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
    color: var(--vcl-text) !important;

    border-radius: 14px !important;
    overflow: hidden !important;

    box-shadow: var(--vcl-shadow) !important;
    border: 1px solid var(--vcl-border) !important;

    z-index: 10 !important;
}


/* =========================================================
   7. Left Conference Menu Styling
   ========================================================= */

.conf_leftMenu ul,
.conf_leftMenu li {
    background: #ffffff !important;
    color: var(--vcl-text) !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Normal menu links */
.conf_leftMenu a,
.conf_leftMenu li a,
.conf_leftMenu .menuConfTitle,
.conf_leftMenu .menuConfMiddleCell,
.conf_leftMenu .menuConfMiddleCell a {
    display: block !important;

    color: var(--vcl-text) !important;
    background: transparent !important;

    font-weight: 800 !important;
    text-decoration: none !important;

    padding: 7px 14px !important;
    line-height: 1.18 !important;
}


/* Reduce old Indico table-like spacing */
.conf_leftMenu td,
.conf_leftMenu th,
.conf_leftMenu .menuConfLeftCell,
.conf_leftMenu .menuConfRightCell,
.conf_leftMenu .menuConfMiddleCell {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}


/* Hover state */
.conf_leftMenu a:hover,
.conf_leftMenu li a:hover,
.conf_leftMenu .menuConfMiddleCell:hover,
.conf_leftMenu .menuConfMiddleCell:hover a {
    color: var(--vcl-red) !important;
    background: var(--vcl-red-soft) !important;
}


/* Selected/current item */
.conf_leftMenu .selected,
.conf_leftMenu .active,
.conf_leftMenu .menuConfSelected,
.conf_leftMenu .menuConfSelected a,
.conf_leftMenu li.active a,
.conf_leftMenu .menuConfTitle.selected,
.conf_leftMenu .menuConfTitle.active {
    background: linear-gradient(135deg, var(--vcl-red), var(--vcl-red-dark)) !important;
    color: #ffffff !important;
}


/* Overview title item if not selected */
.conf_leftMenu .menuConfTitle {
    background: #f3f5f8 !important;
    color: var(--vcl-text) !important;
}


/* Icons inside menu */
.conf_leftMenu i,
.conf_leftMenu .icon,
.conf_leftMenu .fa {
    color: inherit !important;
}


/* =========================================================
   8. Content Width and Readability
   ========================================================= */

.confSectionsBox,
#confSectionsBox {
    background: transparent !important;
}


/* Page title spacing */
.confSubHeader,
.confSubHeaderBox {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}


/* General text */
p,
li,
td,
th {
    line-height: 1.58;
}


/* Keep paragraph lines readable */
.confSectionsBox p,
#confSectionsBox p,
.confContent p,
.confMainContent p {
    max-width: 900px;
}


/* Images and banners stay inside content */
.confSectionsBox img,
#confSectionsBox img,
.confContent img,
.confMainContent img,
.conference-content img,
.event-content img {
    max-width: 100% !important;
    height: auto !important;
}


/* =========================================================
   9. Cards / Boxes
   ========================================================= */

.i-box,
.action-box,
.info-message-box,
.event-service-row,
.category-list .item,
.event-list .item {
    border-radius: 18px !important;
    box-shadow: var(--vcl-shadow) !important;
    border: 1px solid var(--vcl-border) !important;
    background: rgba(255, 255, 255, 0.94) !important;
}


/* Give common boxes breathing room */
.i-box,
.action-box,
.info-message-box {
    padding: 18px 22px !important;
}


/* Avoid double padding inside Indico boxes */
.i-box .i-box-header,
.i-box .i-box-content,
.action-box .section,
.info-message-box .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* =========================================================
   10. Buttons: VietCALL Red
   ========================================================= */

.i-button,
.ui.button,
button,
input[type="submit"] {
    border-radius: 999px !important;
}


/* Primary buttons */
.i-button.highlight,
.i-button.accept,
.i-button.primary,
.ui.primary.button,
button.highlight,
button.accept,
button.primary,
input[type="submit"],
.action-button,
.main-action-bar .i-button,
.toolbar .i-button.highlight {
    background: linear-gradient(135deg, var(--vcl-red), var(--vcl-red-dark)) !important;
    border: 1px solid var(--vcl-red-dark) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(224, 0, 0, 0.25) !important;
    text-shadow: none !important;
}


/* Primary hover */
.i-button.highlight:hover,
.i-button.accept:hover,
.i-button.primary:hover,
.ui.primary.button:hover,
button.highlight:hover,
button.accept:hover,
button.primary:hover,
input[type="submit"]:hover,
.action-button:hover,
.main-action-bar .i-button:hover,
.toolbar .i-button.highlight:hover {
    background: linear-gradient(135deg, #ff1a1a, var(--vcl-red)) !important;
    border-color: var(--vcl-red) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(224, 0, 0, 0.34) !important;
}


/* Secondary buttons */
.i-button:not(.highlight):not(.accept):not(.primary),
.ui.button:not(.primary) {
    background: #ffffff !important;
    color: var(--vcl-blue-dark) !important;
    border: 1px solid var(--vcl-border) !important;
}


/* Secondary hover */
.i-button:not(.highlight):not(.accept):not(.primary):hover,
.ui.button:not(.primary):hover {
    background: var(--vcl-red-soft) !important;
    color: var(--vcl-red) !important;
    border-color: rgba(224, 0, 0, 0.25) !important;
}


/* =========================================================
   11. Links
   ========================================================= */

a {
    color: var(--vcl-blue);
}

a:hover {
    color: var(--vcl-red);
}


/* =========================================================
   12. Announcement Box
   ========================================================= */

.announcement,
.event-announcement {
    background: linear-gradient(135deg, var(--vcl-gold-soft), #ffffff) !important;
    border-left: 6px solid var(--vcl-red) !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    box-shadow: 0 8px 24px rgba(224, 0, 0, 0.10) !important;
}


/* =========================================================
   13. Banner / Logo / Images
   ========================================================= */

.conference-page img,
.event-page img,
.event-logo,
.confLogoBox img {
    border-radius: 18px !important;
}


/* Avoid distorting small icons */
.conf_leftMenu img,
.icon img,
button img,
.i-button img,
.ui.button img {
    border-radius: 0 !important;
}


/* =========================================================
   14. Tables
   ========================================================= */

table,
.i-table,
.ui.table {
    border-radius: 14px !important;
    overflow: hidden !important;
}

table th,
.i-table th,
.ui.table th {
    background: #f3f5f8 !important;
    color: var(--vcl-blue-dark) !important;
    font-weight: 800 !important;
}


/* =========================================================
   15. Timeline / Progress Elements
   ========================================================= */

.progress-bar,
.ui.progress .bar,
.timeline .active,
.timeline .completed,
.step.active,
.step.completed,
.cfa-timeline .active,
.cfa-timeline .completed,
.conference-timeline .active,
.conference-timeline .completed {
    background-color: var(--vcl-red) !important;
}

.timeline .inactive,
.step.inactive {
    background-color: #d9dee5 !important;
}


/* =========================================================
   16. Search Box
   ========================================================= */

input[type="search"],
.search-box input,
.search input {
    border-radius: 8px !important;
    border: 1px solid rgba(38, 55, 70, 0.16) !important;
}


/* =========================================================
   17. Footer
   ========================================================= */

.footer,
#footer {
    background: var(--vcl-blue-dark) !important;
    color: #ffffff !important;
}

.footer a,
#footer a {
    color: #ffffff !important;
}

.footer a:hover,
#footer a:hover {
    color: #ffd6d6 !important;
}


/* =========================================================
   18. Medium Screens
   ========================================================= */

@media (max-width: 1250px) {
    :root {
        --vcl-content-width: 850px;
        --vcl-menu-width: 205px;
        --vcl-menu-gap: 20px;
        --vcl-menu-top: 155px;
    }
}


/* =========================================================
   19. Tablet / Small Desktop
   Menu goes above content to avoid overlap.
   ========================================================= */

@media (max-width: 1050px) {
    .confBodyBox {
        padding: 20px 18px 42px 18px !important;
    }

    .conf_leftMenu {
        position: relative !important;
        left: auto !important;
        top: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 850px !important;

        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 22px !important;
    }

    .confBodyBox > :not(.conf_leftMenu),
    .confSectionsBox,
    #confSectionsBox,
    .confSectionsContainer,
    .confCenterBox,
    .confMainContent,
    .confContent {
        width: 100% !important;
        max-width: 850px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================================
   20. Mobile
   ========================================================= */

@media (max-width: 760px) {
    .confBodyBox {
        padding: 18px 16px 36px 16px !important;
    }

    .conf_leftMenu {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }

    .confBodyBox > :not(.conf_leftMenu),
    .confSectionsBox,
    #confSectionsBox,
    .confSectionsContainer,
    .confCenterBox,
    .confMainContent,
    .confContent {
        width: 100% !important;
        max-width: 100% !important;
    }

    .i-box,
    .action-box,
    .info-message-box {
        padding: 16px 18px !important;
    }

    .conf_leftMenu a,
    .conf_leftMenu .menuConfTitle,
    .conf_leftMenu .menuConfMiddleCell {
        padding: 9px 14px !important;
    }
}