/* Custom Properties for Theming */
:root {
    --primary-color: #003366;
    /* Navy accent */
    --background-color: #ffffff;
    --header-bg: #e6ecf0;
    /* Neutral header background */
    --body-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --heading-font: 'Times New Roman', serif;
    --section-border: 2px solid var(--primary-color);
}

/* General Styles */
body {
    background: var(--background-color);
    width: 210mm;
    /* A4 width */
    margin: 0 auto;
    padding: 0;
    font-family: var(--body-font);
    color: #333;
    text-align: justify;
    /* Thêm text-align: justify */
}

#main {
    width: 210mm;
    min-height: 297mm;
    /* A4 height */
    margin: 0 auto;
    box-sizing: border-box;
    text-align: justify;
    /* Thêm text-align: justify */
}

/* Header / Top Section */
/* Two-column layout: left for avatar; right for full name and contact info */
#top {
    background: var(--header-bg);
    padding: 1cm;
    display: flex;
    align-items: flex-start;
}

/* Left Column */
#left-col {
    width: 35%;
    text-align: center;
    font-family: var(--heading-font);
}

.avatar {
    background: #ddd;
    width: 6cm;
    height: 6cm;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    margin: auto;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Right Column */
#right-col {
    width: 65%;
    padding-left: 1cm;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    line-height: 1.6;
}

#right-col h1 {
    font-size: 2rem;
    margin: 0 0 0.5cm;
    font-family: var(--heading-font);
    color: var(--primary-color);
    font-weight: bold;
}

#contact-info .info-item {
    margin: 0.3cm 0;
}

.label {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1rem;
}

.details {
    font-weight: normal;
    font-size: 0.95rem;
    padding: 0cm 0.2cm;
    overflow: visible;
}

/* Content Section */
#content {
    background: var(--background-color);
    width: 100%;
    padding: 1cm;
    box-sizing: border-box;
    text-align: justify;
    /* Thêm text-align: justify */
}

.section {
    margin-bottom: 1.0cm;
}

.section-title {
    font-size: 1.3rem;
    margin-bottom: 0.4cm;
    font-weight: bold;
    border-bottom: var(--section-border);
    padding-bottom: 0.2cm;
    color: var(--primary-color);
    text-transform: none;
}

/* Professional Summary Formatting */
#objective {
    text-align: justify;
    line-height: 1.8;
}

/* Education Section: Simple Listing with Emphasis */
.edu-item {
    margin-bottom: 1cm;
}

.edu-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.3cm;
}

.edu-degree {
    font-size: 0.95rem;
}

.edu-degree strong {
    font-weight: bold;
}

.edu-project {
    text-align: justify;
    font-size: 0.95rem;
}

.edu-honors {
    font-size: 0.95rem;
}

/* List Styling for Experience & Certifications */
.details ul,
.exp_details,
.none-list-type {
    padding-left: 1em;
    margin-top: 0.3cm;
    text-align: justify;
    /* Thêm text-align: justify */
}

.details li,
.exp_details li {
    list-style-type: disc;
    margin: 0.3cm 0;
    text-align: justify;
    /* Thêm text-align: justify */
}

.none-list-type li {
    list-style-type: none;
}

/* Experience Section */
/* Experience header: left side: job title & company; right side: start/end dates */
.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3cm;
}

.exp-left {
    text-align: left;
}

.exp-right {
    text-align: right;
    font-size: 0.95rem;
    color: var(--primary-color);
    font-weight: bold;
}

/* Emphasize job title & company without underline */
.title-ss {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.2rem;
    text-transform: none;
}

/* Each job detail as a paragraph bullet with left padding and justified text */
.exp-details-paragraph p.job-detail {
    padding-left: 2em;
    margin: 0.3cm 0;
    font-size: 0.95rem;
    text-align: justify;
}

/* Skill Section: Two-Column Layout using Flexbox */
#skills ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    list-style-type: disc;
    margin: 0em;
    padding-left: 3em;
}

#skills ul li {
    width: calc(50% - 0.5em);
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

/* (Optional) Subtitles for Education if needed */
.title-sss {
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.3;
    font-family: var(--heading-font);
    padding-left: 0.6cm;
    color: var(--primary-color);
    text-transform: none;
}

/* Responsive Design */
@media screen and (max-width: 768px) {

    body,
    #main {
        width: 100%;
        margin: 0;
        padding: 0.5em;
    }

    #top {
        flex-direction: column;
        align-items: center;
        padding: 1em 0;
    }

    #left-col,
    #right-col {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    #right-col {
        padding-top: 1em;
    }

    #skills ul {
        flex-direction: column;
        padding-left: 1.2em;
    }

    #skills ul li {
        width: 100%;
    }

    .exp-header,
    .edu-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2em;
    }

    .exp-left,
    .edu-left,
    .exp-right,
    .edu-right {
        text-align: left;
        width: 100%;
    }

    .avatar {
        width: 50vw;
        height: 50vw;
        max-width: 150px;
        max-height: 150px;
    }

    .avatar img {
        object-fit: cover;
    }

    .section {
        padding: 0.5em 0;
    }

    .section-title {
        font-size: 1.1rem;
    }

    .details,
    .edu-project,
    .edu-degree,
    .edu-honors,
    .job-detail {
        font-size: 0.95rem;
    }
}