/* =========================
   TOÀN BỘ TRANG
   ========================= */

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 30px;

    background-color: white;

}


/* =========================
   TIÊU ĐỀ
   ========================= */

h2 {

    text-align: center;

    margin-bottom: 30px;

}


/* =========================
   KHUNG SLIDESHOW
   ========================= */

.slider {

    width: 900px;

    margin: 50px auto;

    display: flex;

    align-items: center;

    gap: 10px;

}


/* =========================
   KHUNG CHỨA ẢNH
   ========================= */

.viewport {

    overflow: hidden;

    flex: 1;

}


/* =========================
   DẢI ẢNH
   ========================= */

.track {

    display: flex;

    transition: transform 0.5s ease;

}


/* =========================
   ẢNH
   ========================= */

.track img {

    width: 170px;

    height: 130px;

    object-fit: cover;

    margin: 5px;

    flex: none;

    border: 1px solid #ccc;

}


/* =========================
   NÚT TRÁI / PHẢI
   ========================= */

.arrow {

    font-size: 30px;

    padding: 8px 15px;

    cursor: pointer;

    border: 1px solid #999;

    background-color: white;

    border-radius: 4px;

}


.arrow:hover {

    background-color: #eee;

}


/* =========================
   LINK VỀ INDEX
   ========================= */

.back {

    text-align: center;

    margin-top: 25px;

}


.back a {

    color: #0645ad;

    text-decoration: none;

}


.back a:hover {

    text-decoration: underline;

}