/* ============================================================
   RESPONSIVE WORK PAGE
   iPad Mini:      768×1024
   iPad Air:       820×1180
   Surface Pro 7:  912×1368
   iPad Pro:       1024×1366
   ============================================================ */

/* ============================================================
   GLOBAL FIXES
   ============================================================ */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video {
    max-width: 100%;
    box-sizing: border-box;
}

.main-footer {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.footer {
    box-sizing: border-box;
}

.project-1,
.project-2,
.project-3,
.project-4 {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}


/* ============================================================
   ≤ 539px — MOBILE SMALL — 1 cột
   ============================================================ */
@media (max-width: 539px) {

    body { display: flex; flex-direction: column; min-height: 100vh; }
    .work-main { flex: 1; }

    .header { padding: 12px 20px; }
    .logo-img { height: 38px; }
    .main-menu { font-size: 13px; }
    .main-menu li { margin-right: 10px; }
    .nav-actions { gap: 10px; }
    .theme-toggle { width: 17px; height: 17px; }
    .hamburger-menu { width: 20px; height: 16px; }
    .hamburger-menu.active .bar:nth-child(1) { transform: rotate(-45deg) translate(-4px, 6px); }
    .hamburger-menu.active .bar:nth-child(3) { transform: rotate(45deg) translate(-4px, -6px); }
    .dropdown-menu { top: 50px; right: 20px; min-width: 120px; padding: 6px 8px; }
    .dropdown-menu li { padding: 6px 14px; }
    .sub-item { font-size: 13px; }

    .project-1 { padding: 36px 20px 16px; display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 8px; }
    .project-2 { padding: 16px 20px; display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 8px; }
    .project-3 { padding: 16px 20px; display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
    .project-4 { padding: 16px 20px; display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }

    .project-content img { height: auto; aspect-ratio: 4/3; border-radius: 10px; }
    .project-content h3 { font-size: 16px; margin-top: 10px; }

    .back-to-top { padding: 0 20px 16px; font-size: 13px; }
    .main-footer { padding: 0 20px 20px; margin-bottom: 0; }
    .footer { flex-direction: column; align-items: flex-start; gap: 8px; height: auto; width: 100%; max-width: 100%; padding: 16px 20px; border-radius: 12px; }
    .footer-highlight { font-size: 14px; }
}


/* ============================================================
   540px – 767px — MOBILE LARGE — 1 cột
   ============================================================ */
@media (min-width: 540px) and (max-width: 767px) {

    body { display: flex; flex-direction: column; min-height: 100vh; }
    .work-main { flex: 1; }

    .header { padding: 14px 28px; }
    .logo-img { height: 42px; }
    .main-menu { font-size: 14px; }
    .main-menu li { margin-right: 14px; }
    .nav-actions { gap: 12px; }
    .theme-toggle { width: 19px; height: 19px; }
    .hamburger-menu { width: 22px; height: 18px; }
    .hamburger-menu.active .bar:nth-child(1) { transform: rotate(-45deg) translate(-4px, 7px); }
    .hamburger-menu.active .bar:nth-child(3) { transform: rotate(45deg) translate(-4px, -7px); }
    .dropdown-menu { top: 54px; right: 28px; min-width: 130px; padding: 8px 10px; }
    .dropdown-menu li { padding: 6px 20px; }
    .sub-item { font-size: 14px; }

    .project-1 { padding: 44px 28px 18px; display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 10px; }
    .project-2 { padding: 18px 28px; display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 10px; }
    .project-3 { padding: 18px 28px; display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 50px; }
    .project-4 { padding: 18px 28px; display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 50px; }

    .project-content img { height: auto; aspect-ratio: 4/3; border-radius: 12px; }
    .project-content h3 { font-size: 17px; margin-top: 12px; }

    .back-to-top { padding: 0 28px 18px; font-size: 14px; }
    .main-footer { padding: 0 28px 24px; margin-bottom: 0; }
    .footer { flex-direction: column; align-items: flex-start; gap: 10px; height: auto; width: 100%; max-width: 100%; padding: 18px 24px; border-radius: 12px; }
    .footer-highlight { font-size: 15px; }
}


/* ============================================================
   768px – 819px — iPad Mini — 1 cột căn giữa
   ============================================================ */
@media (min-width: 768px) and (max-width: 819px) {

    body { display: flex; flex-direction: column; min-height: 100vh; }
    .work-main { flex: 1; display: flex; flex-direction: column; align-items: center; }

    .header { padding: 16px 32px; }
    .logo-img { height: 46px; }
    .main-menu { font-size: 15px; }
    .main-menu li { margin-right: 18px; }
    .nav-actions { gap: 14px; }
    .theme-toggle { width: 20px; height: 20px; }
    .dropdown-menu { top: 58px; right: 32px; min-width: 130px; }
    .dropdown-menu li { padding: 7px 32px; }
    .sub-item { font-size: 14px; }

    .project-1 { padding: 52px 32px 20px; display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 10px; width: 100%; max-width: 640px; box-sizing: border-box; }
    .project-2 { padding: 20px 32px; display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 10px; width: 100%; max-width: 640px; box-sizing: border-box; }
    .project-3 { padding: 20px 32px; display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 10px; width: 100%; max-width: 640px; box-sizing: border-box; }
    .project-4 { padding: 20px 32px; display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 10px; width: 100%; max-width: 640px; box-sizing: border-box; }

    .project-content img { height: auto; aspect-ratio: 16/9; border-radius: 12px; }
    .project-content h3 { font-size: 18px; margin-top: 12px; }

    .back-to-top { padding: 0 32px 20px; font-size: 15px; width: 100%; max-width: 640px; box-sizing: border-box; }
    .main-footer { padding: 0 32px 28px; margin-bottom: 0; }
    .footer { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; height: auto; min-height: 60px; width: 100%; max-width: 100%; padding: 16px 24px; border-radius: 14px; }
    .footer-highlight { font-size: 15px; }
}


/* ============================================================
   820px – 911px — iPad Air — 1 cột căn giữa
   ============================================================ */
@media (min-width: 820px) and (max-width: 911px) {

    body { display: flex; flex-direction: column; min-height: 100vh; }
    .work-main { flex: 1; display: flex; flex-direction: column; align-items: center; }

    .header { padding: 16px 36px; }
    .logo-img { height: 48px; }
    .main-menu { font-size: 15px; }
    .main-menu li { margin-right: 20px; }
    .nav-actions { gap: 14px; }
    .theme-toggle { width: 20px; height: 20px; }
    .dropdown-menu { top: 58px; right: 36px; min-width: 130px; }
    .dropdown-menu li { padding: 7px 36px; }
    .sub-item { font-size: 14px; }

    .project-1 { padding: 56px 36px 20px; display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 10px; width: 100%; max-width: 700px; box-sizing: border-box; }
    .project-2 { padding: 20px 36px; display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 10px; width: 100%; max-width: 700px; box-sizing: border-box; }
    .project-3 { padding: 20px 36px; display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 10px; width: 100%; max-width: 700px; box-sizing: border-box; }
    .project-4 { padding: 20px 36px; display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 10px; width: 100%; max-width: 700px; box-sizing: border-box; }

    .project-content img { height: auto; aspect-ratio: 16/9; border-radius: 12px; }
    .project-content h3 { font-size: 19px; margin-top: 12px; }

    .back-to-top { padding: 0 36px 20px; font-size: 15px; width: 100%; max-width: 700px; box-sizing: border-box; }
    .main-footer { padding: 0 36px 28px; margin-bottom: 0; }
    .footer { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; height: auto; min-height: 64px; width: 100%; max-width: 100%; padding: 16px 28px; border-radius: 14px; }
    .footer-highlight { font-size: 16px; }
}


/* ============================================================
   912px – 1023px — Surface Pro 7 — 1 cột căn giữa
   ============================================================ */
@media (min-width: 912px) and (max-width: 1023px) {

    body { display: flex; flex-direction: column; min-height: 100vh; }
    .work-main { flex: 1; display: flex; flex-direction: column; align-items: center; }

    .header { padding: 18px 40px; }
    .logo-img { height: 52px; }
    .main-menu { font-size: 16px; }
    .main-menu li { margin-right: 22px; }
    .nav-actions { gap: 14px; }
    .theme-toggle { width: 20px; height: 20px; }
    .dropdown-menu { top: 62px; right: 40px; min-width: 136px; }
    .dropdown-menu li { padding: 8px 44px; }
    .sub-item { font-size: 15px; }

    .project-1 { padding: 60px 40px 20px; display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 10px; width: 100%; max-width: 760px; box-sizing: border-box; }
    .project-2 { padding: 20px 40px; display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 10px; width: 100%; max-width: 760px; box-sizing: border-box; }
    .project-3 { padding: 20px 40px; display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 10px; width: 100%; max-width: 760px; box-sizing: border-box; }
    .project-4 { padding: 20px 40px; display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 10px; width: 100%; max-width: 760px; box-sizing: border-box; }

    .project-content img { height: auto; aspect-ratio: 16/9; border-radius: 12px; }
    .project-content h3 { font-size: 20px; margin-top: 12px; }

    .back-to-top { padding: 0 40px 20px; font-size: 16px; width: 100%; max-width: 760px; box-sizing: border-box; }
    .main-footer { padding: 0 40px 32px; margin-bottom: 0; }
    .footer { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; height: auto; min-height: 70px; width: 100%; max-width: 100%; padding: 0 28px; border-radius: 14px; }
    .footer-highlight { font-size: 17px; }
}


/* ============================================================
   1024px – 1279px — iPad Pro — 3 cột
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {

    body { display: flex; flex-direction: column; min-height: 100vh; }
    .work-main { flex: 1; }

    .header { padding: 20px 48px; }
    .logo-img { height: 58px; }
    .main-menu { font-size: 18px; }
    .main-menu li { margin-right: 26px; }
    .dropdown-menu { top: 68px; right: 48px; min-width: 144px; }
    .dropdown-menu li { padding: 8px 60px; }
    .sub-item { font-size: 15px; }

    .project-1 { padding: 80px 48px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 10px; }
    .project-2 { padding: 20px 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 10px; }
    .project-3 { padding: 20px 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 80px; }
    .project-4 { padding: 20px 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 80px; }

    .project-content img { height: auto; aspect-ratio: 4/3; border-radius: 12px; }
    .project-content h3 { font-size: 18px; margin-top: 12px; }

    .back-to-top { padding: 0 48px 20px; font-size: 16px; }
    .main-footer { padding: 0 48px 40px; margin-bottom: 0; }
    .footer { flex-direction: row; justify-content: space-between; align-items: center; gap: 40px; min-height: 76px; height: auto; width: 100%; max-width: 100%; padding: 0 32px; border-radius: 14px; }
    .footer-highlight { font-size: 19px; }
}


/* ============================================================
   1280px – 1444px — ZenBook + Desktop Standard
   ============================================================ */
@media (min-width: 1280px) and (max-width: 1444px) {

    body { display: flex; flex-direction: column; min-height: 100vh; }
    .work-main { flex: 1; }

    .back-to-top { padding: 0 60px 20px; font-size: 18px; }
    .main-footer { padding: 0 0 40px; margin-top: 40px; margin-bottom: 0; }
    .footer { gap: 280px; width: 1420px; max-width: calc(100% - 120px); height: 80px; border-radius: 15px; justify-content: center; }
    .footer-highlight { font-size: 24px; }
}


/* ============================================================
   1445px+ — Wide Desktop
   ============================================================ */
@media (min-width: 1445px) {

    body { display: flex; flex-direction: column; min-height: 100vh; }
    .work-main { flex: 1; }

    .header { padding: 24px 80px; }
    .logo-img { height: 70px; }
    .main-menu { font-size: 20px; }
    .main-menu li { margin-right: 36px; }
    .dropdown-menu { top: 74px; right: 80px; min-width: 155px; }
    .dropdown-menu li { padding: 8px 90px; }
    .sub-item { font-size: 16px; }

    .project-1 { padding: 100px 80px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 12px; }
    .project-2 { padding: 24px 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 12px; }
    .project-3 { padding: 24px 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 120px; }
    .project-4 { padding: 24px 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 120px; }

    .project-content img { height: auto; aspect-ratio: 4/3; border-radius: 16px; }
    .project-content h3 { font-size: 26px; margin-top: 18px; }

    .back-to-top { padding: 0 80px 24px; font-size: 20px; }
    .main-footer { padding: 0 0 0; margin-top: 60px; margin-bottom: 0; }
    .footer { gap: 320px; width: 1600px; max-width: calc(100% - 160px); height: 70px; border-radius: 14px; justify-content: center; }
    .footer-highlight { font-size: 26px; }
}