p {
    font-size: 16px;
}

img {
    vertical-align: middle;
}

/* Interior pages: long-form text (about, privacy, terms). main.min.css only
   styles the landing-page sections, so these rules carry the text pages. */
.page-content {
    padding-top: 50px;
    padding-bottom: 70px;
}

.page-content h1 {
    margin-top: 0;
    margin-bottom: .6em;
    font-size: 3.2rem;
}

.page-content h2 {
    margin-top: 1.8em;
    margin-bottom: .6em;
    font-size: 2.6rem;
}

.page-content h2:first-child {
    margin-top: 0;
}

.page-content h4 {
    margin-top: 1.4em;
    font-size: 1.9rem;
}

.page-content p,
.page-content li {
    font-size: 16px;
    line-height: 1.75;
}

.page-content ol,
.page-content ul {
    padding-left: 40px;
    margin-bottom: 1.4em;
}

.page-content ol {
    list-style-type: decimal;
}

.page-content ul {
    list-style-type: disc;
}

.page-content li {
    list-style-type: inherit;
    margin-bottom: .5em;
}

.page-content .page-nav {
    margin-top: 3.5em;
    padding-top: 1.2em;
    border-top: 1px solid #ddd;
}

/* Heading shims. main.min.css styles the landing page by tag name
   (.navbar-brand h1, .header h2, .header h3), but the document outline needs
   the page topic as the only h1 and the site name in the navbar as plain text.
   These rules carry the original look onto the retagged elements; the
   breakpoints mirror main.min.css exactly. */
.navbar-brand .brand-title {
    font-family: Dosis, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    color: #f69831;
    letter-spacing: 1px;
    line-height: 1;
    text-align: left;
    margin: 0;
    -webkit-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
}

.navbar-brand .brand-title .rocket-icon {
    width: 50px;
    height: auto;
}

.navbar-brand .brand-title span {
    display: inline;
    margin-left: 10px;
}

.navbar-default.scroll .navbar-brand .brand-title {
    display: flex;
    align-items: center;
    font-size: 2.4rem;
    margin-top: 0;
    margin-bottom: 0;
}

.navbar-default.scroll .navbar-brand .brand-title .rocket-icon {
    width: 50px;
}

@media (min-width: 768px) {
    .navbar-brand .brand-title {
        font-size: 3.6rem;
        margin: 20px 0;
    }

    .navbar-brand .brand-title .rocket-icon {
        width: auto;
    }
}

.header h1 {
    font-family: Dosis, Helvetica, sans-serif;
    font-size: 3.6rem;
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 20px;
}

@media (min-width: 992px) {
    .header h1 {
        font-size: 5.8em;
    }
}

@media (min-width: 1200px) {
    .header h1 {
        font-size: 4.8em;
        margin-top: 50px;
        margin-bottom: 30px;
    }
}

.header .header__lead {
    font-family: Roboto, Helvetica, sans-serif;
    font-size: 1.6rem;
    color: #fff;
    font-weight: 300;
    line-height: 1.75;
    margin-bottom: 30px;
}

@media (min-width: 992px) {
    .header .header__lead {
        font-size: 1.6em;
    }
}

@media (min-width: 1200px) {
    .header .header__lead {
        font-size: 1.8em;
        margin-bottom: 50px;
    }
}

/* ===== Responsive & readability (2026-10) =====
   main.min.css: navbar chỉ fixed+trong suốt từ 768px; dưới 768px nó là khối xanh bình thường. */

/* Màu chữ thân trang: #999 trên nền trắng chỉ đạt 2.8:1 → #5f6673 (~5.9:1). */
.content,
.content--locations,
.content--what-is {
    color: #5f6673;
}

.content--why-choose p {
    font-weight: 400;
}

.footer.content {
    color: #c9d1d9;
}

.footer a {
    color: #9ec5ff;
}

.footer a:hover,
.footer a:focus {
    color: #fff;
}

/* Trang con: khối đệm 120px chỉ cần khi navbar nổi phía trên (>=768px). */
@media (max-width: 767px) {
    .header--page {
        display: none;
    }

    .page-content {
        padding: 28px 20px 50px;
    }

    .page-content h1 {
        font-size: 2.8rem;
    }

    .page-content h2 {
        font-size: 2.2rem;
    }

    .page-content ol,
    .page-content ul {
        padding-left: 24px;
    }
}

