/*
 * G.Master website: additions to the stylesheets of the former gmasterbbq.vn for the parts the CMS changed — booking
 * button in place of the booking form, picture slider of the restaurant list, menu flipbook in the colours of the former
 * menu section, page content of generic pages, texts only for screen readers.
 */

.gmaster-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Banner: the phone description replaces the desktop one. */
.slider-description--mobile { display: none; }
@media (max-width: 767px) {
    .slider-description--desktop { display: none; }
    .slider-description--mobile { display: block; }
}

/* Booking: the button opening the booking form dialog. */
.booking-form.gmaster-booking-cta {
    display: flex;
    justify-content: center;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.booking-form.gmaster-booking-cta .submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    text-decoration: none;
}

/* Restaurant list: pictures of the chosen branch. */
.gmaster-branch-gallery { position: relative; }
.gmaster-branch-gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 26px;
    line-height: 36px;
    cursor: pointer;
    transform: translateY(-50%);
}
.gmaster-branch-gallery__nav:hover { background: rgba(0, 0, 0, 0.55); }
.gmaster-branch-gallery__nav--prev { left: 12px; }
.gmaster-branch-gallery__nav--next { right: 12px; }
.gmaster-branch-gallery__nav[hidden] { display: none; }
.gmaster-branch-gallery__dots {
    position: absolute;
    right: 0;
    bottom: 14px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.gmaster-branch-gallery__dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.gmaster-branch-gallery__dots button.is-active { background: #e30000; border-color: #e30000; }

/* Menu flipbook in the place of the former menu section (black, white titles, red accents). */
.gmaster-home-s4 .gmaster-home-s4-title { font-family: var(--font-secondary, 'helvetic', serif); font-size: 40px; text-transform: uppercase; }
.gmaster-home-s4 .gmaster-home-s4-more { color: #fff; border-bottom-color: #e30000; text-transform: uppercase; }
.gmaster-home-s4 .gmaster-home-s4-tab { color: rgba(255, 255, 255, 0.6); font-size: 20px; letter-spacing: 0; text-transform: uppercase; }
.gmaster-home-s4 .gmaster-home-s4-tab.is-active,
.gmaster-home-s4 .gmaster-home-s4-tab[aria-selected='true'] { color: #fff; }
.gmaster-home-s4 .gmaster-home-s4-empty { color: #fff; }

/* Generic page content and promotion title. */
.gmaster-page-content { padding: 48px 15px; }
.gmaster-page-title,
.gmaster-promo-title { margin: 0 0 24px; font-family: var(--font-secondary, 'helvetic', serif); text-transform: uppercase; }
.gmaster-rich-text img { max-width: 100%; height: auto; }

/*
 * Same content width as the other sections: the menu flipbook, the news cards and the restaurant list follow the steps of
 * .container (home.css): 1200px, 960 / 720 / 540 on tablets, 1500px from 1200px up (1600px from 1920px), same side padding.
 * The flipbook itself fills its box (home-section-4.js no longer stops at 1180px).
 */
.gmaster-home-s4 .gmaster-home-s4-inner,
.restaurant-list-section .container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
}
.gmaster-home-s4 .gmaster-home-s4-carousel-wrap { max-width: none; }
.news-section .news-cards-container { width: 100%; box-sizing: border-box; }
@media (min-width: 769px) {
    .news-section { padding-left: 0; padding-right: 0; }
}
@media (min-width: 1200px) {
    .gmaster-home-s4 .gmaster-home-s4-inner, .restaurant-list-section .container, .news-section .news-cards-container { max-width: 1500px; padding-left: 30px; padding-right: 30px; }
}
@media (min-width: 1920px) {
    .gmaster-home-s4 .gmaster-home-s4-inner, .restaurant-list-section .container, .news-section .news-cards-container { max-width: 1600px; padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 1199px) and (min-width: 992px) {
    .gmaster-home-s4 .gmaster-home-s4-inner, .restaurant-list-section .container, .news-section .news-cards-container { max-width: 960px; padding-left: 25px; padding-right: 25px; }
}
@media (max-width: 991px) and (min-width: 768px) {
    .gmaster-home-s4 .gmaster-home-s4-inner, .restaurant-list-section .container, .news-section .news-cards-container { max-width: 720px; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 767px) and (min-width: 576px) {
    .gmaster-home-s4 .gmaster-home-s4-inner, .restaurant-list-section .container { max-width: 540px; padding-left: 15px; padding-right: 15px; }
}
@media (max-width: 575px) {
    .gmaster-home-s4 .gmaster-home-s4-inner, .restaurant-list-section .container { max-width: 100%; padding-left: 15px; padding-right: 15px; }
}

/*
 * GMaster colours: no pure black (#000) on the website. One black (#0A0A0A) for every dark surface (#0A0A0A, chosen by the brand owner); change it here only.
 */
:root {
    --gmaster-black: #0a0a0a;
    --gmaster-gold: #f2be83;
    --gmaster-red: #a31f1c;
}
html,
body,
#top-menu,
.navigation_main_wrapper,
.megamenu_mb,
.btn-booking-mobile,
.gmaster-home-s4,
.menu-section,
.menu-page-tabs-wrapper,
.breadcrumbs,
.news-section,
.promotions-section,
.membership-section-clone,
.news-detail-section,
.main_wrapper,
.container_main_wrapper,
.terms-page,
.terms-content,
.hero-section,
.hero-content-section,
.special-section,
.booking-form .submit-btn {
    background-color: var(--gmaster-black);
}
/* Hover of the booking button: gold with black text (the black fill above must not win over the theme hover: black on black). */
.booking-form .submit-btn:hover,
.booking-form .submit-btn:focus-visible { background-color: #d1a04f; color: var(--gmaster-black); border-color: #d1a04f; }
.btn-booking-mobile { background-color: var(--gmaster-black) !important; }
.megamenu_mb .mobile-booking-item .btn-booking-mobile,
.megamenu_mb ul li.mobile-booking-item a.btn-booking-mobile { background-color: var(--gmaster-black) !important; }

/* Theme variable of the black used by the buttons: the soft black as well. */
:root { --black-color: var(--gmaster-black); }

/*
 * Pagination dots: every dot is a circle (the active one is a filled circle, not a pill or a diamond), in gold.
 * Hero slider, menu slider, flipbook, membership slider, news dots and the branch picture dots.
 */
.slider-image-slick .slick-dots li button,
#menu .slick-dots li button,
.slider-image-slick .slick-dots li.slick-active button,
#menu .slick-dots li.slick-active button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(242, 190, 131, 0.35);
    border: 0;
    transform: none;
}
.slider-image-slick .slick-dots li.slick-active button,
#menu .slick-dots li.slick-active button,
.slider-image-slick .slick-dots li.slick-active button:hover,
#menu .slick-dots li.slick-active button:hover { background-color: var(--gmaster-gold); }
.slider-image-slick .slick-dots li button:hover,
#menu .slick-dots li button:hover { background-color: rgba(242, 190, 131, 0.65); }

.gmaster-home-s4-dot {
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--gmaster-gold);
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.gmaster-home-s4-dot .gmaster-home-s4-dot-icon { display: none; }
.gmaster-home-s4-dot:hover { transform: scale(1.15); }
.gmaster-home-s4-dot.is-active { background: var(--gmaster-gold); }

.slider-dots .dot,
.pagination-dot,
.owl-dot { border-radius: 50%; }
.slider-dots .dot { background-color: rgba(242, 190, 131, 0.35); }
.slider-dots .dot.active,
.pagination-dot.active,
.owl-dot.active,
.owl-dot:hover { background-color: var(--gmaster-gold); }
.pagination-dot { background-color: rgba(242, 190, 131, 0.45); }

.gmaster-branch-gallery__dots button { border-color: var(--gmaster-gold); border-radius: 50%; }
.gmaster-branch-gallery__dots button.is-active { background: var(--gmaster-gold); border-color: var(--gmaster-gold); }

/*
 * Reading details: titles keep their accents and their last word (no cut in the middle of a word), links of the short text
 * look like links, empty paragraphs of a pasted post do not leave big gaps.
 */
.news-section { padding-top: 48px; }
@media (max-width: 768px) { .news-section { padding-top: 32px; } }

.news-card-title,
.news-container .news-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.news-container .news-title { font-size: 18px; line-height: 1.4; }
.news-container .news-title a { font-size: inherit; -webkit-line-clamp: 2; line-clamp: 2; }
.news-container .news-desc,
.news-card-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.news_detail .summary { text-transform: none; text-align: left; font-family: var(--font-primary); font-size: 18px; }
.news_detail .summary a { color: var(--gmaster-gold); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.news_detail .summary a:hover { color: #fff; }
.news-content p:has(> br:only-child),
.gmaster-rich-text p:has(> br:only-child) { margin: 0; line-height: 0.7; }


/* Booking section: the text sits on a photo, so the photo is darkened a little and the text gets a soft shadow. */
.booking-section { position: relative; isolation: isolate; }
.booking-section .booking-title,
.booking-section .booking-subtitle { color: #fff; text-shadow: 0 2px 12px rgba(10, 10, 10, 0.85); }
.booking-section .booking-subtitle { font-weight: 500; }

/* The decoration of a banner may reach past the side of the screen on a phone: clip it sideways, not at the bottom. */
.menu-banner,
.slider-home { overflow-x: clip; }


/* One h1 per page: the logo is a div on the inner pages; it keeps the position it had as an h1. */
.head_nohome .logo-container { margin-top: 2px; }

/*
 * Form controls and buttons do not inherit the font of the page (the browser gives them Arial): the area / language dialogs, the
 * restaurant select, the slider and gallery buttons, the close buttons, inputs. They use the brand body font like the text around them.
 */
button,
input,
select,
textarea,
optgroup,
option { font-family: var(--font-primary, 'SVN-Helves', Arial, sans-serif); }
button { letter-spacing: 0; }
.menu-page-tab { cursor: pointer; }

/*
 * Buttons: one size and one rhythm on desktop, tablet and phone. Same font size, letter-spacing 0, the text centred in the
 * box (SVN-Helves sits 0.66px low in its line: the vertical padding is moved by 0.04em so that the capitals are in the
 * middle), words written with a capital letter. The buttons that were already in capitals stay in capitals. !important:
 * the theme sets sizes, letter-spacing and padding of these buttons in several media queries.
 */
.view-all-btn,
.membership-header-clone .view-all-btn,
.submit-btn,
.gmaster-404-button,
.gmaster-stores__map,
.gmaster-stores__book,
.gmaster-locale-modal__apply,
.gmaster-cookie-consent__accept,
.megamenu_mb .mobile-booking-item .btn-booking-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: calc(10px - 0.04em) 24px calc(10px + 0.04em) !important;
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.view-all-btn,
.membership-header-clone .view-all-btn,
.submit-btn,
.gmaster-404-button,
.gmaster-locale-modal__apply { text-transform: capitalize !important; }
/* Cookie notice: the button reads "Đồng ý" as it is written (not "Đồng Ý"). */
.gmaster-cookie-consent__accept { text-transform: none !important; }
.gmaster-stores__map,
.gmaster-stores__book,
.megamenu_mb .mobile-booking-item .btn-booking-mobile { text-transform: uppercase !important; }
/* "Xem thêm" of the menu section is an underlined link: the same size and letter-spacing, its own padding. */
.gmaster-home-s4 .gmaster-home-s4-more { font-size: 16px !important; letter-spacing: 0 !important; line-height: 1.25 !important; text-transform: capitalize !important; }

/* "Xem tất cả" / "Chi tiết ưu đãi": the box follows the text (never narrower than it) with room at both sides; the header wraps instead. */
.view-all-btn,
.membership-header-clone .view-all-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}
.promotions-header,
.membership-header-clone { flex-wrap: wrap; gap: 12px 20px; }

/* Hero text: never smaller than 14px on phones. */
@media (max-width: 575px) {
    .slider-description,
    .author-text { font-size: 15px !important; }
}

/*
 * Banner picture slider: a gap between the pictures (10px of each side of a slide) and, on desktop, the slider ends at the
 * right edge of the container (it was centred in its column with 40px of room at the right).
 */
.slider-image-slick .slick-list { margin: 0 -10px; }
.slider-image-slick .slick-slide { padding: 0 10px; box-sizing: border-box; }
@media (min-width: 993px) {
    .slider-image-col { padding-right: 0; align-items: stretch; }
    .slider-image-slick { width: 100%; max-width: none; }
}

/*
 * Booking buttons: gold fill with black text; on hover black with white text (the colours that were the other way round).
 * The same look for "Đặt bàn ngay" and for Đặt bàn in the header.
 */
.booking-form.gmaster-booking-cta .submit-btn,
.navigation_main li.gmaster-nav-booking > a {
    background-color: #d1a04f !important;
    border: 1px solid #d1a04f !important;
    color: var(--gmaster-black, #0a0a0a) !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.booking-form.gmaster-booking-cta .submit-btn:hover,
.booking-form.gmaster-booking-cta .submit-btn:focus-visible,
.navigation_main li.gmaster-nav-booking > a:hover,
.navigation_main li.gmaster-nav-booking > a:focus-visible {
    background-color: var(--gmaster-black, #0a0a0a) !important;
    border-color: #fff !important;
    color: #fff !important;
}
.navigation_main li.gmaster-nav-booking > a { display: inline-flex; align-items: center; justify-content: center; line-height: 1.25; white-space: nowrap; }

/* Booking section text. */
.booking-section .booking-subtitle { font-size: 24px !important; letter-spacing: 0 !important; }

/* Đặt bàn button of the header: no box shadow and no text shadow (the theme gives the menu links a text shadow). */
.navigation_main li.gmaster-nav-booking > a,
.navigation_main li.gmaster-nav-booking > a:hover,
.navigation_main li.gmaster-nav-booking > a:focus-visible {
    box-shadow: none !important;
    text-shadow: none !important;
}

/*
 * "Xem tất cả" and "Chi tiết ưu đãi" sit at the bottom of their section, centred, with a thin line below them that separates
 * the section from the next one. The sections with a heading start 72px (48px on phones) under the one above.
 */
.gmaster-section-more { position: relative; display: flex; justify-content: center; padding: 0 16px 56px; }
.gmaster-section-more::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.14); }
.news-section,
.promotions-section,
.membership-section-clone { padding-top: 72px !important; }
@media (max-width: 767px) {
    .gmaster-section-more { padding-bottom: 40px; }
    .gmaster-section-more::after { left: 15px; right: 15px; }
    .news-section,
    .promotions-section,
    .membership-section-clone { padding-top: 48px !important; }
}

/*
 * Booking section ("Đặt bàn online"): the dark layer over the picture on every width (the theme draws it only where the section
 * is positioned), room around the title and the text (it was padding 0 on phones: title and text on top of each other).
 */
.booking-section { padding-top: 72px !important; padding-bottom: 72px !important; }
.booking-section::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, rgba(45, 24, 16, 0.78), rgba(10, 10, 10, 0.72)); pointer-events: none; }
.booking-section .booking-container { position: relative; z-index: 2; gap: 28px; }
.booking-section .booking-header { padding: 0 20px; }
.booking-section .booking-title { margin: 0 0 14px; line-height: 1.2; }
.booking-section .booking-subtitle { margin: 0 0 18px; line-height: 1.35; }
@media (max-width: 767px) {
    .booking-section { padding-top: 56px !important; padding-bottom: 56px !important; }
    .booking-section .booking-subtitle { font-size: 16px !important; }
}

/* The page of the Khuyến mãi list does not end on the footer. */
.news_page { padding-bottom: 72px; }
@media (max-width: 767px) { .news_page { padding-bottom: 48px; } }

/* The "Xem tất cả" / "Chi tiết ưu đãi" button is centred in its section (the theme gives the button side margins). */
.gmaster-section-more > .view-all-btn { margin: 0 auto !important; }

/*
 * Khuyến mãi on phones (up to 699px): the cards slide sideways and snap, 1.2 cards in view (the next one peeks out), with round
 * pagination dots under them. From 700px (iPad mini portrait) see the tablet block below: 2 cards.
 */
.gmaster-news-dots { display: none; }
@media (max-width: 699px) {
    #news .news-cards-container {
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        gap: 16px;
    }
    #news .news-cards-container .news-card {
        flex: 0 0 calc((100vw - 36px) / 1.2) !important;
        min-width: 0 !important;
        max-width: none;
        scroll-snap-align: start;
    }
    .gmaster-news-dots { display: flex; justify-content: center; gap: 12px; margin-top: -8px; }
    .gmaster-news-dots:empty { display: none; }
    .gmaster-news-dots button {
        box-sizing: border-box;
        width: 12px;
        height: 12px;
        padding: 0;
        border: 1.5px solid var(--gmaster-gold, #f2be83);
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
    }
    .gmaster-news-dots button.is-active { background: var(--gmaster-gold, #f2be83); }
}


/*
 * Tablets (700–1024px, iPad mini portrait to iPad Air and the landscape iPad): three narrow cards cut their titles, so the Khuyến
 * mãi cards of the homepage slide with exactly 2 cards in view, snap, round dots (1.2 cards on phones, above). The Khuyến mãi
 * page has a grid of 2 columns.
 */
@media (min-width: 700px) and (max-width: 1024px) {
    #news .news-cards-container {
        display: flex !important;
        flex-direction: row;
        gap: 20px;
        overflow-x: auto;
        max-width: none;
        padding: 0 28px;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 28px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #news .news-cards-container::-webkit-scrollbar { display: none; }
    #news .news-cards-container .news-card {
        flex: 0 0 calc((100vw - 76px) / 2) !important;
        min-width: 0 !important;
        max-width: none;
        scroll-snap-align: start;
    }
    #news .gmaster-news-dots { display: flex; justify-content: center; gap: 12px; margin-top: -8px; }
    #news .gmaster-news-dots:empty { display: none; }
    #news .gmaster-news-dots button { box-sizing: border-box; width: 12px; height: 12px; padding: 0; border: 1.5px solid var(--gmaster-gold, #f2be83); border-radius: 50%; background: transparent; cursor: pointer; }
    #news .gmaster-news-dots button.is-active { background: var(--gmaster-gold, #f2be83); }
}


/* Tablets (700–1024px): bigger card titles on the homepage and on the Khuyến mãi page (the same size on both). */
@media (min-width: 700px) and (max-width: 1024px) {
    .news-card-title,
    .news-container .news-title,
    .news-container .news-title a { font-size: 24px !important; line-height: 1.35 !important; }
    .news-container .news-title,
    .news-container .news-title a { font-family: var(--font-secondary) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0 !important; }
    .news-container .news-title { height: auto !important; max-height: none !important; overflow: visible !important; }
    .news-container .news-title a { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
    .news-container .news-content { gap: 10px; }
    .news-card-excerpt,
    .news-container .news-desc { font-size: 16px; line-height: 1.55; }
}

/*
 * Khuyến mãi page: the section and the cards of the homepage (#news): 3 columns on a desktop that wrap onto more rows (every
 * promotion of the admin), 2 columns on a tablet, and on phones the same sliding cards as the homepage (1.2 cards, snap, dots).
 */
#news.gmaster-news-archive { padding-top: 24px !important; padding-bottom: 72px; }
@media (min-width: 1025px) { #news.gmaster-news-archive .news-cards-container.news-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1024px) {
    #news.gmaster-news-archive .news-cards-container,
    #news.gmaster-news-archive .news-cards-container.news-count-3 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; overflow: visible; padding: 0 24px; }
    #news.gmaster-news-archive .news-cards-container .news-card { flex: none !important; width: auto; }
    #news.gmaster-news-archive .gmaster-news-dots { display: none !important; }
}
@media (max-width: 699px) { #news.gmaster-news-archive { padding-bottom: 48px; } }

/*
 * Body text is SVN-Helves (regular and bold, the client's font). Regular for running text; bold where the text is a control or a
 * label: the header menu, the buttons, the tabs, the language button, links under a title, the kicker and the dates of cards.
 */
.navigation_main .dcjq-mega-menu > ul > li > a,
.megamenu_mb li a,
.menu-tab,
.menu-page-tab,
.gmaster-home-s4-tab,
.membership-tab,
.author-text,
.gmaster-stores__kicker,
.gmaster-stores__option-title,
.gmaster-stores__tab-name,
.gmaster-locale-option__code,
.gmaster-footer__hotline a,
.gmaster-promo-meta__branch-name,
.gmaster-promo-meta__time { font-weight: 600 !important; }

/* The banner of Khuyến mãi (news.css forces 150px) has the shape of the banners of Thực đơn and Thành viên: the picture keeps its own
   proportions, so the cat at its foot has the same size and place on the three pages. */
.menu-banner .banner-image { height: auto !important; }