*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft JhengHei",Arial,sans-serif;color:#1f2937;background:#f5f7fb}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,92%);margin:0 auto}
.topbar{background:#0f172a;color:#dbeafe;font-size:14px}
.topbar-inner{height:38px;display:flex;align-items:center;justify-content:space-between}
.topbar a{margin-right:18px;color:#dbeafe}
.member-links a{margin-left:18px;margin-right:0}
.mainnav{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:20}
.fixed-simple{position:relative}
.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:900;font-size:30px;letter-spacing:.5px;color:#0f766e}
.logo span{color:#f59e0b}
.nav-menu{display:flex;gap:24px;align-items:center}
.nav-menu a{font-weight:700;color:#374151}
.nav-menu a:hover{color:#0f766e}
.mobile-menu{display:none;border:0;background:#0f766e;color:#fff;border-radius:8px;padding:8px 12px;font-size:20px}
.hero{height:520px;background:linear-gradient(135deg,#0f766e,#0f172a)}
.hero-mask{height:100%;background:radial-gradient(circle at 75% 20%,rgba(255,255,255,.18),transparent 35%)}
.hero-content{height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff}
.hero h1{font-size:56px;margin:0 0 18px;font-weight:900}
.hero p{font-size:22px;margin:0 0 34px;color:#e0f2fe}
.search-box{display:flex;gap:12px;background:rgba(255,255,255,.95);padding:16px;border-radius:18px;max-width:860px;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.search-box input,.search-box select{height:50px;border:1px solid #d1d5db;border-radius:10px;padding:0 14px;font-size:16px}
.search-box input{flex:1}
.search-box button,.filter button,.booking-box button,.login-btn,.member-card button{border:0;background:#0f766e;color:#fff;border-radius:10px;padding:0 28px;font-size:16px;font-weight:800;cursor:pointer}
.section{padding:58px 0}
.section-title{text-align:center;margin-bottom:32px}
.section-title h2{font-size:34px;margin:0 0 10px;color:#111827}
.section-title p{margin:0;color:#6b7280}
.category-grid,.tour-grid,.store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.category-card,.tour-card,.store-card,.info-card,.detail-box,.booking-box,.filter,.member-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 12px 30px rgba(15,23,42,.06)}
.category-card{padding:30px;text-align:center;transition:.2s}
.category-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(15,23,42,.12)}
.category-icon{font-size:42px;margin-bottom:12px}
.category-card h3{font-size:24px;margin:0 0 8px}
.category-card p{color:#6b7280;margin:0}
.theme-section{background:#fff}
.theme-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.theme-grid a{background:#f0fdfa;border:1px solid #99f6e4;color:#0f766e;padding:18px 10px;border-radius:14px;text-align:center;font-weight:800}
.tour-card{overflow:hidden;color:#111827}
.tour-img,.list-img,.detail-hero{background-size:cover;background-position:center}
.tour-img{height:190px}
.img-japan{background:linear-gradient(135deg,#f97316,#fde68a)}
.img-korea{background:linear-gradient(135deg,#ec4899,#a78bfa)}
.img-europe{background:linear-gradient(135deg,#2563eb,#93c5fd)}
.tour-body{padding:20px}
.tag{display:inline-block;background:#ecfdf5;color:#0f766e;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:800}
.tour-body h3{font-size:22px;margin:12px 0 8px}
.tour-body p{color:#6b7280;line-height:1.6}
.tour-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.tour-bottom strong,.price{color:#dc2626}
.info-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.info-card{padding:28px}
.info-card h3{font-size:24px;margin:0 0 10px}
.info-card p{color:#6b7280;line-height:1.7}
.info-card a{color:#0f766e;font-weight:800}
.footer{background:#0f172a;color:#cbd5e1;padding:46px 0;margin-top:30px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.footer h3,.footer h4{color:#fff}
.footer a{display:block;color:#cbd5e1;margin:8px 0}
.login-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99;align-items:center;justify-content:center}
.login-modal.show{display:flex}
.login-box{background:#fff;border-radius:18px;width:min(420px,92%);padding:30px;position:relative}
.modal-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:28px;cursor:pointer}
.login-box h3{font-size:26px;margin:0 0 20px}
.login-box input,.member-card input{width:100%;height:48px;margin-bottom:12px;border:1px solid #d1d5db;border-radius:10px;padding:0 14px}
.login-btn,.member-card button{width:100%;height:48px}
.login-actions,.member-actions{display:flex;justify-content:space-between;margin-top:16px;color:#0f766e;font-weight:700}
.page-hero{background:#0f766e;color:#fff;padding:70px 0}
.page-hero h1{font-size:42px;margin:0 0 10px}
.page-hero p{margin:0;color:#ccfbf1}
.layout{display:grid;grid-template-columns:260px 1fr;gap:24px}
.filter{padding:22px;height:max-content}
.filter h3{margin:0 0 18px}
.filter label{display:block;font-weight:800;margin:16px 0 8px}
.filter select{width:100%;height:42px;border:1px solid #d1d5db;border-radius:8px;padding:0 10px}
.filter button{height:44px;width:100%;margin-top:18px}
.list-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.list-card{display:grid;grid-template-columns:210px 1fr 180px;gap:20px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;margin-bottom:18px}
.list-img{height:170px}
.list-info{padding:18px 0}
.list-info h3{margin:10px 0 8px;font-size:22px}
.list-info p{color:#6b7280}
.list-meta{font-size:14px;color:#6b7280}
.list-price{padding:18px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:16px}
.list-price a{background:#0f766e;color:#fff;padding:10px 16px;border-radius:10px;font-weight:800}
.detail-hero{height:360px}
.detail-mask{height:100%;background:linear-gradient(90deg,rgba(15,23,42,.75),rgba(15,23,42,.15));color:#fff;display:flex;align-items:center}
.detail-mask h1{font-size:44px;margin:14px 0 10px}
.detail-layout{display:grid;grid-template-columns:1fr 320px;gap:24px}
.detail-box{padding:26px;margin-bottom:20px}
.detail-box h2{margin-top:0}
.detail-box li,.detail-box p{line-height:1.8;color:#4b5563}
.day-item{border-left:4px solid #0f766e;padding:10px 0 10px 16px;margin:12px 0;background:#f9fafb}
.booking-box{padding:26px;height:max-content;position:sticky;top:92px}
.booking-box .price{font-size:30px;font-weight:900;margin:10px 0 20px}
.booking-box button{height:48px;width:100%;margin:12px 0}
.booking-box a{display:block;text-align:center;color:#0f766e;font-weight:800}
.member-page{min-height:calc(100vh - 72px);display:flex;align-items:center;justify-content:center;padding:40px;background:linear-gradient(135deg,#0f766e,#0f172a)}
.member-card{width:min(430px,92%);padding:32px}
.member-card h1{margin-top:0}
.store-card{padding:26px}
.store-card h3{font-size:24px;margin-top:0;color:#0f766e}
@media(max-width:900px){
    .topbar{display:none}
    .mobile-menu{display:block}
    .nav-menu{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;flex-direction:column;align-items:flex-start;padding:20px 4%;border-bottom:1px solid #e5e7eb}
    .nav-menu.show{display:flex}
    .hero{height:560px}
    .hero h1{font-size:38px}
    .hero p{font-size:18px}
    .search-box{flex-direction:column}
    .search-box button{height:50px}
    .category-grid,.tour-grid,.info-blocks,.store-grid{grid-template-columns:1fr}
    .theme-grid{grid-template-columns:repeat(2,1fr)}
    .layout,.detail-layout{grid-template-columns:1fr}
    .list-card{grid-template-columns:1fr}
    .list-img{height:220px}
    .list-info{padding:18px}
    .list-price{align-items:flex-start}
    .footer-grid{grid-template-columns:1fr}
}


/* ===== 熱門主題輪播區 ===== */
.travel-slider-section{
    background:#ffffff;
    overflow:hidden;
}

.travel-slider-wrap{
    position:relative;
    width:100%;
    margin:0 auto;
}

.travel-slider-viewport{
    width:100%;
    overflow:hidden;
    border-radius:22px;
}

.travel-slider-track{
    display:flex;
    transition:transform .55s ease;
    will-change:transform;
}

.travel-slide{
    position:relative;
    flex:0 0 100%;
    min-height:470px;
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);
    overflow:hidden;
    color:#0f172a;
    background:#f8fafc;
}

.slide-main{
    position:relative;
    padding:64px 58px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#ffffff;
    min-height:470px;
}

.slide-main:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,.02));
    pointer-events:none;
}

.slide-main > *{
    position:relative;
    z-index:2;
}

.slide-kicker{
    font-family:Georgia,serif;
    font-size:24px;
    opacity:.92;
    margin-bottom:10px;
}

.slide-main h3{
    margin:0 0 18px;
    font-size:78px;
    line-height:1;
    font-weight:900;
    letter-spacing:2px;
    text-shadow:0 4px 12px rgba(0,0,0,.18);
}

.slide-main p{
    max-width:620px;
    margin:0 0 24px;
    font-size:20px;
    line-height:1.8;
    text-shadow:0 3px 10px rgba(0,0,0,.2);
}

.slide-main span{
    width:max-content;
    padding:10px 20px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    color:#0f766e;
    font-weight:900;
}

.slide-side{
    position:relative;
    background:#fff;
    min-height:470px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:34px;
}

.slide-side:after{
    content:"";
    position:absolute;
    right:-36px;
    bottom:-36px;
    width:150px;
    height:150px;
    border-radius:50%;
    background:rgba(15,118,110,.08);
}

.slide-side strong{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    font-size:46px;
    font-weight:500;
    letter-spacing:5px;
    line-height:1.35;
    color:#111827;
}

.slide-side small{
    margin-top:24px;
    color:#f97316;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.slide-japan .slide-main{
    background:
        radial-gradient(circle at 50% 76%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,0) 7%),
        linear-gradient(180deg,rgba(99,179,237,.9),rgba(191,219,254,.4)),
        linear-gradient(135deg,#60a5fa,#dbeafe);
}

.slide-japan .slide-main:after{
    content:"✈";
    position:absolute;
    right:15%;
    bottom:4%;
    font-size:180px;
    color:rgba(255,255,255,.6);
    transform:rotate(-10deg);
}

.slide-vietnam .slide-main{
    background:
        radial-gradient(circle at 18% 72%,rgba(255,255,255,.34) 0 13%,transparent 14%),
        radial-gradient(circle at 62% 70%,rgba(255,255,255,.28) 0 15%,transparent 16%),
        linear-gradient(135deg,#38bdf8,#14b8a6 58%,#fde68a);
}

.slide-vietnam .slide-main:after{
    content:"☀";
    position:absolute;
    right:10%;
    top:7%;
    font-size:120px;
    color:rgba(255,255,255,.55);
}

.slide-korea .slide-main{
    background:
        radial-gradient(circle at 70% 35%,rgba(255,255,255,.25) 0 12%,transparent 13%),
        linear-gradient(135deg,#ec4899,#8b5cf6 58%,#60a5fa);
}

.slide-korea .slide-main:after{
    content:"♥";
    position:absolute;
    right:14%;
    bottom:10%;
    font-size:130px;
    color:rgba(255,255,255,.46);
}

.slide-europe .slide-main{
    background:
        radial-gradient(circle at 76% 58%,rgba(255,255,255,.28) 0 16%,transparent 17%),
        linear-gradient(135deg,#2563eb,#1e3a8a 58%,#93c5fd);
}

.slide-europe .slide-main:after{
    content:"🗼";
    position:absolute;
    right:12%;
    bottom:12%;
    font-size:130px;
    opacity:.55;
}

.slide-thailand .slide-main{
    background:
        radial-gradient(circle at 72% 60%,rgba(255,255,255,.3) 0 15%,transparent 16%),
        linear-gradient(135deg,#f59e0b,#14b8a6 55%,#0ea5e9);
}

.slide-thailand .slide-main:after{
    content:"🌴";
    position:absolute;
    right:11%;
    bottom:9%;
    font-size:140px;
    opacity:.62;
}

.slide-cruise .slide-main{
    background:
        radial-gradient(circle at 66% 70%,rgba(255,255,255,.3) 0 14%,transparent 15%),
        linear-gradient(135deg,#0f766e,#0369a1 60%,#67e8f9);
}

.slide-cruise .slide-main:after{
    content:"🚢";
    position:absolute;
    right:11%;
    bottom:9%;
    font-size:150px;
    opacity:.65;
}

.travel-slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:5;
    width:46px;
    height:70px;
    border:0;
    border-radius:12px;
    background:rgba(15,23,42,.42);
    color:#fff;
    font-size:48px;
    line-height:1;
    cursor:pointer;
}

.travel-slider-prev{
    left:14px;
}

.travel-slider-next{
    right:14px;
}

.travel-slider-arrow:hover{
    background:rgba(15,118,110,.86);
}

.travel-slider-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0;
    margin:20px auto 0;
    max-width:900px;
    border-top:1px dashed #cbd5e1;
    border-bottom:1px dashed #cbd5e1;
    padding:12px 0;
}

.travel-slider-dots button{
    position:relative;
    border:0;
    background:transparent;
    padding:6px 18px;
    color:#64748b;
    font-weight:800;
    cursor:pointer;
}

.travel-slider-dots button:after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:1px;
    height:14px;
    transform:translateY(-50%);
    background:#d1d5db;
}

.travel-slider-dots button:last-child:after{
    display:none;
}

.travel-slider-dots button.active{
    color:#0f766e;
}

@media(max-width:900px){
    .travel-slide{
        min-height:430px;
        grid-template-columns:1fr;
    }

    .slide-main{
        min-height:360px;
        padding:44px 24px;
    }

    .slide-side{
        display:none;
    }

    .slide-main h3{
        font-size:48px;
    }

    .slide-main p{
        font-size:16px;
    }

    .travel-slider-arrow{
        width:38px;
        height:58px;
        font-size:36px;
    }

    .travel-slider-dots{
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding:12px 4px;
    }

    .travel-slider-dots button{
        white-space:nowrap;
        padding:6px 14px;
    }
}


/* ===== 輪播圖熱門主題 ===== */
.travel-slider-section{
    background:#fff;
}

.travel-slider-wrap{
    position:relative;
    width:100%;
    margin-top:20px;
}

.travel-slider-window{
    width:100%;
    overflow:hidden;
    border-radius:28px;
}

.travel-slider-track{
    display:flex;
    transition:transform .6s ease;
    will-change:transform;
}

.travel-slide{
    position:relative;
    flex:0 0 100%;
    min-height:520px;
    display:block;
    text-decoration:none;
    color:#fff;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    border-radius:28px;
    overflow:hidden;
}

.travel-slide-mask{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.05) 100%);
    z-index:1;
}

.travel-slide-content{
    position:absolute;
    left:60px;
    bottom:60px;
    z-index:2;
    max-width:620px;
}

.travel-slide-en{
    font-size:22px;
    font-weight:500;
    margin-bottom:10px;
    color:#ffffff;
    letter-spacing:1px;
}

.travel-slide-content h3{
    margin:0 0 16px;
    font-size:58px;
    line-height:1.05;
    font-weight:800;
    color:#ffffff;
    text-shadow:0 3px 10px rgba(0,0,0,.25);
}

.travel-slide-content p{
    margin:0 0 22px;
    font-size:18px;
    line-height:1.8;
    color:#ffffff;
    text-shadow:0 2px 8px rgba(0,0,0,.2);
}

.travel-slide-content span{
    display:inline-block;
    padding:12px 24px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    color:#0f766e;
    font-size:15px;
    font-weight:700;
}

.travel-slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:46px;
    height:68px;
    border:none;
    border-radius:12px;
    background:rgba(0,0,0,.35);
    color:#fff;
    font-size:34px;
    cursor:pointer;
    z-index:10;
}

.travel-slider-arrow:hover{
    background:rgba(15,118,110,.85);
}

.travel-slider-prev{
    left:18px;
}

.travel-slider-next{
    right:18px;
}

.travel-slider-tabs{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:22px;
}

.travel-slider-tabs button{
    padding:10px 18px;
    border:1px solid #d1d5db;
    border-radius:999px;
    background:#fff;
    color:#374151;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:all .25s ease;
}

.travel-slider-tabs button.active,
.travel-slider-tabs button:hover{
    background:#0f766e;
    color:#fff;
    border-color:#0f766e;
}

@media (max-width:768px){
    .travel-slide{
        min-height:300px;
        border-radius:18px;
    }

    .travel-slide-content{
        left:22px;
        right:22px;
        bottom:24px;
        max-width:none;
    }

    .travel-slide-en{
        font-size:16px;
        margin-bottom:6px;
    }

    .travel-slide-content h3{
        font-size:28px;
        margin-bottom:10px;
    }

    .travel-slide-content p{
        font-size:14px;
        line-height:1.6;
        margin-bottom:14px;
    }

    .travel-slide-content span{
        padding:9px 16px;
        font-size:13px;
    }

    .travel-slider-arrow{
        width:36px;
        height:50px;
        font-size:28px;
    }

    .travel-slider-prev{
        left:8px;
    }

    .travel-slider-next{
        right:8px;
    }

    .travel-slider-tabs{
        gap:8px;
    }

    .travel-slider-tabs button{
        padding:8px 12px;
        font-size:12px;
    }
}