.kao-thp{
    --kao-bg:#f6f5f2;
    --kao-card:#ffffff;
    --kao-ink:#282521;
    --kao-muted:#777069;
    --kao-line:#e9e4de;
    --kao-soft:#f7f3ee;
    --kao-dark:#3c3732;
    box-sizing:border-box;
    width:min(1180px, calc(100% - 32px));
    margin:28px auto 54px;
    font-family:inherit;
    color:var(--kao-ink);
}
.kao-thp *{box-sizing:border-box}
.kao-thp a{text-decoration:none}

.kao-thp-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    padding:32px;
    margin-bottom:28px;
    background:
        radial-gradient(circle at 88% 8%, rgba(255,255,255,.95), transparent 34%),
        linear-gradient(135deg,#f5eee6 0%,#fff 58%,#f3f1ee 100%);
    border:1px solid var(--kao-line);
    border-radius:22px;
    box-shadow:0 10px 30px rgba(45,38,31,.07);
}
.kao-thp-eyebrow,
.kao-thp-section-kicker{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:1.5px;
    color:#9b8067;
}
.kao-thp-hero-title{
    margin:0 0 10px;
    font-size:clamp(27px,4vw,42px);
    line-height:1.25;
    font-weight:900;
    letter-spacing:-.5px;
    color:#2c2824;
}
.kao-thp-hero-copy p{
    max-width:720px;
    margin:0;
    color:var(--kao-muted);
    font-size:15px;
    line-height:1.9;
}
.kao-thp-hero-note{
    flex:0 0 220px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    border-radius:14px;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(0,0,0,.06);
    color:#655e57;
    font-size:13px;
    line-height:1.45;
}
.kao-thp-hero-note strong{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:50%;
    background:#3f3934;
    color:#fff;
    font-size:13px;
}

.kao-thp-section{
    margin:0 0 34px;
}
.kao-thp-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin:0 0 16px;
}
.kao-thp-section-head h2{
    margin:0 0 5px !important;
    padding:0 !important;
    border:0 !important;
    font-size:25px !important;
    line-height:1.35 !important;
    font-weight:900 !important;
    color:#2d2925 !important;
}
.kao-thp-section-head p{
    margin:0 !important;
    color:#827a73 !important;
    font-size:14px !important;
    line-height:1.65 !important;
}

.kao-thp-topics{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.kao-thp-topic{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"name arrow" "count arrow";
    align-items:center;
    gap:2px 10px;
    min-height:84px;
    padding:16px 17px;
    background:var(--kao-card);
    border:1px solid var(--kao-line);
    border-radius:15px;
    color:var(--kao-ink) !important;
    box-shadow:0 6px 18px rgba(45,38,31,.045);
    transition:.18s ease;
}
.kao-thp-topic:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(45,38,31,.085);
}
.kao-thp-topic-name{
    grid-area:name;
    font-size:16px;
    line-height:1.35;
    font-weight:850;
}
.kao-thp-topic-count{
    grid-area:count;
    color:#938a82;
    font-size:12px;
}
.kao-thp-topic-arrow{
    grid-area:arrow;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--kao-soft);
    color:#6f645b;
    font-size:17px;
}

.kao-thp-grid{
    display:grid;
    gap:16px;
}
.kao-thp-grid-latest{grid-template-columns:repeat(4,minmax(0,1fr))}
.kao-thp-grid-featured{grid-template-columns:repeat(5,minmax(0,1fr))}
.kao-thp-grid-more{grid-template-columns:repeat(3,minmax(0,1fr))}

.kao-thp-card{
    min-width:0;
    overflow:hidden;
    background:var(--kao-card);
    border:1px solid var(--kao-line);
    border-radius:17px;
    box-shadow:0 6px 20px rgba(45,38,31,.05);
    transition:.18s ease;
}
.kao-thp-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(45,38,31,.09);
}
.kao-thp-card-media{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:4 / 3;
    overflow:hidden;
    background:#f3f1ee;
}
.kao-thp-card-media img{
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}
.kao-thp-noimg{
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    color:#aaa098;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.5px;
}
.kao-thp-badge{
    position:absolute;
    top:10px;
    left:10px;
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(42,38,34,.88);
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.5px;
}
.kao-thp-card-body{
    padding:15px 15px 17px;
}
.kao-thp-card-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
    color:#948b83;
    font-size:11px;
    line-height:1.35;
}
.kao-thp-card-title{
    margin:0 0 9px !important;
    padding:0 !important;
    border:0 !important;
    font-size:16px !important;
    line-height:1.55 !important;
    font-weight:850 !important;
}
.kao-thp-card-title a{
    color:#302c28 !important;
}
.kao-thp-card-excerpt{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    min-height:4.7em;
    margin:0 0 12px !important;
    color:#756e68 !important;
    font-size:13px !important;
    line-height:1.6 !important;
}
.kao-thp-card-more{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#5c5148 !important;
    font-size:12px;
    font-weight:850;
}
.kao-thp-card-more span{font-size:15px}

