/* ========================================================================== Cẩm nang du lịch Nha Trang — chuyên mục của Gỏi Cá Mai Cô Hằng Design tokens bám theo design system goicamaicohang.com ========================================================================== */ :root { --c-cream: #faf9f6; --c-cream-warm: #f7f1e3; --c-mint-wash: #ecf4ee; --c-green: #0b5d3f; --c-green-deep: #0b4a34; --c-green-leaf: #0d6e17; --c-red: #b64a34; --c-red-bright: #d84f35; --c-red-grad-a: #a13a26; --c-red-grad-b: #c75b40; --c-gold: #e9b949; --c-brown-text: rgba(123, 79, 57, .82); --c-cream-text: #fff8e7; --font-serif: 'Source Serif 4', Georgia, serif; --font-sans: 'Be Vietnam Pro', -apple-system, 'Segoe UI', sans-serif; --container: 1160px; --radius: 18px; --shadow-card: 0 10px 30px rgba(11, 74, 52, .08); --shadow-card-hover: 0 18px 44px rgba(11, 74, 52, .16); --map-h: 460px; /* chiều cao dùng chung cho bản đồ 3D, Google Maps và 360° */ } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--c-cream); color: var(--c-brown-text); font-size: 16.5px; line-height: 1.75; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } h1, h2, h3, .serif { font-family: var(--font-serif); color: var(--c-green); } .container { max-width: var(--container); margin: 0 auto; padding: 0 22px; } /* ------------------------------------------------------------ header/nav */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 249, 246, .92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(11, 93, 63, .1); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px; max-width: var(--container); margin: 0 auto; } .site-brand { display: flex; flex-direction: column; line-height: 1.25; } .site-brand__top { font-family: var(--font-serif); font-weight: 800; font-size: 19px; color: var(--c-green); } .site-brand__top em { color: var(--c-red); font-style: normal; } .site-brand__sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-red); font-weight: 600; } .site-nav { display: flex; gap: 26px; align-items: center; } .site-nav a { font-weight: 600; font-size: 14.5px; color: var(--c-green); position: relative; } .site-nav a:hover { color: var(--c-red); } .site-nav a.is-cta { background: var(--c-green-leaf); color: #fff; padding: 9px 18px; border-radius: 99px; font-size: 13.5px; transition: background .2s; } .site-nav a.is-cta:hover { background: var(--c-green); color: #fff; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--c-green); margin: 5px 0; border-radius: 2px; transition: .25s; } @media (max-width: 860px) { .nav-toggle { display: block; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--c-cream); border-bottom: 1px solid rgba(11, 93, 63, .12); max-height: 0; overflow: hidden; transition: max-height .3s ease; } .site-nav.is-open { max-height: 360px; } .site-nav a { padding: 13px 24px; width: 100%; border-top: 1px solid rgba(11, 93, 63, .07); } .site-nav a.is-cta { border-radius: 0; background: var(--c-green-deep); } } /* ----------------------------------------------------------------- hero */ .hero { background: linear-gradient(180deg, var(--c-mint-wash) 0%, var(--c-cream) 100%); padding: 76px 0 60px; text-align: center; position: relative; overflow: hidden; } .hero__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--c-red); margin-bottom: 18px; } .hero h1 { font-size: clamp(40px, 7.4vw, 84px); font-weight: 800; line-height: 1.04; letter-spacing: -.01em; margin-bottom: 22px; } .hero h1 .grad { background: linear-gradient(120deg, var(--c-red-grad-a), var(--c-red-grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__lead { max-width: 640px; margin: 0 auto 34px; font-size: 18px; } .hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; font-weight: 700; font-size: 15px; padding: 14px 30px; border-radius: 99px; transition: transform .18s, box-shadow .18s, background .18s; } .btn--primary { background: var(--c-green-leaf); color: #fff; box-shadow: 0 8px 22px rgba(13, 110, 23, .25); } .btn--primary:hover { background: var(--c-green); transform: translateY(-2px); } .btn--ghost { border: 2px solid rgba(11, 93, 63, .3); color: var(--c-green); } .btn--ghost:hover { border-color: var(--c-green); background: rgba(11, 93, 63, .05); } .btn--gold { background: var(--c-gold); color: var(--c-green-deep); box-shadow: 0 8px 22px rgba(233, 185, 73, .35); } .btn--gold:hover { transform: translateY(-2px); } /* ------------------------------------------------------- chapter marker */ .section { padding: 74px 0; } .section--warm { background: var(--c-cream-warm); } .section--deep { background: var(--c-green-deep); } .section--deep h2, .section--deep h3 { color: var(--c-cream-text); } .section--deep p { color: rgba(255, 248, 231, .78); } .chapter { text-align: center; max-width: 720px; margin: 0 auto 46px; } .chapter__roman { font-family: var(--font-serif); font-weight: 800; font-size: 15px; color: var(--c-gold); letter-spacing: .3em; } .chapter__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c-red); margin: 6px 0 12px; } .section--deep .chapter__eyebrow { color: var(--c-gold); } .chapter h2 { font-size: clamp(30px, 5.2vw, 52px); font-weight: 800; line-height: 1.1; margin-bottom: 16px; } /* ------------------------------------------------------------ card grid */ .card-grid { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } } .place-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .22s, box-shadow .22s; display: flex; flex-direction: column; position: relative; } .place-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } .place-card__img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .place-card__body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; } .place-card h3 { font-size: 21px; font-weight: 800; margin-bottom: 7px; } .place-card p { font-size: 14.5px; line-height: 1.6; flex: 1; } .place-card__meta { margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--c-green); display: flex; gap: 12px; flex-wrap: wrap; } .place-card__badge { position: absolute; top: 14px; left: 14px; background: var(--c-red-bright); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; padding: 6px 13px; border-radius: 99px; box-shadow: 0 4px 14px rgba(216, 79, 53, .4); } /* ------------------------------------------------------------ tag pills */ /* 3 nhóm màu: exp = loại trải nghiệm, time = thời điểm vàng, perk = điểm đáng tiền */ .tag-row { display: flex; flex-wrap: wrap; gap: 6px; } .tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; padding: 4px 11px; border-radius: 99px; line-height: 1.5; white-space: nowrap; } .tag--exp { background: rgba(11, 93, 63, .1); color: var(--c-green); } .tag--time { background: rgba(233, 185, 73, .22); color: #8a6710; } .tag--perk { background: rgba(182, 74, 52, .1); color: var(--c-red); } /* Trên card trang chủ: pill nằm hẳn trong ảnh, góc dưới trái, nền kính mờ */ .place-card__media { position: relative; } .place-card__media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(180deg, transparent, rgba(11, 74, 52, .45)); pointer-events: none; } .place-card__tags { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; } .place-card__tags .tag { background: rgba(250, 249, 246, .9); backdrop-filter: blur(5px); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); } .place-card__tags .tag--exp { color: var(--c-green); } .place-card__tags .tag--time { color: #8a6710; } .place-card__tags .tag--perk { color: var(--c-red); } /* Trên hero trang profile (nền ảnh tối) */ .place-hero__tags { margin-top: 16px; } .place-hero__tags .tag { background: rgba(255, 248, 231, .16); color: var(--c-cream-text); border: 1px solid rgba(255, 248, 231, .35); backdrop-filter: blur(6px); } .place-hero__tags .tag--time { border-color: rgba(233, 185, 73, .65); color: var(--c-gold); } /* Card "sắp cập nhật" (nhóm tour đảo sẽ bổ sung dần) */ .place-card--soon { cursor: default; } .place-card--soon:hover { transform: none; box-shadow: var(--shadow-card); } .place-card__media--soon { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(-45deg, rgba(11, 93, 63, .05) 0 14px, transparent 14px 28px), var(--c-mint-wash); } .place-card__media--soon span { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-green); border: 1.5px dashed rgba(11, 93, 63, .4); padding: 8px 18px; border-radius: 99px; background: rgba(250, 249, 246, .8); } .place-card--soon h3 { color: rgba(11, 93, 63, .65); } .place-card__media--soon::after { display: none; } /* ------------------------------------------------------ itinerary cards */ .iti-group { margin-bottom: 44px; } .iti-group__title { font-family: var(--font-serif); font-weight: 800; font-size: 24px; color: var(--c-cream-text); margin-bottom: 6px; } .iti-group__sub { font-size: 14px; color: rgba(255, 248, 231, .65); margin-bottom: 20px; } .iti-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } @media (max-width: 1080px) { .iti-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .iti-grid { grid-template-columns: repeat(2, 1fr); } } .iti-card { background: rgba(255, 248, 231, .07); border: 1px solid rgba(233, 185, 73, .25); border-radius: 14px; padding: 20px 18px; text-align: center; transition: background .2s, transform .2s, border-color .2s; } .iti-card:hover { background: rgba(233, 185, 73, .14); transform: translateY(-4px); border-color: var(--c-gold); } .iti-card__days { font-family: var(--font-serif); font-weight: 800; font-size: 34px; color: var(--c-gold); line-height: 1; } .iti-card__label { font-size: 13px; font-weight: 600; color: var(--c-cream-text); margin-top: 6px; } .iti-card__hint { font-size: 11.5px; color: rgba(255, 248, 231, .55); margin-top: 3px; } /* -------------------------------------------------------- place profile */ .place-hero { position: relative; min-height: 440px; display: flex; align-items: flex-end; overflow: hidden; } .place-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .place-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 74, 52, 0) 30%, rgba(11, 74, 52, .82) 100%); } .place-hero__content { position: relative; z-index: 2; padding: 60px 0 44px; width: 100%; } .place-hero__cat { display: inline-block; background: var(--c-gold); color: var(--c-green-deep); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 15px; border-radius: 99px; margin-bottom: 16px; } .place-hero__cat--featured { background: var(--c-red-bright); color: #fff; } .place-hero h1 { color: #fff; font-size: clamp(34px, 5.6vw, 62px); font-weight: 800; line-height: 1.06; margin-bottom: 10px; } .place-hero__tagline { color: rgba(255, 248, 231, .92); font-size: 18px; max-width: 640px; } .place-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 44px; align-items: start; } @media (max-width: 880px) { .place-layout { grid-template-columns: 1fr; } } .place-desc p { margin-bottom: 18px; font-size: 17px; } .info-box { background: #fff; border-radius: var(--radius); padding: 26px 26px 22px; box-shadow: var(--shadow-card); position: sticky; top: 90px; } .info-box h3 { font-size: 17px; font-weight: 800; margin-bottom: 16px; letter-spacing: .02em; } .info-box dl { display: grid; gap: 13px; } .info-box dt { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-red); } .info-box dd { font-size: 15px; color: var(--c-green-deep); font-weight: 500; margin-top: 2px; } .info-box .btn { width: 100%; text-align: center; margin-top: 18px; } .why-list { display: grid; gap: 12px; margin-top: 8px; } .why-list li { background: #fff; border-left: 4px solid var(--c-gold); border-radius: 10px; padding: 14px 18px; font-size: 15px; color: var(--c-green-deep); font-weight: 500; box-shadow: 0 4px 14px rgba(11, 74, 52, .05); } .tip-box { background: var(--c-green-deep); color: var(--c-cream-text); border-radius: var(--radius); padding: 24px 28px; margin-top: 34px; position: relative; } .tip-box::before { content: 'MẸO ĐỊA PHƯƠNG'; display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--c-gold); margin-bottom: 8px; } .tip-box p { color: rgba(255, 248, 231, .9); font-size: 15.5px; } .subheading { font-family: var(--font-serif); font-weight: 800; font-size: 26px; color: var(--c-green); margin: 44px 0 18px; } /* mini cards (nearby / itinerary links) */ .mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 720px) { .mini-grid { grid-template-columns: 1fr; } } .mini-card { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 14px; padding: 12px; box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s; } .mini-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); } .mini-card img { width: 74px; height: 74px; border-radius: 10px; object-fit: cover; flex-shrink: 0; } .mini-card__name { font-weight: 700; font-size: 15px; color: var(--c-green); line-height: 1.3; } .mini-card__cat { font-size: 12px; color: var(--c-red); font-weight: 600; margin-top: 3px; } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; } .chip { background: #fff; border: 1.5px solid rgba(11, 93, 63, .18); border-radius: 99px; padding: 8px 18px; font-size: 13.5px; font-weight: 600; color: var(--c-green); transition: border-color .2s, background .2s; } .chip:hover { border-color: var(--c-red); color: var(--c-red); background: rgba(182, 74, 52, .05); } /* ------------------------------------------------------ itinerary page */ .iti-hero { background: linear-gradient(160deg, var(--c-green-deep) 0%, var(--c-green) 100%); padding: 66px 0 54px; color: var(--c-cream-text); position: relative; overflow: hidden; } .iti-hero::after { content: ''; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(233, 185, 73, .22), transparent 70%); } .iti-hero__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 14px; } .iti-hero h1 { color: #fff; font-size: clamp(32px, 5.4vw, 58px); font-weight: 800; line-height: 1.08; margin-bottom: 16px; } .iti-hero p { max-width: 680px; color: rgba(255, 248, 231, .85); font-size: 17px; } .iti-facts { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 30px; } .iti-fact__num { font-family: var(--font-serif); font-weight: 800; font-size: 30px; color: var(--c-gold); line-height: 1.1; } .iti-fact__label { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 248, 231, .65); font-weight: 600; } /* switcher pills */ .switcher { margin: 26px 0 0; display: flex; flex-direction: column; gap: 10px; } .switcher__label { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 248, 231, .6); } .switcher__row { display: flex; flex-wrap: wrap; gap: 8px; } .pill { border: 1.5px solid rgba(255, 248, 231, .3); color: var(--c-cream-text); border-radius: 99px; padding: 7px 17px; font-size: 13.5px; font-weight: 600; transition: background .2s, border-color .2s; } .pill:hover { border-color: var(--c-gold); } .pill.is-active { background: var(--c-gold); color: var(--c-green-deep); border-color: var(--c-gold); } /* timeline */ .day-block { margin-bottom: 54px; } .day-block__header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; } .day-block__num { font-family: var(--font-serif); font-weight: 800; font-size: 15px; color: var(--c-gold); letter-spacing: .24em; text-transform: uppercase; } .day-block h2 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; } .day-block__sub { font-size: 15px; margin-bottom: 26px; } .timeline { position: relative; padding-left: 30px; } .timeline::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--c-gold), rgba(11, 93, 63, .25)); } .tl-item { position: relative; margin-bottom: 22px; } .tl-item::before { content: ''; position: absolute; left: -28px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-cream); border: 3.5px solid var(--c-red-bright); } .tl-card { background: #fff; border-radius: 14px; padding: 18px 22px; box-shadow: var(--shadow-card); display: flex; gap: 18px; align-items: center; transition: transform .2s, box-shadow .2s; } a.tl-card:hover { transform: translateX(6px); box-shadow: var(--shadow-card-hover); } .tl-card img { width: 86px; height: 86px; border-radius: 10px; object-fit: cover; flex-shrink: 0; } .tl-card__time { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-red); margin-bottom: 3px; } .tl-card__name { font-family: var(--font-serif); font-weight: 800; font-size: 18.5px; color: var(--c-green); line-height: 1.25; } .tl-card__note { font-size: 14px; margin-top: 4px; line-height: 1.55; } .tl-card--featured { border: 2px solid var(--c-gold); background: linear-gradient(120deg, #fffdf5, #fff8e7); } .tl-card--featured .tl-card__name { color: var(--c-red); } @media (max-width: 560px) { .tl-card { flex-direction: column; align-items: flex-start; } .tl-card img { width: 100%; height: 150px; } } /* tips */ .tips-list { display: grid; gap: 14px; max-width: 780px; } .tips-list li { background: #fff; border-radius: 12px; padding: 16px 20px 16px 52px; position: relative; font-size: 15px; color: var(--c-green-deep); box-shadow: 0 4px 14px rgba(11, 74, 52, .05); } .tips-list li::before { content: '✓'; position: absolute; left: 20px; top: 15px; color: var(--c-red-bright); font-weight: 800; font-size: 17px; } /* ------------------------------------------------- profile: facts bar */ .facts-bar { background: var(--c-green-deep); } .facts-bar__inner { padding-left: 0; padding-right: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 16px 22px; padding-top: 18px; padding-bottom: 18px; align-items: start; } .fact { display: flex; gap: 10px; align-items: center; min-width: 0; } .fact__ico { width: 19px; height: 19px; flex-shrink: 0; color: var(--c-gold); } .fact small { display: block; color: rgba(255, 248, 231, .5); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 3px; } .fact b { display: block; color: var(--c-cream-text); font-size: 14px; font-weight: 700; line-height: 1.35; } .fact--addr b { font-weight: 600; } .facts-bar__acts { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .facts-bar__link { color: rgba(255, 248, 231, .8); font-size: 13px; font-weight: 600; text-decoration: underline; } .facts-bar__link:hover { color: var(--c-gold); } @media (max-width: 860px) { .facts-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 14px 16px; } .fact--addr { grid-column: 1 / -1; } } @media (max-width: 480px) { .facts-bar__inner { gap: 13px 12px; padding-top: 15px; padding-bottom: 15px; } .fact { gap: 8px; } .fact__ico { width: 17px; height: 17px; } .fact b { font-size: 13px; } } /* ------------------------------------------------- profile: page nav */ .page-nav { position: sticky; top: 61px; z-index: 40; background: rgba(250, 249, 246, .95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(11, 93, 63, .1); } .page-nav__inner { display: flex; gap: 4px; overflow-x: auto; padding-top: 0; padding-bottom: 0; } .page-nav a { padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: var(--c-green); white-space: nowrap; border-bottom: 2.5px solid transparent; } .page-nav a:hover { color: var(--c-red); border-bottom-color: var(--c-red); } .page-nav__cta { margin-left: auto; color: var(--c-red) !important; font-weight: 700 !important; } @media (max-width: 860px) { .page-nav { top: 0; } } /* --------------------------------------------- profile: map explorer */ .map-explorer { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } .map-tabs { display: flex; gap: 8px; padding: 8px; width: fit-content; background: var(--c-cream-warm); border: 1px solid rgba(11, 93, 63, .1); border-radius: var(--radius); margin-bottom: 14px; } .map-tab { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 15px; border: 1.5px solid rgba(11, 93, 63, .15); border-radius: 14px; background: #fff; cursor: pointer; color: rgba(11, 93, 63, .75); transition: border-color .2s, background .2s, transform .15s, box-shadow .2s, color .2s; } .map-tab__ico { width: 21px; height: 21px; flex-shrink: 0; } .map-tab span { font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; } .map-tab:hover { border-color: var(--c-green); color: var(--c-green); transform: translateY(-1px); } .map-tab.is-active { background: var(--c-green-deep); border-color: var(--c-green-deep); color: var(--c-gold); box-shadow: 0 6px 18px rgba(11, 74, 52, .25); } @media (max-width: 480px) { .map-tab { height: 42px; padding: 0 13px; gap: 6px; } .map-tab__ico { width: 19px; height: 19px; } .map-tab span { font-size: 12.5px; } } /* bản đồ 3D MapLibre (OpenFreeMap liberty — cùng chất liệu map web quán) */ #ml-map { height: var(--map-h); background: var(--c-mint-wash); } @media (max-width: 720px) { :root { --map-h: clamp(420px, 72vh, 640px); } } .ml-marker { text-align: center; cursor: pointer; text-decoration: none; z-index: 5 !important; } .ml-marker--near { z-index: 3 !important; } .ml-marker__label { background: linear-gradient(135deg, var(--c-red-grad-a), var(--c-red-grad-b)); color: #fff8e7; font-family: var(--font-sans); font-size: 14px; font-weight: 800; padding: 8px 16px; border-radius: 12px; white-space: nowrap; box-shadow: 0 6px 20px rgba(161, 58, 38, .45); } .ml-marker__tail { width: 0; height: 0; margin: 0 auto; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 9px solid var(--c-red-grad-b); } .ml-marker__dot { font-size: 26px; line-height: 1; margin-top: -2px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); } .ml-marker--near .ml-marker__label { background: var(--c-green-deep); color: var(--c-cream-text); font-size: 12px; font-weight: 700; padding: 4px 12px 4px 4px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 14px rgba(11, 74, 52, .35); } .ml-marker--near .ml-marker__tail { border-top-color: var(--c-green-deep); } .ml-marker--near:hover .ml-marker__label { background: var(--c-green); } .ml-marker__dist { display: none; font-size: 10px; font-weight: 600; letter-spacing: .01em; color: rgba(255, 248, 231, .68); margin-top: 1px; white-space: nowrap; } .ml-marker--near:hover .ml-marker__dist, .ml-marker--near.is-close .ml-marker__dist { display: block; } .ml-marker--home .ml-marker__dist { color: rgba(11, 74, 52, .7); } /* quán nhà — nhãn vàng nổi bật */ .ml-marker--home .ml-marker__label { background: var(--c-gold); color: var(--c-green-deep); box-shadow: 0 4px 16px rgba(233, 185, 73, .5); } .ml-marker--home .ml-marker__tail { border-top-color: var(--c-gold); } /* zoom quá xa: thu nhãn phụ thành chấm nhỏ cho đỡ rối */ .ml-marker--near.is-zoomed-out .ml-marker__label, .ml-marker--near.is-zoomed-out .ml-marker__tail { display: none; } .ml-marker--near.is-zoomed-out::after { content: ''; display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--c-green-deep); border: 2.5px solid #fff8e7; margin: 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.3); } .ml-marker--home.is-zoomed-out::after { background: var(--c-gold); } /* footer chỉ đường dưới bản đồ */ .map-pane { display: none; } .map-pane.is-active { display: block; } .map-pane iframe { width: 100%; height: var(--map-h); border: 0; display: block; background: var(--c-mint-wash); } .map-pane__hint { font-size: 12.5px; padding: 10px 16px; color: rgba(123, 79, 57, .7); } .map-pane__hint a { color: var(--c-green); font-weight: 600; text-decoration: underline; } /* pano 360 teaser */ /* ------------------------------------------ profile: masonry gallery */ .subheading__count { font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; background: rgba(11, 93, 63, .1); color: var(--c-green); border-radius: 99px; padding: 4px 12px; vertical-align: middle; margin-left: 8px; } /* ---- Thư viện ảnh: dải mosaic 2 hàng, vuốt ngang ---- */ .gallery-wrap { margin: 0 0 34px; display: flex; flex-direction: column; gap: 10px; } .gallery-rail { height: min(58vh, 480px); cursor: grab; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 1fr); grid-auto-columns: minmax(148px, 15vw); gap: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; padding-right: 22px; overscroll-behavior-x: contain; touch-action: pan-x; } .gallery-rail::-webkit-scrollbar { display: none; } .gallery-rail .gallery-item { position: relative; display: block; margin: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in; box-shadow: 0 6px 18px rgba(11, 74, 52, .14); scroll-snap-align: center; background: var(--c-mint-wash); } .gallery-rail .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto; transform: scale(1.24); /* dư biên để ảnh trôi khi vuốt */ will-change: transform; } .gallery-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; } /* nhịp mosaic: ô bìa lớn 2x2 -> ô cao -> hai ô nhỏ -> ô ngang rộng -> lặp lại */ .gallery-rail .gallery-item--cover { grid-row: span 2; grid-column: span 2; } .gallery-rail .gallery-item:nth-child(6n + 2) { grid-row: span 2; } .gallery-rail .gallery-item:nth-child(6n + 5) { grid-column: span 2; } /* lớp chữ trên ô bìa */ .gallery-cover { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(11, 74, 52, .82)); color: #fff8e7; } .gallery-cover b { font: 800 20px/1.1 var(--font-serif); } .gallery-cover small { font: 600 11.5px/1.3 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; opacity: .8; } .gallery-index { font: 800 12.5px/1 var(--font-sans); letter-spacing: .08em; color: var(--c-green-deep); font-variant-numeric: tabular-nums; background: rgba(11, 93, 63, .09); border-radius: 999px; padding: 6px 11px; } .gallery-hint__txt { white-space: nowrap; } .gallery-hint { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; color: rgba(123, 79, 57, .7); padding: 0 2px; } .gallery-hint__bar { flex: 1; height: 4px; border-radius: 3px; background: rgba(11, 93, 63, .12); overflow: hidden; } .gallery-hint__bar i { display: block; height: 100%; width: 12%; border-radius: 3px; background: var(--c-green); transition: width .12s linear, transform .12s linear; } @media (max-width: 860px) { .gallery-hint__txt { display: none; } .gallery-rail { height: min(54vh, 430px); grid-auto-columns: minmax(122px, 34vw); gap: 8px; padding-right: 16px; } .gallery-cover { padding: 32px 14px 13px; } .gallery-cover b { font-size: 17px; } .gallery-hint { font-size: 11.5px; gap: 9px; } } /* ---- Tường ảnh toàn màn hình: mosaic, chụm 2 ngón phóng to cả tường ---- */ .photowall { position: fixed; inset: 0; z-index: 120; display: none; background: #0b0f0d; overscroll-behavior: contain; } .photowall.is-open { display: block; } .photowall__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 30px; color: #fff8e7; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .6), transparent); } .photowall__count { font: 700 14px/1 var(--font-sans); letter-spacing: .04em; } .photowall__close { pointer-events: auto; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff8e7; font-size: 17px; cursor: pointer; backdrop-filter: blur(6px); } .photowall__close:hover { background: rgba(255, 255, 255, .3); } .photowall__view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; padding: 62px 0 44px; } .photowall__view::-webkit-scrollbar { width: 0; } .photowall__grid { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 10px; padding: 0 10px; transform-origin: 50% 0; will-change: transform; } .photowall__cell { overflow: hidden; border-radius: 5px; background: #15201a; aspect-ratio: 1; } .photowall__cell img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.16); } /* nhiều cột thì xen ô lớn cho có nhịp; ít cột (ảnh đã to) thì để đều */ .photowall__grid:not(.is-plain) .photowall__cell:nth-child(9n + 1) { grid-column: span 2; grid-row: span 2; } .photowall__grid.is-plain { gap: 16px; padding: 0 12px; } .photowall__grid.is-plain .photowall__cell { aspect-ratio: 4 / 3; border-radius: 12px; } .photowall__hint { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; text-align: center; pointer-events: none; color: rgba(255, 248, 231, .62); font: 600 12px/1 var(--font-sans); } @media (max-width: 860px) { .photowall__grid { gap: 8px; padding: 0 8px; } .photowall__view { padding: 58px 0 40px; } } .gallery-item { display: block; border-radius: 14px; overflow: hidden; } .gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } /* --------------------------------------------------------- promo (quán) */ .promo { background: var(--c-green-deep); border-radius: var(--radius); padding: 40px 42px; margin-top: 60px; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; position: relative; overflow: hidden; } .promo::before { content: '1977'; position: absolute; right: 18px; bottom: -34px; font-family: var(--font-serif); font-weight: 900; font-size: 150px; color: rgba(233, 185, 73, .1); line-height: 1; pointer-events: none; } .promo__text { flex: 1; min-width: 260px; } .promo__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 10px; } .promo h3, .promo__tieu { color: var(--c-cream-text); font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; line-height: 1.2; margin-bottom: 10px; } /* CHỈ DÀNH CHO MÁY ĐỌC. Không dùng display:none — thứ bị ẩn kiểu đó thì máy đọc màn hình cũng bỏ qua luôn, thành ra không phục vụ ai. Cách này giữ chữ trong luồng đọc nhưng thu về một điểm ảnh nên mắt không thấy. */ .chi-doc { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .promo p { color: rgba(255, 248, 231, .8); font-size: 15px; max-width: 520px; } .promo .btn { flex-shrink: 0; } /* ---------------------------------------------------------------- footer */ /* ========================================================================== CHÂN TRANG (gcm-chan-trang-start) Ba nguyên tắc chữ nghĩa, và cả ba đều nhằm một chuyện: một khối chữ dày đặc trên nền xanh đậm thì mắt không biết đậu vào đâu. 1. MỘT điểm nhìn duy nhất — dòng tuyên ngôn cỡ lớn bằng chữ có chân. Mọi thứ còn lại nhỏ hơn hẳn nó, không có cỡ chữ nào lưng chừng ở giữa. 2. Nhãn cột viết HOA, cỡ 11px, giãn chữ rộng — đọc ra là "tiêu đề" nhờ hình dáng chứ không nhờ to hay đậm, nên không tranh chỗ với dòng tuyên ngôn. 3. Ba nấc độ mờ cho ba hạng thông tin: chữ chính 86%, phụ 58%, chân trang 42%. Cùng một màu kem, khác nhau ở độ mờ, nên không chỗ nào chọi màu chỗ nào. ========================================================================== */ .site-footer { /* MÀU RIÊNG CỦA CHÂN TRANG, không đụng biến chung. --c-green-deep (#0b4a34) đang dùng ở 40 chỗ khác trên site — nút, huy hiệu, dải nền — nên không thể đổi nó chỉ vì chân trang. Ở đây khai một bộ màu cục bộ. Xanh cũ (#0b4a34) bạc và phẳng vì thiếu độ tươi, không phải vì thiếu độ đậm — đã thử kéo xuống gần đen thì hoá ra tối om. Nay đi hướng ngược lại: giữ nguyên độ sâu nhưng nâng độ tươi, thành xanh lá rừng có sức sống. Chuyển sắc dọc rất nhẹ (đậm dần xuống đáy) cho khối có chiều sâu mà không thành hoa văn. */ --ft-nen: #0d6446; --ft-nen-day: #09462f; --ft-nen-sang: #11724f; --ft-chu: #f6f1e4; --ft-vang: #d9a94f; /* Hai lớp nền chồng nhau: một vệt sáng toả từ mép trên giữa, đặt trên dải chuyển sắc dọc. Chỉ dải dọc thôi thì mảng màu phẳng như tấm giấy dán; thêm vệt sáng thì khối có chỗ hứng sáng và chỗ lùi vào, mắt đọc ra một không gian chứ không phải một ô màu. */ background: radial-gradient(120% 78% at 50% 0%, var(--ft-nen-sang) 0%, transparent 62%), linear-gradient(180deg, var(--ft-nen) 0%, var(--ft-nen-day) 100%); margin-top: 84px; /* Đệm trên chỉ còn bằng một phần ba bản đầu. Chân trang không cần khoảng thở riêng: phía trên nó đã có dải góp ý cách ra 34px và chính thẻ này cách nội dung trang 84px rồi — cộng dồn ba lớp là ra một mảng xanh trống trơn. */ padding: clamp(22px, 2.4vw, 34px) 0 0; color: var(--ft-chu); overflow: hidden; /* chặn tên cỡ đại làm tràn ngang */ } /* ---- lưới cột ---- Cột quán rộng hơn vì phải chứa hai địa chỉ; hai cột liên kết hẹp lại cho vừa đúng dòng dài nhất, thừa ra bao nhiêu dồn hết vào khoảng trắng giữa các cột. */ .ft-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 60px); padding-bottom: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid rgba(246, 241, 228, .13); } @media (max-width: 860px) { .ft-grid { grid-template-columns: 1fr 1fr; gap: 34px 28px; } } @media (max-width: 560px) { .ft-grid { grid-template-columns: 1fr; gap: 30px; } } .ft-nhan { margin: 0 0 13px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(246, 241, 228, .42); } .ft-ds { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; } .ft-ds a { font: 500 15px/1.35 var(--font-sans); color: rgba(246, 241, 228, .86); text-decoration: none; /* Gạch chân mọc từ trái sang khi rê chuột, thay vì bật ra nguyên vạch — cùng một tín hiệu nhưng đọc ra là một chuyển động, không phải một cú giật. */ background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size .28s cubic-bezier(.4, 0, .2, 1), color .18s ease; } .ft-ds a:hover { color: var(--ft-chu); background-size: 100% 1px; } /* ---- khối địa chỉ ---- */ .ft-dc { display: grid; gap: 1px; margin: 0 0 12px; font-style: normal; } .ft-dc b { font: 600 16px/1.3 var(--font-sans); color: var(--ft-chu); letter-spacing: -.005em; } .ft-dc span { font: 400 13.5px/1.45 var(--font-sans); color: rgba(246, 241, 228, .58); } .ft-dc--phu i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 241, 228, .38); } .ft-dc--phu b { font-size: 14.5px; font-weight: 500; color: rgba(246, 241, 228, .82); } .ft-gio { margin: 0 0 10px; font: 400 13.5px/1.45 var(--font-sans); color: rgba(246, 241, 228, .58); } /* Số điện thoại là thứ đáng bấm nhất trong cả chân trang nên cho nó cỡ chữ của một con số, không phải cỡ của một dòng liên kết. */ .ft-tel { display: inline-block; margin-bottom: 10px; font: 600 22px/1 var(--font-sans); letter-spacing: -.01em; color: var(--ft-chu); text-decoration: none; font-variant-numeric: tabular-nums; transition: color .18s ease; } .ft-tel:hover { color: var(--ft-vang); } .ft-mui, .ft-gopy { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0; cursor: pointer; font: 600 13.5px/1 var(--font-sans); color: var(--ft-vang); text-decoration: none; } .ft-mui svg, .ft-gopy svg { width: 15px; height: 15px; transition: transform .2s cubic-bezier(.4, 0, .2, 1); } .ft-mui:hover svg, .ft-gopy:hover svg { transform: translateX(4px); } /* ---- dải cuối ---- */ .ft-cuoi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 24px; padding-top: 15px; } .ft-cuoi p { margin: 0; font: 400 12.5px/1.5 var(--font-sans); color: rgba(246, 241, 228, .42); } .ft-cuoi a { color: rgba(246, 241, 228, .62); text-decoration: none; } .ft-cuoi a:hover { color: var(--ft-vang); } .ft-cuoi__anh { flex: 1 1 auto; } .ft-gopy { margin-left: auto; } @media (max-width: 560px) { .ft-cuoi { gap: 12px; } .ft-cuoi__anh { flex: 1 1 100%; } .ft-gopy { margin-left: 0; } } /* ---- TÊN QUÁN CỠ ĐẠI ---- Cỡ chữ tính theo bề ngang màn hình (vw) chứ không phải một con số cố định, để dòng chữ luôn ôm sát hai mép dù màn hình nào — đó chính là thứ làm nó ra dáng "cỡ đại" thay vì "chữ to". Chữ tô bằng dải chuyển sắc mờ dần: đậm ở trên, tan vào nền ở dưới. Nếu tô đặc một màu thì nó át hết phần nội dung phía trên; mờ dần thì đọc ra là VÂN NỀN có hình dáng cái tên, vẫn thấy rõ mà không tranh chỗ. */ .ft-ten { /* KHÔNG cắt ở khung này. Bản trước để overflow:hidden ngay đây, mà dòng chữ lại ép line-height xuống dưới 1 — nên dấu hỏi của chữ GỎI nhô cao hơn hộp dòng và bị xén mất đầu. Chữ Việt có dấu luôn vượt lên trên đỉnh chữ hoa, ép hộp dòng là chắc chắn cắt. Nay hộp dòng đủ cao cho dấu, phần thừa dưới chân chữ kéo âm cho chữ ngồi sát đáy — chỗ tràn xuống dưới đã có chính thẻ