/* Exact desktop layout */
.spu-college-about-page .entry-content,
.spu-college-about-page .wp-block-post-content,
.spu-college-about-page main,
.spu-college-about-page .site-main {
    max-width: none !important;
}

.spu-about-exact {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    line-height: 0;
    overflow: hidden;
    background: #fff;
}

.spu-about-exact img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* Responsive HTML version */
.spu-about-responsive {
    --navy: #111b4b;
    --purple: #662080;
    --pink: #ec1672;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    font-family: "Prompt", "Sarabun", Tahoma, Arial, sans-serif;
    color: var(--navy);
    background: #fff;
}

.spu-about-responsive * { box-sizing: border-box; }
.spu-about-container { width: min(1360px, calc(100% - 40px)); margin: 0 auto; }

.spu-about-hero {
    min-height: 235px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(12,21,70,.96) 0%, rgba(31,30,83,.78) 42%, rgba(47,28,80,.12) 74%),
        url('../images/about-college-reference.png') center top / cover no-repeat;
    padding: 30px 0 18px;
}
.spu-about-hero h1 { margin: 0 0 4px; font-size: clamp(38px, 4vw, 58px); line-height: 1.15; font-weight: 700; color: #fff; }
.spu-about-hero p { margin: 0; font-size: clamp(18px, 1.7vw, 25px); line-height: 1.45; color: #fff; }
.spu-about-pink-line { display: block; width: 44px; height: 4px; background: var(--pink); margin: 14px 0 24px; }
.spu-about-pink-line.small { width: 38px; height: 3px; margin: 10px 0 14px; }
.spu-about-breadcrumb { font-size: 13px; color: rgba(255,255,255,.9); }

.spu-about-content { padding: 28px 0 24px; }
.spu-about-grid { display: grid; grid-template-columns: 38% 62%; gap: 40px; align-items: start; }
.spu-about-history h2 { margin: 0; font-size: 22px; line-height: 1.25; color: var(--navy); }
.spu-about-history h3 { margin: 2px 0 0; font-size: 22px; line-height: 1.25; color: var(--pink); }
.spu-about-timeline { position: relative; }
.spu-about-timeline:before { content:""; position:absolute; left:19px; top:21px; bottom:26px; border-left:1px dashed #bfc2d0; }
.spu-about-timeline-item { position: relative; display:grid; grid-template-columns: 48px 1fr; gap: 12px; margin: 0 0 22px; }
.spu-about-timeline-item p { margin:0; font-size: 13px; line-height:1.48; color:#182049; }
.spu-about-icon { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:linear-gradient(145deg,#7a218b,#542078); color:#fff; font-size:22px; box-shadow:0 2px 7px rgba(78,30,111,.18); }

.spu-about-quote { min-height: 220px; border-radius: 12px; overflow:hidden; display:flex; justify-content:flex-end; align-items:center; padding:26px 60px 26px 48%; background: linear-gradient(90deg, rgba(255,255,255,.02), rgba(34,17,74,.94)), url('../images/about-college-reference.png') 66% 36% / 155% auto no-repeat; }
.spu-about-quote blockquote { position:relative; margin:0; max-width:280px; color:#fff; font-size:21px; line-height:1.42; font-weight:400; }
.spu-about-quote blockquote:before { content:'“'; position:absolute; left:-10px; top:-38px; font-size:48px; color:rgba(255,255,255,.72); }
.spu-about-quote blockquote:after { content:'”'; position:absolute; right:-12px; bottom:-30px; font-size:48px; color:rgba(255,255,255,.72); }

.spu-about-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:22px; }
.spu-about-card { position:relative; overflow:hidden; border:1px solid #e7e7ec; border-radius:14px; background:#fff; text-align:center; box-shadow:0 5px 18px rgba(18,27,75,.04); padding-bottom:18px; }
.spu-about-card-image { height:160px; background-image:url('../images/about-college-reference.png'); background-repeat:no-repeat; background-size:1536px auto; }
.spu-about-card .image-1 { background-position:-610px -505px; }
.spu-about-card .image-2 { background-position:-882px -505px; }
.spu-about-card .image-3 { background-position:-1172px -505px; }
.spu-about-card-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:-20px auto 6px; position:relative; z-index:2; border-radius:50%; background:var(--pink); color:#fff; font-size:22px; border:3px solid #fff; }
.spu-about-card h3 { margin:0 0 4px; font-size:20px; color:#6f1b7e; }
.spu-about-card p { margin:0; padding:0 12px; font-size:13px; line-height:1.4; color:#182049; }

@media (max-width: 1000px) {
    .spu-about-grid { grid-template-columns:1fr; }
    .spu-about-right { order:-1; }
}

@media (max-width: 720px) {
    .spu-about-exact { display:none; }
    .spu-about-responsive { display:block; }
    .spu-about-container { width:min(100% - 28px, 1360px); }
    .spu-about-hero { min-height:280px; padding-top:48px; background-position:62% top; }
    .spu-about-grid { gap:24px; }
    .spu-about-quote { min-height:250px; padding:28px 28px 28px 38%; background-size:auto 100%; background-position:48% center; }
    .spu-about-quote blockquote { font-size:18px; }
    .spu-about-cards { grid-template-columns:1fr; }
    .spu-about-card-image { height:210px; background-size:2000px auto; }
    .spu-about-card .image-1 { background-position:-795px -657px; }
    .spu-about-card .image-2 { background-position:-1148px -657px; }
    .spu-about-card .image-3 { background-position:-1527px -657px; }
}

@media (min-width: 721px) {
    .spu-about-exact + .spu-about-responsive { display:none; }
}

/* Aviation Business exact page */
.spu-aviation-exact {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    line-height: 0;
    overflow: hidden;
    background: #fff;
}

.spu-aviation-exact img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.spu-aviation-register {
    position: absolute;
    left: 79.1%;
    top: 33.4%;
    width: 13.1%;
    height: 5.8%;
    z-index: 2;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
    border-radius: 999px;
}

.spu-aviation-register:focus-visible {
    outline: 4px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .spu-aviation-exact {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .spu-aviation-exact img {
        width: 1180px;
        max-width: none;
    }

    .spu-aviation-register {
        left: 933px;
        top: 267px;
        width: 155px;
        height: 46px;
    }
}


/* Hotel Business & Tourism exact page */
.spu-tourism-exact {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    line-height: 0;
    overflow: hidden;
    background: #fff;
}

.spu-tourism-exact img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.spu-tourism-register {
    position: absolute;
    left: 77.35%;
    top: 36.15%;
    width: 14.05%;
    height: 5.25%;
    z-index: 2;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
    border-radius: 999px;
}

.spu-tourism-register:focus-visible {
    outline: 4px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .spu-tourism-exact {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .spu-tourism-exact img {
        width: 1180px;
        max-width: none;
    }

    .spu-tourism-register {
        left: 913px;
        top: 341px;
        width: 166px;
        height: 49px;
    }
}