/* Điện thoại */
@media (max-width: 767px) {
    .header .main-image {
        width: 220px;
        max-width: 60%;
        margin: 8px auto 4px;
    }

    .header__content {
        margin: 0 0 4px;
    }

    .header h1 {
        font-size: 3rem;
        margin: 10px 0 12px;
    }

    .header .header__lead {
        margin-bottom: 22px;
    }

    .header__buttons {
        padding-bottom: 34px;
    }

    .content,
    .content--download,
    .content--locations,
    .content--what-is,
    .content--why-choose {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .content--download {
        padding-top: 0;
    }

    .content--what-is p,
    .content--why-choose p,
    .content--locations p {
        margin-bottom: 26px;
    }

    .content--what-is .col-xs-6 img {
        max-width: 96px;
        margin: 0 auto;
    }

    .content--what-is h3 {
        font-size: 1.6rem;
        margin-bottom: 22px;
    }

    .content--why-choose img {
        width: 150px;
        height: auto;
    }

    .content--why-choose h3 {
        margin-bottom: 26px;
    }

    .img-locations {
        max-width: 240px;
        margin: 0 auto;
    }
}

/* Tablet: 3 lý do xếp 1 hàng */
@media (min-width: 768px) and (max-width: 991px) {
    .content--why-choose img {
        width: 180px;
        height: auto;
    }
}

/* Tên lửa mục "What is": thay hiệu ứng TweenMax (y 80% → 0% trong 1s) bằng CSS transition, site.js bật/tắt .fly-start */
#super-flying {
    transition: transform 1s ease-out;
}

#super-flying.fly-start {
    transform: translateY(80%);
}

.header picture,
.content--what-is picture {
    display: block;
}


/* ===== Tiếng Ả Rập (RTL) — trang /ar* có <html lang="ar" dir="rtl">. Bootstrap 3 không có RTL nên đảo thủ công. ===== */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] .btn,
[dir="rtl"] .navbar-nav > li > a {
    font-family: "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .header h1 {
    font-family: "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.45;
}

[dir="rtl"] .navbar-brand .brand-title {
    font-family: Dosis, Helvetica, sans-serif;
    text-align: right;
}

[dir="rtl"] .navbar-brand .brand-title span {
    margin-left: 0;
    margin-right: 10px;
}

[dir="rtl"] .navbar-brand {
    float: right;
}

[dir="rtl"] .navbar-toggle {
    float: left;
    margin-right: 0;
    margin-left: 15px;
}

@media (min-width: 768px) {
    [dir="rtl"] .navbar-header {
        float: right;
    }

    [dir="rtl"] .navbar-nav > li {
        float: right;
    }

    [dir="rtl"] .navbar-right {
        float: left !important;
        margin-right: 0;
        margin-left: -15px;
    }

    [dir="rtl"] .navbar > .container .navbar-brand {
        margin-left: 0;
        margin-right: -15px;
    }
}

@media (min-width: 992px) {
    [dir="rtl"] .header__content {
        text-align: right;
    }
}

[dir="rtl"] .flag-list {
    text-align: right;
}

[dir="rtl"] .page-content ol,
[dir="rtl"] .page-content ul {
    padding-left: 0;
    padding-right: 40px;
}

@media (max-width: 767px) {
    [dir="rtl"] .page-content ol,
    [dir="rtl"] .page-content ul {
        padding-right: 24px;
    }
}

[dir="rtl"] .page-content p,
[dir="rtl"] .page-content li {
    line-height: 1.9;
}

.page-content ol.list-roman,
.page-content ol.list-roman li {
    list-style-type: lower-roman;
}

.translation-note {
    background: #f3f6fb;
    border-inline-start: 4px solid #f69831;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 15px !important;
}

/* Nút chuyển ngôn ngữ trên menu */
.lang-switch a[lang="ar"] {
    font-family: "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif;
}

/* Lưới Bootstrap: cột float phải + đổi offset sang margin-right */
[dir="rtl"] [class*="col-xs-"] {
    float: right;
}

[dir="rtl"] .col-xs-offset-0 {
    margin-left: 0;
    margin-right: 0;
}

[dir="rtl"] .col-xs-offset-1 {
    margin-left: 0;
    margin-right: 8.3333333%;
}

[dir="rtl"] .col-xs-offset-2 {
    margin-left: 0;
    margin-right: 16.666667%;
}

[dir="rtl"] .col-xs-offset-3 {
    margin-left: 0;
    margin-right: 25%;
}

[dir="rtl"] .col-xs-offset-4 {
    margin-left: 0;
    margin-right: 33.333333%;
}

[dir="rtl"] .col-xs-offset-5 {
    margin-left: 0;
    margin-right: 41.666667%;
}

[dir="rtl"] .col-xs-offset-6 {
    margin-left: 0;
    margin-right: 50%;
}

[dir="rtl"] .col-xs-offset-7 {
    margin-left: 0;
    margin-right: 58.333333%;
}

[dir="rtl"] .col-xs-offset-8 {
    margin-left: 0;
    margin-right: 66.666667%;
}

[dir="rtl"] .col-xs-offset-9 {
    margin-left: 0;
    margin-right: 75%;
}

[dir="rtl"] .col-xs-offset-10 {
    margin-left: 0;
    margin-right: 83.333333%;
}

[dir="rtl"] .col-xs-offset-11 {
    margin-left: 0;
    margin-right: 91.666667%;
}

