/* === CUSTOM CSS CHOPROJECT PAGE === */
/* Ghi đè hoặc thêm mới dựa trên theme detail.php */
html,
   body {
    margin: 0;
    color: var(--white);
    font-family:
     Outfit,
     system-ui,
     -apple-system,
     Segoe UI,
     Roboto,
     "Helvetica Neue",
     Arial,
     sans-serif;
    height: 100%; /* (Từ v4) */
    min-height: 100vh; /* (Từ v4) */
   }
@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
   body {
    background-color: #181818;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    display: flex; /* (Từ v4) */
    flex-direction: column; /* (Từ v4) */
    justify-content: flex-start; /* (Từ v4) */
   }

   /* === 2. Header, Sidebar & Navigation === */
   
   .back-button {
    font-family: "Minecraft";
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 0;
    color: #ffffff80;
    transition: 0.15s;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
   }
   .back-button svg {
    height: 20px;
    width: auto;
    fill: #ffffff80;
   }
   .back-button:hover {
    background: rgba(255, 255, 255, 0.15);
   }
   /* === 3. Layout Chính (Gộp & Tối ưu) === */

   /* Container chung */
   .main-container {
    /* Đây là container bọc nội dung chính */
   }
      .details {
    margin-top: 40px;
    margin-bottom: 40px;
    /* width: 85% đã được định nghĩa ở mục 3 */
   }
   .details h2 {
    font-family: "Mcten", Monospace;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 1.5rem;
    margin: 20px 0 10px 0;
   }
   .description-container {
    background: transparent;
    
    padding: 10px;
    
    overflow-y: auto;
    width: 100%;
   }
.mod-icon-hero {
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.pill.type {
	background: rgba(59, 130, 246, 0.2);
	color: #93c5fd;
	border: 1px solid #1e3a8a;
}

/* Changelog Styles */
.version-block {
	background: #1e1e1e;
	border: 1px solid #333;
	border-radius: 8px;
	margin-bottom: 20px;
	overflow: hidden;
	width: 85%;
	animation: fadeInSlideUp 1s forwards;
}
.vb-header {
	padding: 12px 15px;
	background: #252525;
	border-bottom: 1px solid #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.vb-title {
	font-weight: bold;
	color: #fff;
	font-size: 1.1rem;
}
.vb-date {
	color: #888;
	font-size: 0.85rem;
}

.vb-body {
	padding: 15px;
}

.cl-list {
	list-style: none;
	padding: 0;
	margin: 0 0 15px 0;
}
.cl-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
	color: #ccc;
	font-size: 0.95rem;
	line-height: 1.5;
}
.cl-badge {
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: bold;
	min-width: 50px;
	text-align: center;
	display: inline-block;
	margin-top: 2px;
}
.cl-badge-add {
	background: rgba(34, 197, 94, 0.15);
	color: #4ade80;
	border: 1px solid #166534;
}
.cl-badge-fix {
	background: rgba(59, 130, 246, 0.15);
	color: #60a5fa;
	border: 1px solid #1e40af;
}
.cl-badge-remove {
	background: rgba(239, 68, 68, 0.15);
	color: #f87171;
	border: 1px solid #991b1b;
}

/* File Download List */
.file-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.file-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #2a2a2a;
	padding: 10px 15px;
	border-radius: 6px;
	text-decoration: none;
	color: #fff;
	border: 1px solid #333;
	transition: 0.2s;
}
.file-btn:hover {
	border-color: #7ed957;
	background: #333;
}
.file-info {
	display: flex;
	flex-direction: column;
}
.file-name {
	font-weight: bold;
	font-size: 0.95rem;
}
.file-meta {
	font-size: 0.8rem;
	color: #888;
	margin-top: 2px;
}
.dl-icon {
	color: #7ed957;
}

/* Markdown override */
.description-container {
	color: #d1d5db;
	line-height: 1.6;
}
.description-container h1,
.description-container h2 {
	color: white;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	font-weight: bold;
}
.description-container a {
	color: #7ed957;
}
.description-container ul {
	list-style: disc;
	margin-left: 20px;
}
.description-container img {
	max-width: 100%;
	border-radius: 8px;
	margin: 10px 0;
}

