1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Travel Sense Asia⢠| Discover Asia - Curate your own journey</title> 7 <meta name="description" content="Craft your perfect Asia adventure with Travel Sense Asia. Get a personalized itinerary to fit your interests & budget for an unforgettable journey."/> 8 9 <link rel="preconnect" href="https://fonts.googleapis.com"> 10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 11 <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Nunito+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 12 13 <style> 14 :root { 15 /* Refined Brand Colors */ 16 --brand-navy: #061626; 17 --brand-navy-light: #122c4a; 18 --brand-orange: #E66C2C; 19 --brand-orange-hover: #F27A3A; 20 21 /* Surface & Atmosphere */ 22 --bg-pearl: #f8f9fa; 23 --bg-white: #FFFFFF; 24 --glass-bg: rgba(255, 255, 255, 0.7); 25 --glass-border: rgba(255, 255, 255, 0.5); 26 27 /* Typography */ 28 --font-heading: 'Lato', sans-serif; 29 --font-body: 'Nunito Sans', sans-serif; 30 --text-main: #1a202c; 31 --text-muted: #64748b; 32 33 /* Cinematic Easings */ 34 --ease-lux: cubic-bezier(0.25, 1, 0.3, 1); 35 --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1); 36 } 37 38 * { box-sizing: border-box; margin: 0; padding: 0; } 39 40 body { 41 font-family: var(--font-body); 42 background-color: var(--bg-pearl); 43 color: var(--text-main); 44 -webkit-font-smoothing: antialiased; 45 -moz-osx-font-smoothing: grayscale; 46 overflow-x: hidden; 47 } 48 49 a { text-decoration: none; color: inherit; } 50 51 /* THE BREAKTHROUGH DESKTOP LAYOUT */ 52 .immersive-canvas { 53 display: flex; 54 height: 100vh; 55 width: 100vw; 56 overflow: hidden; /* No scrolling on desktop */ 57 background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); 58 } 59 60 /* LEFT HEMISPHERE: The Brand Story */ 61 .left-hemisphere { 62 flex: 0 0 45%; 63 display: flex; 64 flex-direction: column; 65 justify-content: space-between; 66 padding: 4vh 4vw; 67 position: relative; 68 z-index: 10; 69 } 70 71 /* Header Reimagined */ 72 .brand-header { 73 display: flex; 74 justify-content: space-between; 75 align-items: center; 76 animation: fadeDown 1s var(--ease-lux) forwards; 77 } 78 79 .brand-logo img { 80 height: 40px; 81 object-fit: contain; 82 } 83 84 .trust-badges-wrap { 85 display: flex; 86 gap: 12px; 87 } 88 89 .trust-pill { 90 display: flex; 91 align-items: center; 92 gap: 8px; 93 padding: 6px 12px 6px 6px; 94 background: var(--bg-white); 95 border-radius: 40px; 96 box-shadow: 0 4px 15px rgba(0,0,0,0.03); 97 font-size: 11px; 98 font-weight: 600; 99 color: var(--brand-navy); 100 transition: transform 0.3s ease; 101 } 102 103 .trust-pill:hover { transform: translateY(-2px); } 104 105 .trust-icon-cir { 106 width: 24px; height: 24px; 107 border-radius: 50%; 108 background: #34E0A1; 109 display: flex; align-items: center; justify-content: center; 110 color: #000; 111 } 112 113 /* Hero Section */ 114 .hero-content { 115 margin-top: -5vh; /* Visual centering adjustment */ 116 animation: fadeUp 1.2s var(--ease-lux) 0.2s forwards; 117 opacity: 0; 118 } 119 120 .subtitle { 121 font-size: 12px; 122 font-weight: 700; 123 text-transform: uppercase; 124 letter-spacing: 0.3em; 125 color: var(--brand-orange); 126 margin-bottom: 24px; 127 display: flex; 128 align-items: center; 129 gap: 12px; 130 } 131 .subtitle::before { content: ''; width: 30px; height: 1px; background: var(--brand-orange); } 132 133 .hero-title { 134 font-family: var(--font-heading); 135 font-size: clamp(48px, 5vw, 72px); 136 line-height: 1.05; 137 color: var(--brand-navy); 138 margin-bottom: 24px; 139 letter-spacing: -0.02em; 140 } 141 142 .hero-title em { 143 font-style: italic; 144 color: var(--brand-orange); 145 font-weight: 400; 146 } 147 148 .hero-desc { 149 font-size: 16px; 150 line-height: 1.7; 151 color: var(--text-muted); 152 max-width: 85%; 153 } 154 155 /* Ecosystem Dock (Glassmorphism) */ 156 .ecosystem-dock { 157 background: var(--glass-bg); 158 backdrop-filter: blur(20px); 159 -webkit-backdrop-filter: blur(20px); 160 border: 1px solid var(--glass-border); 161 border-radius: 24px; 162 padding: 24px; 163 margin-top: 4vh; 164 box-shadow: 0 20px 40px rgba(0,0,0,0.02); 165 animation: fadeUp 1.2s var(--ease-lux) 0.4s forwards; 166 opacity: 0; 167 } 168 169 .dock-title { 170 font-size: 10px; 171 font-weight: 700; 172 text-transform: uppercase; 173 letter-spacing: 0.2em; 174 color: var(--text-muted); 175 margin-bottom: 16px; 176 } 177 178 .dock-grid { 179 display: flex; 180 gap: 16px; 181 } 182 183 .dock-item { 184 flex: 1; 185 display: flex; 186 align-items: center; 187 gap: 12px; 188 padding: 10px; 189 background: var(--bg-white); 190 border-radius: 16px; 191 transition: all 0.4s var(--ease-elastic); 192 } 193 194 .dock-item:hover { 195 transform: translateY(-5px); 196 box-shadow: 0 10px 20px rgba(0,0,0,0.05); 197 } 198 199 .dock-logo { 200 width: 40px; height: 40px; 201 border-radius: 10px; 202 background: #fff; 203 overflow: hidden; 204 display: flex; align-items: center; justify-content: center; 205 padding: 4px; 206 box-shadow: 0 2px 8px rgba(0,0,0,0.04); 207 } 208 .dock-logo img { width: 100%; height: 100%; object-fit: contain; } 209 210 .dock-text { 211 font-size: 12px; 212 font-weight: 600; 213 color: var(--brand-navy); 214 line-height: 1.2; 215 } 216 217 /* Footer / Socials */ 218 .brand-footer { 219 display: flex; 220 justify-content: space-between; 221 align-items: center; 222 font-size: 11px; 223 color: var(--text-muted); 224 animation: fadeUp 1.2s var(--ease-lux) 0.6s forwards; 225 opacity: 0; 226 } 227 228 .social-row { display: flex; gap: 12px; } 229 .social-icn { 230 width: 32px; height: 32px; 231 border-radius: 50%; 232 border: 1px solid rgba(10,37,64,0.1); 233 display: flex; align-items: center; justify-content: center; 234 color: var(--brand-navy); 235 transition: all 0.3s; 236 } 237 .social-icn:hover { background: var(--brand-orange); color: #fff; border-color: var(--brand-orange); transform: scale(1.1); } 238 .social-icn svg { width: 14px; height: 14px; fill: currentColor; } 239 240 /* RIGHT HEMISPHERE: The Cinematic Accordion */ 241 .right-hemisphere { 242 flex: 0 0 55%; 243 height: 100vh; 244 display: flex; 245 overflow: hidden; 246 clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%); /* Sleek angled cut */ 247 animation: slideInRight 1.5s var(--ease-lux) forwards; 248 } 249 250 .accordion-panel { 251 flex: 1; 252 position: relative; 253 height: 100%; 254 cursor: pointer; 255 overflow: hidden; 256 transition: flex 0.8s var(--ease-lux); 257 background: #000; 258 text-decoration: none; 259 border-left: 1px solid rgba(255,255,255,0.1); 260 } 261 262 .accordion-panel:hover { 263 flex: 4; /* Expands dynamically */ 264 } 265 266 .acc-bg { 267 position: absolute; 268 inset: -10%; /* Bleed to avoid edges during transition */ 269 background-size: cover; 270 background-position: center; 271 filter: grayscale(80%) brightness(0.5); 272 transition: all 1.2s var(--ease-lux); 273 } 274 275 .accordion-panel:hover .acc-bg { 276 filter: grayscale(0%) brightness(0.85); 277 transform: scale(1.05); 278 } 279 280 .acc-overlay { 281 position: absolute; 282 inset: 0; 283 background: linear-gradient(to bottom, transparent 40%, rgba(6,22,38,0.9) 100%); 284 opacity: 0.8; 285 transition: opacity 0.8s; 286 } 287 .accordion-panel:hover .acc-overlay { opacity: 1; } 288 289 /* Resting State Typography (Vertical) */ 290 .acc-resting { 291 position: absolute; 292 inset: 0; 293 display: flex; 294 flex-direction: column; 295 align-items: center; 296 justify-content: center; 297 gap: 20px; 298 transition: opacity 0.5s var(--ease-lux), transform 0.5s var(--ease-lux); 299 } 300 301 .accordion-panel:hover .acc-resting { 302 opacity: 0; 303 transform: translateY(-20px); 304 pointer-events: none; 305 } 306 307 .acc-resting .flag { 308 font-size: 24px; 309 filter: grayscale(1); 310 transition: filter 0.5s; 311 } 312 .accordion-panel:hover .acc-resting .flag { filter: grayscale(0); } 313 314 .vertical-title { 315 writing-mode: vertical-rl; 316 transform: rotate(180deg); 317 font-family: var(--font-heading); 318 font-size: 28px; 319 color: rgba(255,255,255,0.6); 320 letter-spacing: 0.1em; 321 white-space: nowrap; 322 } 323 324 /* Hovered State Content */ 325 .acc-active { 326 position: absolute; 327 bottom: 0; left: 0; right: 0; 328 padding: 60px 40px; 329 color: #fff; 330 display: flex; 331 flex-direction: column; 332 align-items: flex-start; 333 opacity: 0; 334 transform: translateY(30px); 335 transition: all 0.6s var(--ease-lux); 336 pointer-events: none; 337 } 338 339 .accordion-panel:hover .acc-active { 340 opacity: 1; 341 transform: translateY(0); 342 transition-delay: 0.2s; /* Wait for expansion */ 343 pointer-events: auto; 344 } 345 346 .active-flag { 347 width: 48px; height: 48px; 348 border-radius: 50%; 349 background: rgba(255,255,255,0.15); 350 backdrop-filter: blur(8px); 351 display: flex; align-items: center; justify-content: center; 352 font-size: 24px; 353 margin-bottom: 20px; 354 border: 1px solid rgba(255,255,255,0.3); 355 } 356 357 .active-title { 358 font-family: var(--font-heading); 359 font-size: clamp(32px, 3vw, 48px); 360 line-height: 1; 361 margin-bottom: 16px; 362 } 363 364 .active-desc { 365 font-size: 15px; 366 line-height: 1.6; 367 color: rgba(255,255,255,0.8); 368 max-width: 400px; 369 margin-bottom: 30px; 370 } 371 372 .discover-btn { 373 display: inline-flex; 374 align-items: center; 375 gap: 10px; 376 padding: 14px 28px; 377 background: var(--brand-orange); 378 color: #fff; 379 font-size: 13px; 380 font-weight: 600; 381 letter-spacing: 0.1em; 382 text-transform: uppercase; 383 border-radius: 40px; 384 transition: all 0.3s; 385 } 386 .discover-btn svg { width: 16px; height: 16px; transition: transform 0.3s; } 387 .discover-btn:hover { background: var(--brand-orange-hover); box-shadow: 0 10px 20px rgba(230, 108, 44, 0.3); } 388 .discover-btn:hover svg { transform: translateX(5px); } 389 390 /* Keyframes */
391 @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } 392 @keyframes fadeDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } 393 @keyframes slideInRight { from { transform: translateX(20%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } 394 395 /* ----------------------------------------- */ 396 /* MOBILE & TABLET: THE BENTO/SWIPE UX */ 397 /* ----------------------------------------- */ 398 @media (max-width: 1024px) { 399 .immersive-canvas { 400 flex-direction: column; 401 height: auto; 402 min-height: 100vh; 403 overflow-y: auto; 404 overflow-x: hidden; 405 display: flex; 406 } 407 408 /* Kỹ thuáºt display: contents Äá» trá»n lẫn các thà nh phần DOM trên Mobile */ 409 .left-hemisphere, .hero-content { 410 display: contents; 411 } 412 413 /* Tái cấp phát padding và gán thứ tá»± (Order) cho từng thà nh phần con */ 414 /* 1. Brand Header */ 415 .brand-header { order: 1; flex-direction: column; gap: 24px; align-items: flex-start; padding: 24px 20px 0; position: relative; width: 100%; } 416 .brand-header .social-row { position: absolute; top: 24px; right: 20px; } 417 418 .trust-badges-wrap { 419 width: calc(100vw - 40px); 420 overflow-x: auto; 421 scroll-snap-type: x mandatory; 422 padding-bottom: 10px; 423 -ms-overflow-style: none; scrollbar-width: none; 424 } 425 .trust-badges-wrap::-webkit-scrollbar { display: none; } 426 .trust-pill { scroll-snap-align: start; flex-shrink: 0; } 427 428 /* 2, 3, 4. Hero Texts */ 429 .subtitle { order: 2; padding: 24px 20px 0; margin-bottom: 16px; opacity: 0; animation: fadeUp 0.8s var(--ease-lux) forwards; } 430 .hero-title { order: 3; padding: 0 20px; font-size: 42px; margin-bottom: 16px; text-align: left; opacity: 0; animation: fadeUp 0.8s var(--ease-lux) 0.1s forwards; } 431 .hero-desc { order: 4; padding: 0 20px; font-size: 15px; margin-bottom: 32px; max-width: 100%; text-align: left; opacity: 0; animation: fadeUp 0.8s var(--ease-lux) 0.2s forwards; } 432 433 /* 5. CÃC NGÃN NGá»® ÄƯỢC ÄẨY LÃN TRÃN (Right Hemisphere -> Bento Box) */ 434 .right-hemisphere { 435 order: 5; 436 flex: none; 437 width: 100%; 438 height: auto; 439 clip-path: none; 440 display: grid; 441 grid-template-columns: repeat(2, 1fr); 442 grid-auto-rows: minmax(180px, 1fr); 443 gap: 12px; 444 padding: 0 20px; 445 margin-bottom: 40px; 446 opacity: 0; 447 animation: fadeUp 0.8s var(--ease-lux) 0.3s forwards; 448 } 449 450 .accordion-panel { 451 border-radius: 24px; 452 border: none; 453 clip-path: none; 454 display: flex; 455 align-items: center; 456 justify-content: center; 457 } 458 459 .accordion-panel:hover { flex: 1; transform: scale(0.98); } 460 461 .acc-bg { filter: grayscale(0%) brightness(0.6); } 462 .accordion-panel:hover .acc-bg { transform: scale(1); filter: grayscale(0%) brightness(0.6); } 463 .acc-overlay { display: none; } 464 465 .acc-resting { opacity: 1 !important; transform: none !important; pointer-events: none; gap: 12px; } 466 .acc-resting .flag { filter: grayscale(0); font-size: 28px; } 467 .vertical-title { 468 writing-mode: horizontal-tb; 469 transform: none; 470 font-family: var(--font-body); 471 font-weight: 600; 472 font-size: 18px; 473 color: #fff; 474 letter-spacing: 0.5px; 475 } 476 477 .acc-active { display: none !important; } 478 479 /* 6. Há» SINH THÃI ÄƯỢC ÄẨY XUá»NG DƯá»I NGÃN NGá»® (Ecosystem Swipe Mobile) */ 480 .ecosystem-dock { 481 order: 6; 482 margin-top: 0; 483 padding: 0; 484 background: transparent; 485 border: none; 486 box-shadow: none; 487 backdrop-filter: none; 488 opacity: 0; 489 animation: fadeUp 0.8s var(--ease-lux) 0.4s forwards; 490 } 491 492 .dock-title { padding-left: 20px; margin-bottom: 12px; } 493 494 .dock-grid { 495 overflow-x: auto; 496 scroll-snap-type: x mandatory; 497 padding: 0 20px 20px 20px; 498 gap: 16px; 499 -ms-overflow-style: none; scrollbar-width: none; 500 } 501 .dock-grid::-webkit-scrollbar { display: none; } 502 503 .dock-item { 504 flex: 0 0 220px; 505 scroll-snap-align: start; 506 flex-direction: column; 507 align-items: flex-start; 508 padding: 20px; 509 border-radius: 20px; 510 box-shadow: 0 8px 24px rgba(10,37,64,0.04); 511 } 512 513 /* 7. Brand Footer */ 514 .brand-footer { 515 order: 7; 516 flex-direction: column; 517 gap: 16px; 518 padding: 20px 20px 40px; 519 text-align: center; 520 justify-content: center; 521 opacity: 0; 522 animation: fadeUp 0.8s var(--ease-lux) 0.5s forwards; 523 } 524 .brand-footer .social-row { display: none; } 525 } 526 </style> 527</head> 528<body> 529 530 <main class="immersive-canvas"> 531 532 <!-- LEFT HEMISPHERE: BRAND EDITORIAL --> 533 <section class="left-hemisphere"> 534 535 <!-- Top Navigation --> 536 <header class="brand-header"> 537 <a href="#" class="brand-logo"> 538 <img src="https://en.travelsense.asia/wp-content/uploads/2024/03/Logo-R-squoosh-1024x329.webp" alt="Travel Sense Asia"> 539 </a> 540 541 <div class="social-row"> 542 <a href="https://www.facebook.com/TravelSenseAsia/" class="social-icn"><svg viewBox="0 0 24 24">
542<path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg></a> 543 <a href="https://www.instagram.com/travelsense.asia/" class="social-icn"><svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></a> 544 <a href="https://www.youtube.com/AnTuongChauA" class="social-icn"><svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></a> 545 <a href="https://www.tiktok.com/@travelsenseasia" class="social-icn"><svg viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></a> 546 </div> 547 548 <div class="trust-badges-wrap"> 549 <div class="trust-pill"> 550 <div class="trust-icon-cir"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12c0-4.838-2.613-9.053-6.495-11.238l-1.077 2.167c3.125 1.761 5.253 5.129 5.253 8.948 0 5.673-4.608 10.28-10.281 10.28s-10.281-4.607-10.281-10.28c0-3.815 2.126-7.18 5.247-8.943l-1.078-2.169c-3.878 2.186-6.488 6.398-6.488 11.235 0 6.953 5.645 12.6 12.6 12.6s12.6-5.647 12.6-12.6zm-11.4 0c0-2.481-2.019
550-4.5-4.5-4.5s-4.5 2.019-4.5 4.5 2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5zm-4.5 2.8c-1.546 0-2.8-1.254-2.8-2.8s1.254-2.8 2.8-2.8 2.8 1.254 2.8 2.8-1.254 2.8-2.8 2.8zm11.4-2.8c0-2.481-2.019-4.5-4.5-4.5s-4.5 2.019-4.5 4.5 2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5zm-4.5 2.8c-1.546 0-2.8-1.254-2.8-2.8s1.254-2.8 2.8-2.8 2.8 1.254 2.8 2.8-1.254 2.8-2.8 2.8zm-2.4-7.409c-2.029-.893-4.103-1.054-6.079-.481l1.196 2.31c1.378-.403 2.913-.3 4.471.309l.412-2.138z"/></svg></div> 551 Tripadvisor Winner 14Yrs 552 </div> 553 <div class="trust-pill"> 554 <div class="trust-icon-cir" style="background: #00B67A; color:#fff"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div> 555 Trustpilot Verified 556 </div> 557 </div> 558 </header> 559 560 <!-- Main Copy --> 561 <div class="hero-content"> 562 <div class="subtitle">Discover Asia</div> 563 <h1 class="hero-title">Curate your<br>own <em>journey</em></h1> 564 <p class="hero-desc"> 565 At Travel Sense Asia, every trip is an artisanal creation. Our local experts connect you to the true essence of each destination through rare experiences and meaningful encounters. 566 </p> 567 568 <!-- Ecosystem Floating Dock --> 569 <div class="ecosystem-dock"> 570 <div class="dock-title">Our Ecosystem</div> 571 <div class="dock-grid"> 572 <a href="#" class="dock-item"> 573 <div class="dock-logo"><img src="https://www.panhouretreat.com/wp-content/uploads/2025/11/logo-ph.png" alt="Panhou"></div> 574 <div class="dock-text">Panhou<br>Retreat</div> 575 </a> 576 <a href="#" class="dock-item"> 577 <div class="dock-logo"><img src="https://whaleislandresort.com/wp-content/uploads/2026/03/LOGO-NEW-VECTOR-FIX-1143x800.png" alt="Whale Island"></div> 578 <div class="dock-text">Whale Island<br>Resort</div> 579 </a> 580 <a href="#" class="dock-item"> 581 <div class="dock-logo" style="padding: 0;"><img src="https://w.ladicdn.com/s250x250/58db3e2bce3cd09d010ae2f8/341481476_224279020195559_5956622192868185511_n-20260625091254-qdiko.jpg" alt="StarH" style="object-fit: cover;"></div> 582 <div class="dock-text">StarH</div> 583 </a> 584 <a href="#" class="dock-item"> 585 <div class="dock-logo"><img src="https://w.ladicdn.com/58db3e2bce3cd09d010ae2f8/sjourney-logo-smallpng-20250214035442-g2dxj.webp" alt="Sjourney"></div> 586 <div class="dock-text">Sjourney<br>Trains</div> 587 </a> 588 </div> 589 </div> 590 </div> 591 592 <!-- Footer Elements --> 593 <footer class="brand-footer"> 594 <div style="display:flex; align-items:center; gap:10px;"> 595 <img src="https://en.travelsense.asia/wp-content/uploads/2024/03/Partner-2.webp" alt="ASTA" height="24"> 596 <img src="https://www.gstatic.com/partners/badge/images/2026/PartnerBadgeClickable.svg" alt="Google" height="24"> 597 </div> 598 <div> 599 <span>© 2009-2026 Travel Sense Asiaâ¢</span><br> 600 <span style="font-size:9px; opacity:0.7">License: 01-153/2010/TCDL-GPLHQT</span> 601 </div> 602 </footer> 603 604 </section> 605 606 <!-- RIGHT HEMISPHERE: CINEMATIC ACCORDION --> 607 <section class="right-hemisphere"> 608 609 <!-- English Panel --> 610 <a href="https://en.travelsense.asia/?utm_source=home" class="accordion-panel"> 611 <div class="acc-bg" style="background-image: url('https://en.travelsense.asia/wp-content/uploads/2026/06/english.webp');"></div> 612 <div class="acc-overlay"></div> 613 614 <div class="acc-resting"> 615 <span class="flag">ð¬ð§</span> 616 <span class="vertical-title">ENGLISH</span> 617 </div> 618 619 <div class="acc-active"> 620 <div class="active-flag">ð¬ð§</div> 621 <h2 class="active-title">English Portal</h2> 622 <p class="active-desc">Explore all ideas and freely build your bespoke journey in Asia with our local experts.</p>
623 <span class="discover-btn"> 624 Enter Website 625 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> 626 </span> 627 </div> 628 </a> 629 630 <!-- Italiano Panel --> 631 <a href="https://it.travelsense.asia/?utm_source=home" class="accordion-panel"> 632 <div class="acc-bg" style="background-image: url('https://en.travelsense.asia/wp-content/uploads/2026/06/italiano.webp');"></div> 633 <div class="acc-overlay"></div> 634 635 <div class="acc-resting"> 636 <span class="flag">ð®ð¹</span> 637 <span class="vertical-title">ITALIANO</span> 638 </div> 639 640 <div class="acc-active"> 641 <div class="active-flag">ð®ð¹</div> 642 <h2 class="active-title">Portale Italiano</h2> 643 <p class="active-desc">Esplora tutte le idee e crea liberamente il tuo viaggio in Asia con noi.</p> 644 <span class="discover-btn"> 645 Entra Ora 646 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> 647 </span> 648 </div> 649 </a> 650 651 <!-- Espanol Panel --> 652 <a href="https://es.travelsense.asia/?utm_source=home" class="accordion-panel"> 653 <div class="acc-bg" style="background-image: url('https://en.travelsense.asia/wp-content/uploads/2026/06/espanol.webp');"></div> 654 <div class="acc-overlay"></div> 655 656 <div class="acc-resting"> 657 <span class="flag">ðªð¸</span> 658 <span class="vertical-title">ESPAÃOL</span> 659 </div> 660 661 <div class="acc-active"> 662 <div class="active-flag">ðªð¸</div> 663 <h2 class="active-title">Portal Español</h2> 664 <p class="active-desc">Explora todas las ideas y crea libremente tu viaje por Asia con nosotros.</p> 665 <span class="discover-btn"> 666 Entrar al Portal 667 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> 668 </span> 669 </div> 670 </a> 671 672 <!-- Chinese Panel --> 673 <a href="https://cn.travelsense.asia/?utm_source=home" class="accordion-panel"> 674 <div class="acc-bg" style="background-image: url('https://en.travelsense.asia/wp-content/uploads/2026/06/china.webp');"></div> 675 <div class="acc-overlay"></div> 676 677 <div class="acc-resting"> 678 <span class="flag">ð¨ð³</span> 679 <span class="vertical-title">ä¸æ</span> 680 </div> 681 682 <div class="acc-active"> 683 <div class="active-flag">ð¨ð³</div> 684 <h2 class="active-title">ä¸æ主页</h2> 685 <p class="active-desc">æ¢ç´¢ææçµæï¼ä¸æ们ä¸èµ·èªç±æé å±äºä½ çäºæ´²ä¹æ ã</p> 686 <span class="discover-btn"> 687 è¿å ¥ç½ç« 688 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> 689 </span> 690 </div> 691 </a> 692 693 </section> 694 695 </main> 696 697</body> 698</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.