/*
 * Globals
 */


/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

.cover-container {
  width: 80%;
}


/*
 * Header
 */

.nav-masthead .nav-link {
  color: rgba(255, 255, 255, .8);
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}
.bg {
  background-image: url('img/bg.jpg');
  background-size: cover;      /* Scales image to cover container */
  background-position: center;  /* Centers the image within the container */
  background-repeat: no-repeat; /* Prevents the image from tiling */
  
  /* Optional: for a full-screen effect */
  min-height: 100vh;
}
.bg-color {
    background-color: #000000a8;
    height: 100%;
    width: 100%;
}
main h4 {
        font-size: 1.3rem;
    }
 main h1 {
        font-size: 2rem;
    }
	.tpt-color {
            color: #e0ad60;
        }
        .company-info-list {
            list-style: none;
            padding-left: 0;
            text-align: left; /* Căn lề trái */
        }
        .company-info-list li {
            margin-bottom: 12px;
            display: flex;
            align-items: flex-start;
        }
        .company-info-list i {
            margin-right: 12px;
            margin-top: 5px; /* Căn chỉnh icon cho khớp với dòng text */
            width: 20px;
            text-align: center;
        }
        .company-info-list a {
            text-decoration: none;
            color: inherit;
            transition: color 0.3s;
        }
        .company-info-list a:hover {
            color: #136aad;
        }
		footer p {margin-bottom:0;}
		      /* --- BỐ CỤC CHÍNH (WRAPPER) --- */
        .main-wrapper-v {
            display: flex;
            justify-content: center;
           
			
        }

        .flip-book {
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
            display: none; /* Ẩn cho đến khi render xong */
        }

        .page {
            background-color: white;
            border: solid 1px #ccc;
            overflow: hidden;
        }

        .page canvas {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        #loading {
            color: white;
            font-size: 20px;
            position: absolute;
        }

        /* --- NÚT ĐIỀU HƯỚNG (MŨI TÊN) --- */
        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            font-size: 24px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background 0.3s;
        }

        .nav-btn:hover {
            background-color: rgba(255, 255, 255, 0.5);
        }

        .nav-btn.prev { left: -60px; position: relative;}
        .nav-btn.next { right: -60px; position: relative;}

        @media (max-width: 768px) {
            .nav-btn.prev { left: -10px; }
            .nav-btn.next { right: -10px; }
            .nav-btn { width: 40px; height: 40px; font-size: 18px; background-color: rgba(0, 0, 0, 0.4); }
			.cover-container {  width: 100%;}
			main h1 {
    font-size: 1.5rem;
    margin-top: 30px;
}
main h4 {
    font-size: 0.9rem;
}
        }

        /* --- DẤU CHẤM TRANG (PAGINATION DOTS) --- */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: -30px;
            padding: 0 20px 50px;
            max-width: 100%;
			position: relative;
        }

        .dot {
            width: 12px;
            height: 12px;
           background-color: #b18d24;
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.3s, transform 0.2s;
        }

        .dot:hover {
            transform: scale(1.2);
        }

        .dot.active {
            background-color: #136aad; /* Đổi thành màu xanh chủ đạo của bạn */
            transform: scale(1.3);
        }