/* ========== Reset & Base ========== */
.ty-body *{margin:0;padding:0;box-sizing:border-box}
.ty-body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#333;background:#f5f6fa;line-height:1.6}
a{text-decoration:none;color:inherit}

/* ========== Top Bar ========== */
.ty-topbar{background:#1a1a2e;color:#b8b8c8;font-size:12px;padding:7px 0}
.ty-topbar .inner{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:0 20px}
.ty-topbar a{color:#ccc;margin-left:16px;text-decoration:none}
.ty-topbar a:hover{color:#fff}

/* ========== Navbar (携程风格) ========== */
.ty-navbar{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08);position:sticky;top:0;z-index:1000}
.ty-navbar .inner{max-width:1200px;margin:auto;display:flex;align-items:center;height:64px;padding:0 20px}
.ty-logo{font-size:22px;font-weight:800;color:#0a6ecb;text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap;margin-right:36px}
.ty-logo img{height:36px;width:auto}
.ty-nav{display:flex;gap:2px;flex:1}
.ty-nav a{color:#333;padding:10px 15px;border-radius:6px;font-size:14px;font-weight:500;transition:.2s;white-space:nowrap;text-decoration:none}
.ty-nav a:hover,.ty-nav a.active{color:#0a6ecb;background:#f0f7ff}
.ty-nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.ty-langswitch{display:flex;gap:4px}
.ty-langswitch a{font-size:12px;color:#666;padding:4px 10px;border:1px solid #ddd;border-radius:14px;text-decoration:none;transition:.2s}
.ty-langswitch a.on{background:#0a6ecb;color:#fff;border-color:#0a6ecb}

/* ========== Hero Banner ========== */
.ty-hero{position:relative;background:linear-gradient(135deg,#0c5cb4,#0a3d82 50%,#062550);min-height:548px;padding-top:108px;display:flex;align-items:center;overflow:hidden}
.ty-hero-bg{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 25% 30%,rgba(255,255,255,.10),transparent 55%),radial-gradient(circle at 80% 70%,rgba(255,122,0,.13),transparent 45%);pointer-events:none}
/* 头部搜索背景轮播（后台站点参数 top_search_bg 可换/可多图） */
.ty-hero-slides{position:absolute;inset:0;z-index:0}
.ty-hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
.ty-hero-slide.on{opacity:1}
.ty-hero .inner{position:relative;z-index:2;max-width:1100px;margin:auto;padding:52px 20px 40px;width:100%}
.ty-hero h1{font-size:40px;color:#fff;font-weight:800;margin-bottom:10px;text-shadow:0 2px 14px rgba(0,0,0,.3)}
.ty-hero p{font-size:17px;color:rgba(255,255,255,.88);margin-bottom:24px;max-width:560px;line-height:1.7}

/* Search Box */
.ty-search{background:rgba(255,255,255,.97);border-radius:14px;padding:20px 24px;max-width:700px;box-shadow:0 14px 44px rgba(0,0,0,.22)}
.ty-search-tabs{display:flex;gap:0;margin-bottom:12px;border-bottom:2px solid #eee}
.ty-search-tabs span{padding:8px 18px;cursor:pointer;font-size:14px;color:#666;font-weight:600;border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:.2s}
.ty-search-tabs span.on{color:#0a6ecb;border-bottom-color:#ff7a00}
.ty-search-form{display:flex;gap:8px}
.ty-search-form select,.ty-search-form input{padding:10px 13px;border:1.5px solid #e0e0e0;border-radius:8px;font-size:14px;outline:none;transition:.2s;background:#fff}
.ty-search-form input:focus{border-color:#0a6ecb;box-shadow:0 0 0 3px rgba(10,110,203,.1)}
.ty-search-form select{min-width:120px;color:#333}
.ty-search-form input{flex:1;min-width:0}
.ty-search-form button{padding:10px 28px;background:linear-gradient(135deg,#ff7a00,#ff5722);color:#fff;border:0;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;transition:.2s;white-space:nowrap}
.ty-search-form button:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,122,0,.35)}
.ty-hotkw{margin-top:12px;font-size:12px;color:rgba(255,255,255,.72)}
.ty-hotkw a{color:rgba(255,255,255,.82);text-decoration:none;margin-right:11px;padding:2px 7px;border-radius:4px;transition:.2s}
.ty-hotkw a:hover{color:#fff;background:rgba(255,255,255,.14)}

/* ========== Icon Nav Grid (携程彩色图标) ========== */
.ty-icons{max-width:1180px;margin:-34px auto 0;position:relative;z-index:10;padding:0 20px}
.ty-icons-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;background:#fff;border-radius:14px;padding:20px 12px;box-shadow:0 8px 32px rgba(0,0,0,.10)}
.ty-icon-item{text-decoration:none;text-align:center;padding:12px 4px;border-radius:12px;transition:.25s}
.ty-icon-item:hover{background:#f8fbff;transform:translateY(-3px)}
.ty-icon-item .icon{width:50px;height:50px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:7px;color:#fff}
.ty-icon-item .label{font-size:12px;color:#333;font-weight:600}
.g1{background:linear-gradient(135deg,#4facfe,#00f2fe)}
.g2{background:linear-gradient(135deg,#ff9a56,#ff6b35)}
.g3{background:linear-gradient(135deg,#38ef7d,#11998e)}
.g4{background:linear-gradient(135deg,#a18cd1,#fbc2eb)}
.g5{background:linear-gradient(135deg,#ff6b6b,#ee5a24)}
.g6{background:linear-gradient(135deg,#2af598,#009efd)}
.g7{background:linear-gradient(135deg,#f093fb,#f5576c)}
.g8{background:linear-gradient(135deg,#667eea,#764ba2)}

/* ========== Section Common ========== */
.ty-sec{max-width:1180px;margin:0 auto;padding:38px 20px}
.ty-sec-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.ty-sec-hd h2{font-size:22px;font-weight:700;color:#1a1a2e;display:flex;align-items:center;gap:8px}
.ty-sec-hd h2::before{content:"";width:4px;height:22px;background:linear-gradient(180deg,#0a6ecb,#ff7a00);border-radius:2px}
.ty-sec-hd a{color:#0a6ecb;text-decoration:none;font-size:14px;font-weight:500}
.ty-sec-hd a:hover{text-decoration:underline}

/* Tab Bar */
.ty-tab-bar{display:flex;gap:0;border-bottom:2px solid #eee;margin-bottom:18px}
.ty-tab-bar span{padding:9px 20px;cursor:pointer;font-size:14px;color:#555;font-weight:500;border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:.2s}
.ty-tab-bar span.on{color:#0a6ecb;border-bottom-color:#0a6ecb}

/* ========== Route Cards (stourweb 210) ========== */
.ty-route-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ty-route-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:.3s}
.ty-route-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.12);transform:translateY(-4px)}
.ty-route-card .img-wrap{position:relative;height:190px;overflow:hidden}
.ty-route-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:.4s}
.ty-route-card:hover .img-wrap img{transform:scale(1.06)}
.ty-route-card .tag{position:absolute;left:10px;top:10px;background:linear-gradient(135deg,#ff7a00,#ff5722);color:#fff;font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600}
.ty-route-card .tag.green{background:linear-gradient(135deg,#00c853,#00a048)}
.ty-route-card .body{padding:14px}
.ty-route-card .title{font-size:15px;font-weight:700;color:#1a1a2e;margin:0 0 7px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ty-route-card .title a{color:inherit;text-decoration:none}
.ty-route-card .desc{font-size:13px;color:#888;margin:0 0 10px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ty-route-card .meta{display:flex;justify-content:space-between;align-items:center}
.ty-price-now{color:#e53935;font-size:21px;font-weight:800}
.ty-price-unit{color:#999;font-size:12px}
.ty-price-old{color:#999;font-size:13px;text-decoration:line-through;margin-right:6px}
.ty-satisfy{color:#00c853;font-size:12px;font-weight:600;background:#e8f5e9;padding:3px 8px;border-radius:4px}

/* ========== Destination Cards ========== */
.ty-dest-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ty-dest-card{position:relative;border-radius:12px;overflow:hidden;height:170px;cursor:pointer;transition:.3s}
.ty-dest-card:hover{transform:scale(1.03);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.ty-dest-card img{width:100%;height:100%;object-fit:cover}
.ty-dest-card .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),transparent 50%);display:flex;flex-direction:column;justify-content:flex-end;padding:12px}
.ty-dest-card .overlay b{color:#fff;font-size:15px;font-weight:700}
.ty-dest-card .overlay small{color:rgba(255,255,255,.75);font-size:11px}

/* ========== Notes / Guides ========== */
.ty-notes-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ty-note-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:.3s}
.ty-note-card:hover{box-shadow:0 8px 22px rgba(0,0,0,.10);transform:translateY(-3px)}
.ty-note-card .img-wrap{height:160px;overflow:hidden}
.ty-note-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:.3s}
.ty-note-card:hover .img-wrap img{transform:scale(1.05)}
.ty-note-card .body{padding:14px}
.ty-note-card .title{font-size:14px;font-weight:600;color:#1a1a2e;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ty-note-card .excerpt{font-size:12px;color:#777;line-height:1.6;margin:8px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ty-note-meta{display:flex;justify-content:space-between;font-size:11px;color:#aaa}

/* Guide Cards */
.ty-guide-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ty-guide-card{background:#fff;border-radius:12px;padding:18px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:.3s}
.ty-guide-card:hover{box-shadow:0 8px 22px rgba(0,0,0,.10);transform:translateY(-3px)}
.ty-guide-avatar{width:68px;height:68px;border-radius:50%;object-fit:cover;border:3px solid #e8f0fe;margin:0 auto 8px;display:block}
.ty-guide-name{font-size:14px;font-weight:700;color:#1a1a2e;margin:0 0 4px}
.ty-guide-role{font-size:11px;color:#0a6ecb;background:#e8f0fe;display:inline-block;padding:2px 10px;border-radius:10px;margin-bottom:5px}
.ty-guide-info{font-size:12px;color:#888;margin:0;line-height:1.5}

/* ========== CTA Banner ========== */
.ty-cta{background:linear-gradient(135deg,#0a6ecb,#0f4fa0 50%,#0a3b7d);border-radius:16px;padding:44px 36px;text-align:center;color:#fff;position:relative;overflow:hidden}
.ty-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,122,0,.2),transparent 40%),radial-gradient(circle at 15% 80%,rgba(255,255,255,.07),transparent 40%);pointer-events:none}
.ty-cta h2{font-size:28px;font-weight:800;margin:0 0 8px;position:relative}
.ty-cta p{font-size:15px;opacity:.9;margin:0 0 22px;position:relative}
.ty-cta-btn{display:inline-block;background:linear-gradient(135deg,#ff7a00,#ff5722);color:#fff;padding:13px 42px;border-radius:28px;text-decoration:none;font-size:16px;font-weight:700;transition:.25s;position:relative;box-shadow:0 4px 16px rgba(255,87,34,.35)}
.ty-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,87,34,.45)}

/* ========== Footer ========== */
.ty-footer{background:#1a1a2e;color:#8892a8;padding:48px 0 0;margin-top:48px}
.ty-footer-inner{max-width:1180px;margin:auto;padding:0 20px 32px}
.ty-f-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:32px;margin-bottom:32px}
.ty-f-col h4{color:#e0e4ea;font-size:16px;font-weight:700;margin-bottom:14px}
.ty-f-col p{font-size:13px;line-height:1.7;color:#7a859e;margin-bottom:8px}
.ty-f-col a{display:block;font-size:13px;color:#7a859e;text-decoration:none;margin-bottom:7px;transition:.2s}
.ty-f-col a:hover{color:#fff}
.ty-f-bottom{text-align:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);font-size:12px;color:#5a6478}
.ty-f-bottom a{color:#7a859e;text-decoration:none}

#ty_scrolltop{position:fixed;right:24px;bottom:80px;width:42px;height:42px;border-radius:50%;background:#0a6ecb;color:#fff;border:0;cursor:pointer;box-shadow:0 4px 14px rgba(10,110,203,.3);transition:.2s;z-index:999;font-size:16px}
#ty_scrolltop:hover{background:#095aa0;transform:translateY(-2px)}

/* ========== 酒店版块 · 精选住宿（真实酒店卡片风格） ========== */
.ty-hotel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ty-hotel-card{display:block;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(20,40,60,.08);transition:.25s;text-decoration:none;border:1px solid #f0f2f5}
.ty-hotel-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(20,40,60,.14);border-color:#e2e8f0}
.ty-hotel-card .img-wrap{aspect-ratio:4/3;position:relative;overflow:hidden;background:#eef2f6}
.ty-hotel-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:.45s}
.ty-hotel-card:hover .img-wrap img{transform:scale(1.07)}
.ty-hotel-card .badge{position:absolute;left:10px;top:10px;background:#0a6ecb;color:#fff;font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600;box-shadow:0 2px 6px rgba(10,110,203,.3)}
.ty-hotel-card .info{padding:14px}
.ty-hotel-card h3{font-size:15px;font-weight:700;color:#1a1a2e;margin:0 0 6px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ty-hotel-card .loc{font-size:12px;color:#888;margin:0 0 8px}
.ty-hotel-card .loc i{margin-right:4px;color:#0a6ecb}
.ty-hotel-card .tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;min-height:22px}
.ty-hotel-card .tags span{font-size:11px;color:#0a6ecb;background:#eef6ff;padding:2px 8px;border-radius:4px}
.ty-hotel-card .meta{display:flex;justify-content:space-between;align-items:center}
.ty-hotel-card .price{color:#e53935;font-size:20px;font-weight:800}
.ty-hotel-card .price small{font-size:11px;color:#999;font-weight:400;margin-left:3px}
.ty-hotel-card .btn{font-size:12px;color:#0a6ecb;font-weight:600;padding:4px 10px;border:1px solid #cfe4f7;border-radius:12px;background:#f6fbff;transition:.2s}
.ty-hotel-card:hover .btn{background:#0a6ecb;color:#fff;border-color:#0a6ecb}

/* ========== Responsive ========== */
@media(max-width:1024px){
  .ty-hotel-grid{grid-template-columns:repeat(3,1fr)}
  .ty-icons-grid{grid-template-columns:repeat(4,1fr)}
  .ty-route-list{grid-template-columns:repeat(2,1fr)}
  .ty-dest-grid{grid-template-columns:repeat(3,1fr)}
  .ty-guide-list{grid-template-columns:repeat(3,1fr)}
  .ty-notes-list{grid-template-columns:repeat(2,1fr)}
  .ty-nav{display:none}
}
@media(max-width:768px){
  .ty-hero{min-height:auto;padding-top:20px}
  .ty-hero h1{font-size:26px}
  .ty-hero p{font-size:14px}
  .ty-hero .inner{padding:28px 16px}
  .ty-search{padding:14px 16px}
  .ty-search-form{flex-wrap:wrap}
  .ty-search-form button{width:100%}
  .ty-icons-grid{grid-template-columns:repeat(4,1fr);gap:8px;padding:16px;margin-top:-24px}
  .ty-icon-item .icon{width:42px;height:42px;font-size:20px}
  .ty-icon-item .label{font-size:11px}
  .ty-route-list,.ty-notes-list{grid-template-columns:1fr}
  .ty-dest-grid{grid-template-columns:repeat(2,1fr)}
  .ty-guide-list{grid-template-columns:repeat(2,1fr)}
  .ty-sec{padding:24px 12px}
  .ty-sec-hd h2{font-size:19px}
  .ty-cta{padding:28px 18px}
  .ty-cta h2{font-size:22px}
  .ty-navbar .inner{height:54px}
  .ty-logo{font-size:17px}
  .ty-topbar{display:none}
  .ty-f-cols{grid-template-columns:1fr 1fr;gap:20px}
}

/* ========== Route Slider (滑块切换) ========== */
.ty-route-slider{overflow:hidden;position:relative}
.ty-route-track{display:flex;transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform}
.ty-route-pane{flex:0 0 100%;min-width:100%;box-sizing:border-box}
.ty-route-pane .ty-route-list{grid-template-columns:repeat(4,1fr)}
.ty-tab-bar .rtab{user-select:none}
.ty-tab-bar .rtab.on{color:#0a6ecb;border-bottom-color:#0a6ecb}
.ty-slider-nav{position:absolute;top:-48px;right:0;display:flex;gap:8px}
.ty-slider-nav button{width:34px;height:34px;border:1px solid #e0e0e0;border-radius:50%;background:#fff;cursor:pointer;font-size:14px;color:#666;display:flex;align-items:center;justify-content:center;transition:.2s}
.ty-slider-nav button:hover{background:#0a6ecb;color:#fff;border-color:#0a6ecb}
.ty-empty-pane{text-align:center;padding:50px 20px;color:#999;font-size:14px;background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.ty-empty-pane i{font-size:32px;display:block;margin-bottom:10px;color:#ddd}

/* ========== Destinations Grid (热门目的地 - Bento布局) ========== */
.ty-dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ty-dest-bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.ty-dest-card{position:relative;border-radius:16px;overflow:hidden;height:240px;display:block;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.ty-dest-bento .ty-dest-card{height:100%}
.ty-dest-lg{grid-column:span 2;grid-row:span 2}
.ty-dest-wide{grid-column:span 2}
.ty-dest-card img{width:100%;height:100%;object-fit:cover;transition:.5s}
.ty-dest-card:hover img{transform:scale(1.08)}
.ty-dest-card .overlay{position:absolute;inset:0;background:rgba(0,0,0,.38);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;transition:.3s}
.ty-dest-card:hover .overlay{background:rgba(0,0,0,.28)}
.ty-dest-card .overlay b{display:block;color:#fff;font-size:22px;font-weight:700;margin-bottom:6px;text-shadow:0 2px 8px rgba(0,0,0,.5);letter-spacing:1px}
.ty-dest-card .overlay small{color:rgba(255,255,255,.9);font-size:13px;display:block;max-width:80%}
.ty-dest-lg .overlay b{font-size:32px}
.ty-dest-lg .overlay small{font-size:15px;max-width:70%}

@media(max-width:1024px){
  .ty-route-pane .ty-route-list{grid-template-columns:repeat(2,1fr)}
  .ty-dest-grid{grid-template-columns:repeat(2,1fr)}
  .ty-dest-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .ty-dest-lg{grid-column:span 2;grid-row:span 2}
  .ty-dest-wide{grid-column:span 2;grid-row:span 1}
}
@media(max-width:640px){
  .ty-route-pane .ty-route-list{grid-template-columns:1fr}
  .ty-dest-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .ty-dest-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;gap:10px}
  .ty-dest-lg{grid-column:span 2;grid-row:span 2}
  .ty-dest-wide{grid-column:span 2}
  .ty-dest-card{height:130px}
  .ty-dest-lg .overlay b{font-size:22px}
  .ty-slider-nav{display:none}
}