.kao-thp-featured-section{
    padding:24px;
    background:#f1eee9;
    border:1px solid #e8e1d9;
    border-radius:20px;
}

.kao-thp-pagination{
    margin-top:22px;
}
.kao-thp-pagination ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
}
.kao-thp-pagination li{margin:0 !important}
.kao-thp-pagination a,
.kao-thp-pagination span{
    display:grid;
    place-items:center;
    min-width:38px;
    min-height:38px;
    padding:7px 11px;
    border:1px solid var(--kao-line);
    border-radius:10px;
    background:#fff;
    color:#544d47 !important;
    font-size:13px;
}
.kao-thp-pagination .current{
    background:#3c3732;
    color:#fff !important;
    border-color:#3c3732;
}

.kao-thp-bottom-note{
    padding:22px 24px;
    background:#fff;
    border:1px solid var(--kao-line);
    border-radius:16px;
    text-align:center;
}
.kao-thp-bottom-note strong{
    display:block;
    margin-bottom:5px;
    font-size:15px;
}
.kao-thp-bottom-note p{
    margin:0 !important;
    color:#827a73 !important;
    font-size:13px !important;
}

@media(max-width:1050px){
    .kao-thp-grid-latest{grid-template-columns:repeat(2,minmax(0,1fr))}
    .kao-thp-grid-featured{grid-template-columns:repeat(2,minmax(0,1fr))}
    .kao-thp-grid-more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
    .kao-thp{
        width:min(100% - 20px,1180px);
        margin-top:16px;
    }
    .kao-thp-hero{
        align-items:flex-start;
        flex-direction:column;
        padding:22px;
        border-radius:17px;
    }
    .kao-thp-hero-note{
        flex:0 0 auto;
        width:100%;
    }
    .kao-thp-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .kao-thp-featured-section{padding:16px}
}
@media(max-width:520px){
    .kao-thp-grid-latest,
    .kao-thp-grid-featured,
    .kao-thp-grid-more{grid-template-columns:1fr}
    .kao-thp-topics{grid-template-columns:1fr}
    .kao-thp-card-media{aspect-ratio:16 / 10}
    .kao-thp-section-head h2{font-size:22px !important}
}


/* v1.1 主站同款聯絡區 */
.kao-thp-contact{
    margin-top:34px;
    padding:26px;
    background:#2f2b27;
    color:#fff;
    border-radius:20px;
    box-shadow:0 10px 28px rgba(34,29,25,.14);
}
.kao-thp-contact-head{
    text-align:center;
    margin-bottom:18px;
}
.kao-thp-contact-head .kao-thp-section-kicker{
    color:#d9c5b2;
}
.kao-thp-contact-head h2{
    margin:0 0 6px !important;
    padding:0 !important;
    border:0 !important;
    color:#fff !important;
    font-size:25px !important;
    font-weight:900 !important;
}
.kao-thp-contact-head p{
    margin:0 !important;
    color:#c9c0b8 !important;
    font-size:13px !important;
    line-height:1.7 !important;
}
.kao-thp-contact-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.kao-thp-contact-card{
    display:flex !important;
    align-items:center;
    gap:12px;
    min-height:76px;
    padding:14px 15px;
    background:#fff;
    border-radius:14px;
    color:#2e2925 !important;
    text-decoration:none !important;
}
.kao-thp-contact-icon{
    display:grid;
    place-items:center;
    flex:0 0 44px;
    width:44px;
    height:44px;
    border-radius:12px;
    background:#f2eee9;
    font-size:12px;
    font-weight:900;
    letter-spacing:.5px;
}
.kao-thp-contact-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}
.kao-thp-contact-copy strong{
    font-size:14px;
    line-height:1.3;
}
.kao-thp-contact-copy small{
    color:#7f766e;
    font-size:12px;
}
.kao-thp-contact-go{
    margin-left:auto;
    font-size:18px;
    opacity:.55;
}
.kao-thp-contact-card:hover{
    transform:translateY(-1px);
}
.kao-thp-contact-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    color:#a9a099;
    font-size:12px;
}
.kao-thp-contact-links a{
    color:#eee6df !important;
}
.kao-thp-contact-age{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12);
    text-align:center;
    color:#e0d7cf;
    font-size:12px;
}
@media(max-width:760px){
    .kao-thp-contact{
        padding:18px;
        border-radius:16px;
    }
    .kao-thp-contact-grid{
        grid-template-columns:1fr;
    }
}