/* ==========================================================================
   Sua hien thi o kho tablet (khach 03/09)
   ==========================================================================
   Khach yeu cau 2 viec:
     1. Bo loc bi cat mat filter dau va cuoi -> phai hien du, duoc phep xuong hang,
        khong duoc cat va khong duoc tran ngang trang.
     2. Recent Job Listings o iPad DOC phai 2 cot (4 tin -> 2x2). Mobile giu 1 cot.

   Da do trong trinh duyet o dung cac kho khach neu truoc khi viet file nay.
   Ghi chu chi tiet ngay tren tung khoi ben duoi.

   Vi sao la file rieng chu khong viet vao mdp-style.css: cac luat can de len
   phai thang duoc luat goc, ma luat goc nam o hai noi khac nhau (mdp-style.css
   va Additional CSS trong database). Tach file cho de doc va de go neu can.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HANG BO LOC — bo carousel, cho xuong hang  (tu 1025px tro len)
   --------------------------------------------------------------------------
   Hien trang do duoc:
     - Hang pill rong 1116px, dat trong .list-wrapper co max-width 1250px va
       padding 0 35px.
     - .filter-items dang flex-wrap: nowrap  -> khong bao gio xuong hang.
     - .list-wrapper co overflow-x: clip, cong THEM hai mat na trang rong 1000px
       (:before cua .list-wrapper-container va :after cua no) phu len hai dau.
     - Hai nut mui ten #prevBtn / #nextBtn cua carousel deu dang display: none.
   Ket qua: khi hang dai hon vung hien, hai dau bi che va KHONG co cach nao xem
   duoc phan bi che. Do o 1180px: pill cuoi "Annual Base Salary" bi cat ~46px.
   O 1366px thi vua du nen khong cat -> loi chi xuat hien khoang 1025-1290px,
   dung dai iPad nam ngang (iPad Air 1180, iPad Pro 11" 1194).

   Cach sua: cho xuong hang. Da xuong hang thi khong con gi de cat, nen tat luon
   mat na va clip. Man rong van nam gon mot dong y nhu cu.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {

    /* Cho phep xuong hang, cach hang 10px. */
    .form-advanced .filter-wrap .filter-items {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    /* Bo clip va padding danh cho nut mui ten (nut da bi an tu truoc). */
    .form-advanced .list-wrapper-container .list-wrapper {
        overflow-x: visible;
        padding: 0;
    }

    /* Tat 4 mat na trang phu hai dau. */
    .form-advanced .list-wrapper-container::before,
    .form-advanced .list-wrapper-container::after,
    .form-advanced .list-wrapper-container .list-wrapper::before,
    .form-advanced .list-wrapper-container .list-wrapper::after {
        content: none;
    }

    /* Carousel dich hang bang transform. Da xuong hang thi phai tra ve 0, neu
       khong mot lan bam cu con sot lai se day hang lech sang mot ben. */
    .form-advanced .filter-items.list-items {
        transform: none !important;
    }
}


/* --------------------------------------------------------------------------
   2. THE TIN — 2 cot o kho iPad
   --------------------------------------------------------------------------
   Luat goc nam trong Additional CSS cua Customizer (trong DATABASE, khong phai
   file nao ca):
       .jobs-listing { display:grid; grid-template-columns: repeat(3,1fr) }
       @media(max-width:1024px){ .jobs-listing{ grid-template-columns: repeat(1,1fr) } }

   File Additional CSS duoc in ra SAU cac file CSS thuong, nen luat cung do dac
   hieu se bi no de. Vi vay o day dung "body .jobs-listing" (0,1,1) de thang
   ".jobs-listing" (0,1,0) bat ke thu tu nap.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    body .jobs-listing {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* --------------------------------------------------------------------------
   3. THE TIN — go rang buoc max-width: 50% (loi rieng, khach chua neu)
   --------------------------------------------------------------------------
   Trong Additional CSS con co:
       @media(max-width:1024px){ .company-warp .jobs-listing > article {
           flex: 1 0 50%; max-width: 50%; } }

   Day la luat kieu flexbox con sot lai, nhung .jobs-listing la GRID. Hau qua do
   duoc o 820px: o luoi rong 785px ma the tin chi rong 393px -> tin nam ben trai,
   bo trong gan nua man hinh ben phai. Dung la khoang trang lon trong anh khach gui.

   Go cho toan dai <=1024px, vi tu 576px den 768px cung dinh y het (duoi 576px
   da co luat khac tra ve 100%).
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    body .company-warp .jobs-listing > article {
        flex: none;
        max-width: 100%;
    }
}