@media (min-width: 768px) {
    [dir="rtl"] [class*="col-sm-"] {
        float: right;
    }

    [dir="rtl"] .col-sm-offset-0 {
        margin-left: 0;
        margin-right: 0;
    }

    [dir="rtl"] .col-sm-offset-1 {
        margin-left: 0;
        margin-right: 8.3333333%;
    }

    [dir="rtl"] .col-sm-offset-2 {
        margin-left: 0;
        margin-right: 16.666667%;
    }

    [dir="rtl"] .col-sm-offset-3 {
        margin-left: 0;
        margin-right: 25%;
    }

    [dir="rtl"] .col-sm-offset-4 {
        margin-left: 0;
        margin-right: 33.333333%;
    }

    [dir="rtl"] .col-sm-offset-5 {
        margin-left: 0;
        margin-right: 41.666667%;
    }

    [dir="rtl"] .col-sm-offset-6 {
        margin-left: 0;
        margin-right: 50%;
    }

    [dir="rtl"] .col-sm-offset-7 {
        margin-left: 0;
        margin-right: 58.333333%;
    }

    [dir="rtl"] .col-sm-offset-8 {
        margin-left: 0;
        margin-right: 66.666667%;
    }

    [dir="rtl"] .col-sm-offset-9 {
        margin-left: 0;
        margin-right: 75%;
    }

    [dir="rtl"] .col-sm-offset-10 {
        margin-left: 0;
        margin-right: 83.333333%;
    }

    [dir="rtl"] .col-sm-offset-11 {
        margin-left: 0;
        margin-right: 91.666667%;
    }
}

@media (min-width: 992px) {
    [dir="rtl"] [class*="col-md-"] {
        float: right;
    }

    [dir="rtl"] .col-md-offset-0 {
        margin-left: 0;
        margin-right: 0;
    }

    [dir="rtl"] .col-md-offset-1 {
        margin-left: 0;
        margin-right: 8.3333333%;
    }

    [dir="rtl"] .col-md-offset-2 {
        margin-left: 0;
        margin-right: 16.666667%;
    }

    [dir="rtl"] .col-md-offset-3 {
        margin-left: 0;
        margin-right: 25%;
    }

    [dir="rtl"] .col-md-offset-4 {
        margin-left: 0;
        margin-right: 33.333333%;
    }

    [dir="rtl"] .col-md-offset-5 {
        margin-left: 0;
        margin-right: 41.666667%;
    }

    [dir="rtl"] .col-md-offset-6 {
        margin-left: 0;
        margin-right: 50%;
    }

    [dir="rtl"] .col-md-offset-7 {
        margin-left: 0;
        margin-right: 58.333333%;
    }

    [dir="rtl"] .col-md-offset-8 {
        margin-left: 0;
        margin-right: 66.666667%;
    }

    [dir="rtl"] .col-md-offset-9 {
        margin-left: 0;
        margin-right: 75%;
    }

    [dir="rtl"] .col-md-offset-10 {
        margin-left: 0;
        margin-right: 83.333333%;
    }

    [dir="rtl"] .col-md-offset-11 {
        margin-left: 0;
        margin-right: 91.666667%;
    }
}

/* ===== Độ tương phản màu (WCAG AA) =====
   Cam thương hiệu #f69831 + chữ trắng chỉ đạt 2.2:1.
   Nền có chữ trắng (nút, khối "Why choose"): #c2560c → 4.5:1 (chữ thường).
   Tiêu đề cam trên nền trắng: #d9650c → 3.6:1 (chữ lớn, chuẩn 3:1). */
.btn-download,
.btn-ios {
    background: #c2560c;
}

.btn-download:hover,
.btn-download:focus,
.btn-ios:hover,
.btn-ios:focus {
    background-color: #a84a0a;
}

.content--download .btn-download:hover,
.content--download .btn-ios:hover {
    background-color: #c2560c;
}

.content--why-choose {
    background-color: #c2560c;
}

.content--download h2,
.content--locations h2,
.content--what-is h2,
.content--why-choose h2,
.content h2 {
    color: #d9650c;
}

.content--why-choose h2 {
    color: #fff;
}

/* Tiêu đề cấp 3 trong trang nội dung (privacy dùng h2 → h3, không nhảy cấp) */
.page-content h3 {
    margin-top: 1.4em;
    font-size: 1.9rem;
    font-weight: 500;
    text-align: start;
}

/* Link trong đoạn văn phải nhận ra được không chỉ bằng màu (WCAG 1.4.1) */
.page-content p a,
.page-content li a,
.footer-tos a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Viền focus: bấm chuột/chạm không hiện viền (trước đây logo hiện viền đen méo vì .navbar-brand cao cố định 50px
   nhưng icon + chữ tràn ra ngoài). Điều hướng bằng bàn phím (Tab) vẫn có viền rõ ràng. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    outline: none;
}

.navbar-brand:focus-visible {
    outline: none;
}

.navbar-brand:focus-visible .brand-title {
    outline: 2px solid #fff;
    outline-offset: 4px;
    border-radius: 8px;
}