/* Giao diện lấy từ profileen - Copy.html; màu đi qua biến --cv-* để chỉnh được trong trình sửa. */
:root { --cv-sidebar: #550000; --cv-accent: #800000; --cv-bar: #ff3535; }
body { background-color: #f8f9fa; font-family: 'Be Vietnam Pro', sans-serif; max-width: 1000px; margin: 0 auto; border: 1px solid #ccc; }
.sidebar { background-color: var(--cv-sidebar); color: #fff; padding: 20px; display: flex; flex-direction: column; justify-content: flex-start; }
.sidebar img { border-radius: 50%; width: 150px; height: 150px; object-fit: cover; }
.sidebar .list-group-item { background-color: var(--cv-accent); color: #fff; border: none; }
.sidebar .list-group-item i { margin-right: 10px; }
.section-title { color: #fff; font-weight: bold; margin-bottom: 10px; border-bottom: 2px solid #fff; padding-bottom: 5px; }
.main-content { padding: 20px; }
.main-content .section-title { color: var(--cv-accent); border-bottom: 2px solid var(--cv-accent); }
.experience-item { margin-bottom: 30px; }
.skill-list { list-style-type: none; padding-left: 0; }
.skill-list li { margin-bottom: 10px; position: relative; padding-left: 25px; }
.skill-list li::before { content: '●'; color: #fff; position: absolute; left: 0; font-size: 1.2em; }
.skill-level { font-size: .9em; color: #ccc; }
.skill-note { font-size: .85em; font-style: italic; color: #f0c9c9; }
.skill-list.skill-sub { margin: 8px 0 0; }
.skill-list.skill-sub li { padding-left: 18px; margin-bottom: 6px; font-size: .94em; }
.skill-list.skill-sub li::before { content: '↳'; font-size: 1em; color: #f0c9c9; }
.skill-list.skill-sub .progress { height: 6px; margin-bottom: 8px; }
.skill-list.skill-sub .skill-list.skill-sub { margin-left: 4px; }
.progress { height: 10px; margin-bottom: 15px; background-color: #e0e0e0; }
.progress-bar { background-color: var(--cv-bar); }
.additional-info li { margin-bottom: 10px; padding-left: 25px; position: relative; }
.additional-info li::before { content: '✔'; color: #28a745; position: absolute; left: 0; font-size: 1em; }
.main-content a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .3); }
.cv-text { white-space: pre-line; }
.project-tags { margin: 0 0 6px; }
.project-tags .badge { display: inline-block; margin: 0 4px 4px 0; padding: 3px 8px; border-radius: 999px; background: #f1e3e3; color: var(--cv-accent); font-weight: 600; font-size: .72rem; }
.project-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.main-content a.project-link, .proj-box a.project-link { display: inline-block; padding: 4px 12px; border: 1px solid var(--cv-accent); border-radius: 999px; color: var(--cv-accent); text-decoration: none; font-size: .86rem; font-weight: 600; }
.main-content a.project-link:hover, .proj-box a.project-link:hover { background: var(--cv-accent); color: #fff; }

/* Thẻ dự án: 2 cột / 1 hàng, 1 cột trên điện thoại */
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.project-card { display: flex; flex-direction: column; padding: 0; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s; }
.project-card:hover, .project-card:focus-visible { border-color: var(--cv-accent); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transform: translateY(-2px); outline: none; }
.project-thumb { display: block; width: 100%; height: 130px; object-fit: cover; object-position: top; background: #eee; }
.project-thumb-empty { display: grid; place-items: center; background: linear-gradient(135deg, var(--cv-sidebar), var(--cv-accent)); }
.project-thumb-empty span { font-size: 2.6rem; font-weight: 700; color: rgba(255, 255, 255, .85); }
.project-card-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 12px; }
.project-card-body h5 { margin: 0 0 2px; font-size: 1.02rem; color: var(--cv-accent); font-weight: 700; }
.project-card-tag { font-size: .8rem; color: #666; margin-bottom: 6px; }
.project-card-sum { margin: 0 0 8px; font-size: .84rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.project-more { margin-top: auto; font-size: .8rem; font-weight: 700; color: var(--cv-accent); }

/* Cửa sổ chi tiết dự án */
body.proj-open { overflow: hidden; }
.proj-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 14px; background: rgba(0, 0, 0, .6); }
.proj-box { position: relative; width: min(760px, 100%); max-height: calc(100vh - 28px); overflow: auto; padding: 22px 24px 26px; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); outline: none; }
.proj-box h3 { margin: 0 34px 2px 0; color: var(--cv-accent); font-weight: 700; font-size: 1.5rem; }
.proj-tagline { margin-bottom: 10px; color: #666; }
.proj-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f1f1; color: #333; cursor: pointer; }
.proj-x:hover { background: var(--cv-accent); color: #fff; }
.proj-main { margin: 4px 0 8px; max-height: 420px; overflow: auto; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; }
.proj-main img { display: block; width: 100%; height: auto; }
.proj-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.proj-thumbs button { width: 74px; height: 50px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #eee; cursor: pointer; }
.proj-thumbs button.on { border-color: var(--cv-accent); }
.proj-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.proj-desc { margin: 10px 0 14px; line-height: 1.6; }
.proj-box h4 { margin: 14px 0 8px; font-size: 1rem; font-weight: 700; color: var(--cv-accent); border-bottom: 2px solid var(--cv-accent); padding-bottom: 4px; }
.proj-features { padding-left: 20px; margin: 0; }
.proj-features li { margin-bottom: 7px; line-height: 1.5; }
.proj-box a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .3); }
.proj-box a.project-link { text-decoration: none; }

@media (max-width: 575px) {
    .project-grid { grid-template-columns: 1fr; }
    .proj-box { padding: 18px 16px 22px; }
}

/* Nút khoá nhỏ ở góc: chỉ để chủ CV mở trình sửa. */
#cv-edit-btn { position: fixed; right: 14px; bottom: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .18); color: #fff; opacity: .35; cursor: pointer; z-index: 50; }
#cv-edit-btn:hover, #cv-edit-btn:focus-visible { opacity: 1; background: var(--cv-accent); }

/* Hộp nhập khoá */
.cv-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.cv-modal form { width: min(420px, 100%); padding: 20px; border-radius: 14px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.cv-modal h2 { margin: 0 0 6px; font-size: 1.1rem; }
.cv-modal p { margin: 0 0 12px; color: #555; font-size: .85rem; }
.cv-modal input[type=password] { width: 100%; padding: 10px 12px; border: 1px solid #bbb; border-radius: 8px; font-size: .95rem; }
.cv-modal .cv-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.cv-modal .cv-err { min-height: 20px; margin: 8px 0 0; color: #c00; font-size: .84rem; }
.cv-btn { padding: 8px 14px; border: 1px solid #bbb; border-radius: 8px; background: #f3f3f3; cursor: pointer; font-size: .9rem; }
.cv-btn.primary { background: var(--cv-accent); border-color: var(--cv-accent); color: #fff; }
.cv-btn:disabled { opacity: .6; cursor: default; }

@media print {
    body { border: 0; max-width: none; }
    #cv-edit-btn, #cv-editor, .cv-modal, .proj-modal { display: none !important; }
    .sidebar, .sidebar .list-group-item, .progress-bar, .progress { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}