/* --- NEW: PROJECT META INFO STYLE --- */
/* === COMPACT META BAR STYLE === */
.compact-meta-container {
	margin-top: 40px;
	padding: 12px 20px;
	background: #181818; /* Màu nền tối nhẹ */
	border: 1px solid #333;
	border-radius: 0; /* Bo tròn kiểu viên thuốc (Pill shape) */
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

/* Phần bên trái: Owner */
.cm-owner {
	display: flex;
	align-items: center;
	gap: 10px;
}
.cm-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #333;
}
.cm-avatar-placeholder {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #333;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 0.9rem;
	border: 2px solid #444;
}
.cm-user-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.cm-name {
	font-size: 0.95rem;
	font-weight: bold;
	color: #fff;
}
.cm-username {
	font-size: 0.75rem;
	color: #888;
}

/* Phần bên phải: Info Tags */
.cm-details {
	display: flex;
	align-items: center;
	gap: 20px;
}
.cm-tag {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: #aaa;
	background: rgba(255, 255, 255, 0.05); /* Nền mờ nhẹ */
	padding: 5px 12px;
	border-radius: 20px;
}
.cm-tag i {
	font-size: 0.9rem;
}
.cm-highlight {
	color: #7ed957;
	background: rgba(126, 217, 87, 0.1);
	border: 1px solid rgba(126, 217, 87, 0.2);
}

/* Responsive: Mobile sẽ rớt dòng */
@media (max-width: 700px) {
	.compact-meta-container {
		border-radius: 0; /* Mobile thì bo góc thường thôi */
		flex-direction: column;
		align-items: flex-start;
		padding: 15px;
	}
	.cm-details {
		width: 100%;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 10px;
	}
}
.project-hero-container {
    max-width: 1200px;
    margin: 0 auto 30px auto;
    padding: 20px;
    background: transparent; /* Màu nền card */
    border-bottom: 1px solid #333;
    /* Nếu muốn bo góc như card thì thêm border-radius */
}

/* PHẦN TRÊN: ICON + INFO */
.ph-top-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.ph-btn-icon {
	transition: all 0.2s;
	font-size: 1.1rem;
	cursor: pointer;
}
.ph-icon {
    width: 96px; 
    height: 96px;
    flex-shrink: 0; /* Không bị co lại */
    border-radius: 16px; /* Bo góc vuông mềm giống ảnh */
    object-fit: cover;
    background: #151515;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Thông tin bên phải */
.ph-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* Fix lỗi text tràn khung flex */
}

.ph-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 5px 0;
    line-height: 1.2;
}

.ph-desc {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 8px;
    
    /* Cắt dòng nếu dài quá 2 dòng (giống ảnh) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ph-stats {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: #ccc;
    font-weight: 600;
}

.ph-stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* PHẦN DƯỚI: CÁC NÚT BẤM */
.ph-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Nút Download (Màu xanh, bo tròn) */
.ph-btn-download {
    background: #7ed957; /* Màu chủ đạo của bạn */
    color: #000;
    font-weight: 800;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 50px; /* Bo tròn kiểu pill */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
    font-size: 0.95rem;
}
.ph-btn-download:hover {
    background: #6ccb4b;
    transform: translateY(-2px);
}

.downloads {
    display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}
.btn-moreVersion {
    background: #7ed95750; /* Màu chủ đạo của bạn */
    border: 2px solid #7ed957;
    color: #7ed957;
    font-weight: 800;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 5px; /* Bo tròn kiểu pill */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
    font-size: 0.95rem;
}
.btn-moreVersion:hover {
    background: #7ed95760;
    transform: translateY(-2px);
}

/* Các nút phụ (Hình tròn/vuông bo góc) */
.ph-btn-icon {
    width: 42px;
    height: 42px;
    background: #4c4c4c;
    color: #e0e0e0;
    border-radius: 50%; /* Hình tròn */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
    cursor: pointer;
    transition: 0.2s;
    flex-shrink: 0;
}
.ph-btn-icon:hover {
    background: #333;
    border-color: #555;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .ph-icon {
        width: 80px;
        height: 80px;
    }
    .ph-title {
        font-size: 1.3rem;
    }
    /* Trên mobile, nút download có thể co giãn để lấp đầy */
    .ph-btn-download {
        flex-grow: 1; 
    }
}

/* Active States */
.ph-btn-icon.active-like {
	color: #ff5555 !important;
	border-color: #ff5555 !important;
	background: rgba(255, 85, 85, 0.1) !important;
}
.ph-btn-icon.active-bookmark {
	color: #f59e0b !important;
	border-color: #f59e0b !important;
	background: rgba(245, 158, 11, 0.1) !important;
}